/* OPP 全站頁首：由 Elementor Header 範本載入這份外部 CSS。 */ /* Logo 採 AVIF 優先、WebP 備援；Noto Sans TC / Inter 由 Elementor 網站設定管理。 */ /* Elementor 範本容器：讓 1600px 版心由下方的頁首自行控制。 */ .elementor-element-a732d2b, .elementor-element-a732d2b > .e-con-inner { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0; gap: 0 !important; } .elementor-element-a732d2b > .e-con-inner { display: block !important; } .elementor-element-a732d2b .elementor-widget-html { width: 100% !important; max-width: none !important; } /* WordPress 選單是連結及目前頁狀態的資料來源；畫面使用下方的雙語選單。 */ .elementor-element-a732d2b .opp-main-nav { display: none !important; } /* 整個 Theme Builder 頁首固定於頂端。 */ .elementor-location-header:has(.opp-header) { position: sticky; top: 0; z-index: 1000; } body.admin-bar .elementor-location-header:has(.opp-header) { top: 32px; } .opp-header { position: relative; z-index: 1001; width: 100%; min-height: 126px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); letter-spacing: 2px; transition: background-color .3s ease, box-shadow .3s ease; } .opp-header.opp-is-scrolled { background: rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 25px rgba(20,57,94,.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .opp-header-inner { box-sizing: border-box; display: grid; /* 左欄吸收多餘寬度，選單與 CTA 兩欄固定靠右相鄰。 */ grid-template-columns: minmax(472px,1fr) auto auto; align-items: center; column-gap: 16px; width: 100%; max-width: 1600px; height: 126px; margin: 0 auto; padding: 0 20px; } /* 完整新版 LOGO：主標與含色線的副標已在圖片內對齊，AVIF 優先。 */ .opp-brand { display: block; justify-self: start; width: 440px; max-width: 100%; color: inherit; text-decoration: none !important; } .opp-brand-art, .opp-brand img { display: block; } .opp-brand img { width: 100%; height: auto; max-width: 100%; } /* 桌面版：中文在上、英文在下，底線由左往右展開。 */ .opp-desktop-nav { justify-self: end; } .opp-desktop-nav ul { display: flex; align-items: center; gap: clamp(17px,1.1vw,20px); list-style: none; margin: 0; padding: 0; } .opp-desktop-nav li { margin: 0; padding: 0; } .opp-desktop-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #333333; text-decoration: none; white-space: nowrap; line-height: 1.25; } .opp-desktop-nav .opp-zh { font-size: 18px; font-weight: 600; letter-spacing: 2px; } .opp-desktop-nav .opp-en { color: #333333; font-family: Inter, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; } .opp-desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 2px; background: #7ac143; transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.16,1,.3,1); } .opp-desktop-nav a:hover::after, .opp-desktop-nav a:focus-visible::after, .opp-desktop-nav a[aria-current="page"]::after { transform: scaleX(1); } .opp-desktop-nav a:hover, .opp-desktop-nav a:focus-visible { color: #333333; } /* 右側洽談按鈕：黃色至橘色漸層，文字維持白色。 */ .opp-header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 20px; border-radius: 12px; background: linear-gradient(135deg, #F3BE1D 0%, #EB8D25 100%); color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: filter .25s ease, transform .25s ease; } .opp-header-cta:hover, .opp-header-cta:focus-visible { color: #fff !important; filter: brightness(.96); transform: translateY(-1px); } .opp-header-cta .opp-arrow { font-family: Inter, sans-serif; font-size: 18px; font-weight: 400; } .opp-desktop-cta { justify-self: end; } .opp-menu-button { display: none; } /* 畫面不足以容納完整 LOGO、六項選單與 CTA 時改用抽屜。 */ .opp-drawer-overlay, .opp-drawer { display: none; } @media (max-width: 1380px) { .opp-header-inner { grid-template-columns: 1fr auto; column-gap: 16px; } .opp-desktop-nav, .opp-desktop-cta { display: none; } .opp-menu-button { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; justify-self: end; gap: 6px; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(20,57,94,.16); border-radius: 12px; background: #fff; color: #14395e; cursor: pointer; } .opp-menu-button span { width: 21px; height: 2px; border-radius: 1px; background: currentColor; } .opp-drawer-overlay { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .opp-drawer { box-sizing: border-box; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 10001; width: min(88vw,420px); height: 100vh; height: 100dvh; padding: 24px clamp(24px,5vw,36px) 32px; overflow-y: auto; background: #fcfcfa; box-shadow: -20px 0 45px rgba(20,57,94,.08); letter-spacing: 2px; transform: translateX(105%); visibility: hidden; transition: transform .52s cubic-bezier(.16,1,.3,1), visibility .52s ease; } body.opp-drawer-open { overflow: hidden; } body.opp-drawer-open .opp-drawer-overlay { opacity: 1; visibility: visible; } body.opp-drawer-open .opp-drawer { transform: translateX(0); visibility: visible; } .opp-drawer-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid #e4e9e0; } .opp-drawer-title { color: #333333; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; } .opp-drawer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #14395e; font-size: 30px; line-height: 1; cursor: pointer; } .opp-mobile-nav { flex: 1; padding-top: 24px; } .opp-mobile-nav ul { list-style: none; margin: 0; padding: 0; } .opp-mobile-nav li { border-bottom: 1px solid #e4e9e0; } .opp-mobile-nav a { display: grid; grid-template-columns: 28px max-content; column-gap: 8px; position: relative; padding: 20px 0 18px; color: #333333; text-decoration: none; } .opp-mobile-nav a::after { content: ""; position: absolute; bottom: -1px; left: 36px; width: calc(100% - 36px); height: 2px; background: #7ac143; transform: scaleX(0); transform-origin: left; transition: transform .42s cubic-bezier(.16,1,.3,1); } .opp-mobile-nav a:hover::after, .opp-mobile-nav a:focus-visible::after, .opp-mobile-nav a[aria-current="page"]::after { transform: scaleX(1); } .opp-mobile-nav .opp-number { grid-row: 1 / 3; padding-top: 9px; color: #7ac143; font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; } .opp-mobile-nav .opp-zh { font-size: 30px; font-weight: 600; line-height: 1.25; } .opp-mobile-nav .opp-en { grid-column: 2; justify-self: center; margin-top: 3px; color: #333333; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; } .opp-drawer .opp-header-cta { margin-top: 24px; width: 100%; } } @media (max-width: 767px) { body.admin-bar .elementor-location-header:has(.opp-header) { top: 46px; } .opp-header { min-height: 104px; } .opp-header-inner { height: 104px; padding: 0 16px; } .opp-brand { width: min(320px, calc(100vw - 112px)); } } @media (max-width: 480px) { .opp-brand { width: min(320px, calc(100vw - 112px)); } } @media (max-width: 360px) { .opp-header-inner { column-gap: 8px; padding: 0 12px; } .opp-brand { width: min(320px, calc(100vw - 100px)); } } @media (prefers-reduced-motion: reduce) { .opp-header, .opp-header-cta, .opp-desktop-nav a::after, .opp-mobile-nav a::after, .opp-drawer, .opp-drawer-overlay { transition-duration: .01ms !important; } } /* 首頁 Banner：獨立於頁首，後續首頁區塊可依此命名擴充。 */ .elementor-51 .e-con:has(> .elementor-widget-html .opp-home-hero) { width: 100%; max-width: none; margin: 0; padding: 0 !important; gap: 0; } .elementor-51 .elementor-widget-html:has(.opp-home-hero) { width: 100%; max-width: none; margin: 0; } .opp-home-hero { box-sizing: border-box; width: 100%; overflow: hidden; background: radial-gradient(circle at 76% 38%, #e8f5df 0, #f2f8ec 46%, #fbfdf9 86%); color: #14395e; letter-spacing: 2px; } .opp-home-hero *, .opp-home-hero *::before, .opp-home-hero *::after { box-sizing: border-box; } .opp-home-hero__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(12px, 2vw, 32px); width: min(100%, 1600px); min-height: 640px; margin: 0 auto; padding: 48px clamp(24px, 3vw, 48px) 54px; } .opp-home-hero__copy { position: relative; z-index: 2; max-width: 730px; } .opp-home-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px !important; color: #416928; font-size: clamp(12px, 1vw, 15px); font-weight: 700; line-height: 1.5; } .opp-home-hero__eyebrow span { display: inline-block; width: 28px; height: 3px; border-radius: 3px; background: #7ac143; } .opp-home-hero h1 { margin: 0 0 25px !important; color: #14395e; font-family: "Noto Sans TC", sans-serif; font-size: clamp(42px, 4.15vw, 68px); font-weight: 800; line-height: 1.25; letter-spacing: 2px; } .opp-home-hero h1 em { color: #66a92e; font-style: normal; } .opp-home-hero__lead { max-width: 650px; margin: 0 !important; color: #46596b; font-size: clamp(17px, 1.16vw, 19px); font-weight: 400; line-height: 1.9; } .opp-home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .opp-home-hero__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 54px; padding: 12px 24px; border: 2px solid #14395e; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none !important; transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; } .opp-home-hero__actions a:hover, .opp-home-hero__actions a:focus-visible { transform: translateY(-2px); } .opp-home-hero__actions a:focus-visible { outline: 3px solid #7ac143; outline-offset: 3px; } .opp-home-hero__primary { background: #14395e; color: #fff !important; box-shadow: 0 12px 25px rgba(20,57,94,.16); } .opp-home-hero__primary:hover, .opp-home-hero__primary:focus-visible { background: #1e4a75; color: #fff !important; } .opp-home-hero__secondary { background: transparent; color: #14395e !important; } .opp-home-hero__secondary:hover, .opp-home-hero__secondary:focus-visible { background: #e5f2dc; color: #14395e !important; } .opp-home-hero__footnote { margin: 19px 0 0 !important; color: #687c78; font-size: 13px; line-height: 1.6; } .opp-home-hero__visual { position: relative; display: grid; place-items: center; min-width: 0; min-height: 540px; } .opp-home-hero__visual-halo { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #ddf0d4; filter: blur(5px); } .opp-home-hero__visual img { position: relative; z-index: 1; display: block; width: min(100%, 790px); height: auto; filter: drop-shadow(0 25px 28px rgba(20,57,94,.12)); } .opp-home-hero__label { position: absolute; z-index: 2; padding: 11px 16px; border: 1px solid rgba(20,57,94,.07); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 12px 24px rgba(20,57,94,.11); color: #14395e; font-size: 13px; font-weight: 700; white-space: nowrap; } .opp-home-hero__label b { color: #7ac143; } .opp-home-hero__label--top { top: 13%; left: 1%; } .opp-home-hero__label--bottom { right: 0; bottom: 13%; } @media (max-width: 1024px) { .opp-home-hero__inner { min-height: 0; grid-template-columns: 1fr; gap: 4px; padding: 66px clamp(24px, 5vw, 54px) 42px; } .opp-home-hero__copy { max-width: 770px; } .opp-home-hero__visual { min-height: 430px; } .opp-home-hero__visual img { width: min(100%, 640px); } } @media (max-width: 767px) { .opp-home-hero__inner { padding: 46px 22px 30px; } .opp-home-hero__eyebrow { margin-bottom: 18px !important; } .opp-home-hero h1 { font-size: clamp(35px, 8.5vw, 48px); line-height: 1.3; } .opp-home-hero__lead { font-size: 16px; line-height: 1.85; } .opp-home-hero__actions { gap: 10px; margin-top: 26px; } .opp-home-hero__actions a { min-height: 48px; padding: 10px 15px; font-size: 14px; } .opp-home-hero__visual { min-height: 300px; } .opp-home-hero__visual img { width: min(112%, 480px); } .opp-home-hero__label { padding: 7px 10px; font-size: 10px; } .opp-home-hero__label--top { top: 9%; left: 0; } .opp-home-hero__label--bottom { right: 0; bottom: 8%; } } @media (max-width: 390px) { .opp-home-hero h1 { font-size: 33px; } .opp-home-hero__actions a { width: 100%; } } @media (prefers-reduced-motion: reduce) { .opp-home-hero__actions a { transition-duration: .01ms !important; } } /* 關於團隊：僅處理版面、標題與區塊視覺。一般文字色使用 Elementor 全域「文字」色。 */ .elementor-71 .e-con:has(> .elementor-widget-html .opp-about) { width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; } .elementor-71 .elementor-widget-html:has(.opp-about) { width: 100%; max-width: none; margin: 0; } .opp-about { width: 100%; overflow: hidden; font-family: "Noto Sans TC", sans-serif; } .opp-about *, .opp-about *::before, .opp-about *::after { box-sizing: border-box; } .opp-about__container { width: min(100% - 64px, 1600px); margin-inline: auto; } .opp-about__section { padding-block: 64px; } /* 關於團隊：章節小標（關於團隊、01 / OUR STUDIO 等）統一使用品牌金色。 */ .opp-about__eyebrow, .opp-about__section-label { margin: 0 0 28px; color: #deae1a; font-family: Inter, "Noto Sans TC", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 2px; } .opp-about__eyebrow { display: flex; align-items: center; gap: 14px; } .opp-about__eyebrow span { width: 32px; height: 3px; background: #deae1a; } .opp-about h1, .opp-about h2, .opp-about h3 { color: #14395e; font-family: "Noto Sans TC", sans-serif; letter-spacing: 2px; } .opp-about h1 { margin: 0 0 28px; font-size: clamp(42px, 4.1vw, 68px); font-weight: 800; line-height: 1.27; } .opp-about h2 { margin: 0; font-size: clamp(32px, 3vw, 48px); font-weight: 800; line-height: 1.35; } .opp-about h3 { margin: 0 0 18px; font-size: clamp(21px, 1.45vw, 25px); font-weight: 700; line-height: 1.5; } .opp-about p, .opp-about li { font-size: 17px; line-height: 1.9; letter-spacing: 2px; } .opp-about p { margin: 0 0 20px; } .opp-about p:last-child { margin-bottom: 0; } .opp-about__hero { position: relative; background: #fff; } .opp-about__hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 5vw, 88px); min-height: 660px; padding-block: 8px 80px; } .opp-about__hero-copy { max-width: 800px; } .opp-about__lead { max-width: 740px; font-size: clamp(18px, 1.25vw, 21px) !important; line-height: 1.9 !important; } .opp-about__hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; } .opp-about__button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 58px; padding: 12px 23px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-decoration: none !important; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .opp-about__button:hover, .opp-about__button:focus-visible { transform: translateY(-3px); } /* LINE 專用色與服務按鈕圖示；一般段落文字色仍由 Elementor 全域設定管理。 */ .opp-about__button:focus-visible { outline: 3px solid #deae1a; outline-offset: 4px; } .opp-about__button--line { background: #06c755; color: #fff !important; box-shadow: 0 12px 25px rgba(6,199,85,.19); } .opp-about__button--line:hover { background: #05ad4a; color: #fff !important; } .opp-about__button--secondary { border-color: #3079bd; background: #fff; color: #3079bd !important; } .opp-about__button--secondary:hover { background: #eaf3fb; color: #24669f !important; } .opp-about__icon { display: block; flex: 0 0 auto; width: 21px; height: 21px; } .opp-about__icon--line { width: 25px; height: 25px; } /* 關於團隊右側：參照 META 範例的瀏覽器視窗構圖，由 HTML/CSS 繪製，不含虛構成效數字。 */ .opp-about__hero-visual { position: relative; width: 100%; margin: 0; } .opp-about__browser { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 560px; padding: clamp(18px, 2vw, 28px); border: 1px solid rgba(122,193,67,.15); border-radius: 28px; background: #f2f8ec; box-shadow: 0 20px 60px -20px rgba(20,57,94,.25); } .opp-about__browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; } .opp-about__browser-dots { display: flex; gap: 5px; } .opp-about__browser-dots i { width: 11px; height: 11px; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; background: #ff5f57; } .opp-about__browser-dots i:nth-child(2) { background: #ffbd2e; } .opp-about__browser-dots i:nth-child(3) { background: #28ca42; } .opp-about__browser-address { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; padding: 6px 11px; border: 1px solid #e4eee0; border-radius: 99px; background: #fff; color: #587285; font-size: 11px; line-height: 1.2; white-space: nowrap; } .opp-about__browser-address i { width: 7px; height: 7px; border-radius: 50%; background: #85bb43; } .opp-about__browser-main { position: relative; display: grid; flex: 1; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; } .opp-about__browser-site, .opp-about__browser-marketing { border: 1px solid rgba(20,57,94,.08); border-radius: 17px; background: #fff; box-shadow: 0 4px 12px rgba(20,57,94,.04); } .opp-about__browser-site { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; } .opp-about__browser-card-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 12px; color: #14395e; font-family: Inter, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; } .opp-about__browser-card-title b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #14395e; color: #fff; font-size: 15px; font-weight: 500; } .opp-about__browser-webpage { display: flex; flex-direction: column; gap: 8px; height: 86px; padding: 10px; border: 1px solid rgba(0,0,0,.04); border-radius: 12px; background: #f8fafc; } .opp-about__browser-web-head { display: flex; align-items: flex-start; gap: 8px; } .opp-about__browser-web-head > i { flex: 0 0 42px; height: 42px; border-radius: 10px; background: #14395e; } .opp-about__browser-web-head > span { display: flex; flex: 1; flex-direction: column; gap: 6px; padding-top: 2px; } .opp-about__browser-web-head b { width: 100%; height: 7px; border-radius: 99px; background: rgba(0,0,0,.05); } .opp-about__browser-web-head b:first-child { width: 75%; height: 9px; background: rgba(20,57,94,.15); } .opp-about__browser-web-head b:last-child { width: 83%; } .opp-about__browser-web-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .opp-about__browser-web-tabs i { height: 18px; border-radius: 99px; background: rgba(0,0,0,.05); } .opp-about__browser-web-tabs i:first-child { background: rgba(122,193,67,.2); } .opp-about__browser-web-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .opp-about__browser-web-features > span { display: flex; flex-direction: column; gap: 5px; min-height: 64px; padding: 8px; border: 1px solid rgba(122,193,67,.2); border-radius: 12px; background: #f2f8ec; } .opp-about__browser-web-features > span:nth-child(2) { background: #fff; } .opp-about__browser-web-features i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #14395e; font-style: normal; font-size: 10px; } .opp-about__browser-web-features b { width: 83%; height: 5px; border-radius: 99px; background: #d5e0dd; } .opp-about__browser-web-features b:last-child { width: 66%; } .opp-about__browser-site-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; color: #64748b; font-size: 11px; font-weight: 600; } .opp-about__browser-site-foot b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #85bb43; color: #fff; font-size: 12px; } .opp-about__browser-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .opp-about__browser-seo { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 130px; padding: 16px; overflow: hidden; border-radius: 18px; background: #14395e; color: #fff; } .opp-about__browser-seo::before { content: ''; position: absolute; top: -18px; right: -10px; width: 95px; height: 95px; border-radius: 50%; background: rgba(255,255,255,.1); filter: blur(20px); } .opp-about__browser-side-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; } .opp-about__browser-side-title svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.15); } .opp-about__browser-bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: auto; padding-top: 4px; } .opp-about__browser-bars i { width: 7px; height: 38%; border-radius: 99px 99px 0 0; background: rgba(255,255,255,.32); } .opp-about__browser-bars i:nth-child(2) { height: 63%; } .opp-about__browser-bars i:nth-child(3) { height: 53%; } .opp-about__browser-bars i:nth-child(4) { height: 78%; } .opp-about__browser-bars i:nth-child(5) { height: 70%; } .opp-about__browser-bars i:nth-child(6) { height: 95%; background: #85bb43; } .opp-about__browser-seo-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 12px; font-size: 10px; white-space: nowrap; } .opp-about__browser-seo-foot span { color: rgba(255,255,255,.75); } .opp-about__browser-seo-foot strong { color: #85bb43; font-size: 11px; } .opp-about__browser-marketing { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 135px; padding: 16px; } .opp-about__browser-marketing .opp-about__browser-side-title { margin-bottom: 5px; color: #14395e; } .opp-about__browser-marketing .opp-about__browser-side-title svg { background: #f2f8ec; color: #85bb43; } .opp-about__browser-marketing > span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(0,0,0,.04); border-radius: 99px; background: #f8fafc; color: #536a7c; font-size: 10px; white-space: nowrap; } .opp-about__browser-marketing > span em { margin-left: auto; padding: 2px 5px; border-radius: 99px; background: #85bb43; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; } .opp-about__browser-marketing > span:last-child em { border: 1px solid #e4eee0; background: #fff; color: #536a7c; } .opp-about__browser-marketing > span b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #14395e; color: #fff; font-family: Inter, sans-serif; font-size: 10px; } .opp-about__browser-marketing > span:last-child b { background: #3079bd; } .opp-about__browser-float { position: absolute; top: 50%; left: -8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; transform: translateY(-50%) rotate(-3deg); border: 1px solid rgba(0,0,0,.05); border-radius: 99px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.3); color: #14395e; font-size: 11px; font-weight: 800; white-space: nowrap; } .opp-about__browser-float b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #85bb43; color: #fff; } .opp-about__browser-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .opp-about__browser-services span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62px; padding: 8px 3px; border: 1px solid #e4eee0; border-radius: 14px; background: #fff; color: #14395e; font-size: 15px; font-weight: 800; text-align: center; white-space: nowrap; } .opp-about__browser-services span:last-child { border-color: #85bb43; background: #85bb43; color: #fff; } .opp-about__browser-services small { margin-top: 3px; color: #64748b; font-size: 10px; font-weight: 500; } .opp-about__browser-services span:last-child small { color: #fff; } /* 服務清單延伸參考圖的圓角標籤，完整列出目前提供的八個項目。 */ .opp-about__browser-offerings { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; } .opp-about__browser-offerings span { padding: 4px 8px; border: 1px solid rgba(20,57,94,.1); border-radius: 99px; background: rgba(255,255,255,.8); color: #14395e; font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .opp-about__browser-dot-grid { position: absolute; right: -24px; bottom: -24px; width: 120px; height: 120px; opacity: .3; background-image: radial-gradient(#7ac143 3px, transparent 3.5px); background-size: 20px 20px; } .opp-about__split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(60px, 9vw, 145px); } .opp-about__prose { max-width: 730px; } .opp-about__fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 47px; padding-top: 29px; border-top: 1px solid #dce9d7; } .opp-about__fact-grid div { display: flex; flex-direction: column; gap: 3px; } .opp-about__fact-grid b { color: #14395e; font-family: Inter, "Noto Sans TC", sans-serif; font-size: clamp(27px, 2.7vw, 40px); font-weight: 800; line-height: 1.4; } .opp-about__fact-grid span { font-size: 14px; } .opp-about__services { background: #fff; } .opp-about__section-head { display: flex; align-items: end; justify-content: space-between; gap: 56px; margin-bottom: 45px; } .opp-about__section-head > p { max-width: 510px; } /* 第 03 區塊：深藍面板呈現中性、可供比較的合作方式。 */ .opp-about__small { font-size: 14px !important; } .opp-about__faq { background: #f2f8ec; } .opp-about__cta { padding-block: 52px 64px; background: #fff; } .opp-about__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 42px; } .opp-about__cta .opp-about__section-label { color: #deae1a; } .opp-about__cta h2, .opp-about__cta p:not(.opp-about__section-label) { color: #fff; } .opp-about__cta h2 { margin-bottom: 18px; } .opp-about__cta p:not(.opp-about__section-label) { max-width: 680px; } .opp-about__cta .opp-about__button--line { flex: 0 0 auto; } @media (max-width: 1024px) { .opp-about__hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 55px; } .opp-about__hero-visual { max-width: 680px; } .opp-about__split { gap: 50px; } .opp-about__section-head { align-items: start; flex-direction: column; gap: 22px; } } @media (max-width: 767px) { .opp-about__container { width: min(100% - 40px, 1600px); } .opp-about__section { padding-block: 56px; } .opp-about__hero-grid { padding-block: 8px 48px; gap: 43px; } .opp-about h1 { font-size: clamp(38px, 8.5vw, 54px); } .opp-about h2 { font-size: clamp(30px, 7vw, 40px); } .opp-about__browser { min-height: 0; padding: 13px; border-radius: 20px; } .opp-about__browser-main { grid-template-columns: 1fr; } .opp-about__browser-site { min-height: 280px; } .opp-about__browser-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .opp-about__browser-seo, .opp-about__browser-marketing { min-height: 145px; padding: 12px; } .opp-about__browser-seo-foot { flex-wrap: wrap; white-space: normal; } .opp-about__browser-marketing > span { font-size: 9px; } .opp-about__browser-marketing > span em { display: none; } .opp-about__browser-float { display: none; } .opp-about__browser-services { gap: 5px; } .opp-about__browser-services span { min-width: 0; font-size: 11px; white-space: normal; } .opp-about__browser-services small { font-size: 8px; white-space: normal; } .opp-about__browser-offerings { justify-content: flex-start; } .opp-about__split { grid-template-columns: 1fr; } .opp-about__split { gap: 27px; } .opp-about__fact-grid { gap: 12px; } .opp-about__cta { padding-block: 56px; } .opp-about__cta-inner { align-items: flex-start; flex-direction: column; } } @media (max-width: 480px) { .opp-about__hero-actions { align-items: stretch; flex-direction: column; gap: 12px; } .opp-about__hero-actions .opp-about__button { align-self: flex-start; } } @media (prefers-reduced-motion: reduce) { .opp-about__button { transition-duration: .01ms; } } /* 關於團隊容器版：主要區塊、卡片、問題與文字都由 Elementor 原生容器及小工具組成。 */ .elementor-71 .opp-about-builder { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: none; padding: 0; } .elementor-71 .opp-about-builder > .e-con { flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding-inline: 0; } .opp-about-builder .elementor-widget { width: 100%; margin: 0; } .opp-about-builder .elementor-widget-container { margin: 0; } .opp-about-builder .opp-about__container { max-width: 1600px; } /* Rank Math 原生麵包屑：獨立 Elementor 容器，置於關於團隊 Banner 前。 */ .elementor-71 .opp-about__breadcrumb { width: 100%; max-width: none; margin: 0; padding: 0; background: #fff; } .elementor-71 .opp-about__breadcrumb-widget { width: min(100% - 64px, 1600px); margin-inline: auto; padding: 16px 20px; color: #14395e; font: 500 14px/1.5 "Noto Sans TC", sans-serif; letter-spacing: 2px; } .elementor-71 .opp-about__breadcrumb-widget .rank-math-breadcrumb p { margin: 0; } .elementor-71 .opp-about__breadcrumb-widget a { color: #64748b; text-decoration: none; } .elementor-71 .opp-about__breadcrumb-widget a:hover, .elementor-71 .opp-about__breadcrumb-widget a:focus-visible { color: #7ac143; } .elementor-71 .opp-about__breadcrumb-widget .last { color: #14395e; font-weight: 700; } @media (max-width: 767px) { .elementor-71 .opp-about__breadcrumb-widget { width: min(100% - 40px, 1600px); } } .opp-about-builder .opp-about__hero-grid, .opp-about-builder .opp-about__split, .opp-about-builder .opp-about__cards, .opp-about-builder .opp-about__fact-grid { display: grid; } .opp-about-builder .opp-about__hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .opp-about-builder .opp-about__hero-copy, .opp-about-builder .opp-about__prose, .opp-about-builder .opp-about__section-title-group, .opp-about-builder .opp-about__card, .opp-about-builder .opp-about__cta-copy { display: flex; flex-direction: column; align-items: stretch; } .opp-about-builder .opp-about__hero-copy { gap: 0; } .opp-about-builder .opp-about__eyebrow { margin-bottom: 28px; } .opp-about-builder .opp-about__eyebrow .elementor-heading-title, .opp-about-builder .opp-about__section-label .elementor-heading-title { color: inherit; font-family: Inter, "Noto Sans TC", sans-serif; font-size: inherit; font-weight: inherit; letter-spacing: 2px; line-height: 1.5; } .opp-about-builder .opp-about__eyebrow::before { content: ""; flex: 0 0 32px; height: 3px; background: #deae1a; } .opp-about-builder .opp-about__hero-title h1 { margin: 0 0 28px; } .opp-about-builder .opp-about__h1-intro { display: block; margin-bottom: 14px; color: #3079bd; font-size: clamp(18px, 1.3vw, 22px); font-weight: 700; line-height: 1.5; } /* 關於團隊：淺色區塊的大標使用 #015093；深藍底仍使用白字確保對比。 */ .opp-about-builder .opp-about__h1-message { display: block; color: #015093; font-size: clamp(42px, 4.1vw, 68px); font-weight: 800; line-height: 1.27; } .opp-about-builder .opp-about__intro h2, .opp-about-builder .opp-about__wordpress h2, .opp-about-builder .opp-about__services h2, .opp-about-builder .opp-about__studio-facts h2, .opp-about-builder .opp-about__faq h2 { color: #015093; } .opp-about-builder .opp-about__lead p { max-width: 740px; font-size: clamp(18px, 1.25vw, 21px); line-height: 1.9; } .opp-about-builder .opp-about__hero-actions { display: flex; flex-direction: row; width: auto; gap: 14px; } .opp-about-builder .opp-about__button-widget, .opp-services .opp-about__button-widget { width: auto; } .opp-about-builder .opp-about__button-widget .elementor-button, .opp-services .opp-about__button-widget .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 23px; border: 1px solid transparent; border-radius: 12px; color: #fff; font-family: "Noto Sans TC", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-decoration: none; transition: transform .2s ease, background-color .2s ease; } /* Elementor 預設會將文字區塊拉高到與圖示相同，造成字形視覺上偏上；改由內容列置中。 */ .opp-about-builder .opp-about__button-widget .elementor-button-content-wrapper, .opp-services .opp-about__button-widget .elementor-button-content-wrapper { align-items: center; gap: 10px; } /* 關於團隊：放大 LINE 與服務按鈕圖示，讓桌機及手機都能看清圖案。 */ .opp-about-builder .opp-about__button-widget .elementor-button-icon, .opp-services .opp-about__button-widget .elementor-button-icon { display: inline-flex; align-items: center; font-size: 28px; line-height: 1; } .opp-about-builder .opp-about__button-widget .elementor-button-icon svg, .opp-services .opp-about__button-widget .elementor-button-icon svg { display: block; width: 28px; height: 28px; } .opp-about-builder .opp-about__button-widget .elementor-button:hover, .opp-about-builder .opp-about__button-widget .elementor-button:focus-visible, .opp-services .opp-about__button-widget .elementor-button:hover, .opp-services .opp-about__button-widget .elementor-button:focus-visible { transform: translateY(-3px); } .opp-about-builder .opp-about__button-widget .elementor-button:focus-visible, .opp-services .opp-about__button-widget .elementor-button:focus-visible { outline: 3px solid #deae1a; outline-offset: 4px; } .opp-about-builder .opp-about__button-line .elementor-button, .opp-services .opp-about__button-line .elementor-button { background: #06c755; } .opp-about-builder .opp-about__button-line .elementor-button:hover, .opp-services .opp-about__button-line .elementor-button:hover { background: #05ad4a; } .opp-about-builder .opp-about__button-secondary .elementor-button, .opp-services .opp-about__button-secondary .elementor-button { border-color: #3079bd; background: #fff; color: #3079bd; } /* 「了解服務內容」圖示跟隨按鈕文字色，避免 Elementor 預設白色填滿在白底上消失。 */ .opp-about-builder .opp-about__button-secondary .elementor-button-icon svg, .opp-services .opp-about__button-secondary .elementor-button-icon svg { fill: currentColor; } .opp-about-builder .opp-about__button-secondary .elementor-button:hover, .opp-services .opp-about__button-secondary .elementor-button:hover { background: #eaf3fb; color: #24669f; } .opp-about-builder .opp-about__hero-visual { position: relative; min-width: 0; } .opp-about-builder .opp-about__hero-visual figure { position: relative; width: 100%; margin: 0; } .opp-about-builder .opp-about__hero-visual .opp-about__browser-dot-grid { pointer-events: none; } .opp-about-builder .opp-about__section-title-group { gap: 0; } .opp-about-builder .opp-about__section-label { margin-bottom: 22px; } .opp-about-builder .opp-about__section-label .elementor-heading-title { display: flex; align-items: baseline; gap: 12px; } .opp-about-builder .opp-about__section-label .opp-about__section-number { color: #7ac143; font-size: 56px; line-height: 1; } .opp-about-builder .opp-about__section-label .opp-about__section-name { color: #7ac143; font-size: 13px; } .opp-about-builder .opp-about__section .elementor-heading-title, .opp-about-builder .opp-about__section p, .opp-about-builder .opp-about__section th, .opp-about-builder .opp-about__section td { letter-spacing: 2px !important; } .opp-about-builder .opp-about__prose { gap: 0; } .opp-about-builder .opp-about__prose .elementor-widget-text-editor p { margin-bottom: 20px; } /* 第 01 區：參照 META 範例，以淺綠卡片和 380px 左標題欄組成；文字仍是獨立 Elementor 小工具。 */ .opp-about-builder .opp-about__intro { padding-block: 56px; } .opp-about-builder .opp-about__intro .opp-about__split { grid-template-columns: 380px minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid rgba(122,193,67,.15); border-radius: 20px; background: #f2f8ec; } .opp-about-builder .opp-about__intro .opp-about__section-title-group { justify-content: center; padding: 40px; border-right: 1px solid rgba(122,193,67,.15); background: rgba(255,255,255,.6); } .opp-about-builder .opp-about__intro .opp-about__section-label { margin-bottom: 16px; } .opp-about-builder .opp-about__intro .opp-about__section-number, .opp-about-builder .opp-about__intro .opp-about__section-name { color: #7ac143; } .opp-about-builder .opp-about__intro h2 { font-size: 28px; line-height: 1.35; } .opp-about-builder .opp-about__intro .opp-about__prose { max-width: none; padding: 40px; } .opp-about-builder .opp-about__intro .opp-about__prose > .elementor-widget-text-editor p { font-size: 16px; line-height: 1.9; } .opp-about-builder .opp-about__intro .opp-about__fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; padding-top: 0; border-top: 0; } .opp-about-builder .opp-about__intro .opp-about__fact { padding: 16px; border: 1px solid rgba(0,0,0,.05); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(20,57,94,.04); } .opp-about-builder .opp-about__intro .opp-about__fact-value .elementor-heading-title { min-height: 3em; font-size: 16px; line-height: 1.5; } .opp-about-builder .opp-about__intro .opp-about__fact-label p { font-size: 14px; line-height: 1.75; } /* 本區所有可見文字依指定字距維持 2px。 */ .opp-about-builder .opp-about__intro .elementor-heading-title, .opp-about-builder .opp-about__intro p { letter-spacing: 2px !important; } .opp-about-builder .opp-about__fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .opp-about-builder .opp-about__fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .opp-about-builder .opp-about__fact-value .elementor-heading-title { color: #14395e; font-family: Inter, "Noto Sans TC", sans-serif; font-size: clamp(27px, 2.7vw, 40px); font-weight: 800; line-height: 1.4; } .opp-about-builder .opp-about__fact-label p { margin: 0; font-size: 14px; } /* 第 02 區：WordPress 左側示意與八張服務卡均為獨立 Elementor 容器。 */ .opp-about-builder .opp-about__wordpress { background: #fbfdf8; } .opp-about-builder .opp-about__wp-inner { display: flex; flex-direction: column; gap: 0; } .opp-about-builder .opp-about__wp-heading { display: flex; flex-direction: row; align-items: flex-end; gap: 26px; margin-bottom: 36px; padding: 0; } .opp-about-builder .opp-about__wp-heading > .opp-about__section-title-group { flex: 0 0 auto; width: max-content; padding: 0; } .opp-about-builder .opp-about__wp-heading .opp-about__section-label { width: max-content; margin: 0; } .opp-about-builder .opp-about__wp-heading .opp-about__section-label .elementor-heading-title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .opp-about-builder .opp-about__wp-heading .opp-about__section-number { font-size: clamp(54px, 5.3vw, 84px); line-height: .9; } .opp-about-builder .opp-about__wp-heading .opp-about__section-name { white-space: nowrap; } .opp-about-builder .opp-about__wp-heading-copy { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; gap: 12px; padding: 0; } .opp-about-builder .opp-about__wordpress h2 { margin: 0; font-size: clamp(26px, 2.35vw, 38px); line-height: 1.28; } .opp-about-builder .opp-about__wordpress h2 span { color: #7ac143; } .opp-about-builder .opp-about__wp-intro { display: flex; align-items: flex-start; gap: 10px; } .opp-about-builder .opp-about__wp-intro::before { content: ""; flex: 0 0 24px; height: 1px; margin-top: 12px; background: rgba(20,57,94,.2); } .opp-about-builder .opp-about__wp-intro .elementor-widget-container { flex: 1; min-width: 0; } .opp-about-builder .opp-about__wp-intro p { max-width: 1050px; margin: 0; color: #64748b; font-size: 15px; line-height: 1.75; } .opp-about-builder .opp-about__wp-main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: stretch; gap: clamp(22px, 2.5vw, 40px); padding: clamp(20px, 2.5vw, 40px); border: 1px solid rgba(20,57,94,.1); border-radius: 24px; background: #fff; box-shadow: 0 20px 60px -24px rgba(20,57,94,.15); } .opp-about-builder .opp-about__wp-visual { display: flex; flex-direction: column; min-width: 0; height: 100%; gap: 16px; padding: clamp(14px, 1.3vw, 20px); border: 1px solid rgba(122,193,67,.15); border-radius: 20px; background: #f2f8ec; } .opp-about-builder .opp-about__wp-browser { display: flex; flex: 1; flex-direction: column; min-height: 0; } .opp-about-builder .opp-about__wp-address { padding: 5px 0 13px 50px; } .opp-about-builder .opp-about__wp-address .elementor-heading-title { position: relative; display: inline-block; padding: 5px 15px; border: 1px solid rgba(20,57,94,.08); border-radius: 99px; background: rgba(255,255,255,.75); color: #64748b; font-size: 11px; font-weight: 500; } .opp-about-builder .opp-about__wp-address .elementor-heading-title::before { content: ""; position: absolute; top: 50%; right: calc(100% + 15px); width: 9px; height: 9px; transform: translateY(-50%); border-radius: 50%; background: #ffbd2e; box-shadow: -15px 0 #ff5f57, 15px 0 #28ca42; } .opp-about-builder .opp-about__wp-screen { display: flex; flex: 1; align-items: stretch; min-height: 330px; padding: 10px; border: 1px solid rgba(20,57,94,.06); border-radius: 16px; background: #fff; box-shadow: 0 8px 25px -12px rgba(20,57,94,.25); } .opp-about-builder .opp-about__wp-image { width: 100%; } .opp-about-builder .opp-about__wp-image img { display: block; width: 100%; height: 100%; min-height: 310px; aspect-ratio: 1.05; object-fit: cover; border-radius: 10px; } .opp-about-builder .opp-about__wp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .opp-about-builder .opp-about__wp-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; gap: 3px; padding: 10px 13px; border: 1px solid rgba(20,57,94,.07); border-radius: 12px; background: #fff; } .opp-about-builder .opp-about__wp-stat .elementor-heading-title { white-space: normal; } .opp-about-builder .opp-about__wp-stat-label .elementor-heading-title { color: #64748b; font-size: 12px; font-weight: 500; line-height: 1.5; } .opp-about-builder .opp-about__wp-stat-value .elementor-heading-title { color: #14395e; font-size: 14px; font-weight: 800; line-height: 1.5; } .opp-about-builder .opp-about__wp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; gap: 14px; min-width: 0; height: 100%; } .opp-about-builder .opp-about__wp-feature { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 12px; min-height: 0; height: 100%; padding: clamp(16px, 1.2vw, 20px); border: 1px solid rgba(20,57,94,.06); border-radius: 14px; background: #f8fafc; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .opp-about-builder .opp-about__wp-feature:hover { border-color: rgba(122,193,67,.35); background: #fff; box-shadow: 0 10px 30px -16px rgba(20,57,94,.18); } .opp-about-builder .opp-about__wp-icon { align-self: start; width: 30px; } .opp-about-builder .opp-about__wp-icon .elementor-heading-title { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #14395e; color: #fff; font-family: Inter, sans-serif; font-size: 16px; line-height: 1; } .opp-about-builder .opp-about__wp-feature:nth-child(even) .opp-about__wp-icon .elementor-heading-title { background: #7ac143; } .opp-about-builder .opp-about__wp-feature-copy { display: flex; flex-direction: column; min-width: 0; gap: 6px; padding: 0; } .opp-about-builder .opp-about__wp-feature h3 { margin: 0; padding-right: 12px; color: #14395e; font-size: 16px; line-height: 1.45; } .opp-about-builder .opp-about__wp-feature .elementor-widget-text-editor { margin: 0; color: #64748b; font-size: 15px; line-height: 1.8; letter-spacing: 2px; } .opp-about-builder .opp-about__wp-feature-number { position: absolute; top: 11px; right: 12px; width: max-content; } .opp-about-builder .opp-about__wp-feature-number .elementor-heading-title { color: rgba(20,57,94,.16); font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; } /* 第 03 區：網站藍圖式對照。裝飾由 CSS 繪製，文案仍可在 Elementor 各容器中編輯。 */ .opp-about-builder .opp-about__compare { padding-block: clamp(48px, 5vw, 64px); } .opp-about-builder .opp-about__compare > .opp-about__container { position: relative; isolation: isolate; padding: clamp(32px, 4vw, 64px); border: 1px solid #dbe9d5; border-radius: 24px; background: linear-gradient(145deg, #f2f8ec 0%, #f8fbf6 55%, #eff7eb 100%); } .opp-about-builder .opp-about__compare > .opp-about__container::before { position: absolute; z-index: -1; top: 0; right: 0; left: auto; width: min(29%, 340px); height: 270px; border-radius: 0 24px 0 0; background: linear-gradient(90deg, rgba(122,193,67,.12) 1px, transparent 1px), linear-gradient(rgba(122,193,67,.12) 1px, transparent 1px); background-size: 26px 26px; content: ""; mask-image: linear-gradient(225deg, #000, transparent 80%); pointer-events: none; } .opp-about-builder .opp-about__compare h2 { position: relative; padding-bottom: 20px; color: #015093; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.5; white-space: nowrap; } .opp-about-builder .opp-about__compare h2::after { position: absolute; bottom: 0; left: 0; width: 94px; height: 4px; border-radius: 4px; background: #7ac143; content: ""; } .opp-about-builder .opp-about__cta h2 { color: #fff; } .opp-about-builder .opp-about__compare-cards { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: clamp(28px, 3vw, 44px); margin-top: clamp(30px, 3vw, 48px); } .opp-about-builder .opp-about__compare-cards::after { position: absolute; z-index: 3; top: 154px; left: 55.8%; display: grid; place-items: center; width: 54px; height: 54px; border: 4px solid #f2f8ec; border-radius: 50%; background: #015093; box-shadow: 0 6px 18px rgba(20,57,94,.16); color: #fff; content: "VS"; font: 800 12px/1 Inter, sans-serif; letter-spacing: 1px; transform: translateX(-50%); } .opp-about-builder .opp-about__compare-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: clamp(26px, 2.5vw, 40px); border-radius: 18px; box-shadow: 0 20px 44px rgba(20,57,94,.1); } .opp-about-builder .opp-about__compare-card::after { position: absolute; top: -98px; right: -82px; width: 205px; height: 205px; border: 24px solid rgba(122,193,67,.09); border-radius: 50%; content: ""; pointer-events: none; } .opp-about-builder .opp-about__compare-card--studio { --opp-compare-copy: #333; border: 1px solid #d8e8d2; border-left: 7px solid #7ac143; background: #fff; } .opp-about-builder .opp-about__compare-card--company { --opp-compare-copy: #e7eef5; margin-top: 72px; border: 1px solid #245174; border-left: 7px solid #deae1a; background: #14395e; } .opp-about-builder .opp-about__compare-card--company::after { border-color: rgba(255,255,255,.06); } .opp-about-builder .opp-about__compare-card-head { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: 14px; min-width: 0; padding-bottom: 22px; border-bottom: 1px solid #e5eee1; } .opp-about-builder .opp-about__compare-card--company .opp-about__compare-card-head { border-color: rgba(255,255,255,.16); } .opp-about-builder .opp-about__compare-card-head > .elementor-widget { width: auto; } .opp-about-builder .opp-about__compare-card-head > .elementor-widget:nth-child(2) { flex: 1; min-width: 0; } .opp-about-builder .opp-about__compare-card-icon .elementor-heading-title { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #d6e9c9; border-radius: 14px; background: #f2f8ec; color: #015093; font-size: 21px; line-height: 1; transform: rotate(-6deg); } .opp-about-builder .opp-about__compare-card--company .opp-about__compare-card-icon .elementor-heading-title { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; transform: rotate(6deg); } .opp-about-builder .opp-about__compare-card h3.elementor-heading-title { margin: 0; color: #015093; font-size: clamp(18px, 1.4vw, 22px); font-weight: 800; line-height: 1.5; } .opp-about-builder .opp-about__compare-card--company h3.elementor-heading-title { color: #fff; } .opp-about-builder .opp-about__compare-badge .elementor-heading-title { display: inline-block; padding: 7px 12px; border: 1px solid #c9e8b6; border-radius: 99px; background: #eaf6e1; color: #377b13; font-size: 12px; font-weight: 800; white-space: nowrap; } .opp-about-builder .opp-about__compare-list { display: flex; flex-direction: column; margin-top: 20px; padding: 0; list-style: none; } .opp-about-builder .opp-about__compare-item { position: relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 18px; min-width: 0; padding-block: 15px; } .opp-about-builder .opp-about__compare-mark { flex: 0 0 35px; width: 35px; } .opp-about-builder .opp-about__compare-mark .elementor-heading-title { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #cee5bf; border-radius: 11px; background: #f2f8ec; color: #4c9721; font-size: 18px; font-weight: 800; line-height: 1; } .opp-about-builder .opp-about__compare-card--company .opp-about__compare-mark .elementor-heading-title { border-color: rgba(222,174,26,.45); background: rgba(222,174,26,.1); color: #f6d774; } .opp-about-builder .opp-about__compare-item > .elementor-widget:last-child { flex: 1; min-width: 0; } .opp-about-builder .opp-about__compare-item .elementor-widget-text-editor { color: var(--opp-compare-copy); font-size: 15px; line-height: 1.9; letter-spacing: 2px; } .opp-about-builder .opp-about__compare-item p { margin: 0; color: inherit; font: inherit; } .opp-about-builder .opp-about__compare-card-note { margin-top: 22px; padding: 18px 20px; border-left: 4px solid #deae1a; border-radius: 0 12px 12px 0; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; line-height: 1.9; letter-spacing: 2px; } .opp-about-builder .opp-about__compare-card-note p { margin: 0; color: inherit; font: inherit; } /* 第 04 區：維持原版三張並列、各自配色、編號與膠囊標籤。 */ .opp-about-builder .opp-about__section-head { display: grid; grid-template-columns: minmax(410px, 1fr) minmax(0, 735px); align-items: end; gap: 48px; margin-bottom: 34px; } .opp-about-builder .opp-about__section-intro { max-width: 735px; } .opp-about-builder .opp-about__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } .opp-about-builder .opp-about__card { min-width: 0; min-height: 380px; padding: clamp(28px, 2.1vw, 40px); border: 1px solid #dfe8e7; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(20,57,94,.035); transition: transform .2s ease, box-shadow .2s ease; align-items: stretch; gap: 0; } .opp-about-builder .opp-about__card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(20,57,94,.08); } .opp-about-builder .opp-about__card:first-of-type { border-color: #dce8d8; background: linear-gradient(180deg, #f4faef, #fff); } .opp-about-builder .opp-about__card:nth-of-type(2) { border-color: #dce6f0; background: linear-gradient(180deg, #f1f7fd, #fff); } .opp-about-builder .opp-about__card:nth-of-type(3) { border-color: #eee4d7; background: linear-gradient(180deg, #fff8ef, #fff); } .opp-about-builder .opp-about__card-number { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; } .opp-about-builder .opp-about__card-number::after { content: "01 / 03"; color: #4d9c2d; font: 800 12px/1 Inter, sans-serif; letter-spacing: 2px; } .opp-about-builder .opp-about__card:nth-of-type(2) .opp-about__card-number::after { content: "02 / 03"; color: #3079bd; } .opp-about-builder .opp-about__card:nth-of-type(3) .opp-about__card-number::after { content: "03 / 03"; color: #dc7921; } .opp-about-builder .opp-about__card-number .elementor-heading-title { position: relative; display: block; width: 62px; height: 62px; overflow: hidden; border: 1px solid #d5e8cc; border-radius: 15px; background: #e7f3df; color: #4d9c2d; font-size: 0; } .opp-about-builder .opp-about__card:nth-of-type(2) .opp-about__card-number .elementor-heading-title { border-color: #d9e6f2; background: #e9f3ff; color: #3079bd; } .opp-about-builder .opp-about__card:nth-of-type(3) .opp-about__card-number .elementor-heading-title { border-color: #f0dfc9; background: #fff0df; color: #df7c27; } /* 隱藏的 Elementor 標題文字不再參與圖示置中；三個 SVG 都以方框中心定位。 */ .opp-about-builder .opp-about__card-number .elementor-heading-title::before { position: absolute; inset: 0; display: block; content: ""; width: 30px; height: 30px; margin: auto; background: currentColor; -webkit-mask: var(--opp-service-icon) center / contain no-repeat; mask: var(--opp-service-icon) center / contain no-repeat; } .opp-about-builder .opp-about__card:first-of-type { --opp-service-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.5'%20y%3D'3.5'%20width%3D'19'%20height%3D'17'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M2.5%208h19M6%206h.01M9%206h.01M6%2012h5v5H6zM14%2012h4M14%2016h4'%2F%3E%3C%2Fsvg%3E"); } .opp-about-builder .opp-about__card:nth-of-type(2) { --opp-service-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'10.5'%20cy%3D'10.5'%20r%3D'7.5'%2F%3E%3Cpath%20d%3D'm16%2016%205%205M7%2013l2-3%202%201%203-4'%2F%3E%3C%2Fsvg%3E"); } .opp-about-builder .opp-about__card:nth-of-type(3) { --opp-service-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2010v4h4l10%205V5L7%2010H3zM7%2014l2%206h3M19%209l2-2M19%2015l2%202'%2F%3E%3C%2Fsvg%3E"); } .opp-about-builder .opp-about__card h3.elementor-heading-title { margin: 0 0 14px; color: #015093; font-size: clamp(23px, 1.5vw, 27px); font-weight: 800; line-height: 1.4; } .opp-about-builder .opp-about__card p { max-width: 68ch; margin: 0; color: #333; font-size: 16px; line-height: 1.9; letter-spacing: 2px; } .opp-about-builder .opp-about__card-tags { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; } .opp-about-builder .opp-about__card-tag { display: inline-flex; flex: 0 0 auto; width: auto; } .opp-about-builder .opp-about__card-tag .elementor-heading-title { padding: 7px 11px; border: 1px solid #dfe7e8; border-radius: 999px; background: rgba(255,255,255,.92); color: #14395e; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 2px; } /* 第 07 區：沿用第 02 區的左側編號、右側標題與說明；FAQ 使用 Elementor 原生摺疊面板。 */ .opp-about-builder .opp-about__faq > .opp-about__container { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: 26px; } .opp-about-builder .opp-about__faq .opp-about__section-label { grid-column: 1; grid-row: 1 / span 2; margin: 0; } .opp-about-builder .opp-about__faq .opp-about__section-label .elementor-heading-title { flex-direction: column; align-items: flex-start; gap: 8px; } .opp-about-builder .opp-about__faq .opp-about__section-number { font-size: clamp(54px, 5.3vw, 84px); line-height: .9; } .opp-about-builder .opp-about__faq .opp-about__section-name { white-space: nowrap; } .opp-about-builder .opp-about__faq > .opp-about__container > .elementor-widget-heading:not(.opp-about__section-label) { grid-column: 2; grid-row: 1; } .opp-about-builder .opp-about__faq h2 { margin: 0; font-size: clamp(26px, 2.35vw, 38px); line-height: 1.28; } .opp-about-builder .opp-about__faq-lead { grid-column: 2; grid-row: 2; display: flex; align-items: flex-start; gap: 10px; max-width: 1050px; margin: 12px 0 0; } .opp-about-builder .opp-about__faq-lead::before { content: ""; flex: 0 0 24px; height: 1px; margin-top: 12px; background: rgba(20,57,94,.2); } .opp-about-builder .opp-about__faq-lead .elementor-widget-container { flex: 1; min-width: 0; } .opp-about-builder .opp-about__faq-lead p { margin: 0; color: #333; font-size: 16px; line-height: 1.9; } .opp-about-builder .opp-about__faq .elementor-widget-n-accordion { grid-column: 1 / -1; grid-row: 3; margin-top: 48px; } .opp-about-builder .opp-about__faq .e-n-accordion { display: grid; gap: 12px; } .opp-about-builder .opp-about__faq .e-n-accordion-item { overflow: hidden; border: 1px solid #dce8dd; border-radius: 14px; background: #fff; transition: border-color .2s ease, background-color .2s ease; } .opp-about-builder .opp-about__faq .e-n-accordion-item:hover, .opp-about-builder .opp-about__faq .e-n-accordion-item[open] { border-color: #7ac143; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title { display: flex; align-items: center; gap: 20px; min-height: 80px; padding: 18px 28px; color: #015093; background: transparent; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title:focus-visible { outline: 3px solid #7ac143; outline-offset: -4px; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title-text { flex: 1; font-family: "Noto Sans TC", sans-serif; font-size: clamp(17px, 1.15vw, 20px); font-weight: 700; line-height: 1.65; letter-spacing: 2px; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: 50%; background: #f2f8ec; color: #4d9c2d; } .opp-about-builder .opp-about__faq .e-n-accordion-item > .e-con { padding: 0 28px 28px; } .opp-about-builder .opp-about__faq .e-n-accordion-item > .e-con p { max-width: 1000px; margin: 0; color: #333; font-size: 16px; line-height: 1.95; letter-spacing: 2px; } /* 第 05 區：沿用第 02 區的左側編號與右側標題、說明排列；四組數字各自保留 Elementor 容器。 */ .opp-about-builder .opp-about__studio-facts { background: #fff; } .opp-about-builder .opp-about__studio-facts > .opp-about__container { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; column-gap: 26px; padding: clamp(30px, 3.5vw, 56px); border: 1px solid #e4e9e1; border-radius: 20px; } .opp-about-builder .opp-about__studio-facts .opp-about__section-label { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: end; } .opp-about-builder .opp-about__studio-facts .opp-about__section-label .elementor-heading-title { flex-direction: column; align-items: flex-start; gap: 8px; } .opp-about-builder .opp-about__studio-facts .opp-about__section-number { font-size: clamp(54px, 5.3vw, 84px); line-height: .9; } .opp-about-builder .opp-about__studio-facts .opp-about__section-name { white-space: nowrap; } .opp-about-builder .opp-about__studio-facts h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(26px, 2.35vw, 38px); line-height: 1.28; } .opp-about-builder .opp-about__studio-facts-lead { grid-column: 2; grid-row: 2; display: flex; align-items: flex-start; gap: 10px; max-width: 1050px; margin: 12px 0 0; } .opp-about-builder .opp-about__studio-facts-lead::before { content: ""; flex: 0 0 24px; height: 1px; margin-top: 12px; background: rgba(20,57,94,.2); } .opp-about-builder .opp-about__studio-facts-lead .elementor-widget-container { flex: 1; min-width: 0; } .opp-about-builder .opp-about__studio-facts-lead p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.75; } .opp-about-builder .opp-about__studio-facts-grid { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: none; margin-top: 38px; padding-top: 0; border-top: 0; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact { padding-inline: 30px; border-right: 1px solid #e4e9e1; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact:first-child { padding-left: 0; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact:last-child { padding-right: 0; border-right: 0; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact-value .elementor-heading-title { color: #7ac143; font-size: clamp(32px, 3.5vw, 52px); } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact-label p { color: #64748b; line-height: 1.75; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact-label strong { display: block; margin-bottom: 6px; color: #14395e; font-size: 16px; line-height: 1.5; } .opp-about-builder .opp-about__cta-inner { display: flex; flex-direction: row; padding: clamp(34px, 4vw, 64px); overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 95% 0, #315e54 0, #14395e 43%, #14395e 100%); } .opp-about-builder .opp-about__cta-copy { max-width: 680px; } .opp-about-builder .opp-about__cta-copy p { color: #fff; } .opp-about-builder .opp-about__cta .opp-about__section-label { color: #7ac143; } .opp-about-builder .opp-about__cta .opp-about__section-label .elementor-heading-title { color: inherit; } .opp-about-builder .opp-about__cta-copy .opp-about__small p { margin-top: 24px; font-size: 14px; opacity: .75; } .opp-about-builder .opp-about__cta-inner > .opp-about__button-widget { flex: 0 0 auto; } /* 中等桌機：加長的資訊卡需要完整寬度，避免三欄文字擠成窄列。 */ @media (max-width: 1400px) { .opp-about-builder .opp-about__intro .opp-about__split { grid-template-columns: 1fr; } .opp-about-builder .opp-about__intro .opp-about__section-title-group { border-right: 0; border-bottom: 1px solid rgba(122,193,67,.15); } } @media (max-width: 1024px) { .opp-about-builder .opp-about__hero-grid, .opp-about-builder .opp-about__split { grid-template-columns: 1fr; } .opp-about-builder .opp-about__section-head { grid-template-columns: 1fr; align-items: start; gap: 16px; } .opp-about-builder .opp-about__wp-main { grid-template-columns: 1fr; } .opp-about-builder .opp-about__wp-visual { min-height: 360px; } .opp-about-builder .opp-about__wp-features { grid-template-rows: none; grid-auto-rows: 1fr; } .opp-about-builder .opp-about__compare-cards { grid-template-columns: 1fr; } .opp-about-builder .opp-about__compare-cards::after { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 2; justify-self: center; margin-block: -15px; transform: none; } .opp-about-builder .opp-about__compare-card--studio { grid-row: 1; } .opp-about-builder .opp-about__compare-card--company { grid-row: 3; } .opp-about-builder .opp-about__compare h2 { white-space: normal; } .opp-about-builder .opp-about__compare-card--company { margin-top: 0; } .opp-about-builder .opp-about__intro .opp-about__fact-grid { grid-template-columns: 1fr; } .opp-about-builder .opp-about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opp-about-builder .opp-about__card:nth-of-type(3) { grid-column: 1 / -1; } .opp-about-builder .opp-about__studio-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact:nth-child(2) { border-right: 0; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact:nth-child(3) { padding-left: 0; } } @media (max-width: 767px) { .opp-about-builder .opp-about__studio-facts > .opp-about__container { grid-template-columns: 1fr; align-items: start; } .opp-about-builder .opp-about__studio-facts .opp-about__section-label { grid-column: 1; grid-row: 1; margin-bottom: 18px; } .opp-about-builder .opp-about__studio-facts .opp-about__section-number { font-size: 54px; } .opp-about-builder .opp-about__studio-facts h2 { grid-column: 1; grid-row: 2; } .opp-about-builder .opp-about__studio-facts-lead { grid-column: 1; grid-row: 3; } .opp-about-builder .opp-about__studio-facts-grid { grid-column: 1; grid-row: 4; } .opp-about-builder .opp-about__intro { padding-block: 48px; } .opp-about-builder .opp-about__intro .opp-about__section-title-group, .opp-about-builder .opp-about__intro .opp-about__prose { padding: 26px; } .opp-about-builder .opp-about__hero-grid { gap: 43px; } .opp-about-builder .opp-about__h1-message { font-size: clamp(34px, 8.5vw, 48px); } .opp-about-builder .opp-about__cards { grid-template-columns: 1fr; gap: 14px; } .opp-about-builder .opp-about__card:nth-of-type(3) { grid-column: auto; } .opp-about-builder .opp-about__card { min-height: 0; padding: 28px; } .opp-about-builder .opp-about__card-number { margin-bottom: 20px; } .opp-about-builder .opp-about__faq > .opp-about__container { grid-template-columns: 1fr; } .opp-about-builder .opp-about__faq .opp-about__section-label { grid-column: 1; grid-row: 1; margin-bottom: 18px; } .opp-about-builder .opp-about__faq .opp-about__section-number { font-size: 54px; } .opp-about-builder .opp-about__faq > .opp-about__container > .elementor-widget-heading:not(.opp-about__section-label) { grid-column: 1; grid-row: 2; } .opp-about-builder .opp-about__faq-lead { grid-column: 1; grid-row: 3; } .opp-about-builder .opp-about__faq .elementor-widget-n-accordion { grid-column: 1; grid-row: 4; margin-top: 32px; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title { min-height: 72px; gap: 12px; padding: 16px 18px; } .opp-about-builder .opp-about__faq .e-n-accordion-item-title-icon { flex-basis: 38px; width: 38px; height: 38px; } .opp-about-builder .opp-about__faq .e-n-accordion-item > .e-con { padding: 0 18px 22px; } .opp-about-builder .opp-about__fact-grid { gap: 12px; } .opp-about-builder .opp-about__cta-inner { align-items: flex-start; flex-direction: column; } .opp-about-builder .opp-about__compare > .opp-about__container { padding: 28px 12px; } .opp-about-builder .opp-about__compare-card { padding: 24px 18px; } .opp-about-builder .opp-about__compare-item { gap: 12px; } .opp-about-builder .opp-about__compare-item .elementor-widget-text-editor { font-size: 14px; } .opp-about-builder .opp-about__wp-heading { align-items: flex-start; flex-direction: column; gap: 18px; } .opp-about-builder .opp-about__wp-heading-copy { flex: 0 1 auto; width: 100%; } .opp-about-builder .opp-about__wp-heading .opp-about__section-number { font-size: 54px; } .opp-about-builder .opp-about__wp-main { padding: 17px; } .opp-about-builder .opp-about__wp-screen { min-height: 260px; } .opp-about-builder .opp-about__wp-image img { min-height: 240px; aspect-ratio: 4 / 3; } .opp-about-builder .opp-about__wp-features { grid-template-columns: 1fr; } } @media (max-width: 480px) { .opp-about-builder .opp-about__hero-actions { align-items: flex-start; flex-direction: column; } .opp-about-builder .opp-about__studio-facts-grid { grid-template-columns: 1fr; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid #e4e9e1; } .opp-about-builder .opp-about__studio-facts-grid .opp-about__fact:last-child { padding-bottom: 0; border-bottom: 0; } .opp-about-builder .opp-about__fact-value .elementor-heading-title { font-size: 24px; } } /* 服務範疇：依「服務項目二.html」建立的獨立 Elementor 容器。 */ .opp-services { --os-bg: #fffefb; --os-warm: #fff9f0; --os-navy: #14395e; --os-green: #2e7d32; --os-bright: #4caf6b; --os-tint: #e8f2e3; --os-line: #eae6de; --os-muted: #6b6b6b; --os-shadow: 0 20px 50px -18px rgba(20,57,94,.12), 0 8px 18px -8px rgba(20,57,94,.08); display: block !important; width: 100%; max-width: none !important; padding: 0 !important; background: var(--os-bg); color: #333; letter-spacing: 2px; overflow: clip; } .opp-services *, .opp-services *::before, .opp-services *::after { box-sizing: border-box; } .opp-services .e-con { max-width: none; } .opp-services .elementor-widget, .opp-services .elementor-widget-container { min-width: 0; } .opp-services .elementor-heading-title, .opp-services .elementor-widget-text-editor, .opp-services .elementor-widget-button { font-family: inherit; letter-spacing: 2px; } .opp-services .elementor-heading-title { margin: 0; line-height: inherit; } .opp-services .elementor-widget-text-editor p { margin: 0; } .opp-services .opp-services__wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 48px; } /* Banner：左右兩欄，右側三張網站與搜尋結果視覺卡。 */ .opp-services .opp-services__hero { position: relative; width: 100%; padding: 34px 0 60px; background: linear-gradient(180deg,#fffefb 0%,#f7f2e8 55%,#f2f8ec 100%); } .opp-services .opp-services__hero > .opp-services__wrap { width: 100%; max-width: 1600px; padding-inline: 20px; } .opp-services__hero::after { content: ''; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(rgba(20,57,94,.2) 1px,transparent 1px); background-size: 22px 22px; pointer-events: none; } /* Banner 英文字底圖沿用參考頁的 DESIGN / SEO・ADS / GROW 三層排法。 */ .opp-services .opp-services__hero-watermark-widget { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; user-select: none; } .opp-services__hero-watermark-widget .elementor-widget-container, .opp-services__hero-watermark { position: relative; width: 100%; height: 100%; } .opp-services__hero-watermark-inner { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1280px; transform: translate(-50%, -50%); color: rgba(20,57,94,.035); font-family: Inter, "Noto Sans TC", sans-serif; font-weight: 800; line-height: .85; letter-spacing: -.06em; text-align: center; } .opp-services__hero-watermark-design, .opp-services__hero-watermark-grow { display: block; white-space: nowrap; } .opp-services__hero-watermark-design { font-size: 11vw; } .opp-services__hero-watermark-middle { display: flex; justify-content: center; gap: .08em; margin-top: -.08em; font-size: 9vw; white-space: nowrap; } .opp-services__hero-watermark-middle > span { color: rgba(20,57,94,.04); } .opp-services__hero-watermark-middle .opp-services__hero-watermark-slash { color: rgba(122,193,67,.07); } .opp-services__hero-watermark-grow { margin-top: -.12em; font-size: 12vw; color: rgba(20,57,94,.03); } .opp-services .opp-services__hero-grid { position: relative; z-index: 1; display: grid !important; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: start; } .opp-services__hero-copy { display: flex !important; flex-direction: column; align-items: stretch; padding: 12px 0 0 !important; } .opp-services__eyebrow .elementor-heading-title { color: var(--os-green); font-size: 12px; font-weight: 700; text-transform: uppercase; } .opp-services__hero-title { margin-top: 25px; } .opp-services__hero-title .elementor-heading-title { color: #1a1a1a; font-size: clamp(36px,3.5vw,56px); font-weight: 900; line-height: 1.13; } .opp-services__hero-title span { background: linear-gradient(transparent 70%,#cde9bf 70%); } .opp-services__hero-lead { max-width: 540px; margin-top: 24px; color: var(--os-muted); font-size: 18px; line-height: 1.8; } .opp-services__hero-chips-widget { order: 1; width: 100%; } .opp-services__hero-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; margin-top: 32px; } .opp-services__hero-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid rgba(20,57,94,.08); border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(20,57,94,.07); color: #14395e; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 2px; white-space: nowrap; animation: opp-services-chip-float 3s ease-in-out infinite; animation-delay: calc(var(--chip-index) * .12s); } .opp-services__hero-chip:nth-child(odd) { border-color: rgba(122,193,67,.27); } .opp-services__hero-chip:nth-child(even) { animation-duration: 4s; } .opp-services__hero-chip i { width: 6px; height: 6px; flex: none; margin-right: 8px; border-radius: 50%; background: #7ac143; } .opp-services__hero-chip.is-primary i { background: #14395e; } @keyframes opp-services-chip-float { 0%,100% { transform: translateY(0) rotate(var(--chip-rotation)); } 50% { transform: translateY(-10px) rotate(var(--chip-rotation)); } } @media (prefers-reduced-motion: reduce) { .opp-services__hero-chip { animation: none; transform: none; } } .opp-services .opp-services__hero-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; order: 2; width: auto; gap: 14px; margin-top: 36px; padding: 0 !important; } .opp-services .opp-services__button .elementor-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; padding: 11px 24px; text-decoration: none; font-size: 13px; font-weight: 700; } .opp-services .opp-services__hero-art { min-width: 0; width: 100%; max-width: 680px !important; margin-inline: auto !important; } .opp-services__visual-stack { position: relative; height: 560px; } .opp-services__browser { position: absolute; overflow: hidden; border: 1px solid var(--os-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(20,57,94,.18); } .opp-services__browser-top { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--os-line); background: #faf7f2; } .opp-services__browser-dots { display: flex; gap: 6px; flex: none; } .opp-services__browser-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ff8a65; } .opp-services__browser-dots i:nth-child(2) { background: #ffd54f; } .opp-services__browser-dots i:nth-child(3) { background: #81c784; } .opp-services__browser-caption { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--os-muted); font-size: 10px; white-space: nowrap; } .opp-services__browser-caption i { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; } .opp-services__browser-body { padding: 12px; } .opp-services__browser-corporate { top: 4%; left: 4%; z-index: 20; width: 68%; animation: opp-services-float-a 6s ease-in-out infinite; } .opp-services__browser-shop { top: 34%; left: 34%; z-index: 10; width: 64%; animation: opp-services-float-b 7s ease-in-out infinite; } .opp-services__browser-search { top: 62%; left: 2%; z-index: 30; width: 58%; animation: opp-services-float-c 6.5s ease-in-out infinite; } .opp-services__mock-nav { display: flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; background: #f3f0e8; } .opp-services__mock-nav b { width: 48px; height: 8px; margin-right: auto; border-radius: 6px; background: #ddd8ce; } .opp-services__mock-nav em { width: 48px; height: 8px; border-radius: 6px; background: var(--os-navy); } .opp-services__mock-nav em:last-child { width: 24px; background: var(--os-line); } .opp-services__mock-feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; margin-top: 12px; } .opp-services__mock-hero { display: grid; place-items: center; height: 84px; border-radius: 10px; background: linear-gradient(135deg,#eaf2e4,#f7f1e6); color: var(--os-navy); font-size: 20px; } .opp-services__mock-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 0; } .opp-services__mock-lines b, .opp-services__mock-lines i { display: block; height: 8px; border-radius: 8px; background: #d8d2c6; } .opp-services__mock-lines b { width: 80%; background: #1a1a1a; } .opp-services__mock-lines i { width: 100%; } .opp-services__mock-lines i:nth-of-type(2) { width: 90%; } .opp-services__mock-lines small { display: inline-block; padding: 4px 8px; border-radius: 100px; background: var(--os-navy); color: #fff; font-size: 9px; } .opp-services__mock-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; } .opp-services__mock-trio div { display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 36px; padding: 0 8px; border: 1px solid var(--os-line); border-radius: 8px; background: #fff; } .opp-services__mock-trio i, .opp-services__mock-trio em { display: block; width: 32px; height: 6px; border-radius: 6px; background: #e6e0d4; } .opp-services__mock-trio em { width: 48px; height: 4px; background: #f0ebe0; } .opp-services__mock-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .opp-services__mock-products div { overflow: hidden; border: 1px solid #f0ebe0; border-radius: 8px; background: #fff; } .opp-services__mock-products i { display: grid; place-items: center; height: 42px; background: #fff1e3; color: #8a6b4a; font-size: 14px; font-style: normal; } .opp-services__mock-products b, .opp-services__mock-products em { display: block; width: 70%; height: 4px; margin: 6px; border-radius: 5px; background: #e8e0d2; } .opp-services__mock-products em { width: 40%; margin-top: 0; background: #1a1a1a; } .opp-services__browser-shop p { display: flex; align-items: center; justify-content: space-between; height: 28px; margin: 8px 0 0; padding: 0 8px; border: 1px solid #ffe2c2; border-radius: 8px; background: #fff4e8; color: #8a6b4a; font-size: 9px; } .opp-services__browser-shop p b { padding: 2px 6px; border-radius: 100px; background: #ff8a3d; color: #fff; font-size: 8px; } .opp-services__searchbar { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid #e6e0d4; border-radius: 100px; color: #9a9590; font-size: 10px; } .opp-services__searchbar b { margin-left: auto; padding: 2px 6px; border-radius: 100px; background: #eaf2e4; color: var(--os-green); font-size: 8px; } .opp-services__search-result { margin-top: 8px; padding: 8px; border: 1px solid #f0ebe0; border-radius: 8px; background: #faf7f2; } .opp-services__search-result strong, .opp-services__search-result small { display: block; } .opp-services__search-result strong { color: var(--os-navy); font-size: 10px; line-height: 1.2; } .opp-services__search-result small { margin-top: 4px; color: #8e8880; font-size: 9px; line-height: 1.3; } .opp-services__search-result span { display: inline-block; margin: 4px 4px 0 0; padding: 2px 4px; border: 1px solid var(--os-line); border-radius: 4px; background: #fff; color: var(--os-navy); font-size: 7px; } .opp-services__float-stat { position: absolute; z-index: 40; width: 132px; padding: 12px; border: 1px solid var(--os-line); border-radius: 14px; background: #fff; box-shadow: var(--os-shadow); } .opp-services__float-stat small { display: block; color: var(--os-muted); font-size: 10px; letter-spacing: .1em; } .opp-services__float-stat strong { display: block; margin-top: 4px; color: #1a1a1a; font-size: 22px; line-height: 1.1; } .opp-services__float-stat span { display: block; color: var(--os-muted); font-size: 9px; line-height: 1.4; } .opp-services__float-seo { top: 6%; right: 2%; animation: opp-services-float-a 5s ease-in-out infinite; } .opp-services__float-seo em { color: var(--os-green); font-size: 10px; font-style: normal; } .opp-services__float-bars { display: flex; align-items: end; gap: 3px; height: 18px; margin-top: 8px; } .opp-services__float-bars i { width: 8px; height: 8px; border-radius: 8px; background: var(--os-bright); } .opp-services__float-bars i:nth-child(2) { height: 11px; } .opp-services__float-bars i:nth-child(3) { height: 9px; } .opp-services__float-bars i:nth-child(4) { height: 13px; } .opp-services__float-bars i:nth-child(5) { height: 10px; } .opp-services__float-bars i:nth-child(6) { height: 15px; } .opp-services__float-bars i:nth-child(7) { height: 12px; } .opp-services__float-bars i:nth-child(8) { height: 17px; } .opp-services__float-ads { top: 52%; right: 8%; width: 138px; background: var(--os-navy); color: #fff; animation: opp-services-float-b 6s ease-in-out infinite; } .opp-services__float-ads small, .opp-services__float-ads span { color: rgba(255,255,255,.8); } .opp-services__float-ads strong { color: #fff; } .opp-services__float-ads span { margin-top: 8px; } .opp-services__float-ga { left: 54%; right: auto; bottom: 4%; z-index: 20; width: 150px; animation: opp-services-float-c 5.5s ease-in-out infinite; } .opp-services__float-ga svg { display: block; width: 100%; height: 28px; margin-top: 8px; } .opp-services__float-ga span { margin-top: 4px; } .opp-services__visual-chips { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 0 8px; } .opp-services__visual-chips span { display: grid; place-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--os-line); border-radius: 100px; background: #fff; color: var(--os-navy); box-shadow: 0 6px 14px -8px rgba(0,0,0,.2); font-size: 11px; animation: opp-services-float-a 5s ease-in-out infinite; } .opp-services__visual-chips span:nth-child(3n + 2) { animation-duration: 6s; } .opp-services__visual-chips span:nth-child(3n + 3) { animation-duration: 7s; } @media (min-width: 768px) { .opp-services__browser-corporate { width: 62%; } .opp-services__browser-shop { width: 58%; } .opp-services__browser-search { width: 52%; } } @keyframes opp-services-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes opp-services-float-b { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } } @keyframes opp-services-float-c { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-6px) rotate(-1deg); } } @media (prefers-reduced-motion: reduce) { .opp-services__visual-stack .opp-services__browser, .opp-services__visual-stack .opp-services__float-stat, .opp-services__visual-chips span { animation: none; } } /* 章節目錄及通用卡片。 */ .opp-services .opp-services__tabs { position: relative; width: 100%; padding: 0; background: rgba(255,254,251,.9); border-block: 1px solid var(--os-line); backdrop-filter: blur(16px); } .opp-services__tabs nav { display: flex; align-items: center; gap: 34px; overflow-x: auto; width: 100%; max-width: 1600px; min-height: 52px; margin: auto; padding-inline: 48px; white-space: nowrap; } .opp-services__tabs a { align-self: stretch; display: flex; align-items: center; color: var(--os-muted); text-decoration: none; font-size: 13px; } .opp-services__tabs a:hover, .opp-services__tabs a:focus { color: var(--os-navy); box-shadow: inset 0 -2px var(--os-bright); } .opp-services__tabs span { margin-left: auto; color: var(--os-muted); font-size: 11px; } .opp-services .opp-services__section { padding-block: 80px; scroll-margin-top: 100px; } /* Elementor 的 10px 容器預設內距會縮小版心，並使橫排元素錯位。 */ .opp-services .opp-services__section.e-con, .opp-services .opp-services__section .e-con, .opp-services .opp-services__contact.e-con, .opp-services .opp-services__contact .e-con { --row-gap: 0px; --column-gap: 0px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; } .opp-services .opp-services__section-header { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; margin-bottom: 40px; } .opp-services__section-header > .elementor-widget { width: auto; flex: 0 1 auto; } .opp-services__section-header .opp-services__header-spacer { display: none; } .opp-services__section-title .elementor-heading-title { color: #1a1a1a; font-size: clamp(36px,3.1vw,48px); font-weight: 900; line-height: 1.1; } .opp-services__section-sub { color: var(--os-muted); font-size: 14px; } .opp-services__section-count { margin-left: auto; padding: 7px 12px; border-radius: 100px; background: var(--os-tint); color: var(--os-green); font-size: 11px; } .opp-services .opp-services__three { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .opp-services .opp-services__card { display: flex !important; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--os-line); border-radius: 24px; background: #fff; box-shadow: var(--os-shadow); transition: box-shadow .2s ease; } .opp-services .opp-services__card:hover { box-shadow: 0 24px 50px -20px rgba(20,57,94,.18); } .opp-services__card-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #d3e8c9; border-radius: 50%; background: var(--os-tint); color: var(--os-navy); font-size: 21px; } .opp-services__card-title { margin-top: 17px; } .opp-services__card-title .elementor-heading-title { color: #1a1a1a; font-size: 20px; font-weight: 700; line-height: 1.3; } .opp-services__card-copy { margin-top: 12px; color: var(--os-muted); font-size: 13px; line-height: 1.75; } .opp-services .opp-services__badges { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 20px; } .opp-services .opp-services__badges > .opp-services__badge { width: auto; flex: 0 0 auto; } .opp-services__badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--os-line); border-radius: 100px; background: #faf7f2; color: #333; font-size: 10px; } .opp-services__card-note { margin-top: 16px; color: var(--os-muted); font-size: 11px; } .opp-services__badge .elementor-heading-title, .opp-services__card-note .elementor-heading-title, .opp-services__card-icon .elementor-heading-title, .opp-services__section-count .elementor-heading-title, .opp-services__marketing-note .elementor-heading-title, .opp-services__center-label .elementor-heading-title, .opp-services__scenario-number .elementor-heading-title, .opp-services__scenario-cta .elementor-heading-title, .opp-services__contact-hours .elementor-heading-title { color: inherit; } /* 01 網站建置。 */ .opp-services .opp-services__build { border-bottom: 1px solid var(--os-line); } .opp-services .opp-services__build-featured { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .opp-services .opp-services__card-corporate { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(190px,.8fr); gap: 24px; align-items: stretch; padding: 32px; } .opp-services__card-corporate { position: relative; overflow: hidden; } .opp-services__card-corporate::before { content: ''; position: absolute; top: -54px; left: -54px; right: auto; width: 250px; height: 250px; border-radius: 50%; background: #f2f8ec; opacity: .8; pointer-events: none; } .opp-services__card-corporate > * { position: relative; } .opp-services__card-corporate .opp-services__card-title .elementor-heading-title { font-size: 28px; } .opp-services__corporate-copy { display: block !important; min-width: 0; } .opp-services__corporate-copy > .opp-services__card-note:first-child { display: inline-flex; align-items: center; gap: 8px; margin: 0; letter-spacing: 2px; } .opp-services__corporate-copy > .opp-services__card-note:first-child::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--os-bright); } .opp-services__corporate-copy > .opp-services__card-title { margin-top: 16px; } .opp-services__corporate-copy > .opp-services__card-copy { max-width: 360px; margin-top: 16px; font-size: 14px; line-height: 1.8; } .opp-services__corporate-copy > .opp-services__badges { margin-top: 24px; } .opp-services__corporate-copy > .opp-services__card-note:last-child { margin-top: 32px; } .opp-services__corporate-mockup { align-self: stretch; display: flex; width: 100%; } .opp-services__corporate-mockup > .elementor-widget-container { display: flex; flex: 1; min-width: 0; } .opp-services__mini-browser { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid var(--os-line); border-radius: 17px; background: #faf7f2; } .opp-services__mini-dots { padding: 7px; border-radius: 8px 8px 0 0; background: #f7f2e8; color: #ff8a65; font-size: 8px; } .opp-services__mini-visual { display: grid; flex: 1; place-items: center; min-height: 190px; border-radius: 8px; background: linear-gradient(135deg,#eaf2e4,#fff6e8); color: var(--os-muted); font-size: 10px; text-align: center; } .opp-services__mini-visual:has(.opp-services__mini-site) { display: flex; padding: 13px; } .opp-services__mini-site { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(20,57,94,.1); border-radius: 9px; background: #fff; box-shadow: 0 16px 26px -17px rgba(20,57,94,.32); text-align: left; } .opp-services__mini-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #e8eee5; } .opp-services__mini-site-nav strong { color: #14395e; font-size: 10px; line-height: 1.2; letter-spacing: 1px; white-space: nowrap; } .opp-services__mini-site-nav span { color: #607286; font-size: 7px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; } .opp-services__mini-site-hero { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; padding: 13px 15px; background: radial-gradient(circle at 82% 30%,rgba(122,193,67,.23),transparent 38%),linear-gradient(135deg,#f2f8ec,#f8faf5); } .opp-services__mini-site-hero small { color: #4d8b37; font-size: 7px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; } .opp-services__mini-site-hero strong { margin-top: 8px; color: #14395e; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 1px; } .opp-services__mini-site-hero em { margin-top: 10px; padding: 5px 9px; border-radius: 5px; background: #14395e; color: #fff; font-size: 7px; font-style: normal; line-height: 1.2; letter-spacing: .5px; } .opp-services__mini-site-panels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 9px 11px; } .opp-services__mini-site-panels i { display: block; height: 20px; border-radius: 5px; background: #edf5e9; } .opp-services__mini-site-panels i:nth-child(2) { background: #ecf3f9; } .opp-services__mini-site-panels i:nth-child(3) { background: #fff3e8; } .opp-services__mini-row { display: flex; gap: 6px; padding: 9px 0; } .opp-services__mini-row i { flex: 1; height: 40px; border-radius: 7px; background: #f7f2e8; } .opp-services__mini-metrics { display: flex; gap: 8px; } .opp-services__mini-metrics span { flex: 1; padding: 10px 5px; border: 1px solid var(--os-line); border-radius: 8px; background: #fff; font-size: 9px; text-align: center; } .opp-services .opp-services__build-side { display: grid !important; grid-template-rows: minmax(0,1fr); } .opp-services__build-side .opp-services__card { padding: 32px; } .opp-services__build-side .opp-services__card-icon { width: 56px; height: 56px; } .opp-services__build-side .opp-services__card-title .elementor-heading-title { line-height: 1.5; } .opp-services__build-side .opp-services__card-copy { margin-top: 8px; } .opp-services__build-side .opp-services__badges { margin-top: 16px; } .opp-services__build-side .opp-services__badge { min-height: 25px; padding: 4px 8px; line-height: 15px; } .opp-services .opp-services__card-shop { position: relative; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(230px,.8fr); grid-template-rows: 40px auto minmax(0,1fr) auto auto; column-gap: 24px; align-content: stretch; align-items: start; overflow: hidden; background: #fffaf5 !important; border-color: #ffe2c2 !important; } .opp-services__card-shop::before { content: ''; position: absolute; top: -72px; left: -72px; width: 250px; height: 250px; border-radius: 50%; background: #fff0df; pointer-events: none; } .opp-services__card-shop > * { position: relative; min-width: 0; } .opp-services__card-shop .opp-services__card-icon { grid-column: 1; grid-row: 1; width: 40px; height: 40px; background: #fff; border-color: #f1d7bb; } .opp-services__card-shop .opp-services__card-note { grid-column: 1; grid-row: 1; align-self: center; width: fit-content; margin: 0 0 0 52px; padding: 0; border: 0; background: none; color: #a86127; font-size: 11px; font-weight: 700; letter-spacing: 2px; } .opp-services__card-shop .opp-services__card-title { grid-column: 1; grid-row: 2; margin-top: 16px; } .opp-services__card-shop .opp-services__card-title .elementor-heading-title { color: #1a1a1a; font-size: 27px; font-weight: 800; line-height: 1.4; } .opp-services__card-shop .opp-services__card-copy { grid-column: 1; grid-row: 3; max-width: 360px; margin-top: 16px; font-size: 14px; line-height: 1.85; } .opp-services__card-shop .opp-services__badges { grid-column: 1; grid-row: 4; margin-top: 24px; } .opp-services__card-shop .opp-services__shop-suitable { grid-column: 1; grid-row: 5; align-self: end; width: auto; margin: 24px 0 0; color: var(--os-muted); font-size: 11px; font-weight: 400; line-height: 1.6; } /* 商店畫面沿用橫向構圖，右欄與文字欄等高，閱讀順序對應左側卡片。 */ .opp-services__card-shop > .opp-services__shop-mockup { display: flex; grid-column: 2; grid-row: 1 / span 5; align-self: stretch; width: 100%; } .opp-services__shop-preview { display: flex; flex: 1; flex-direction: column; overflow: hidden; width: 100%; min-width: 0; padding: 11px; border: 1px solid #ebcfb3; border-radius: 17px; background: #fbf4eb; } .opp-services__shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 5px; height: 24px; padding: 0 8px; background: #f5e9db; color: #7e6957; font-size: 8px; font-weight: 700; white-space: nowrap; } .opp-services__shop-dots { color: #e8895f; letter-spacing: 2px; } .opp-services__shop-site { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #e9e0d5; border-radius: 8px; background: #fff; box-shadow: 0 16px 26px -17px rgba(89,54,24,.26); } .opp-services__shop-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px; border-bottom: 1px solid #f0e8df; color: #14395e; font-size: 8px; white-space: nowrap; } .opp-services__shop-nav strong { font-size: 9px; } .opp-services__shop-nav span { color: #7d8790; font-size: 7px; } .opp-services__shop-hero { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; min-height: 100px; padding: 14px 12px; background: linear-gradient(105deg,#fff0de,#f8faf2); color: #14395e; } .opp-services__shop-hero small { color: #c07431; font-size: 7px; font-weight: 700; } .opp-services__shop-hero strong { font-size: 12px; line-height: 1.35; } .opp-services__shop-hero em { padding: 3px 6px; border-radius: 4px; background: #14395e; color: #fff; font-size: 7px; font-style: normal; } .opp-services__shop-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 5px; } .opp-services__shop-products > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #425466; font-size: 7px; white-space: nowrap; } .opp-services__shop-products i { display: block; height: 24px; border-radius: 5px; background: linear-gradient(145deg,#dce9d7,#f4f7ed); } .opp-services__shop-products > span:nth-child(2) i { background: linear-gradient(145deg,#e8e0d5,#fff4e6); } .opp-services__shop-products > span:nth-child(3) i { background: linear-gradient(145deg,#d8e5ef,#eef5f9); } .opp-services__shop-cart { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 5px 5px; padding: 4px 6px; border: 1px solid #f0e1d2; border-radius: 6px; color: #14395e; font-size: 7px; white-space: nowrap; } .opp-services__shop-cart strong { color: #bc6f2f; font-size: 7px; } .opp-services__build .opp-services__three > .opp-services__card { position: relative; padding: 24px; } .opp-services__build .opp-services__three .opp-services__card-title { max-width: calc(100% - 115px); margin: 0; } .opp-services__build .opp-services__three .opp-services__card-title .elementor-heading-title { font-size: 18px; } .opp-services__build .opp-services__three .opp-services__card-note { position: absolute; top: 24px; right: 24px; max-width: 112px; margin: 0; padding: 4px 8px; border: 1px solid var(--os-line); border-radius: 100px; background: #f7f2e8; text-align: center; font-size: 10px; } .opp-services__build .opp-services__three .opp-services__badges { margin-top: 16px; } .opp-services .opp-services__rwd { display: grid !important; grid-template-columns: minmax(0,1.05fr) minmax(0,1.8fr); gap: clamp(32px,3vw,56px); align-items: center; margin-top: 24px; padding: clamp(32px,3.1vw,52px); border-radius: 24px; background: radial-gradient(ellipse 42% 65% at 79% 45%,rgba(57,149,217,.17),transparent),var(--os-navy); color: #fff; box-shadow: var(--os-shadow); } .opp-services__rwd-copy { max-width: 520px; } .opp-services__rwd .opp-services__card-note { margin-top: 0; color: #bce4fa; font-size: 12px; font-weight: 600; line-height: 1.6; } .opp-services__rwd .opp-services__card-title { margin-top: 18px; } .opp-services__rwd .opp-services__card-title .elementor-heading-title { color: #fff; font-size: clamp(30px,2.4vw,38px); font-weight: 800; line-height: 1.35; } .opp-services__rwd .opp-services__card-copy { max-width: 480px; margin-top: 20px; color: #e8f1fa; font-size: 16px; line-height: 1.9; } .opp-services__rwd .opp-services__badges { gap: 10px; margin-top: 28px; } .opp-services__rwd .opp-services__badge { min-height: 36px; padding: 7px 14px; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 600; } .opp-services__devices { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.05fr) minmax(0,1.5fr); gap: clamp(12px,1.3vw,22px); align-items: end; color: #fff; text-align: center; } .opp-services__devices span { display: block; width: 100%; margin-inline: auto; overflow: hidden; border: 3px solid rgba(255,255,255,.9); border-radius: 16px; background: #fff; box-shadow: 0 20px 36px -22px rgba(0,0,0,.65); } .opp-services__devices img { display: block; width: 100%; height: auto; } .opp-services__devices > div:nth-child(3) span { border-radius: 13px; } .opp-services__devices label { display: block; padding-top: 14px; color: #e8f1fa; font-size: 12px; font-weight: 700; letter-spacing: 2px; } .opp-services__build .opp-services__three { margin-top: 24px; } /* 02 網站視覺與體驗：三張卡片共用同一套線條圖示與資訊層級。 */ .opp-services .opp-services__visual { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 48px; } .opp-services .opp-services__visual-inner { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(260px,320px); align-items: end; column-gap: 24px; width: 100%; max-width: none; padding: 48px; border: 1px solid #f0e6d6; border-radius: 32px; background: var(--os-warm); } .opp-services__visual .opp-services__section-header { flex-direction: column !important; align-items: flex-start; margin-bottom: 0 !important; } .opp-services__visual-intro { max-width: 320px; margin: 0; color: #51483e; font-size: 14px; line-height: 1.8; } .opp-services .opp-services__visual-inner > .opp-services__three { grid-column: 1 / -1; margin-top: 40px; } .opp-services__visual .opp-services__three > :nth-child(1) { --opp-visual-accent: #528f39; --opp-visual-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2225%22%20height%3D%2222%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3.5%2011h25M8%2016h8v7H8zM20%2016h5M20%2020h5M20%2024h3%22%2F%3E%3C%2Fsvg%3E'); } .opp-services__visual .opp-services__three > :nth-child(2) { --opp-visual-accent: #b96d27; --opp-visual-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2211%22%20y%3D%223.5%22%20width%3D%2210%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M16%2010.5v5M6%2015.5h20M6%2015.5v4M16%2015.5v4M26%2015.5v4%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2219.5%22%20width%3D%227%22%20height%3D%228%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2219.5%22%20width%3D%227%22%20height%3D%228%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2222.5%22%20y%3D%2219.5%22%20width%3D%227%22%20height%3D%228%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); } .opp-services__visual .opp-services__three > :nth-child(3) { --opp-visual-accent: #3079bd; --opp-visual-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2223%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9%2023h7c3.3%200%205-1.7%205-5v-8M17%2014l4-4%204%204M21%204v6%22%2F%3E%3C%2Fsvg%3E'); } .opp-services .opp-services__visual .opp-services__card { display: grid !important; grid-template-columns: 58px minmax(0,1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; min-height: 300px; position: relative; overflow: hidden; border-color: #e5e8e7; box-shadow: none; transition: box-shadow .2s ease, transform .2s ease; } .opp-services__visual .opp-services__card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -18px rgba(20,57,94,.2); } .opp-services__visual .opp-services__card-icon { grid-column: 1; grid-row: 1; width: 58px; height: 58px; border: 1px solid #dae8d4; border-radius: 18px; background: #e8f2e3; font-size: 0; } .opp-services__visual .opp-services__three > :nth-child(2) .opp-services__card-icon { border-color: #f0e2d2; background: #fff1e3; } .opp-services__visual .opp-services__three > :nth-child(3) .opp-services__card-icon { border-color: #dce9f5; background: #eef5ff; } .opp-services__visual .opp-services__card-icon .elementor-heading-title { display: none; } .opp-services__visual .opp-services__card-icon::before { content: ''; display: block; width: 30px; height: 30px; background: var(--opp-visual-accent); -webkit-mask: var(--opp-visual-icon) center / contain no-repeat; mask: var(--opp-visual-icon) center / contain no-repeat; } .opp-services__visual .opp-services__card-title { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; } .opp-services__visual .opp-services__card-title .elementor-heading-title { color: #14395e; font-size: 21px; line-height: 1.35; } .opp-services__visual .opp-services__card-copy { grid-column: 1 / -1; grid-row: 2; margin-top: 20px; margin-bottom: 0; color: #333; font-size: 14px; line-height: 1.8; } .opp-services__visual .opp-services__card-note { display: flex; grid-column: 1 / -1; grid-row: 3; align-items: center; align-self: end; gap: 9px; margin-top: 22px; padding-top: 0; border-top: 0; color: #4f5a61; font-size: 12px; line-height: 1.5; } .opp-services__visual .opp-services__card-note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--opp-visual-accent); } /* 03 搜尋與行銷。 */ .opp-services .opp-services__marketing-shell { position: relative; overflow: hidden; padding: 48px; border-radius: 32px; background: var(--os-navy); color: #fff; } .opp-services__marketing-shell::before, .opp-services__marketing-shell::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .opp-services__marketing-shell::before { top: -60px; right: -60px; width: 360px; height: 360px; background: rgba(255,255,255,.05); } .opp-services__marketing-shell::after { bottom: -80px; left: -80px; width: 420px; height: 420px; background: rgba(76,175,107,.1); } .opp-services__marketing-shell > * { position: relative; z-index: 1; } .opp-services__marketing .opp-services__section-title .elementor-heading-title { color: #fff; } .opp-services__marketing .opp-services__section-sub { color: rgba(255,255,255,.8); } .opp-services__marketing .opp-services__section-count { color: #fff; background: rgba(255,255,255,.1); } .opp-services .opp-services__marketing-grid { display: grid !important; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; } .opp-services .opp-services__marketing-seo { grid-column: span 7; display: grid !important; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); grid-template-rows: auto auto 1fr; align-content: start; column-gap: 24px; } .opp-services__marketing-stack { grid-column: span 5; display: grid !important; grid-template-rows: auto auto; gap: 20px; } .opp-services__marketing-ads { grid-column: span 5; } .opp-services .opp-services__marketing-ga4 { grid-column: span 7; display: grid !important; grid-template-columns: minmax(0,1fr) 220px; grid-template-rows: auto auto 1fr; align-content: start; column-gap: 24px; } .opp-services__marketing-ai { background: #e8f2e3 !important; border-color: #d3e8c9 !important; } .opp-services__marketing-geo { background: rgba(255,255,255,.1) !important; color: #fff; border-color: rgba(255,255,255,.15) !important; backdrop-filter: blur(12px); } .opp-services__marketing-ga4 { background: #0f2d4a !important; color: #fff; border-color: rgba(255,255,255,.15) !important; } .opp-services__marketing-stack > .opp-services__card, .opp-services .opp-services__marketing-ads, .opp-services .opp-services__marketing-ga4 { padding: 24px; } .opp-services__marketing .opp-services__card-icon { width: 32px; height: 32px; font-size: 14px; } .opp-services__marketing-ads .opp-services__card-icon { border-color: var(--os-navy); background: var(--os-navy); color: #fff; } .opp-services__marketing-seo .opp-services__card-icon { grid-area: 1 / 1; } .opp-services__marketing-seo .opp-services__card-title { grid-area: 1 / 1; align-self: center; margin: 0 0 0 42px; } .opp-services__marketing-seo .opp-services__card-copy { grid-area: 2 / 1; margin-top: 12px; } .opp-services__marketing-seo .opp-services__badges { grid-area: 3 / 1; align-self: start; margin-top: 20px; } .opp-services__marketing-seo .opp-services__card-note { grid-area: 1 / 2 / 4 / 3; margin: 0; padding: 12px; border: 1px solid var(--os-line); border-radius: 14px; background: #faf7f2; color: var(--os-muted); } .opp-services__marketing-seo .opp-services__card-title .elementor-heading-title, .opp-services__marketing-ads .opp-services__card-title .elementor-heading-title, .opp-services__marketing-ai .opp-services__card-title .elementor-heading-title { color: #1a1a1a; font-size: 18px; } .opp-services__chart-title { display: block; margin-bottom: 12px; color: var(--os-muted); font-size: 10px; } .opp-services__chart-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #333; font-size: 10px; } .opp-services__chart-row > span { width: 96px; flex: 0 0 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .opp-services__chart-row > i { position: relative; display: block; flex: 1; height: 6px; overflow: hidden; border-radius: 100px; background: #ede6d8; } .opp-services__chart-row > i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 92%; border-radius: inherit; background: var(--os-bright); } .opp-services__chart-row:nth-of-type(3) > i::before { width: 78%; } .opp-services__chart-row:nth-of-type(4) > i::before { width: 64%; } .opp-services__marketing-ai { position: relative; } .opp-services__marketing-ai .opp-services__card-title { margin: 0; } .opp-services__marketing-ai .opp-services__card-copy { margin-top: 8px; color: #4a6b3a; font-size: 12px; line-height: 1.6; } .opp-services__marketing-ai .opp-services__card-icon { display: none; } .opp-services__marketing-ai .opp-services__card-note { position: static !important; margin-top: 16px; color: #4a6b3a; } .opp-services__ai-new { position: absolute; top: 24px; right: 24px; padding: 4px 8px; border: 1px solid var(--os-line); border-radius: 100px; background: #fff; font-size: 10px; color: #333; } .opp-services__ai-summary { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d3e8c9; border-radius: 10px; background: #fff; font-size: 11px; } .opp-services__marketing-geo .opp-services__card-title { margin-top: 0; } .opp-services__marketing-geo .opp-services__card-copy { margin-top: 8px; font-size: 12px; line-height: 1.6; } .opp-services__marketing-geo .opp-services__badges { margin-top: 12px; } .opp-services__marketing-geo .opp-services__badge { min-height: 25px; padding: 4px 8px; } .opp-services__marketing-ads .opp-services__card-icon { display: inline-grid; } .opp-services__marketing-ads .opp-services__card-title { margin: -32px 0 0 42px; min-height: 32px; display: flex; align-items: center; } .opp-services__marketing-ads .opp-services__card-copy { margin-top: 12px; } .opp-services__marketing-ads .opp-services__card-note { margin-top: 16px; } .opp-services__marketing-ads .opp-services__card-note .elementor-heading-title { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .opp-services__ads-metric { display: block; padding: 12px; border: 1px solid var(--os-line); border-radius: 12px; background: #faf7f2; } .opp-services__ads-metric > span { display: block; color: var(--os-muted); font-size: 10px; } .opp-services__ads-metric > strong { display: block; margin-top: 4px; color: #1a1a1a; font-size: 18px; } .opp-services__marketing-ga4 .opp-services__card-title { grid-area: 1 / 1; margin: 0; } .opp-services__marketing-ga4 .opp-services__card-copy { grid-area: 2 / 1; margin-top: 8px; } .opp-services__marketing-ga4 .opp-services__badges { grid-area: 3 / 1; align-self: start; margin-top: 16px; } .opp-services__marketing-ga4 .opp-services__card-note { grid-area: 1 / 2 / 4 / 3; margin: 0; padding: 12px; border: 1px solid var(--os-line); border-radius: 14px; background: #fff; color: #333; } .opp-services__marketing-ga4 .opp-services__card-note .elementor-heading-title { color: #333; } .opp-services__speed-title { display: block; color: var(--os-muted); font-size: 10px; } .opp-services__speed-value { display: flex; align-items: end; gap: 8px; margin-top: 8px; } .opp-services__speed-value strong { color: #1a1a1a; font-size: 28px; line-height: 1; } .opp-services__speed-value span { color: var(--os-green); font-size: 11px; } .opp-services__speed-bar { position: relative; display: block; height: 6px; overflow: hidden; margin-top: 12px; border-radius: 100px; background: #ede6d8; } .opp-services__speed-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 92%; background: var(--os-navy); } .opp-services__marketing-geo .elementor-heading-title, .opp-services__marketing-ga4 .opp-services__card-title .elementor-heading-title { color: #fff; } .opp-services__marketing-geo .opp-services__card-copy, .opp-services__marketing-ga4 .opp-services__card-copy, .opp-services__marketing-geo .opp-services__card-note { color: rgba(255,255,255,.75); } .opp-services__marketing-geo .opp-services__badge, .opp-services__marketing-ga4 .opp-services__badge { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.1); } .opp-services__marketing-geo .opp-services__badge:first-child { color: var(--os-navy); border-color: #fff; background: #fff; } .opp-services__marketing-geo .opp-services__badge:first-child .elementor-heading-title { color: var(--os-navy); } .opp-services__marketing-note { margin-top: 32px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); font-size: 11px; } /* 04 維運、需求階段、工具、地區及結尾。 */ .opp-services__support { border-bottom: 1px solid var(--os-line); } .opp-services__support .opp-services__card-icon { width: 40px; height: 40px; border-color: var(--os-line); background: #fff; font-size: 18px; } .opp-services__support .opp-services__card-title .elementor-heading-title { font-size: 19px; } .opp-services__support-card:first-child { background: #f2f8ec !important; border-color: #d8eacf !important; } .opp-services__support-points { margin-top: 16px; } .opp-services__support-points .elementor-heading-title { display: flex; align-items: start; gap: 8px; padding: 5px 0; font-size: 13px; line-height: 1.5; color: var(--os-muted); } .opp-services__check { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; border-radius: 50%; background: var(--os-navy); color: #fff; font-size: 9px; line-height: 1; } .opp-services__support-note { margin-top: 20px; padding: 12px; border: 1px solid var(--os-line); border-radius: 12px; background: #fff; color: var(--os-muted); font-size: 11px; line-height: 1.6; } .opp-services__stages { border-bottom: 1px solid var(--os-line); text-align: center; } .opp-services__center-label { color: var(--os-muted); font-size: 12px; font-weight: 600; } .opp-services__center-title { margin-top: 12px; } .opp-services__center-title .elementor-heading-title { color: #1a1a1a; font-size: clamp(32px,3vw,40px); font-weight: 900; } .opp-services__center-copy { max-width: 760px; margin: 16px auto 40px; color: #4f5963; font-size: 16px; line-height: 1.8; } .opp-services__scenario { min-height: 300px; text-align: left; } .opp-services__scenario .opp-services__card-title .elementor-heading-title { font-size: 24px; line-height: 1.35; } .opp-services__scenario .opp-services__card-copy { margin-top: 14px; font-size: 15px; line-height: 1.8; } .opp-services__scenario .opp-services__card-note { font-size: 13px; line-height: 1.7; } .opp-services__scenario:nth-child(1) { border-color: #f0e6d6 !important; background: #fff9f0 !important; } .opp-services__scenario:nth-child(3) { background: var(--os-navy) !important; color: #fff; } .opp-services__scenario:nth-child(3) .elementor-heading-title { color: #fff; } .opp-services__scenario:nth-child(3) .opp-services__card-copy, .opp-services__scenario:nth-child(3) .opp-services__card-note { color: rgba(255,255,255,.75); } .opp-services__scenario-number { width: fit-content; padding: 7px 13px; border: 1px solid var(--os-line); border-radius: 100px; background: #fff; font-size: 12px; font-weight: 600; } .opp-services__scenario:nth-child(3) .opp-services__scenario-number { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.1); color: #fff; } .opp-services__scenario-list { margin-top: 22px; } .opp-services__scenario-list .elementor-heading-title { display: flex; align-items: center; min-height: 42px; margin-top: 9px; padding: 9px 14px; border: 1px solid var(--os-line); border-radius: 100px; background: #fff; color: var(--os-navy); font-size: 14px; font-weight: 600; line-height: 1.5; } .opp-services__scenario-list .elementor-heading-title::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; margin-right: 8px; border-radius: 50%; background: var(--os-navy); } .opp-services__scenario:nth-child(3) .opp-services__scenario-list .elementor-heading-title { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; } .opp-services__scenario:nth-child(3) .opp-services__scenario-list .elementor-heading-title::before { background: #4caf6b; } .opp-services__scenario-cta { margin-top: auto; padding-top: 24px; color: var(--os-navy); font-size: 15px; font-weight: 700; line-height: 1.6; } .opp-services__scenario:nth-child(3) .opp-services__scenario-cta { color: #fff; } .opp-services__tools { padding-top: 80px !important; } .opp-services .opp-services__tools-grid { display: grid !important; grid-template-columns: 1.1fr .9fr; gap: 28px; } .opp-services .opp-services__tool-list { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; align-content: start; align-items: center; column-gap: 12px; } .opp-services__tool-list::before { content: ''; grid-area: 1 / 2; height: 1px; background: var(--os-line); } .opp-services__tool-list > .opp-services__card-note { grid-area: 1 / 1; margin: 0; white-space: nowrap; } .opp-services__tool-title { grid-area: 1 / 3; } .opp-services__tool-title .elementor-heading-title { color: var(--os-muted); font-size: 10px; font-weight: 400; white-space: nowrap; } .opp-services__service-area .opp-services__tool-title { margin-top: 12px; } .opp-services__service-area .opp-services__tool-title .elementor-heading-title { color: #1a1a1a; font-size: 20px; font-weight: 700; white-space: normal; } .opp-services__tool-list .opp-services__badges { grid-column: 1 / -1; margin-top: 24px; } .opp-services__tool-list .opp-services__badge { min-height: 36px; padding: 8px 14px; font-size: 12px; } .opp-services__tool-facts { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; } .opp-services__tool-list .opp-services__tool-facts { grid-column: 1 / -1; } .opp-services__tool-facts .elementor-heading-title { padding: 12px; border: 1px solid var(--os-line); border-radius: 12px; background: var(--os-bg); font-size: 11px; } .opp-services__fact-label, .opp-services__fact-value { display: block; } .opp-services__fact-label { color: var(--os-muted); } .opp-services__fact-value { margin-top: 4px; color: #1a1a1a; font-size: 12px; font-weight: 500; } .opp-services__service-area { background: var(--os-bg) !important; box-shadow: none !important; } .opp-services__area-regions { margin-top: 24px; } .opp-services__area-regions > .elementor-widget + .elementor-widget { margin-top: 20px; } .opp-services__area-regions .elementor-heading-title { display: flex; align-items: start; gap: 16px; font-size: 12px; line-height: 1.5; } .opp-services__region-label { width: 84px; flex: 0 0 84px; padding-top: 4px; color: #1a1a1a; font-weight: 500; } .opp-services__city-list { display: flex; flex-wrap: wrap; gap: 6px; } .opp-services__city-list > span { display: grid; place-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--os-line); border-radius: 100px; background: #fff; font-size: 11px; } .opp-services .opp-services__contact { padding-block: 0 80px; } .opp-services .opp-services__contact-inner { position: relative; overflow: hidden; display: grid !important; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; padding: 48px; border-radius: 32px; background: var(--os-navy); color: #fff; box-shadow: 0 30px 80px -30px rgba(20,57,94,.6); } .opp-services__contact-inner::before, .opp-services__contact-inner::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .opp-services__contact-inner::before { top: -40px; right: -40px; width: 240px; height: 240px; background: rgba(255,255,255,.05); } .opp-services__contact-inner::after { bottom: -60px; left: 10%; width: 320px; height: 320px; background: rgba(76,175,107,.15); } .opp-services__contact-inner > * { position: relative; z-index: 1; } .opp-services__contact .opp-services__eyebrow .elementor-heading-title { color: rgba(255,255,255,.7); } .opp-services__contact-copy h2.elementor-heading-title { margin-top: 16px; color: #fff; font-size: clamp(30px,2.8vw,40px); font-weight: 900; line-height: 1.15; } .opp-services__contact-copy .elementor-widget-text-editor { max-width: 550px; margin-top: 20px; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.7; } .opp-services .opp-services__contact-actions { justify-self: end; } .opp-services .opp-services__contact-buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px; } .opp-services__contact-buttons > .elementor-widget { width: auto; flex: 0 0 auto; } .opp-services .opp-services__contact-buttons .elementor-button { min-height: 48px; padding-inline: 28px; font-size: 13px; font-weight: 500; } .opp-services .opp-services__button-light .elementor-button { color: var(--os-navy); background: #fff; } .opp-services .opp-services__button-light .elementor-button:hover { background: #f7f2e8; } .opp-services .opp-services__button-line .elementor-button { color: #fff; background: #06c755; } .opp-services .opp-services__button-line .elementor-button:hover { background: #05b64d; } .opp-services__contact-hours { margin-top: 14px; color: rgba(255,255,255,.65); font-size: 11px; } .opp-services__contact .opp-services__badge { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.1); } @media (max-width: 1023px) { .opp-services .opp-services__wrap, .opp-services .opp-services__visual, .opp-services__tabs nav { padding-inline: 40px; } .opp-services .opp-services__hero-grid { grid-template-columns: 1fr !important; } .opp-services__hero-copy { max-width: 700px; } .opp-services .opp-services__build-featured { grid-template-columns: 1fr !important; } .opp-services .opp-services__build-side { grid-template-columns: 1fr; grid-template-rows: auto; } .opp-services .opp-services__card-corporate { grid-template-columns: 1fr 300px; } .opp-services .opp-services__card-shop { grid-template-columns: minmax(0,1fr) minmax(230px,300px); } .opp-services .opp-services__rwd { grid-template-columns: 1fr !important; } .opp-services__rwd-copy { max-width: none; } .opp-services__rwd .opp-services__card-copy { max-width: 650px; } .opp-services .opp-services__tools-grid { grid-template-columns: 1fr !important; } .opp-services .opp-services__marketing-shell { padding: 40px; } .opp-services .opp-services__visual .opp-services__three { grid-template-columns: 1fr !important; } .opp-services .opp-services__visual .opp-services__card { min-height: 0; } .opp-services .opp-services__marketing-grid { grid-template-columns: 1fr; } .opp-services__marketing-grid > * { grid-column: 1 !important; } .opp-services__marketing-stack { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; } .opp-services .opp-services__contact-inner { grid-template-columns: 1fr !important; } .opp-services .opp-services__contact-actions { justify-self: start; } } @media (min-width: 768px) and (max-width: 1279px) { .opp-services .opp-services__visual-inner, .opp-services .opp-services__marketing-shell { padding: 40px; } } @media (max-width: 767px) { .opp-services__hero-watermark-design { font-size: 22vw; } .opp-services__hero-watermark-middle { font-size: 18vw; } .opp-services__hero-watermark-grow { font-size: 24vw; } .opp-services .opp-services__wrap { width: 100%; padding-inline: 24px; } .opp-services .opp-services__hero > .opp-services__wrap { width: 100%; padding-inline: 16px; } .opp-services .opp-services__hero { padding: 24px 0 42px; } .opp-services__hero-title .elementor-heading-title { font-size: clamp(34px,9vw,46px); } .opp-services__hero-lead { font-size: 16px; } .opp-services__hero-art { overflow: hidden; } .opp-services__visual-stack { height: 520px; overflow: hidden; border-radius: 24px; } .opp-services__tabs nav { width: 100%; gap: 23px; padding-inline: 24px; } .opp-services__tabs span { display: none; } .opp-services .opp-services__section { padding-block: 56px; scroll-margin-top: 78px; } .opp-services .opp-services__section-header { margin-bottom: 28px; } .opp-services__section-title .elementor-heading-title { font-size: 36px; } .opp-services__section-count { margin-left: 0; } .opp-services .opp-services__three { grid-template-columns: 1fr !important; } .opp-services .opp-services__card { padding: 24px; } .opp-services .opp-services__card-corporate { grid-template-columns: 1fr !important; } .opp-services .opp-services__build-side { grid-template-columns: 1fr !important; } .opp-services .opp-services__card-shop { grid-template-columns: 1fr !important; grid-template-rows: 40px auto auto auto auto auto; } .opp-services__card-shop .opp-services__card-copy { grid-row: 3; } .opp-services__card-shop .opp-services__badges { grid-row: 4; } .opp-services__card-shop .opp-services__shop-suitable { grid-row: 5; } .opp-services__card-shop > .opp-services__shop-mockup { grid-column: 1; grid-row: 6; min-height: 300px; margin-top: 28px; } .opp-services .opp-services__rwd { grid-template-columns: 1fr !important; padding: 24px; } .opp-services__rwd .opp-services__card-title .elementor-heading-title { font-size: clamp(26px,6.8vw,30px); } .opp-services__rwd .opp-services__card-copy { font-size: 15px; line-height: 1.85; } .opp-services__rwd .opp-services__badges { margin-top: 24px; } .opp-services__devices { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 12px; } .opp-services__devices > div:nth-child(3) { grid-column: 1 / -1; width: min(100%,360px); justify-self: center; } .opp-services .opp-services__visual { width: 100%; padding-inline: 24px; } .opp-services .opp-services__visual-inner { grid-template-columns: minmax(0,1fr); padding: 24px; } .opp-services__visual-intro { max-width: none; margin-top: 16px; } .opp-services .opp-services__visual-inner > .opp-services__three { grid-column: 1; margin-top: 40px; } .opp-services .opp-services__marketing-shell { padding: 24px; } .opp-services .opp-services__marketing-grid { grid-template-columns: 1fr !important; } .opp-services__marketing-grid > * { grid-column: 1 !important; } .opp-services__marketing-stack { grid-template-columns: 1fr; grid-template-rows: auto; } .opp-services .opp-services__marketing-seo, .opp-services .opp-services__marketing-ga4 { grid-template-columns: 1fr; grid-template-rows: auto; } .opp-services__marketing-seo .opp-services__card-note, .opp-services__marketing-ga4 .opp-services__card-note { grid-area: auto; margin-top: 16px; } .opp-services__marketing-seo .opp-services__card-icon, .opp-services__marketing-seo .opp-services__card-title, .opp-services__marketing-seo .opp-services__card-copy, .opp-services__marketing-seo .opp-services__badges, .opp-services__marketing-ga4 .opp-services__card-title, .opp-services__marketing-ga4 .opp-services__card-copy, .opp-services__marketing-ga4 .opp-services__badges { grid-area: auto; } .opp-services__marketing-seo .opp-services__card-title { margin: 8px 0 0; } .opp-services__tool-facts { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .opp-services__tool-facts .elementor-heading-title { padding: 8px; } .opp-services__tool-title .elementor-heading-title { white-space: normal; } .opp-services__region-label { width: 72px; flex-basis: 72px; } .opp-services .opp-services__contact { padding-bottom: 56px; } .opp-services .opp-services__contact-inner { grid-template-columns: 1fr !important; padding: 28px 24px; } .opp-services .opp-services__contact-actions { justify-self: start; } } @media (max-width: 360px) { .opp-services .opp-services__hero > .opp-services__wrap { padding-inline: 12px; } } @media (max-width: 767px) { .opp-services .opp-services__hero-actions { align-items: flex-start; flex-direction: column !important; } } /* OPP COOPERATION PROCESS — sourced from user-provided reference */ .opp-process-builder,.opp-process-builder > .e-con-inner{width:100%;max-width:none!important;padding:0!important;gap:0!important;} .opp-process-builder .elementor-widget-html,.opp-process-builder .elementor-widget-container,.opp-process-root{width:100%;max-width:none;} .opp-process-root{font-family:"Noto Sans TC",Inter,sans-serif;color:#14395E;line-height:2;letter-spacing:2px;overflow-x:clip;} @scope (.opp-process-root){*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-right-1{right:-.25rem}.-right-3{right:-.75rem}.-right-\[10\%\]{right:-10%}.-right-\[20\%\]{right:-20%}.-top-1{top:-.25rem}.-top-3{top:-.75rem}.-top-\[30\%\]{top:-30%}.bottom-6{bottom:1.5rem}.bottom-\[0\%\]{bottom:0}.bottom-\[0\.15em\]{bottom:.15em}.bottom-\[24px\]{bottom:24px}.left-0{left:0}.left-1\/2{left:50%}.left-\[10\%\]{left:10%}.left-\[20px\]{left:20px}.left-\[23px\]{left:23px}.left-\[28px\]{left:28px}.left-\[4\%\]{left:4%}.right-0{right:0}.right-2{right:.5rem}.right-\[4\%\]{right:4%}.top-0{top:0}.top-1\/2{top:50%}.top-6{top:1.5rem}.top-\[20\%\]{top:20%}.top-\[24px\]{top:24px}.top-\[38px\]{top:38px}.top-\[6\%\]{top:6%}.top-\[64px\]{top:64px}.top-\[var\(--safe-area-inset-top\)\]{top:var(--safe-area-inset-top)}.z-0{z-index:0}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.z-\[100\]{z-index:100}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.ml-\[60px\]{margin-left:60px}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-\[6px\]{margin-top:6px}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[0\.42em\]{height:.42em}.h-\[1\.5px\]{height:1.5px}.h-\[18px\]{height:18px}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[300px\]{height:300px}.h-\[400px\]{height:400px}.h-\[64px\]{height:64px}.h-\[700px\]{height:700px}.h-\[76px\]{height:76px}.h-full{height:100%}.min-h-\[220px\]{min-height:220px}.min-h-\[560px\]{min-height:560px}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[18px\]{width:18px}.w-\[20\%\]{width:20%}.w-\[25\%\]{width:25%}.w-\[2px\]{width:2px}.w-\[300px\]{width:300px}.w-\[40\%\]{width:40%}.w-\[400px\]{width:400px}.w-\[700px\]{width:700px}.w-\[76px\]{width:76px}.w-full{width:100%}.max-w-\[140px\]{max-width:140px}.max-w-\[1600px\]{max-width:1600px}.max-w-\[420px\]{max-width:420px}.max-w-\[440px\]{max-width:440px}.max-w-\[460px\]{max-width:460px}.max-w-\[540px\]{max-width:540px}.max-w-\[560px\]{max-width:560px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90vw\]{max-width:90vw}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.-rotate-\[1deg\]{--tw-rotate:-1deg}.-rotate-\[1deg\],.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-\[3deg\]{--tw-rotate:3deg}.rotate-\[3deg\],.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[fadeIn_0\.2s_ease\]{animation:fadeIn .2s ease}.animate-\[fadeIn_0\.3s_ease\]{animation:fadeIn .3s ease}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-clip{overflow-x:clip}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded-\[14px\]{border-radius:14px}.rounded-\[16px\]{border-radius:16px}.rounded-\[20px\]{border-radius:20px}.rounded-\[24px\]{border-radius:24px}.rounded-\[32px\]{border-radius:32px}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-bl-\[4px\]{border-bottom-left-radius:4px}.rounded-br-\[4px\]{border-bottom-right-radius:4px}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[\#14395E\]\/10{border-color:rgba(20,57,94,.1)}.border-\[\#14395E\]\/\[0\.06\]{border-color:rgba(20,57,94,.06)}.border-\[\#14395E\]\/\[0\.07\]{border-color:rgba(20,57,94,.07)}.border-\[\#14395E\]\/\[0\.08\]{border-color:rgba(20,57,94,.08)}.border-\[\#7AC143\]{--tw-border-opacity:1;border-color:rgb(122 193 67/var(--tw-border-opacity,1))}.border-\[\#7AC143\]\/20{border-color:rgba(122,193,67,.2)}.border-\[\#E8F0D8\]{--tw-border-opacity:1;border-color:rgb(232 240 216/var(--tw-border-opacity,1))}.border-\[\#E8F0D8\]\/10{border-color:hsla(80,44%,89%,.1)}.border-\[\#E8F0D8\]\/20{border-color:hsla(80,44%,89%,.2)}.border-\[\#E8F0D8\]\/30{border-color:hsla(80,44%,89%,.3)}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-\[\#06C755\]{--tw-bg-opacity:1;background-color:rgb(6 199 85/var(--tw-bg-opacity,1))}.bg-\[\#06C755\]\/10{background-color:rgba(6,199,85,.1)}.bg-\[\#0F2336\]{--tw-bg-opacity:1;background-color:rgb(15 35 54/var(--tw-bg-opacity,1))}.bg-\[\#14395E\]{--tw-bg-opacity:1;background-color:rgb(20 57 94/var(--tw-bg-opacity,1))}.bg-\[\#7AC143\]{--tw-bg-opacity:1;background-color:rgb(122 193 67/var(--tw-bg-opacity,1))}.bg-\[\#7AC143\]\/15{background-color:rgba(122,193,67,.15)}.bg-\[\#7AC143\]\/20{background-color:rgba(122,193,67,.2)}.bg-\[\#7AC143\]\/30{background-color:rgba(122,193,67,.3)}.bg-\[\#7AC143\]\/50{background-color:rgba(122,193,67,.5)}.bg-\[\#E2E8F0\]{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-\[\#F2F8EC\]{--tw-bg-opacity:1;background-color:rgb(242 248 236/var(--tw-bg-opacity,1))}.bg-\[\#FFF9F0\]{--tw-bg-opacity:1;background-color:rgb(255 249 240/var(--tw-bg-opacity,1))}.bg-\[\#FFF9F0\]\/60{background-color:rgba(255,249,240,.6)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/15{background-color:hsla(0,0%,100%,.15)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-white\/\[0\.08\]{background-color:hsla(0,0%,100%,.08)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#14395E\]{--tw-gradient-from:#14395e var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,57,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#7AC143\]\/30{--tw-gradient-from:rgba(122,193,67,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(122,193,67,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#FFF9F0\]{--tw-gradient-from:#fff9f0 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,249,240,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#0F2336\]{--tw-gradient-to:rgba(15,35,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#0f2336 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#CBD5E1\]{--tw-gradient-to:rgba(203,213,225,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#cbd5e1 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#FFF9F0\]{--tw-gradient-to:rgba(255,249,240,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fff9f0 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#0F2336\]{--tw-gradient-to:#0f2336 var(--tw-gradient-to-position)}.to-\[\#7AC143\]\/30{--tw-gradient-to:rgba(122,193,67,.3) var(--tw-gradient-to-position)}.to-\[\#F2F8EC\]{--tw-gradient-to:#f2f8ec var(--tw-gradient-to-position)}.fill-white{fill:#fff}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-6{padding-bottom:1.5rem}.pl-\[56px\]{padding-left:56px}.pl-\[72px\]{padding-left:72px}.pr-4{padding-right:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[26px\]{font-size:26px}.text-\[28px\]{font-size:28px}.text-\[32px\]{font-size:32px}.text-\[48px\]{font-size:48px}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-\[1\.15\]{line-height:1.15}.leading-\[1\.25\]{line-height:1.25}.leading-\[1\.2\]{line-height:1.2}.leading-\[1\.3\]{line-height:1.3}.leading-\[1\.4\]{line-height:1.4}.leading-\[2\]{line-height:2}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-\[-0\.06em\]{letter-spacing:-.06em}.tracking-\[1\.5px\]{letter-spacing:1.5px}.tracking-\[1px\]{letter-spacing:1px}.tracking-\[2px\]{letter-spacing:2px}.tracking-widest{letter-spacing:.1em}.text-\[\#0F2336\]{--tw-text-opacity:1;color:rgb(15 35 54/var(--tw-text-opacity,1))}.text-\[\#14395E\]{--tw-text-opacity:1;color:rgb(20 57 94/var(--tw-text-opacity,1))}.text-\[\#14395E\]\/80{color:rgba(20,57,94,.8)}.text-\[\#3A5A2A\]{--tw-text-opacity:1;color:rgb(58 90 42/var(--tw-text-opacity,1))}.text-\[\#5FA02E\]{--tw-text-opacity:1;color:rgb(95 160 46/var(--tw-text-opacity,1))}.text-\[\#7AC143\]{--tw-text-opacity:1;color:rgb(122 193 67/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-\[0\.06\]{opacity:.06}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_20px_-10px_\#06C755\]{--tw-shadow:0 10px 20px -10px #06c755;--tw-shadow-colored:0 10px 20px -10px var(--tw-shadow-color)}.shadow-\[0_10px_20px_-10px_\#06C755\],.shadow-\[0_10px_20px_-10px_\#14395E\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_20px_-10px_\#14395E\]{--tw-shadow:0 10px 20px -10px #14395e;--tw-shadow-colored:0 10px 20px -10px var(--tw-shadow-color)}.shadow-\[0_10px_30px_-15px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:0 10px 30px -15px rgba(0,0,0,.2);--tw-shadow-colored:0 10px 30px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_30px_-20px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:0 10px 30px -20px rgba(0,0,0,.2);--tw-shadow-colored:0 10px 30px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_30px_-20px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 10px 30px -20px rgba(0,0,0,.3);--tw-shadow-colored:0 10px 30px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_40px_-10px_rgba\(0\2c 0\2c 0\2c 0\.4\)\]{--tw-shadow:0 20px 40px -10px rgba(0,0,0,.4);--tw-shadow-colored:0 20px 40px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_50px_-20px_rgba\(20\2c 57\2c 94\2c 0\.25\)\]{--tw-shadow:0 20px 50px -20px rgba(20,57,94,.25);--tw-shadow-colored:0 20px 50px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_50px_-30px_rgba\(20\2c 57\2c 94\2c 0\.3\)\]{--tw-shadow:0 20px 50px -30px rgba(20,57,94,.3);--tw-shadow-colored:0 20px 50px -30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_60px_-20px_rgba\(122\2c 193\2c 67\2c 0\.25\)\]{--tw-shadow:0 20px 60px -20px rgba(122,193,67,.25);--tw-shadow-colored:0 20px 60px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_60px_-30px_rgba\(20\2c 57\2c 94\2c 0\.25\)\]{--tw-shadow:0 20px 60px -30px rgba(20,57,94,.25);--tw-shadow-colored:0 20px 60px -30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_60px_-30px_rgba\(20\2c 57\2c 94\2c 0\.4\)\]{--tw-shadow:0 20px 60px -30px rgba(20,57,94,.4);--tw-shadow-colored:0 20px 60px -30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_60px_-35px_rgba\(20\2c 57\2c 94\2c 0\.15\)\]{--tw-shadow:0 20px 60px -35px rgba(20,57,94,.15);--tw-shadow-colored:0 20px 60px -35px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_60px_-35px_rgba\(20\2c 57\2c 94\2c 0\.2\)\]{--tw-shadow:0 20px 60px -35px rgba(20,57,94,.2);--tw-shadow-colored:0 20px 60px -35px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_2px_10px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]{--tw-shadow:0 2px 10px rgba(0,0,0,.04);--tw-shadow-colored:0 2px 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_4px_20px_-10px_rgba\(20\2c 57\2c 94\2c 0\.15\)\]{--tw-shadow:0 4px 20px -10px rgba(20,57,94,.15);--tw-shadow-colored:0 4px 20px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_20px_-8px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:0 8px 20px -8px rgba(0,0,0,.2);--tw-shadow-colored:0 8px 20px -8px var(--tw-shadow-color)}.shadow-\[0_8px_20px_-8px_rgba\(0\2c 0\2c 0\2c 0\.2\)\],.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-\[40px\]{--tw-blur:blur(40px)}.blur-\[40px\],.blur-\[50px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[50px\]{--tw-blur:blur(50px)}.blur-\[60px\]{--tw-blur:blur(60px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-xl{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#root,body,html{min-height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}[role=button]:not([aria-disabled=true]),button:not(:disabled),label[for],select:not(:disabled),summary{cursor:pointer}.selection\:bg-\[\#7AC143\]\/30 ::-moz-selection{background-color:rgba(122,193,67,.3)}.selection\:bg-\[\#7AC143\]\/30 ::selection{background-color:rgba(122,193,67,.3)}.selection\:bg-\[\#7AC143\]\/30::-moz-selection{background-color:rgba(122,193,67,.3)}.selection\:bg-\[\#7AC143\]\/30::selection{background-color:rgba(122,193,67,.3)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:-translate-y-\[2px\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-\[2px\]:hover{--tw-translate-y:-2px}.hover\:border-\[\#7AC143\]\/30:hover{border-color:rgba(122,193,67,.3)}.hover\:border-slate-200:hover{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.hover\:bg-\[\#05b14d\]:hover{--tw-bg-opacity:1;background-color:rgb(5 177 77/var(--tw-bg-opacity,1))}.hover\:bg-\[\#0F2C49\]:hover{--tw-bg-opacity:1;background-color:rgb(15 44 73/var(--tw-bg-opacity,1))}.hover\:bg-\[\#F2F8EC\]:hover{--tw-bg-opacity:1;background-color:rgb(242 248 236/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/\[0\.12\]:hover{background-color:hsla(0,0%,100%,.12)}.hover\:text-\[\#14395E\]:hover{--tw-text-opacity:1;color:rgb(20 57 94/var(--tw-text-opacity,1))}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:shadow-\[0_25px_60px_-20px_rgba\(20\2c 57\2c 94\2c 0\.35\)\]:hover{--tw-shadow:0 25px 60px -20px rgba(20,57,94,.35);--tw-shadow-colored:0 25px 60px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_30px_80px_-25px_rgba\(20\2c 57\2c 94\2c 0\.25\)\]:hover{--tw-shadow:0 30px 80px -25px rgba(20,57,94,.25);--tw-shadow-colored:0 30px 80px -25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_30px_80px_-30px_rgba\(20\2c 57\2c 94\2c 0\.25\)\]:hover{--tw-shadow:0 30px 80px -30px rgba(20,57,94,.25);--tw-shadow-colored:0 30px 80px -30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-\[\#7AC143\]{--tw-bg-opacity:1;background-color:rgb(122 193 67/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:text-\[72px\]{font-size:72px}}@media (min-width:768px){.md\:left-1\/2{left:50%}.md\:ml-0{margin-left:0}.md\:ml-\[54\%\]{margin-left:54%}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-\[600px\]{height:600px}.md\:w-\[600px\]{width:600px}.md\:w-\[88\%\]{width:88%}.md\:-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.2fr_0\.8fr\]{grid-template-columns:1.2fr .8fr}.md\:p-10{padding:2.5rem}.md\:p-14{padding:3.5rem}.md\:p-8{padding:2rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:pb-20{padding-bottom:5rem}.md\:pt-12{padding-top:3rem}.md\:text-\[12px\]{font-size:12px}.md\:text-\[140px\]{font-size:140px}.md\:text-\[17px\]{font-size:17px}.md\:text-\[32px\]{font-size:32px}.md\:text-\[34px\]{font-size:34px}.md\:text-\[40px\]{font-size:40px}.md\:text-\[52px\]{font-size:52px}.data-\[even\=true\]\:md\:ml-0[data-even=true]{margin-left:0}.data-\[even\=true\]\:md\:mr-\[54\%\][data-even=true]{margin-right:54%}.md\:data-\[even\=true\]\:ml-0[data-even=true]{margin-left:0}}@media (min-width:1024px){.lg\:block{display:block}.lg\:h-\[680px\]{height:680px}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}}} .opp-process-root *{font-family:"Noto Sans TC",Inter,sans-serif;letter-spacing:2px!important;} .opp-process-root h1,.opp-process-root h2,.opp-process-root h3{line-height:1.25;} .opp-process-root p{line-height:2;} .opp-process-root .serif{font-family:"Instrument Serif",Georgia,serif;} @keyframes opp-process-floatY{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-10px) rotate(var(--rot))}} @keyframes opp-process-dashMove{to{stroke-dashoffset:-40}} .opp-process-root [style*="floatY"]{animation-name:opp-process-floatY!important;} .opp-process-root .dot-grid{background-image:radial-gradient(#14395E 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.06;} .opp-process-faq-item summary{list-style:none;} .opp-process-faq-item summary::-webkit-details-marker{display:none;} .opp-process-faq-item[open]{background:#fff;border-color:#E8F0D8;box-shadow:0 20px 50px -30px rgba(20,57,94,.3);} .opp-process-faq-item[open] .opp-process-faq-num{background:#14395E;color:#fff;border-color:#14395E;} .opp-process-faq-item[open] .opp-process-faq-toggle{transform:rotate(180deg);} .opp-process-root section[id]{scroll-margin-top:200px;} .opp-process-root a:focus-visible,.opp-process-faq-item summary:focus-visible{outline:3px solid #7AC143;outline-offset:3px;} @media(max-width:767px){.opp-process-root section[id]{scroll-margin-top:150px;}} @media(prefers-reduced-motion:reduce){.opp-process-root [style*="floatY"]{animation:none!important;}.opp-process-root *{scroll-behavior:auto!important;}} /* 合作流程頁已含最後洽詢區；網站正式頁尾完成前，不顯示預設版權區。 */ body.page-id-344 #site-footer{display:none;} /* 合作流程分類列：沿用服務範疇頁的外觀，隨頁面正常捲動。 */ body.page-id-344 .opp-process-builder--1{position:relative!important;background:rgba(255,254,251,.9);border-block:1px solid #eae6de;backdrop-filter:blur(16px);} body.page-id-344 #opp-process-nav{display:flex;align-items:center;gap:34px;overflow-x:auto;width:100%;max-width:1600px;min-height:52px;margin:auto;padding-inline:48px;white-space:nowrap;} body.page-id-344 #opp-process-nav a{align-self:stretch;display:flex;align-items:center;color:#6b6b6b;text-decoration:none;font-size:13px;font-weight:400;} body.page-id-344 #opp-process-nav a:hover,body.page-id-344 #opp-process-nav a:focus{color:#14395e;box-shadow:inset 0 -2px #4caf6b;} body.page-id-344 #opp-process-nav span{margin-left:auto;color:#6b6b6b;font-size:11px;} @media(max-width:1023px){body.page-id-344 #opp-process-nav{padding-inline:40px;}} @media(max-width:767px){body.page-id-344 #opp-process-nav{gap:23px;padding-inline:24px;}body.page-id-344 #opp-process-nav span{display:none;}} /* 常見問題頁：獨立 Elementor Flexbox 區塊，沿用示意稿的 1600px 版心。 */ body.page-id-299 .page-header{display:none;} .opp-faq{--faq-navy:#14395e;--faq-green:#7ac143;--faq-cream:#fff9f0;--faq-pale:#f2f8ec;--faq-border:#e2e8f0;display:block!important;width:100%;max-width:none!important;padding:0!important;color:var(--faq-navy);background:#fff;letter-spacing:2px;overflow:clip;} .opp-faq,.opp-faq *,.opp-faq *::before,.opp-faq *::after{box-sizing:border-box;} .opp-faq .e-con{max-width:none;} .opp-faq .elementor-widget,.opp-faq .elementor-widget-container{min-width:0;} .opp-faq .elementor-heading-title,.opp-faq .elementor-widget-text-editor,.opp-faq .elementor-button{font-family:inherit;letter-spacing:2px;} .opp-faq .elementor-heading-title{margin:0;line-height:inherit;} .opp-faq .elementor-widget-text-editor p{margin:0;} .opp-faq .opp-faq__wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:40px;} .opp-faq .opp-faq__breadcrumb{border-bottom:1px solid #f1f5f9;background:#fff;} .opp-faq .opp-faq__breadcrumb .opp-faq__wrap{min-height:48px;justify-content:center;} .opp-faq .opp-faq__breadcrumb-widget,.opp-faq .opp-faq__breadcrumb-widget *{font-size:13px;color:#68788a;} .opp-faq .opp-faq__hero{position:relative;padding-block:70px;background:linear-gradient(112deg,#fff9f0 0%,#fff9f0 42%,#f2f8ec 100%);overflow:hidden;} .opp-faq .opp-faq__hero::before{content:"?";position:absolute;left:-22px;top:-65px;font-size:230px;line-height:1;color:rgba(20,57,94,.045);font-weight:800;pointer-events:none;} .opp-faq .opp-faq__hero::after{content:"?";position:absolute;right:11%;bottom:-100px;font-size:250px;line-height:1;color:rgba(122,193,67,.07);font-weight:800;pointer-events:none;} .opp-faq .opp-faq__hero-grid{position:relative;z-index:1;display:flex!important;flex-direction:row;align-items:center;gap:clamp(40px,5vw,80px);} .opp-faq .opp-faq__hero-grid::before{content:"?";position:absolute;left:45%;top:84%;width:1em;height:1em;transform:translate(-50%,-50%);z-index:0;font-size:clamp(220px,20vw,310px);font-weight:800;line-height:1;text-align:center;color:rgba(20,57,94,.06);pointer-events:none;} .opp-faq .opp-faq__hero-copy{flex:1.1;min-width:0;align-items:flex-start;gap:0;} .opp-faq .opp-faq__hero-visual{flex:.9;min-width:0;} .opp-faq .opp-faq__hero-copy,.opp-faq .opp-faq__hero-visual{position:relative;z-index:1;} .opp-faq .opp-faq__eyebrow .elementor-heading-title{color:#5d9d2d!important;font-size:13px;font-weight:800;text-transform:uppercase;} .opp-faq .opp-faq__eyebrow::before{content:"";display:inline-block;width:31px;height:2px;margin-right:12px;vertical-align:middle;background:var(--faq-green);} .opp-faq .opp-faq__h1{margin-top:22px;} .opp-faq .opp-faq__h1 .elementor-heading-title{font-size:clamp(34px,3.1vw,48px);font-weight:800;line-height:1.22;color:var(--faq-navy)!important;} .opp-faq .opp-faq__lead{max-width:680px;margin-top:25px;} .opp-faq .opp-faq__lead p{font-size:17px;line-height:1.9;color:#526273;} .opp-faq .opp-faq__hero-pills,.opp-faq .opp-faq__hero-actions,.opp-faq .opp-faq__hero-points{display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center;} .opp-faq .opp-faq__hero-pills{gap:10px;margin-top:30px;} .opp-faq .opp-faq__pill{width:auto;} .opp-faq .opp-faq__pill .elementor-button{padding:10px 14px;border:1px solid var(--faq-border);border-radius:999px;background:#fff;color:var(--faq-navy);font-size:13px;font-weight:600;line-height:1.2;box-shadow:none;} .opp-faq .opp-faq__pill .elementor-button:hover,.opp-faq .opp-faq__pill .elementor-button:focus-visible{border-color:var(--faq-green);background:var(--faq-pale);} .opp-faq .opp-faq__hero-actions{gap:12px;margin-top:30px;} .opp-faq .opp-faq__button{width:auto;} .opp-faq .opp-faq__button .elementor-button{display:inline-flex;align-items:center;min-height:50px;padding:13px 24px;border-radius:999px;font-size:15px;font-weight:800;line-height:1.4;} .opp-faq .opp-faq__button-primary .elementor-button{background-color:#00863c!important;color:#fff!important;box-shadow:0 8px 20px rgba(0,105,48,.15);} .opp-faq .opp-faq__button-light .elementor-button{border:1px solid var(--faq-border);background-color:#fff!important;color:var(--faq-navy)!important;} .opp-faq .opp-faq__hero-points{gap:10px 18px;margin-top:26px;} .opp-faq .opp-faq__hero-point{width:auto;} .opp-faq .opp-faq__hero-point .elementor-heading-title{font-size:13px;font-weight:600;color:#5e6f7c;} .opp-faq .opp-faq__hero-note{display:block!important;max-width:660px;margin-top:28px;padding:20px 22px;border:1px solid var(--faq-border);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(20,57,94,.055);} .opp-faq .opp-faq__hero-note-title .elementor-heading-title{font-size:16px;font-weight:800;color:var(--faq-navy);} .opp-faq .opp-faq__hero-note-text{margin-top:7px;} .opp-faq .opp-faq__hero-note-text p{font-size:14px;line-height:1.8;color:#5a6875;} .opp-faq-visual{position:relative;width:100%;max-width:620px;margin:20px auto;padding:0;letter-spacing:2px;} .opp-faq-visual::before,.opp-faq-visual::after{content:"";position:absolute;z-index:0;width:220px;height:220px;border-radius:50%;filter:blur(28px);pointer-events:none;} .opp-faq-visual::before{right:-26px;top:-28px;background:rgba(122,193,67,.17);} .opp-faq-visual::after{left:-20px;bottom:-26px;background:rgba(20,57,94,.1);} .opp-faq-visual__window{position:relative;z-index:1;padding:32px 35px 46px;border:1px solid var(--faq-border);border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(20,57,94,.13);} .opp-faq-visual__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;color:#92a0ae;font-size:11px;font-weight:700;letter-spacing:2px;} .opp-faq-visual__dots{display:flex;gap:6px;} .opp-faq-visual__dots i{width:10px;height:10px;border-radius:50%;background:#ff625c;} .opp-faq-visual__dots i:nth-child(2){background:#ffc04f;}.opp-faq-visual__dots i:nth-child(3){background:var(--faq-green);} .opp-faq-visual__questions{display:grid;gap:12px;} .opp-faq-visual__question{display:flex;align-items:center;gap:14px;min-height:68px;margin:0;padding:12px 17px;border:1px solid var(--faq-border);border-radius:14px;background:#f8fafc;color:var(--faq-navy);font-size:14px;font-weight:700;letter-spacing:2px;} .opp-faq-visual__question:nth-child(2){transform:translateX(6px) rotate(.6deg);} .opp-faq-visual__question:nth-child(3){transform:translateX(12px) rotate(1.2deg);} .opp-faq-visual__question.is-active{margin:0;border-color:#287451;background:#287451;color:#fff;transform:rotate(-1deg);box-shadow:0 8px 20px rgba(28,100,64,.18);} .opp-faq-visual__question b{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--faq-border);border-radius:50%;background:#fff;color:var(--faq-navy);font-size:13px;} .opp-faq-visual__question em{display:grid;place-items:center;width:25px;height:25px;flex:none;margin-left:auto;border:1px solid var(--faq-border);border-radius:50%;background:#fff;color:var(--faq-green);font-size:14px;font-style:normal;} .opp-faq-visual__question.is-active em{border-color:var(--faq-green);background:var(--faq-green);color:#fff;} .opp-faq-visual__answer{display:block;margin-top:20px;padding:17px 19px;border:1px solid #d7eabe;border-radius:13px;background:var(--faq-pale);font-size:13px;line-height:1.7;color:#495d48;letter-spacing:2px;} .opp-faq-visual__answer-title{display:flex;align-items:center;gap:10px;margin-bottom:9px;color:var(--faq-navy);font-size:12px;} .opp-faq-visual__answer b{display:grid;place-items:center;width:23px;height:23px;flex:none;border-radius:50%;background:var(--faq-green);color:#fff;} .opp-faq-visual__answer p{margin:0;} .opp-faq-visual__coverage{position:absolute;top:-15px;right:9px;display:flex;align-items:center;gap:7px;min-height:36px;padding:0 15px;border-radius:999px;background:var(--faq-green);color:#fff;font-size:11px;transform:rotate(4deg);box-shadow:0 8px 20px rgba(122,193,67,.4);white-space:nowrap;} .opp-faq-visual__coverage strong{font-size:13px;} .opp-faq-visual__support{position:absolute;left:8px;bottom:75px;display:grid;gap:1px;padding:9px 13px;border-radius:10px;background:var(--faq-navy);color:#fff;transform:rotate(-3deg);box-shadow:0 8px 20px rgba(20,57,94,.3);} .opp-faq-visual__support small{opacity:.7;font-size:10px;} .opp-faq-visual__support strong{font-size:12px;} .opp-faq-visual__support strong span{color:var(--faq-green);} .opp-faq-visual__mini{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;color:var(--faq-navy);} .opp-faq-visual__mini > div{display:flex;align-items:center;gap:12px;min-width:0;padding:13px;border:1px solid var(--faq-border);border-radius:12px;background:#fff;box-shadow:0 6px 15px rgba(20,57,94,.05);} .opp-faq-visual__mini-icon{display:grid;place-items:center;width:33px;height:33px;flex:none;border:1px solid var(--faq-border);border-radius:8px;background:#fff9f0;font-size:15px;} .opp-faq-visual__mini > div:last-child .opp-faq-visual__mini-icon{background:var(--faq-pale);} .opp-faq-visual__mini > div > span:last-child{display:grid;gap:2px;min-width:0;} .opp-faq-visual__mini strong{font-size:12px;} .opp-faq-visual__mini small{font-size:11px;color:#64748b;} .opp-faq .opp-faq__navigation{position:relative;width:100%;padding:0;border-block:1px solid #eae6de;background:rgba(255,254,251,.9);backdrop-filter:blur(16px);} .opp-faq .opp-faq__navigation-inner{display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:34px;min-height:52px;padding:0 48px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;} .opp-faq .opp-faq__navigation-inner::-webkit-scrollbar{display:none;} .opp-faq .opp-faq__navigation-label,.opp-faq .opp-faq__navigation-count{width:auto;flex:none;white-space:nowrap;} .opp-faq .opp-faq__navigation-label .elementor-heading-title{color:#6b6b6b;font-size:11px;font-weight:400;} .opp-faq .opp-faq__navigation-count{margin-left:auto;} .opp-faq .opp-faq__navigation-count .elementor-heading-title{color:#6b6b6b;font-size:11px;font-weight:400;} .opp-faq .opp-faq__navigation-count .elementor-heading-title::before{content:"•　";} .opp-faq .opp-faq__nav-button{align-self:stretch;width:auto;flex:none;} .opp-faq .opp-faq__nav-button .elementor-widget-container{height:100%;} .opp-faq .opp-faq__nav-button .elementor-button{display:flex;align-items:center;height:100%;min-height:52px;padding:0;border:0;border-radius:0;background:transparent!important;color:#6b6b6b!important;box-shadow:none;font-size:13px;font-weight:400;line-height:1.4;text-decoration:none;} .opp-faq .opp-faq__nav-button .elementor-button:hover,.opp-faq .opp-faq__nav-button .elementor-button:focus-visible{background:transparent!important;color:var(--faq-navy)!important;box-shadow:inset 0 -2px var(--faq-green);} .opp-faq .opp-faq__main{padding-block:65px 80px;} .opp-faq .opp-faq__main-grid{display:flex!important;flex-direction:row;align-items:flex-start;gap:52px;} .opp-faq .opp-faq__left{flex:1;min-width:0;gap:0;} .opp-faq .opp-faq__sidebar{width:320px;flex:none;gap:22px;} .opp-faq .opp-faq__category{width:100%;margin-bottom:58px;scroll-margin-top:190px;} .opp-faq .opp-faq__category-head{display:flex!important;flex-direction:row;align-items:flex-start;gap:16px;margin-bottom:21px;} .opp-faq .opp-faq__category-icon{display:grid!important;place-items:center;width:48px;height:48px;flex:none;border-radius:13px;background:#397a61;box-shadow:0 8px 20px rgba(34,105,75,.16);} .opp-faq .opp-faq__category-num .elementor-heading-title{color:var(--faq-green);font-size:16px;font-weight:800;} .opp-faq .opp-faq__category-copy{flex:1;gap:0;} .opp-faq .opp-faq__category-title-row{display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;} .opp-faq .opp-faq__category-title,.opp-faq .opp-faq__category-en{width:auto;} .opp-faq .opp-faq__category-title .elementor-heading-title{font-size:22px;font-weight:800;color:var(--faq-navy)!important;} .opp-faq .opp-faq__category-en .elementor-heading-title{padding:5px 8px;border:1px solid #dce9ce;border-radius:999px;background:var(--faq-pale);color:#5b8e33;font-size:11px;font-weight:800;letter-spacing:1px;} .opp-faq .opp-faq__category-desc{margin-top:5px;} .opp-faq .opp-faq__category-desc p{color:#697785;font-size:14px;line-height:1.8;} .opp-faq .opp-faq__accordion{width:100%;} .opp-faq .opp-faq__accordion .elementor-accordion{counter-reset:oppfaq;border:1px solid var(--faq-border);border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 5px 25px rgba(20,57,94,.045);} .opp-faq .opp-faq__accordion .elementor-accordion-item{border:0;border-bottom:1px solid #eef2f7;} .opp-faq .opp-faq__accordion .elementor-accordion-item:last-child{border-bottom:0;} .opp-faq .opp-faq__accordion .elementor-tab-title{display:flex;align-items:center;min-height:72px;padding:17px 22px!important;border-left:3px solid transparent;color:var(--faq-navy);font-size:16px;font-weight:800;line-height:1.55;letter-spacing:2px;} .opp-faq .opp-faq__accordion .elementor-tab-title::before{counter-increment:oppfaq;content:counter(oppfaq,decimal-leading-zero);display:grid;place-items:center;width:28px;height:28px;flex:none;margin-right:13px;border-radius:50%;background:#f1f5f9;color:#66778b;font-size:11px;font-weight:800;letter-spacing:0;} .opp-faq .opp-faq__accordion .elementor-tab-title a{color:inherit;flex:1;text-decoration:none;} .opp-faq .opp-faq__accordion .elementor-tab-title .elementor-accordion-icon{order:3;width:31px;height:31px;flex:none;margin-left:12px;border:1px solid var(--faq-border);border-radius:50%;background:#fff;text-align:center;line-height:31px;color:#68788a;} .opp-faq .opp-faq__accordion .elementor-tab-title.elementor-active{border-left-color:var(--faq-green);background:rgba(242,248,236,.72);} .opp-faq .opp-faq__accordion .elementor-tab-title.elementor-active::before{background:var(--faq-navy);color:#fff;} .opp-faq .opp-faq__accordion .elementor-tab-content{padding:4px 26px 24px 66px!important;border:0;color:#566575;font-size:15px;line-height:1.9;letter-spacing:2px;} .opp-faq .opp-faq__accordion .elementor-tab-content p{margin:0;} .opp-faq .opp-faq__sidebar .opp-faq__side-card{width:100%;padding:23px;border:1px solid var(--faq-border);border-radius:17px;background:#fff;} .opp-faq .opp-faq__side-title .elementor-heading-title{font-size:17px;font-weight:800;color:var(--faq-navy);} .opp-faq .opp-faq__side-text{margin-top:12px;} .opp-faq .opp-faq__side-text p{color:#62717e;font-size:14px;line-height:1.8;} .opp-faq .opp-faq__side-button{margin-top:14px;} .opp-faq .opp-faq__side-button .elementor-button{width:100%;min-height:43px;padding:12px 15px;border-radius:11px;background-color:#00863c!important;color:#fff!important;font-size:14px;font-weight:700;} .opp-faq .opp-faq__side-button:not(.opp-faq__side-button-light) .elementor-button:hover,.opp-faq .opp-faq__side-button:not(.opp-faq__side-button-light) .elementor-button:focus-visible{background-color:#006f32!important;color:#fff!important;} .opp-faq .opp-faq__side-button .elementor-button-icon{color:inherit;font-size:18px;} .opp-faq .opp-faq__side-button-light{margin-top:8px;} .opp-faq .opp-faq__side-button-light .elementor-button{border:1px solid #dce9ce;background-color:var(--faq-pale)!important;color:var(--faq-navy)!important;} .opp-faq .opp-faq__side-reminder{background:#f1f7ed!important;border-color:#dcebd5!important;} .opp-faq .opp-faq__side-reminder .elementor-heading-title,.opp-faq .opp-faq__side-reminder p{color:var(--faq-navy)!important;} .opp-faq .opp-faq__side-reminder p{opacity:1;} .opp-faq .opp-faq__side-count{background:var(--faq-cream)!important;} .opp-faq .opp-faq__why{border:1px solid var(--faq-border);border-radius:20px;overflow:hidden;} .opp-faq .opp-faq__why-head{padding:28px 34px;background:#eef5e9;} .opp-faq .opp-faq__why-kicker .elementor-heading-title{font-size:12px;font-weight:800;color:#336f43;} .opp-faq .opp-faq__why-title{margin-top:8px;} .opp-faq .opp-faq__why-title .elementor-heading-title{font-size:22px;font-weight:800;color:var(--faq-navy)!important;} .opp-faq .opp-faq__why-intro{margin-top:8px;} .opp-faq .opp-faq__why-intro p{font-size:14px;line-height:1.8;color:#405764;} .opp-faq .opp-faq__why-grid{display:flex!important;flex-direction:row;background:#fcfdf8;} .opp-faq .opp-faq__why-card{flex:1;padding:27px;border-right:1px solid var(--faq-border);} .opp-faq .opp-faq__why-card:last-child{border-right:0;} .opp-faq .opp-faq__why-card-title .elementor-heading-title{font-size:15px;font-weight:800;color:var(--faq-navy);} .opp-faq .opp-faq__why-card-text{margin-top:9px;} .opp-faq .opp-faq__why-card-text p{font-size:14px;line-height:1.75;color:#607080;} .opp-faq .opp-faq__cta{position:relative;padding-block:70px;background:#eaf4e7;} .opp-faq .opp-faq__cta::after{content:"";position:absolute;right:-70px;top:-130px;width:420px;height:420px;border-radius:50%;background:rgba(122,193,67,.14);filter:blur(40px);pointer-events:none;} .opp-faq .opp-faq__cta-inner{position:relative;z-index:1;display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;} .opp-faq .opp-faq__cta-copy{flex:1;min-width:0;} .opp-faq .opp-faq__cta-kicker .elementor-heading-title{display:inline-block;padding:7px 12px;border:1px solid #c9e2c5;border-radius:999px;background:#fff;color:#306d3e;font-size:12px;font-weight:700;} .opp-faq .opp-faq__cta-title{margin-top:16px;} .opp-faq .opp-faq__cta-title .elementor-heading-title{color:var(--faq-navy)!important;font-size:clamp(29px,2.6vw,40px);line-height:1.3;font-weight:800;} .opp-faq .opp-faq__cta-text{max-width:640px;margin-top:16px;} .opp-faq .opp-faq__cta-text p{color:#405764;font-size:15px;line-height:1.85;} .opp-faq .opp-faq__cta-actions{display:flex!important;flex-direction:row;gap:12px;} .opp-faq .opp-faq__cta-button{width:auto;} .opp-faq .opp-faq__cta-button .elementor-button{min-height:48px;padding:14px 25px;border-radius:999px;font-size:15px;font-weight:800;white-space:nowrap;} .opp-faq .opp-faq__cta-button-green .elementor-button{background-color:#00863c!important;color:#fff!important;} .opp-faq .opp-faq__cta-button-green .elementor-button:hover,.opp-faq .opp-faq__cta-button-green .elementor-button:focus-visible{background-color:#006f32!important;color:#fff!important;} .opp-faq .opp-faq__cta-button-white .elementor-button{background-color:#fff!important;color:var(--faq-navy)!important;} .opp-faq a:focus-visible,.opp-faq .elementor-tab-title:focus-visible{outline:3px solid var(--faq-green);outline-offset:3px;} @media(max-width:1100px){.opp-faq .opp-faq__main-grid{gap:30px;}.opp-faq .opp-faq__sidebar{width:280px;}.opp-faq .opp-faq__hero-grid{gap:35px;}.opp-faq .opp-faq__wrap{padding-inline:32px;}} @media(max-width:900px){.opp-faq .opp-faq__hero-grid,.opp-faq .opp-faq__main-grid{flex-direction:column;}.opp-faq .opp-faq__hero-copy,.opp-faq .opp-faq__hero-visual,.opp-faq .opp-faq__left,.opp-faq .opp-faq__sidebar{width:100%;flex:none;}.opp-faq .opp-faq__hero-visual{max-width:620px;margin:auto;}.opp-faq .opp-faq__sidebar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));}.opp-faq .opp-faq__side-count{grid-column:1/-1;}.opp-faq .opp-faq__main{padding-block:55px;}} @media(max-width:767px){.opp-faq .opp-faq__wrap{padding-inline:22px;}.opp-faq .opp-faq__hero{padding-block:44px 52px;}.opp-faq .opp-faq__h1 .elementor-heading-title{font-size:32px;}.opp-faq .opp-faq__lead p{font-size:16px;}.opp-faq .opp-faq__hero-grid{gap:30px;}.opp-faq .opp-faq__hero-visual{width:100%;}.opp-faq .opp-faq__navigation-inner{gap:8px;min-height:58px;}.opp-faq .opp-faq__navigation-count{display:none;}.opp-faq .opp-faq__main{padding-block:45px 62px;}.opp-faq .opp-faq__category{margin-bottom:45px;}.opp-faq .opp-faq__category-title .elementor-heading-title{font-size:19px;}.opp-faq .opp-faq__category-desc p{font-size:13px;}.opp-faq .opp-faq__accordion .elementor-tab-title{font-size:15px;min-height:70px;padding-inline:16px!important;}.opp-faq .opp-faq__accordion .elementor-tab-content{padding:5px 20px 22px 58px!important;font-size:14px;}.opp-faq .opp-faq__sidebar{display:flex!important;flex-direction:column;}.opp-faq .opp-faq__why-grid,.opp-faq .opp-faq__cta-inner,.opp-faq .opp-faq__cta-actions{flex-direction:column;align-items:stretch;}.opp-faq .opp-faq__why-card{border-right:0;border-bottom:1px solid var(--faq-border);}.opp-faq .opp-faq__why-card:last-child{border-bottom:0;}.opp-faq .opp-faq__cta{padding-block:55px;}.opp-faq .opp-faq__cta-title .elementor-heading-title{font-size:29px;}.opp-faq .opp-faq__cta-button{width:100%;}.opp-faq .opp-faq__cta-button .elementor-button{width:100%;}.opp-faq-visual__window{padding:18px;}.opp-faq-visual__question{font-size:12px;}.opp-faq-visual__mini{font-size:10px;}} @media(max-width:1023px){.opp-faq .opp-faq__navigation-inner{padding-inline:40px;}.opp-faq .opp-faq__category{scroll-margin-top:160px;}} @media(max-width:767px){.opp-faq .opp-faq__navigation-inner{gap:23px;min-height:52px;padding-inline:24px;}.opp-faq .opp-faq__navigation-label{display:none;}.opp-faq .opp-faq__category{scroll-margin-top:145px;}} /* FAQ 參考版：導覽下方四組問答、合作說明與側欄。 */ .opp-faq .opp-faq__main{padding-block:64px 80px;letter-spacing:2px;} .opp-faq .opp-faq__main-grid{gap:48px;} .opp-faq .opp-faq__left{counter-reset:faqsections;} .opp-faq .opp-faq__sidebar{position:sticky;top:190px;gap:24px;} .opp-faq .opp-faq__category{counter-increment:faqsections;margin-bottom:56px;} .opp-faq .opp-faq__category-head{gap:16px;margin-bottom:22px;} .opp-faq .opp-faq__category-head::after{content:"#0" counter(faqsections);margin-left:auto;color:#a7b5c5;font-size:11px;line-height:1.6;letter-spacing:2px;} .opp-faq .opp-faq__category-icon{position:relative;width:44px;height:44px;border-radius:12px;box-shadow:0 8px 20px rgba(20,57,94,.2);} .opp-faq .opp-faq__category-num{display:none;} .opp-faq .opp-faq__category-icon::before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:center;background-size:contain;} .opp-faq #opp-faq-planning .opp-faq__category-icon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");} .opp-faq #opp-faq-process .opp-faq__category-icon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4.5 4.5'/%3E%3C/svg%3E");} .opp-faq #opp-faq-assets .opp-faq__category-icon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM14 2v4a2 2 0 0 0 2 2h4M8 13h8M8 17h8'/%3E%3C/svg%3E");} .opp-faq #opp-faq-maintenance .opp-faq__category-icon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E");} .opp-faq .opp-faq__category-title .elementor-heading-title{font-size:20px;} .opp-faq .opp-faq__category-en .elementor-heading-title{font-size:10px;letter-spacing:2px;} .opp-faq .opp-faq__category-desc p{font-size:13px;line-height:1.7;} .opp-faq .opp-faq__accordion .elementor-tab-title{min-height:69px;padding:17px 24px!important;font-size:15px;line-height:1.5;letter-spacing:2px;} .opp-faq .opp-faq__accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{border-color:var(--faq-navy);background:var(--faq-navy);color:#fff;} .opp-faq .opp-faq__accordion .elementor-tab-content{padding:8px 26px 24px 60px!important;font-size:14px;line-height:1.8;letter-spacing:2px;} .opp-faq .opp-faq__accordion .elementor-tab-content::after{display:inline-flex;align-items:center;min-height:24px;margin-top:14px;padding:3px 9px;border:1px solid var(--faq-border);border-radius:999px;background:#fff;color:#748396;font-size:10px;letter-spacing:2px;} .opp-faq #opp-faq-planning .elementor-tab-content::after{content:"#報價付款";} .opp-faq #opp-faq-process .elementor-tab-content::after{content:"#時程";} .opp-faq #opp-faq-assets .elementor-tab-content::after{content:"#素材準備";} .opp-faq #opp-faq-maintenance .elementor-tab-content::after{content:"#主機維護";} .opp-faq .opp-faq__sidebar .opp-faq__side-card{padding:20px;border-radius:16px;} .opp-faq .opp-faq__side-title .elementor-heading-title{font-size:13px;} .opp-faq .opp-faq__side-contact .opp-faq__side-title .elementor-heading-title::before{content:"♧";margin-right:9px;color:var(--faq-green);font-size:19px;vertical-align:-2px;} .opp-faq .opp-faq__side-text p{font-size:13px;line-height:1.7;} .opp-faq .opp-faq__side-button .elementor-button{min-height:44px;border-radius:12px;font-size:13px;} .opp-faq .opp-faq__side-contact::after{content:"• 快速回覆與親自溝通\A • 提供透明報價與服務項目";white-space:pre-line;display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--faq-border);color:#728196;font-size:11px;line-height:1.6;letter-spacing:2px;} .opp-faq .opp-faq__side-reminder .elementor-heading-title{color:#3d7445!important;font-size:11px;} .opp-faq .opp-faq__side-reminder ul{margin:12px 0 0;padding-left:16px;color:var(--faq-navy);font-size:13px;line-height:1.65;} .opp-faq .opp-faq__side-reminder li{margin-top:10px;padding-left:2px;} .opp-faq .opp-faq__side-reminder li::marker{color:var(--faq-green);} .opp-faq .opp-faq__side-count .opp-faq__side-title .elementor-heading-title{font-size:13px;letter-spacing:2px;} .opp-faq .opp-faq__side-count .opp-faq__side-number{display:block;width:100%;margin-top:12px;} .opp-faq .opp-faq__side-count .opp-faq__side-number .elementor-heading-title{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:2px;color:var(--faq-navy);} .opp-faq .opp-faq__side-count .opp-faq__side-text{margin-top:0;padding-left:0;} .opp-faq .opp-faq__side-count .opp-faq__side-text p{margin:0;color:#405b6e;font-size:14px;line-height:1.8;letter-spacing:2px;} .opp-faq .opp-faq__side-count .opp-faq__side-text p::before{display:none;} .opp-faq .opp-faq__promise-rule{width:48px;height:3px;margin:14px 0 16px;border-radius:3px;background:var(--faq-green);} .opp-faq .opp-faq__why-card-title .elementor-heading-title{font-size:12px;} .opp-faq .opp-faq__why-card-text p{font-size:13px;line-height:1.7;} /* 對齊參考頁：移除 Elementor Flexbox 容器逐層疊加的預設內距與間距。 */ .opp-faq .opp-faq__main{padding:64px 0!important;} .opp-faq .opp-faq__main-grid{padding:0 40px!important;gap:48px!important;} .opp-faq .opp-faq__left,.opp-faq .opp-faq__category,.opp-faq .opp-faq__category-head,.opp-faq .opp-faq__category-copy,.opp-faq .opp-faq__category-title-row,.opp-faq .opp-faq__sidebar,.opp-faq .opp-faq__why,.opp-faq .opp-faq__why-grid{padding:0!important;} .opp-faq .opp-faq__left,.opp-faq .opp-faq__category,.opp-faq .opp-faq__category-copy,.opp-faq .opp-faq__why,.opp-faq .opp-faq__why-head,.opp-faq .opp-faq__why-grid,.opp-faq .opp-faq__why-card,.opp-faq .opp-faq__sidebar .opp-faq__side-card{gap:0!important;} .opp-faq .opp-faq__category{margin-bottom:56px;} .opp-faq .opp-faq__category-head{margin-bottom:24px;} .opp-faq .opp-faq__category-title-row{gap:8px!important;} .opp-faq .opp-faq__category-desc{margin-top:4px;} .opp-faq .opp-faq__category-desc p{line-height:1.5;} .opp-faq .opp-faq__accordion .elementor-tab-title{min-height:68px;} .opp-faq .opp-faq__accordion .elementor-tab-content{padding-bottom:17px!important;} .opp-faq .opp-faq__sidebar{gap:24px!important;} .opp-faq .opp-faq__sidebar .opp-faq__side-card{padding:20px!important;} .opp-faq .opp-faq__side-text{margin-top:12px;} .opp-faq .opp-faq__side-button{margin-top:16px;} .opp-faq .opp-faq__side-button-light{margin-top:8px;} .opp-faq .opp-faq__accordion .elementor-tab-content::after{display:table;width:max-content;max-width:100%;clear:both;white-space:nowrap;} .opp-faq .opp-faq__why-head{padding:24px 32px!important;} .opp-faq .opp-faq__why-title .elementor-heading-title{line-height:1.35;} .opp-faq .opp-faq__why-intro p{line-height:1.6;} .opp-faq .opp-faq__why-grid{gap:0!important;} .opp-faq .opp-faq__why-card{padding:24px!important;} .opp-faq .opp-faq__why-card-text{margin-top:8px;} .opp-faq .opp-faq__side-contact .opp-faq__side-title .elementor-heading-title{line-height:1.5;} .opp-faq .opp-faq__side-contact .opp-faq__side-title .elementor-heading-title::before{font-size:15px;vertical-align:0;} .opp-faq .opp-faq__cta{padding:72px 0!important;} .opp-faq .opp-faq__cta-inner{padding:0 40px!important;gap:40px!important;} .opp-faq .opp-faq__cta-copy{width:auto!important;flex:1 1 0!important;min-width:0;padding:0!important;gap:0!important;} .opp-faq .opp-faq__cta-actions{width:auto!important;max-width:100%;flex:0 0 auto!important;padding:0!important;gap:12px!important;} .opp-faq .opp-faq__cta-button{width:auto!important;flex:0 0 auto!important;} @media(max-width:900px){.opp-faq .opp-faq__main-grid{padding-inline:32px!important;}.opp-faq .opp-faq__cta-inner{padding-inline:32px!important;}} @media(max-width:767px){.opp-faq .opp-faq__main{padding:45px 0 62px!important;}.opp-faq .opp-faq__main-grid,.opp-faq .opp-faq__cta-inner{padding-inline:22px!important;}.opp-faq .opp-faq__category{margin-bottom:45px;}.opp-faq .opp-faq__cta{padding:55px 0!important;}.opp-faq .opp-faq__cta-actions{width:100%!important;flex-direction:column;}} @media(max-width:900px){.opp-faq .opp-faq__sidebar{position:static;width:100%;}} @media(max-width:767px){.opp-faq .opp-faq__category-head::after{display:none;}.opp-faq .opp-faq__category-title .elementor-heading-title{font-size:19px;}.opp-faq .opp-faq__accordion .elementor-tab-content{padding:6px 20px 22px 58px!important;}} /* 合作洽詢：與既有頁面共用品牌色，所有規則限縮在獨立 Elementor 容器。 */ .opp-contact{--contact-navy:#14395e;--contact-green:#7ac143;--contact-ink:#173651;--contact-muted:#5c6b78;--contact-border:#e1e9e4;width:100%;padding:0;overflow-x:clip;letter-spacing:2px;color:var(--contact-ink);} .opp-contact,.opp-contact *{box-sizing:border-box;} .opp-contact .elementor-widget{width:100%;margin-block-end:0;} .opp-contact .elementor-widget-container p{margin:0;} .opp-contact .e-con{--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--gap:0px;gap:0;} .opp-contact .opp-contact__hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#fff9f0 0%,#fff 52%,#f2f8ec 100%);} .opp-contact .opp-contact__hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(100% + 120px) -160px,rgba(122,193,67,.2) 0 260px,transparent 430px),radial-gradient(circle at -120px calc(100% + 180px),rgba(20,57,94,.1) 0 240px,transparent 430px),radial-gradient(circle at 42% 28%,rgba(122,193,67,.1) 0 150px,transparent 300px),radial-gradient(circle at 1px 1px,rgba(20,57,94,.035) 1px,transparent 0);background-size:auto,auto,auto,24px 24px;} .opp-contact .opp-contact__hero-inner{position:relative;width:min(1600px,100%);margin-inline:auto;padding:96px 40px;display:flex!important;flex-direction:row;align-items:center;gap:40px;} .opp-contact .opp-contact__hero-copy{display:flex!important;flex-direction:column;flex:1.08;min-width:0;} .opp-contact .opp-contact__hero-art{flex:.92;min-width:0;align-items:center;justify-content:center;} .opp-contact .opp-contact__eyebrow .elementor-widget-container{display:flex;align-items:center;flex-wrap:wrap;gap:12px;} .opp-contact .opp-contact__eyebrow p,.opp-contact .opp-contact__section-eyebrow p{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid #edf0f2;border-radius:999px;background:#fff;box-shadow:0 4px 20px rgba(20,57,94,.06);color:#55636f;font-size:11px;font-weight:800;letter-spacing:1.5px;line-height:1.4;} .opp-contact .opp-contact__eyebrow p:first-child::before{content:"";width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--contact-green);box-shadow:0 0 0 4px rgba(122,193,67,.16);} .opp-contact .opp-contact__reply-pill{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid rgba(122,193,67,.2);border-radius:999px;background:#f2f8ec;color:#3c6a1e;font-size:11px;font-weight:800;letter-spacing:1px;} .opp-contact .opp-contact__reply-pill::before{content:"";width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--contact-green);} .opp-contact .opp-contact__h1{margin-top:24px;} .opp-contact .opp-contact__hero .opp-contact__h1.elementor-element .elementor-heading-title{font-size:52px;line-height:1.1;font-weight:900;letter-spacing:2px;color:var(--contact-navy);} .opp-contact .opp-contact__h1-accent{position:relative;isolation:isolate;white-space:nowrap;} .opp-contact .opp-contact__h1-accent::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.15em;height:.42em;border-radius:3px;background:rgba(122,193,67,.3);transform:rotate(-1deg);} .opp-contact .opp-contact__lead,.opp-contact .opp-contact__lead .elementor-widget-container{display:contents;} .opp-contact .opp-contact__lead p{max-width:600px;margin-top:24px;font-size:15.5px;line-height:1.85;letter-spacing:1px;color:var(--contact-muted);} .opp-contact .opp-contact__lead strong,.opp-contact .opp-contact__lead a{font-weight:800;color:var(--contact-navy);} .opp-contact .opp-contact__lead a{text-decoration:underline;text-decoration-color:rgba(122,193,67,.4);text-underline-offset:4px;} .opp-contact .opp-contact__stats{display:grid!important;order:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:560px;margin-top:32px;} .opp-contact .opp-contact__stat{position:relative;overflow:hidden;min-width:0;padding:16px;border:1px solid #edf0f2;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(20,57,94,.04);} .opp-contact .opp-contact__stat::after{content:"";position:absolute;top:-8px;right:-8px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#f2f8ec,transparent);} .opp-contact .opp-contact__stat-value .elementor-heading-title{font-size:24px;line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--contact-navy)!important;} .opp-contact .opp-contact__stat-label{margin-top:7px;} .opp-contact .opp-contact__stat-label .elementor-heading-title{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--contact-navy)!important;} .opp-contact .opp-contact__stat-sub{margin-top:2px;} .opp-contact .opp-contact__stat-sub p{font-size:10px;line-height:1.5;letter-spacing:1px;color:#94a3ad;} .opp-contact .opp-contact__contact-chips{display:flex;order:2;flex-wrap:wrap;gap:10px;margin-top:28px;} .opp-contact .opp-contact__contact-chips a{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 12px;border:1px solid #e1e7e9;border-radius:999px;background:#fff;color:var(--contact-navy);font-size:12px;font-weight:800;letter-spacing:.3px;text-decoration:none;} .opp-contact .opp-contact__contact-chips a:first-child{border-color:rgba(6,199,85,.15);background:rgba(6,199,85,.1);color:#1a7a2f;} .opp-contact .opp-contact__contact-chips i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--contact-navy);color:#fff;font-size:11px;font-style:normal;} .opp-contact .opp-contact__contact-chips a:first-child i{background:#06c755;} .opp-contact .opp-contact__hero-actions{display:flex!important;order:3;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px;} .opp-contact .opp-contact__button{width:auto;} .opp-contact .opp-contact__button .elementor-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:999px;font-size:14px;font-weight:800;letter-spacing:1px;line-height:1.4;text-decoration:none;} .opp-contact .opp-contact__button--primary .elementor-button{background:var(--contact-green);color:#fff!important;box-shadow:0 12px 28px rgba(122,193,67,.35);} .opp-contact .opp-contact__button--primary .elementor-button .elementor-button-text{color:#fff!important;} .opp-contact .opp-contact__button--outline .elementor-button{background:#fff;border:1px solid #dbe2e5;color:var(--contact-navy);} .opp-contact .opp-contact__button .elementor-button:hover{transform:translateY(-2px);} .opp-contact .opp-contact__visual{position:relative;width:100%;max-width:680px;height:560px;display:flex;align-items:center;justify-content:center;} .opp-contact .opp-contact__visual::before{content:"";position:absolute;inset:24px 0 0 24px;border:1px solid rgba(226,235,219,.8);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(251,253,247,.75));} .opp-contact .opp-contact__visual-sheet{position:relative;z-index:2;width:min(78%,440px);padding:24px;border:1px solid rgba(0,0,0,.1);border-radius:28px;background:#fff;box-shadow:0 30px 80px -20px rgba(20,57,94,.25);} .opp-contact .opp-contact__visual-top{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;color:#667885;letter-spacing:1px;white-space:nowrap;} .opp-contact .opp-contact__visual-top strong{font-size:11px;letter-spacing:1px;color:#475564;} .opp-contact .opp-contact__visual-top em{padding:3px 8px;border:1px solid rgba(122,193,67,.2);border-radius:999px;background:#f2f8ec;color:#3c6a1e;font-size:10px;font-style:normal;} .opp-contact .opp-contact__visual-top small{margin-left:auto;font-size:10px;color:#c5cbd0;} .opp-contact .opp-contact__dots{display:inline-flex;gap:5px;} .opp-contact .opp-contact__dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57;} .opp-contact .opp-contact__dots i:nth-child(2){background:#ffbd2e;} .opp-contact .opp-contact__dots i:nth-child(3){background:#28ca42;} .opp-contact .opp-contact__visual-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;} .opp-contact .opp-contact__visual-fields label{display:block;min-width:0;color:var(--contact-navy);font-size:11px;font-weight:800;letter-spacing:.5px;} .opp-contact .opp-contact__visual-fields label>span{display:flex;align-items:center;gap:7px;height:40px;margin-top:7px;padding:0 12px;border:1px solid #e2e8ed;border-radius:12px;background:#fcfcfd;} .opp-contact .opp-contact__visual-line{width:62%;height:7px;border-radius:99px;background:#e2e8ed;} .opp-contact .opp-contact__visual-avatar{width:19px;height:19px;border-radius:50%;background:#e9eef3;} .opp-contact .opp-contact__visual-square{width:15px;height:15px;margin-left:auto;border-radius:3px;background:#edf0f2;} .opp-contact .opp-contact__visual-message{margin-top:16px;color:var(--contact-navy);font-size:11px;letter-spacing:.5px;} .opp-contact .opp-contact__visual-message>span{display:flex;flex-direction:column;gap:8px;height:93px;margin-top:7px;padding:13px;border:1px solid #e2e8ed;border-radius:12px;background:#fcfcfd;} .opp-contact .opp-contact__visual-message i{display:block;width:100%;height:7px;border-radius:99px;background:#edf1f4;} .opp-contact .opp-contact__visual-message i:nth-child(2){width:88%;}.opp-contact .opp-contact__visual-message i:nth-child(3){width:92%;}.opp-contact .opp-contact__visual-message i:nth-child(4){width:60%;} .opp-contact .opp-contact__visual-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;} .opp-contact .opp-contact__visual-options span{padding:6px 8px;border:1px solid rgba(122,193,67,.2);border-radius:999px;background:#f2f8ec;color:#3c6a1e;font-size:10px;font-weight:700;letter-spacing:.2px;} .opp-contact .opp-contact__visual-options span:last-child{border-color:#e2e8ed;background:#fff;color:#94a3ad;} .opp-contact .opp-contact__visual-footer{display:flex;align-items:center;gap:8px;margin-top:15px;color:#94a3ad;font-size:10px;letter-spacing:.3px;} .opp-contact .opp-contact__visual-footer strong,.opp-contact .opp-contact__visual-footer span{padding:10px 15px;border-radius:999px;font-size:11px;white-space:nowrap;} .opp-contact .opp-contact__visual-footer strong{background:var(--contact-green);box-shadow:0 6px 16px rgba(122,193,67,.3);color:#fff;} .opp-contact .opp-contact__visual-footer span{background:#f1f3f5;color:#64717d;} .opp-contact .opp-contact__visual-footer small{margin-left:auto;font-size:10px;white-space:nowrap;} .opp-contact .opp-contact__visual-privacy{margin-top:19px;color:#94a3ad;font-size:10px;letter-spacing:.3px;} .opp-contact .opp-contact__visual-bubble{position:absolute;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 15px;border-radius:18px;box-shadow:0 16px 32px rgba(20,57,94,.2);font-size:12px;letter-spacing:.3px;animation:opp-contact-float 5s ease-in-out infinite;} .opp-contact .opp-contact__visual-bubble b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:inherit;font-size:12px;} .opp-contact .opp-contact__visual-bubble strong{font-size:12px;} .opp-contact .opp-contact__visual-bubble strong small{margin-left:9px;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.18);font-size:10px;} .opp-contact .opp-contact__visual-bubble span,.opp-contact .opp-contact__visual-bubble em,.opp-contact .opp-contact__visual-bubble small{display:block;flex-basis:100%;font-style:normal;} .opp-contact .opp-contact__visual-bubble--line{left:0;top:90px;max-width:220px;background:#06c755;color:#fff;transform:rotate(-3deg);} .opp-contact .opp-contact__visual-bubble--line b{color:#06c755;} .opp-contact .opp-contact__visual-bubble--line span{padding:8px 10px;border-radius:10px;background:#fff;color:#222;} .opp-contact .opp-contact__visual-bubble--mail{right:0;bottom:125px;min-width:190px;background:var(--contact-navy);color:#fff;animation-delay:.6s;} .opp-contact .opp-contact__visual-bubble--mail b{background:rgba(255,255,255,.15);color:#fff;} .opp-contact .opp-contact__visual-bubble--mail small{color:rgba(255,255,255,.65);} .opp-contact .opp-contact__visual-tip{position:absolute;z-index:3;bottom:-14px;left:11%;max-width:240px;padding:11px 14px;border:1px solid #e3e8e8;border-radius:14px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.08);color:#64717d;font-size:11px;line-height:1.5;letter-spacing:.2px;} .opp-contact .opp-contact__visual-tip strong{color:var(--contact-navy);} .opp-contact .opp-contact__visual-spark{position:absolute;z-index:3;display:grid;place-items:center;width:31px;height:31px;border:1px solid #edf0f2;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(20,57,94,.1);font-size:13px;} .opp-contact .opp-contact__visual-spark--one{top:0;left:5%;}.opp-contact .opp-contact__visual-spark--two{top:7%;right:6%;}.opp-contact .opp-contact__visual-spark--three{right:3%;bottom:9%;background:var(--contact-green);color:#fff;} @keyframes opp-contact-float{0%,100%{translate:0 0}50%{translate:0 -6px}} @media(prefers-reduced-motion:reduce){.opp-contact .opp-contact__visual-bubble{animation:none}} .opp-contact .opp-contact__section-inner{width:min(1600px,calc(100% - 56px));margin-inline:auto;} .opp-contact .opp-contact__channels{padding-block:83px 92px;background:#fff;} .opp-contact .opp-contact__section-eyebrow p{border:0;background:#eef7e8;color:#5e973a;} .opp-contact .opp-contact__section-heading{margin-top:18px;} .opp-contact .opp-contact__section-heading .elementor-heading-title{font-size:clamp(30px,2.6vw,42px);line-height:1.35;font-weight:900;letter-spacing:2px;color:var(--contact-navy)!important;} .opp-contact .opp-contact__section-lead{max-width:960px;margin-top:12px;} .opp-contact .opp-contact__section-lead p{font-size:16px;line-height:1.9;color:var(--contact-muted);} .opp-contact .opp-contact__channel-list{display:flex!important;flex-direction:row;align-items:stretch;gap:24px;margin-top:37px;} .opp-contact .opp-contact__channel{--contact-card-pad:28px;position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:48px auto 1fr auto;column-gap:14px;row-gap:0;flex:1;min-width:0;min-height:360px;padding:var(--contact-card-pad);border:1px solid #e3eae7;border-radius:20px;background:#fcfffa;box-shadow:0 8px 28px rgba(20,57,94,.035);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;} .opp-contact .opp-contact__channel::before{content:"";position:absolute;top:-34px;right:-34px;width:112px;height:112px;border-radius:50%;background:rgba(122,193,67,.1);filter:blur(18px);pointer-events:none;} .opp-contact .opp-contact__channel:hover{border-color:rgba(122,193,67,.4);box-shadow:0 12px 40px rgba(122,193,67,.12);transform:translateY(-3px);} .opp-contact .opp-contact__channel--form{background:#f8fbff;}.opp-contact .opp-contact__channel--form::before{background:rgba(20,57,94,.06);}.opp-contact .opp-contact__channel--form:hover{border-color:rgba(20,57,94,.25);box-shadow:0 12px 40px rgba(20,57,94,.08);} .opp-contact .opp-contact__channel--services{background:#fffdfa;}.opp-contact .opp-contact__channel--services::before{display:none;}.opp-contact .opp-contact__channel--services:hover{border-color:#d9e0e4;box-shadow:0 12px 36px rgba(20,57,94,.07);} .opp-contact .opp-contact__channel>.elementor-element{position:relative;z-index:1;width:auto!important;min-width:0;} .opp-contact .opp-contact__channel-mark{grid-column:1;grid-row:1;align-self:center;}.opp-contact .opp-contact__channel-mark .elementor-heading-title{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#06c755;color:#fff!important;font-size:20px;font-weight:900;} .opp-contact .opp-contact__channel--form .opp-contact__channel-mark .elementor-heading-title{background:var(--contact-navy);font-size:19px;} .opp-contact .opp-contact__channel--services .opp-contact__channel-mark .elementor-heading-title{border:1px solid #dfe5e9;background:#fff;color:#4f6271!important;font-size:20px;} .opp-contact .opp-contact__channel-title{grid-column:2;grid-row:1;align-self:center;margin:0;}.opp-contact .opp-contact__channel-title .elementor-heading-title{font-size:18px;line-height:1.35;font-weight:800;color:var(--contact-navy)!important;} .opp-contact .opp-contact__channel-eyebrow{grid-column:3;grid-row:1;align-self:start;margin:0;}.opp-contact .opp-contact__channel-eyebrow p{display:inline-block;margin:0;padding:5px 10px;border:1px solid rgba(122,193,67,.2);border-radius:999px;background:rgba(122,193,67,.1);color:#4a7a2a;font-size:11px;font-weight:800;white-space:nowrap;} .opp-contact .opp-contact__channel--form .opp-contact__channel-eyebrow p{border-color:rgba(20,57,94,.1);background:rgba(20,57,94,.05);color:var(--contact-navy);} .opp-contact .opp-contact__channel--services .opp-contact__channel-eyebrow{display:none;} .opp-contact .opp-contact__channel-copy{grid-column:1/-1;grid-row:2;margin-top:17px;}.opp-contact .opp-contact__channel-copy p{margin:0;color:var(--contact-muted);font-size:14px;line-height:1.75;} .opp-contact .opp-contact__channel-copy .opp-contact__channel-detail{overflow-wrap:anywhere;color:var(--contact-navy);font-size:23px;line-height:1.35;font-weight:900;letter-spacing:2px;} .opp-contact .opp-contact__channel--form .opp-contact__channel-copy .opp-contact__channel-detail{font-size:20px;} .opp-contact .opp-contact__channel-copy .opp-contact__channel-helper,.opp-contact .opp-contact__channel-copy .opp-contact__channel-note{display:flex;align-items:center;min-height:96px;margin-top:14px;padding:12px 14px;border:1px solid #e1e8e6;border-radius:12px;background:rgba(255,255,255,.72);color:#5c6b78;font-size:13px;line-height:1.7;} .opp-contact .opp-contact__channel--line .opp-contact__channel-helper{border-color:#d5e9d9;background:#f5fbf5;} .opp-contact .opp-contact__channel--form .opp-contact__channel-helper{border-color:#dbe5ee;background:#f5f9fd;} .opp-contact .opp-contact__channel--services .opp-contact__channel-note{border-color:#f1dfcd;background:#fff8ef;} .opp-contact .opp-contact__channel--form .opp-contact__channel-copy{position:static;} .opp-contact .opp-contact__copy-email{position:absolute;z-index:2;left:var(--contact-card-pad);right:var(--contact-card-pad);bottom:var(--contact-card-pad);display:flex;align-items:center;justify-content:center;gap:9px;height:44px;border:0;border-radius:999px;background:var(--contact-navy);color:#fff;font-size:14px;font-weight:800;cursor:pointer;} .opp-contact .opp-contact__copy-email::before{content:"✉";font-size:18px;line-height:1;} .opp-contact .opp-contact__copy-email:hover{background:#0b2844;} .opp-contact .opp-contact__copy-email:focus-visible{outline:3px solid #7ac143;outline-offset:3px;} .opp-contact .opp-contact__channel-link{grid-column:1/-1;grid-row:4;align-self:end;width:100%!important;margin:0;padding:0;} .opp-contact .opp-contact__channel-link .elementor-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;width:100%;padding:10px 18px;border:1px solid transparent;border-radius:999px;background:#06c755;color:#fff!important;font-size:14px;font-weight:800;line-height:1.5;text-align:center;} .opp-contact .opp-contact__channel-link .elementor-button .elementor-button-text{color:inherit!important;} .opp-contact .opp-contact__channel-link .elementor-button:hover{background:#05b64d;color:#fff!important;} .opp-contact .opp-contact__channel--line .elementor-button::before{content:"";flex:none;width:23px;height:23px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3.5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9l-5 3 1-3H4a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2Z' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ctext x='12' y='13.3' text-anchor='middle' font-family='Arial,sans-serif' font-size='5.8' font-weight='bold' fill='white'%3ELINE%3C/text%3E%3C/svg%3E");} .opp-contact .opp-contact__channel--services .elementor-button::before{content:"☎";font-size:18px;line-height:1;} .opp-contact .opp-contact__channel--services .opp-contact__channel-link .elementor-button{border-color:#dce5e9;background:#fff;color:var(--contact-navy)!important;} .opp-contact .opp-contact__channel--services .opp-contact__channel-link .elementor-button:hover{border-color:var(--contact-navy);background:#fff;color:var(--contact-navy)!important;} .opp-contact .opp-contact__inquiry{padding-block:86px 64px;background:#f6f9f5;} .opp-contact .opp-contact__inquiry-grid{display:flex!important;flex-direction:row;align-items:flex-start;gap:32px;margin-top:36px;} .opp-contact .opp-contact__form-card{flex:1.6;min-width:0;padding:clamp(27px,3vw,46px);border:1px solid #e3eae6;border-radius:26px;background:#fff;box-shadow:0 16px 45px rgba(20,57,94,.055);} .opp-contact .opp-contact__form-heading .elementor-heading-title{font-size:25px;line-height:1.35;font-weight:900;color:var(--contact-navy)!important;} .opp-contact .opp-contact__form-intro{margin-top:9px;}.opp-contact .opp-contact__form-intro p{font-size:14px;line-height:1.75;color:#667987;} .opp-contact .opp-contact__form-widget{margin-top:30px;} .opp-contact .opp-contact__form-widget #fluentform_3 fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start;} .opp-contact .opp-contact__form-widget #fluentform_3 fieldset>.ff-el-group{grid-column:1/-1;min-width:0;} .opp-contact .opp-contact__form-widget #fluentform_3 fieldset>.ff-el-group:nth-of-type(-n+6){grid-column:auto;} .opp-contact .opp-contact__form-widget #fluentform_3 fieldset>.cf-turnstile{grid-column:1/-1;} .opp-contact .opp-contact__form-widget #fluentform_3 fieldset>.cf-turnstile-br{display:none;} @media(max-width:767px){.opp-contact .opp-contact__form-widget #fluentform_3 fieldset{grid-template-columns:1fr;}} .opp-contact .opp-contact__form-widget .fluentform .ff-el-group{margin-bottom:22px;} .opp-contact .opp-contact__form-widget .fluentform .ff-el-input--label{margin-bottom:9px;} .opp-contact .opp-contact__form-widget .fluentform .ff-el-input--label label{color:var(--contact-navy);font-size:14px;font-weight:800;line-height:1.5;letter-spacing:2px;} .opp-contact .opp-contact__form-widget #fluentform_3 .ff-el-group:has(input.ff-el-form-check-checkbox[value="有 Logo"]) .ff-el-input--content{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;} .opp-contact .opp-contact__form-widget #fluentform_3 .ff-el-group:has(input.ff-el-form-check-checkbox[value="有 Logo"]) .ff-el-form-check{margin:0;min-width:0;} @media(max-width:767px){.opp-contact .opp-contact__form-widget #fluentform_3 .ff-el-group:has(input.ff-el-form-check-checkbox[value="有 Logo"]) .ff-el-input--content{grid-template-columns:repeat(2,minmax(0,1fr));}} .opp-contact .opp-contact__form-widget .fluentform .ff-el-form-control{min-height:50px;padding:12px 15px;border:1px solid #d9e3e6;border-radius:11px;background:#fcfdfd;color:var(--contact-ink);font-size:15px;letter-spacing:2px;line-height:1.6;} .opp-contact .opp-contact__form-widget .fluentform .ff-el-form-control::placeholder{color:#5c6b78;opacity:1;} .opp-contact .opp-contact__form-widget .fluentform textarea.ff-el-form-control{min-height:150px;resize:vertical;} .opp-contact .opp-contact__form-widget .fluentform .ff-el-form-control:focus{border-color:var(--contact-green);box-shadow:0 0 0 4px rgba(122,193,67,.15);outline:none;} .opp-contact .opp-contact__form-widget .fluentform .ff-btn-submit{min-height:54px;padding:12px 27px;border:0;border-radius:12px;background:var(--contact-green);color:#fff!important;font-size:16px;font-weight:800;letter-spacing:2px;} .opp-contact .opp-contact__form-widget .fluentform .ff-btn-submit:hover{background:#6bac32;color:#fff!important;} .opp-contact .opp-contact__privacy{margin-top:20px;}.opp-contact .opp-contact__privacy p{font-size:13px;line-height:1.75;color:#5c6b78;} .opp-contact .opp-contact__sidebar{flex:1;min-width:0;gap:22px!important;} .opp-contact .opp-contact__process-card,.opp-contact .opp-contact__faq-card,.opp-contact .opp-contact__service-card{border-radius:22px;padding:30px;} .opp-contact .opp-contact__process-card{background:var(--contact-navy);color:#fff;} .opp-contact .opp-contact__aside-heading .elementor-heading-title{font-size:20px;line-height:1.4;font-weight:900;color:inherit;}.opp-contact .opp-contact__process-card .opp-contact__aside-heading .elementor-heading-title{color:#fff!important;} .opp-contact .opp-contact__aside-intro{margin-top:7px;}.opp-contact .opp-contact__aside-intro p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.8);} .opp-contact .opp-contact__step{display:flex!important;flex-direction:row;gap:14px;margin-top:23px;} .opp-contact .opp-contact__step-number{width:auto;flex:none;} .opp-contact .opp-contact__step-number .elementor-heading-title{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:#fff;color:var(--contact-navy)!important;font-size:12px;font-weight:900;} .opp-contact .opp-contact__step-content{min-width:0;flex:1;} .opp-contact .opp-contact__step-title .elementor-heading-title{color:#fff!important;font-size:14px;font-weight:800;} .opp-contact .opp-contact__step-copy{margin-top:4px;}.opp-contact .opp-contact__step-copy p{color:rgba(255,255,255,.82);font-size:14px;line-height:1.7;} .opp-contact .opp-contact__faq-card{border:1px solid #e3eae7;background:#fff;} .opp-contact .opp-contact__faq-card .opp-contact__aside-heading .elementor-heading-title{color:var(--contact-navy)!important;} .opp-contact .opp-contact__question{padding-top:18px;margin-top:18px;border-top:1px solid #edf0ee;} .opp-contact .opp-contact__question-title .elementor-heading-title{font-size:14px;font-weight:800;line-height:1.65;color:var(--contact-navy)!important;} .opp-contact .opp-contact__question-copy{margin-top:7px;}.opp-contact .opp-contact__question-copy p{font-size:14px;line-height:1.75;color:var(--contact-muted);} .opp-contact .opp-contact__faq-link{width:auto;margin-top:22px;} .opp-contact .opp-contact__faq-link .elementor-button{padding:0;background:transparent;color:#4c8c29;font-size:13px;font-weight:800;} .opp-contact .opp-contact__service-card{border:1px solid #dce8dc;background:#fcfffa;box-shadow:0 8px 24px rgba(20,57,94,.035);} .opp-contact .opp-contact__service-card .opp-contact__service-heading .elementor-heading-title{color:var(--contact-navy)!important;font-size:19px;line-height:1.4;font-weight:900;} .opp-contact .opp-contact__service-card .opp-contact__service-copy{margin-top:18px;} .opp-contact .opp-contact__service-list{display:grid;gap:14px;list-style:none;margin:0;padding:0;} .opp-contact .opp-contact__service-list li{position:relative;display:grid;gap:3px;padding-left:20px;color:#5c6b78;font-size:14px;line-height:1.65;} .opp-contact .opp-contact__service-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:#7ac143;} .opp-contact .opp-contact__service-list strong{color:var(--contact-navy);font-size:14px;font-weight:800;} .opp-contact .opp-contact__service-more{margin:22px 0 0!important;}.opp-contact .opp-contact__service-more a{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid #badca5;border-radius:999px;color:#39782a;font-size:13px;font-weight:800;text-decoration:none;}.opp-contact .opp-contact__service-more a:hover{border-color:#7ac143;background:#f2f8ec;color:#285f1b;} .opp-contact .opp-contact__quick{padding-block:24px 56px;background:#fff;} .opp-contact .opp-contact__quick-inner{width:min(1600px,calc(100% - 56px));margin-inline:auto;display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:50px 58px;border-radius:28px;background:var(--contact-navy);position:relative;overflow:hidden;} .opp-contact .opp-contact__quick-inner::before{content:"";position:absolute;top:auto;left:auto;right:12%;bottom:-95px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;} .opp-contact .opp-contact__quick-inner::after{content:"";position:absolute;right:-40px;top:-75px;width:320px;height:320px;border-radius:50%;background:rgba(122,193,67,.2);filter:blur(30px);pointer-events:none;} .opp-contact .opp-contact__quick-copy{position:relative;z-index:1;flex:1;min-width:0;} .opp-contact .opp-contact__quick-eyebrow p{display:inline-block;margin:0;padding:7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:11px;font-weight:800;} .opp-contact .opp-contact__quick-title{margin-top:16px;}.opp-contact .opp-contact__quick-title .elementor-heading-title{font-size:clamp(24px,2.3vw,32px);line-height:1.2;font-weight:900;color:#fff!important;}.opp-contact .opp-contact__quick-title .elementor-heading-title span{color:#7ac143!important;} .opp-contact .opp-contact__quick-lead{margin-top:12px;}.opp-contact .opp-contact__quick-lead p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.8);} .opp-contact .opp-contact__quick-button{position:relative;z-index:1;flex:none;width:auto;} .opp-contact .opp-contact__quick-button .elementor-button{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 32px;border-radius:999px;background:#06c755;color:#fff!important;font-size:15px;font-weight:800;letter-spacing:2px;box-shadow:0 8px 24px rgba(6,199,85,.3);} .opp-contact .opp-contact__quick-button .elementor-button .elementor-button-text{color:#fff!important;} .opp-contact .opp-contact__quick-button .elementor-button:hover{background:#05b64d;color:#fff!important;} .opp-contact .opp-contact__quick-button::after{content:"mail@opp-tw.com • 0986-228-104";display:block;margin-top:12px;color:rgba(255,255,255,.78);font-size:12px;line-height:1.5;text-align:center;} @media(max-width:1050px){.opp-contact .opp-contact__hero-inner{flex-direction:column;align-items:stretch;}.opp-contact .opp-contact__hero-art{width:100%;}.opp-contact .opp-contact__visual{margin:auto;height:525px;}.opp-contact .opp-contact__channel-list{gap:15px;}.opp-contact .opp-contact__channel{--contact-card-pad:24px;}.opp-contact .opp-contact__inquiry-grid{flex-direction:column;gap:20px;}.opp-contact .opp-contact__sidebar{width:100%;}} @media(max-width:767px){.opp-contact .opp-contact__section-inner,.opp-contact .opp-contact__quick-inner{width:calc(100% - 36px);}.opp-contact .opp-contact__hero-inner{width:100%;padding:56px 24px;gap:40px;}.opp-contact .opp-contact__hero .opp-contact__h1.elementor-element .elementor-heading-title{font-size:34px;}.opp-contact .opp-contact__lead p,.opp-contact .opp-contact__section-lead p{font-size:15px;}.opp-contact .opp-contact__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}.opp-contact .opp-contact__hero-actions{flex-direction:column;align-items:stretch;}.opp-contact .opp-contact__button,.opp-contact .opp-contact__button .elementor-button{width:100%;}.opp-contact .opp-contact__visual{height:530px;}.opp-contact .opp-contact__visual-sheet{width:83%;padding:15px;border-radius:20px;}.opp-contact .opp-contact__visual-top small{display:none;}.opp-contact .opp-contact__visual-top strong{font-size:9px;}.opp-contact .opp-contact__visual-fields label>span{height:32px;}.opp-contact .opp-contact__visual-message>span{height:75px;}.opp-contact .opp-contact__visual-bubble{font-size:10px;padding:8px;}.opp-contact .opp-contact__visual-bubble--line{top:35px;}.opp-contact .opp-contact__visual-bubble--mail{bottom:95px;right:0;min-width:155px;}.opp-contact .opp-contact__visual-tip{bottom:-20px;left:2%;font-size:9px;max-width:200px;}.opp-contact .opp-contact__channels{padding-block:60px;}.opp-contact .opp-contact__inquiry{padding-block:60px 42px;}.opp-contact .opp-contact__section-heading .elementor-heading-title{font-size:30px;}.opp-contact .opp-contact__channel-list{flex-direction:column;}.opp-contact .opp-contact__channel-list,.opp-contact .opp-contact__inquiry-grid,.opp-contact .opp-contact__quick-inner{flex-direction:column;}.opp-contact .opp-contact__channel{min-height:330px;}.opp-contact .opp-contact__channel-eyebrow{display:none;}.opp-contact .opp-contact__channel-copy{min-height:0;}.opp-contact .opp-contact__form-card{padding:26px 18px;}.opp-contact .opp-contact__sidebar{width:100%;}.opp-contact .opp-contact__quick{padding-block:30px 58px;}.opp-contact .opp-contact__quick-inner{padding:35px 26px;align-items:stretch;}.opp-contact .opp-contact__quick-button,.opp-contact .opp-contact__quick-button .elementor-button{width:100%;}.opp-contact .opp-contact__quick-title .elementor-heading-title{font-size:28px;}} /* Privacy policy: calm editorial reading layout. */ body.privacy-policy{background:#f7f9f7;} body.privacy-policy main.site-main{box-sizing:border-box;width:min(1360px,calc(100% - 56px));max-width:none;margin:0 auto;padding:56px 0 100px;} body.privacy-policy main.site-main :is(h1,h2,p,a){letter-spacing:2px;} body.privacy-policy main.site-main .page-header{position:relative;display:flex;align-items:center;min-height:292px;overflow:hidden;border-radius:22px;padding:48px 68px 78px;background:linear-gradient(120deg,#123758,#1b4b6d);} body.privacy-policy main.site-main .page-header::after{content:"";position:absolute;right:-42px;top:-106px;width:390px;height:390px;border:1px solid rgba(255,255,255,.18);border-radius:50%;pointer-events:none;} body.privacy-policy main.site-main .entry-title{position:relative;z-index:1;margin:0;color:#fff;font-size:clamp(36px,4vw,58px);font-weight:800;line-height:1.22;} body.privacy-policy main.site-main .page-content{position:relative;display:grid;grid-template-columns:minmax(220px,.38fr) minmax(0,.62fr);column-gap:64px;width:calc(100% - 96px);margin:0 auto;} body.privacy-policy main.site-main .page-content>p:first-child{box-sizing:border-box;grid-column:1/-1;position:relative;z-index:1;width:min(100%,1040px);margin:-42px 0 36px;padding:30px 36px;border:1px solid #dce8e5;border-radius:16px;background:#fff;color:#24425a;font-size:17px;line-height:1.9;} body.privacy-policy main.site-main .page-content>h2{grid-column:1;margin:0;padding:34px 0 38px;border-top:1px solid #cbd9dc;color:#14395e;font-size:23px;font-weight:750;line-height:1.5;} body.privacy-policy main.site-main .page-content>h2+p{grid-column:2;margin:0;padding:35px 0 38px;border-top:1px solid #cbd9dc;color:#405a69;font-size:16px;line-height:1.95;overflow-wrap:anywhere;} body.privacy-policy main.site-main .page-content>p:last-child{border-bottom:1px solid #cbd9dc;} body.privacy-policy main.site-main .page-content a{color:#176a93;text-decoration:underline;text-decoration-color:#8bb6c6;text-underline-offset:4px;} body.privacy-policy main.site-main .page-content a:focus-visible{outline:2px solid #5aa340;outline-offset:4px;border-radius:2px;} body.privacy-policy main.site-main ::selection{background:#dbeec9;color:#14395e;} @media(max-width:900px){body.privacy-policy main.site-main{width:calc(100% - 36px);padding:36px 0 76px;}body.privacy-policy main.site-main .page-header{min-height:236px;padding:42px 42px 72px;}body.privacy-policy main.site-main .page-content{grid-template-columns:minmax(0,1fr);width:calc(100% - 48px);}body.privacy-policy main.site-main .page-content>p:first-child{margin:-40px 0 24px;padding:26px 28px;}body.privacy-policy main.site-main .page-content>h2{grid-column:1;padding:28px 0 10px;font-size:22px;}body.privacy-policy main.site-main .page-content>h2+p{grid-column:1;padding:0 0 30px;border-top:0;}} @media(max-width:520px){body.privacy-policy main.site-main{width:calc(100% - 24px);padding:24px 0 56px;}body.privacy-policy main.site-main .page-header{min-height:220px;border-radius:17px;padding:36px 26px 68px;}body.privacy-policy main.site-main .page-header::after{right:-150px;top:-90px;}body.privacy-policy main.site-main .entry-title{font-size:36px;}body.privacy-policy main.site-main .page-content{width:calc(100% - 26px);}body.privacy-policy main.site-main .page-content>p:first-child{margin:-38px 0 18px;padding:23px 20px;font-size:16px;}body.privacy-policy main.site-main .page-content>h2{font-size:21px;}body.privacy-policy main.site-main .page-content>h2+p{font-size:16px;line-height:1.85;}} /* Design Notes landing page, scoped to its Elementor Flexbox root. */ body.page-id-614{background:#fbfcfa} body.page-id-614 .site-main{overflow:clip} .opp-journal{--j-navy:#15395b;--j-ink:#132d43;--j-muted:#607480;--j-green:#77b644;--j-border:#dbe5e6;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;max-width:none!important;padding:0!important;color:var(--j-ink);letter-spacing:2px} .opp-journal,.opp-journal *{box-sizing:border-box} .opp-journal .elementor-widget-html,.opp-journal .elementor-widget-container{width:100%} .opp-journal__hero-section,.opp-journal__filter-section,.opp-journal__main-section,.opp-journal__cta-section{width:100%!important;max-width:none!important;padding:0!important} .opp-journal__hero-section{background:radial-gradient(circle at 88% 18%,rgba(121,182,77,.13),transparent 30%),radial-gradient(circle at 5% 70%,rgba(21,57,91,.045),transparent 35%),linear-gradient(112deg,#fcfaf5 0%,#f5f8f1 100%);border-block:1px solid #e3e9e1} .opp-journal__hero-art{width:min(1500px,calc(100% - 96px));min-height:628px;margin:auto;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(460px,.97fr);align-items:center;gap:clamp(38px,5vw,88px);padding:68px 0 72px} .opp-journal__eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:27px;color:#3b9050;font-size:12px;font-weight:800;letter-spacing:3px} .opp-journal__eyebrow:before{content:"";width:26px;height:2px;background:#78b94d} .opp-journal__hero-copy h1{margin:0;color:var(--j-navy);font-size:clamp(42px,4.2vw,66px);font-weight:900;line-height:1.25;letter-spacing:2px} .opp-journal__hero-copy h1 em{font-style:normal;color:#5c9e42} .opp-journal__hero-copy>p{max-width:650px;margin:28px 0 24px;color:#546a73;font-size:16px;line-height:1.92;letter-spacing:2px} .opp-journal__hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:33px} .opp-journal__hero-tags span{padding:7px 12px;border:1px solid #d8e6db;border-radius:99px;background:rgba(255,255,255,.8);color:#45636c;font-size:12px;font-weight:700;line-height:1.2} .opp-journal__stats{display:flex;gap:0;padding-top:21px;border-top:1px solid #dce7db} .opp-journal__stats>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px;padding:0 19px;border-right:1px solid #dce7db} .opp-journal__stats>div:first-child{padding-left:0} .opp-journal__stats>div:last-child{border-right:0} .opp-journal__stats strong{color:var(--j-navy);font-size:20px;font-weight:900;line-height:1.3;white-space:nowrap} .opp-journal__stats small{color:#6c7e81;font-size:11px;font-weight:700;line-height:1.5} .opp-journal__hero-visual{position:relative;min-height:475px;display:grid;place-items:center} .opp-journal__visual-back{position:absolute;border-radius:28px;box-shadow:0 20px 40px rgba(29,61,82,.06)} .opp-journal__visual-back-one{width:84%;height:82%;top:3%;right:2%;transform:rotate(7deg);background:#dcebcf} .opp-journal__visual-back-two{width:86%;height:83%;top:8%;left:3%;transform:rotate(-5deg);background:#dce8f0} .opp-journal__visual-window{position:relative;z-index:1;width:83%;min-height:388px;border:1px solid #d8e3e5;border-radius:20px;background:#fff;box-shadow:0 32px 65px rgba(25,59,84,.16);overflow:hidden;transform:rotate(-1deg)} .opp-journal__visual-top{height:48px;display:flex;align-items:center;gap:7px;padding:0 18px;background:#f0f4f2;border-bottom:1px solid #dfe7e8} .opp-journal__visual-top i{width:8px;height:8px;border-radius:50%;background:#ff9a78}.opp-journal__visual-top i:nth-child(2){background:#f7cf70}.opp-journal__visual-top i:nth-child(3){background:#84bf83} .opp-journal__visual-top span{margin-left:12px;color:#82949d;font-size:10px;letter-spacing:.5px;white-space:nowrap} .opp-journal__visual-inside{padding:30px 35px} .opp-journal__visual-tags{display:flex;align-items:center;gap:8px}.opp-journal__visual-tags b{padding:6px 10px;border-radius:99px;background:#eaf3e4;color:#457d31;font-size:10px}.opp-journal__visual-tags b:nth-child(2){background:#e5eff8;color:#285a85}.opp-journal__visual-tags small{margin-left:auto;color:#84949d;font-size:10px;letter-spacing:0} .opp-journal__visual-lines{display:grid;gap:12px;margin:26px 0}.opp-journal__visual-lines i{height:14px;border-radius:4px;background:#d9e5e7}.opp-journal__visual-lines i:first-child{width:85%;height:23px;background:#244c6f}.opp-journal__visual-lines i:last-child{width:62%} .opp-journal__visual-mid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:25px}.opp-journal__visual-mid>div,.opp-journal__visual-mid>span{height:120px;border-radius:12px;background:#e9f2e4}.opp-journal__visual-mid>div{display:flex;align-items:end;gap:12px;padding:15px}.opp-journal__visual-mid>div i{width:28%;height:35%;border-radius:5px;background:#91c774}.opp-journal__visual-mid>div i:nth-child(2){height:70%;background:#61ae8f}.opp-journal__visual-mid>div i:nth-child(3){height:95%;background:#428da8}.opp-journal__visual-mid>span{background:linear-gradient(140deg,#d7eaf5,#ebf4ef)} .opp-journal__visual-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e4eceb;color:#214c69;font-size:13px;font-weight:800} .opp-journal__visual-proof,.opp-journal__visual-growth{position:absolute;z-index:2;padding:10px 14px;border:1px solid #e0e9e0;border-radius:11px;background:#fff;box-shadow:0 14px 25px rgba(26,65,82,.11);font-size:12px;font-weight:800;white-space:nowrap} .opp-journal__visual-proof{left:0;bottom:50px;color:#3f874e}.opp-journal__visual-growth{right:-1%;top:50px;color:#195c85} .opp-journal__filter-section{border-bottom:1px solid #e1e7e7;background:#fff} .opp-journal__filters{width:min(1500px,calc(100% - 96px));min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:auto} .opp-journal__filter-cats,.opp-journal__sort{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .opp-journal__filters button,.opp-journal__side-cats button{border:0;background:transparent;cursor:pointer} .opp-journal__filter-cats button{padding:9px 14px;border-radius:99px;color:#516874;font-size:13px;font-weight:750;letter-spacing:2px} .opp-journal__filter-cats button.is-active,.opp-journal__filter-cats button:hover{background:var(--j-navy);color:#fff} .opp-journal__sort{color:#829198;font-size:12px}.opp-journal__sort button{padding:7px 8px;color:#657984;font-size:12px;font-weight:700}.opp-journal__sort button.is-active{color:var(--j-navy);text-decoration:underline;text-underline-offset:6px} .opp-journal__main-section{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:40px!important;width:min(1500px,calc(100% - 96px))!important;margin:0 auto!important;padding:72px 0 90px!important} .opp-journal__article-column{flex:1 1 0!important;min-width:0!important}.opp-journal__sidebar-column{flex:0 0 298px!important;min-width:0!important} .opp-journal__article-column:before{content:"FEATURED / 精選筆記";display:block;margin:0 0 20px;color:var(--j-navy);font-size:13px;font-weight:900;letter-spacing:3px} .opp-journal .elementor-widget-posts .elementor-posts-container{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important} .opp-journal .elementor-widget-posts .elementor-post{overflow:hidden;border:1px solid #e0e7e7;border-radius:17px;background:#fff;box-shadow:0 7px 24px rgba(20,56,77,.055);transition:transform .2s ease,box-shadow .2s ease} .opp-journal .elementor-widget-posts .elementor-post:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(20,56,77,.11)} .opp-journal .elementor-widget-posts .elementor-post:first-child{grid-column:1/-1;display:block!important;min-height:300px;margin-bottom:49px;border-radius:20px} .opp-journal .elementor-widget-posts .elementor-post:first-child:after{content:"LATEST NOTES / 最新文章";position:absolute;left:0;bottom:-42px;color:var(--j-navy);font-size:13px;font-weight:900;letter-spacing:3px} .opp-journal .elementor-widget-posts .elementor-post:first-child{position:relative;overflow:visible} .opp-journal .elementor-widget-posts .elementor-post__thumbnail__link{display:block;margin:0!important}.opp-journal .elementor-widget-posts .elementor-post__thumbnail{height:170px!important;padding:0!important;background:#eaf2e7}.opp-journal .elementor-widget-posts .elementor-post__thumbnail img{position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__thumbnail__link,.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__thumbnail{height:100%!important;min-height:300px;border-radius:20px 0 0 20px;overflow:hidden} .opp-journal .elementor-widget-posts .elementor-post__text{display:flex;flex-direction:column;align-items:flex-start;padding:21px 22px 24px}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__text{justify-content:center;padding:35px 40px} .opp-journal .elementor-widget-posts .elementor-post__badge{position:absolute;left:18px;right:auto!important;top:18px;z-index:2;width:max-content!important;max-width:calc(100% - 36px);margin:0!important;padding:6px 10px;border-radius:99px;background:#142533;color:#fff;font-size:10px;font-weight:800;line-height:1.2;letter-spacing:1px} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__badge{left:22px;top:22px;background:#6caf47} .opp-journal .elementor-widget-posts .elementor-post__title{margin:5px 0 11px!important;color:var(--j-navy);font-size:19px!important;font-weight:850;line-height:1.48;letter-spacing:2px}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__title{font-size:29px!important;line-height:1.38} .opp-journal .elementor-widget-posts .elementor-post__title a{color:inherit!important}.opp-journal .elementor-widget-posts .elementor-post__meta-data{order:2!important;margin:0 0 9px!important;color:#7a8b93;font-size:11px;letter-spacing:1px}.opp-journal .elementor-widget-posts .elementor-post__excerpt{margin:0 0 18px!important;color:#60727b;font-size:13px;line-height:1.8;letter-spacing:1px}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__excerpt{font-size:15px;letter-spacing:2px} .opp-journal .elementor-widget-posts .elementor-post__read-more{margin-top:auto;color:#347a57!important;font-size:12px;font-weight:850;letter-spacing:2px}.opp-journal .elementor-widget-posts .elementor-pagination{margin:40px 0 0}.opp-journal .elementor-widget-posts .elementor-pagination a,.opp-journal .elementor-widget-posts .elementor-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:35px;min-height:35px;margin:0 3px!important;border-radius:9px}.opp-journal .elementor-widget-posts .elementor-pagination .current{background:var(--j-navy);color:#fff} .opp-journal__sidebar{display:grid;gap:20px}.opp-journal__sidebar>section{border:1px solid #dfe7e5;border-radius:16px;background:#fff;padding:24px}.opp-journal__side-overline{display:block;margin-bottom:20px;color:#7ba75d;font-size:10px;font-weight:900;letter-spacing:3px}.opp-journal__author{background:#eff6ed!important}.opp-journal__author-line{display:flex;align-items:center;gap:13px}.opp-journal__avatar{display:block;width:47px;height:47px;border-radius:50%;background:#163c5e}.opp-journal__author-line strong,.opp-journal__author-line small{display:block}.opp-journal__author-line strong{font-size:16px;color:var(--j-navy)}.opp-journal__author-line small{margin-top:3px;color:#647982;font-size:10px}.opp-journal__author p{margin:18px 0;color:#526b72;font-size:12px;line-height:1.9}.opp-journal__author a,.opp-journal__side-panel a{color:var(--j-navy);font-size:12px;font-weight:850;text-decoration:none}.opp-journal__side-head{display:flex;justify-content:space-between;align-items:center}.opp-journal__side-head span{color:#9cacad;font-size:9px;letter-spacing:1px}.opp-journal__side-panel h2{margin:0 0 15px;color:var(--j-navy);font-size:16px;font-weight:900}.opp-journal__popular-list{padding:0 0 0 20px;margin:0}.opp-journal__popular-list li{padding:9px 0;border-top:1px solid #e9eeec;color:#8ba3aa}.opp-journal__popular-list li:first-child{border-top:0}.opp-journal__popular-list a{font-size:12px;line-height:1.65}.opp-journal__side-cats{display:grid}.opp-journal__side-cats button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0;border-top:1px solid #edf0ef;color:#536b73;text-align:left;font-size:12px;letter-spacing:2px}.opp-journal__side-cats span{color:#9db0b0}.opp-journal__tag-cloud{display:flex;flex-wrap:wrap;gap:7px}.opp-journal__tag-cloud span{padding:5px 8px;border:1px solid #e2e9e6;border-radius:5px;color:#5e747e;font-size:10px;letter-spacing:1px} .opp-journal__sidebar .opp-journal__side-contact{border:0;background:#dcefcf}.opp-journal__contact-icon{color:#5c9d3e;font-size:28px}.opp-journal__side-contact h2{margin:10px 0;color:var(--j-navy);font-size:22px;line-height:1.45}.opp-journal__side-contact p{color:#557063;font-size:12px;line-height:1.8}.opp-journal__side-contact a{display:block;margin:18px 0 10px;padding:12px 16px;border-radius:8px;background:var(--j-navy);color:#fff;text-align:center;font-size:12px;font-weight:800}.opp-journal__side-contact small{color:#597263;font-size:10px} .opp-journal__cta-section{background:#173b5f}.opp-journal__cta{width:min(1500px,calc(100% - 96px));min-height:320px;display:flex;align-items:center;justify-content:space-between;gap:60px;margin:auto;padding:54px 0;color:#fff}.opp-journal__cta>div:first-child{max-width:800px}.opp-journal__cta span{color:#a9d085;font-size:11px;font-weight:900;letter-spacing:3px}.opp-journal__cta h2{margin:14px 0;color:#fff;font-size:clamp(31px,3vw,46px);font-weight:900;line-height:1.35}.opp-journal__cta p{max-width:760px;margin:16px 0 0;color:#c8d6de;font-size:14px;line-height:1.85}.opp-journal__cta-action{flex:none;display:flex;align-items:center;flex-direction:column;gap:12px}.opp-journal__cta-action a{display:inline-flex;align-items:center;justify-content:center;min-width:230px;padding:16px 25px;border-radius:10px;background:var(--j-green);color:#fff!important;font-size:15px;font-weight:850;text-decoration:none}.opp-journal__cta-action small{color:#adc0ca;font-size:10px;text-align:center} @media(max-width:1100px){.opp-journal__hero-art{grid-template-columns:1fr;min-height:0}.opp-journal__hero-visual{min-height:420px;max-width:650px;width:100%;margin:auto}.opp-journal__main-section{gap:24px!important}.opp-journal__sidebar-column{flex-basis:240px!important}.opp-journal .elementor-widget-posts .elementor-posts-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}.opp-journal__cta{gap:30px}} @media(max-width:767px){.opp-journal__hero-art,.opp-journal__filters,.opp-journal__main-section,.opp-journal__cta{width:calc(100% - 36px)!important}.opp-journal__hero-art{gap:24px;padding:50px 0 42px}.opp-journal__hero-copy h1{font-size:clamp(32px,8vw,43px)}.opp-journal__hero-copy>p{font-size:14px}.opp-journal__stats strong{font-size:15px}.opp-journal__stats>div{padding-inline:8px}.opp-journal__hero-visual{min-height:300px}.opp-journal__visual-window{width:86%;min-height:270px}.opp-journal__visual-inside{padding:18px}.opp-journal__visual-mid>div,.opp-journal__visual-mid>span{height:65px}.opp-journal__visual-proof,.opp-journal__visual-growth{font-size:8px;padding:7px}.opp-journal__visual-proof{bottom:15px}.opp-journal__visual-growth{top:10px}.opp-journal__filters{padding:14px 0;align-items:flex-start;flex-direction:column}.opp-journal__filter-cats{gap:2px}.opp-journal__filter-cats button{font-size:11px;padding:8px 10px}.opp-journal__main-section{flex-direction:column!important;padding:45px 0 60px!important}.opp-journal__article-column,.opp-journal__sidebar-column{width:100%!important;flex:auto!important}.opp-journal .elementor-widget-posts .elementor-posts-container{grid-template-columns:1fr!important}.opp-journal .elementor-widget-posts .elementor-post:first-child{display:block!important;margin-bottom:45px}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__thumbnail__link,.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__thumbnail{height:210px!important;min-height:210px;border-radius:20px 20px 0 0}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__text{padding:24px}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__title{font-size:23px!important}.opp-journal__sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.opp-journal__sidebar>section{padding:20px}.opp-journal__cta{align-items:flex-start;flex-direction:column;gap:30px;padding:50px 0}.opp-journal__cta-action{align-items:flex-start}.opp-journal__cta h2{font-size:31px}} @media(max-width:550px){.opp-journal__sidebar{grid-template-columns:1fr}.opp-journal__hero-copy h1 br{display:none}.opp-journal__hero-copy h1 em:before{content:" "}.opp-journal__visual-top span{max-width:150px;overflow:hidden;text-overflow:ellipsis}.opp-journal__visual-window{min-height:235px}.opp-journal__visual-lines{margin:15px 0}.opp-journal__visual-mid{margin-bottom:10px}.opp-journal__stats small{font-size:9px}} .opp-journal .elementor-widget-posts .elementor-post__card{height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:inherit;background:#fff;box-shadow:none} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__card{display:grid;width:100%;grid-template-columns:48% minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;min-height:300px} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__thumbnail__link{grid-column:1;grid-row:1/3} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__text{grid-column:2;grid-row:1;align-self:end} .opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__meta-data{grid-column:2;grid-row:2;margin:0 40px 28px!important;padding:0!important;border:0} .opp-journal .elementor-widget-posts .elementor-post .elementor-post__meta-data{margin-top:auto;padding:0 22px 20px;border:0;font-size:11px} .opp-journal .elementor-widget-posts .elementor-post .elementor-post__badge{width:auto} @media(max-width:767px){.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__card{display:flex;flex-direction:column}.opp-journal .elementor-widget-posts .elementor-post:first-child .elementor-post__meta-data{margin:0 24px 22px!important}}