/* ========================================================= OITS custom.css — for Canvas HTML Template 說明： 1) 將此檔案放入 /css/custom.css 2) 在每個頁面的後面緊接著引入： 3) 僅於此檔案客製，避免修改 Canvas 原生檔（利於未來升級） ========================================================= */ /* --------------------------------------------------------- 1) 基礎品牌變數（Canvas 吃以下兩個主題色變數） --------------------------------------------------------- */ :root { /* 品牌主色（Tech Blue） */ --cnvs-themecolor: #CCA00F; --cnvs-themecolor-rgb: 235, 188, 36; /* 輔助系統色 */ --oits-dark: #121417; /* 深色背景（Header、Hero） */ --oits-dark-2: #1a1d21; /* 次深色（區塊交替） */ --oits-gray-900: #1f2328; --oits-gray-800: #2b3137; --oits-gray-700: #3c444d; --oits-gray-600: #5a6472; --oits-gray-500: #7b8794; --oits-gray-400: #98a2b3; --oits-gray-300: #c4c9d1; --oits-gray-200: #e5e7eb; --oits-gray-100: #f3f4f6; --oits-white: #ffffff; /* 強調色（品牌金）— 用於小裝飾、流程圈、分隔線 */ --oits-gold: #D4AF37; --oits-gold-rgb: 212, 175, 55; /* 成功/警告/錯誤（可選） */ --oits-success: #22c55e; --oits-warning: #f59e0b; --oits-danger: #ef4444; /* 圓角與陰影統一 */ --oits-radius: 14px; --oits-shadow: 0 10px 25px rgba(16, 24, 40, .12); } #header { --cnvs-primary-menu-font-size: 1rem; } /* --------------------------------------------------------- 2) 全站排版與基本樣式 --------------------------------------------------------- */ html, body { color: var(--oits-gray-300); background: linear-gradient(180deg, #0f1215 0%, #1a1d21 100%); letter-spacing: 1px; } body, .content-wrap { background-color: transparent; } h1, h2, h3, h4, h5, h6 { color: var(--oits-white); letter-spacing: .3px; } .oits-gold-text { color: var(--oits-gold); } .oits-white-text { color: var(--oits-gray-300); } .oits-gray-400-text { color: var(--oits-gray-400); } .oits-gray-500-text { color: var(--oits-gray-500); } #primary-menu ul li>a { color: var(--oits-gray-200); } #primary-menu ul li:hover>a, #primary-menu ul li.current>a { color: var(--cnvs-themecolor); } /* 導覽底線高亮（目前頁） */ #primary-menu ul li.current>a { position: relative; } #primary-menu ul li.current>a::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 2px; background: linear-gradient(90deg, rgba(var(--cnvs-themecolor-rgb), .0) 0%, rgba(var(--cnvs-themecolor-rgb), .9) 50%, rgba(var(--cnvs-themecolor-rgb), .0) 100%); } /* Hero 區塊（自訂輔助 class：.oits-hero） */ .oits-hero { background: radial-gradient(1200px 600px at 10% -10%, rgba(var(--cnvs-themecolor-rgb), .14) 0%, rgba(20, 110, 245, 0) 60%), var(--oits-dark); color: var(--oits-white); } .oits-hero .lead { color: var(--oits-gray-200); } .oits-hero .device-shift-up { margin-top: clamp(-58.5rem, -160px, -0rem); } /* 通用卡片 */ .oits-card { background: #2a2f35; border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--oits-radius); box-shadow: var(--oits-shadow); } .oits-card:hover { transform: translateY(-2px); transition: transform .25s ease; } /* 合作品牌卡片（經銷品牌頁） */ .brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1199.98px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } } .brand-card { background: #2f353c; border: 1px solid rgba(255, 255, 255, .06); border-radius: 18px; padding: 24px; display: flex; align-items: center; justify-content: center; transition: box-shadow .25s ease, transform .25s ease; } .brand-card img { max-height: 42px; filter: saturate(0.92) contrast(1.05); } .brand-card:hover { box-shadow: 0 10px 24px rgba(var(--cnvs-themecolor-rgb), .20); transform: translateY(-3px); } /* 流程（專案流程頁） */ .oits-steps { position: relative; padding-left: 24px; } .oits-steps::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(var(--oits-gold-rgb), .0) 0%, rgba(var(--oits-gold-rgb), .8) 50%, rgba(var(--oits-gold-rgb), .0) 100%); } .oits-step { position: relative; padding-left: 56px; margin-bottom: 36px; } .oits-step:last-child { margin-bottom: 0; } .oits-step .dot { position: absolute; left: 12px; top: 6px; width: 24px; height: 24px; border: 2px solid var(--oits-gold); border-radius: 999px; background: radial-gradient(circle at 50% 50%, rgba(var(--oits-gold-rgb), .35), rgba(0, 0, 0, 0)); box-shadow: 0 0 0 4px rgba(var(--oits-gold-rgb), .12); } .oits-step h4 { margin: 0 0 6px; color: var(--oits-white); } .oits-step p { margin: 0; color: var(--oits-gray-300); } /* 共同供應契約：資料塊與附件卡片 */ .oits-spec { background: #2c3137; border: 1px dashed rgba(255, 255, 255, .08); border-radius: var(--oits-radius); padding: 18px 22px; } .oits-attach { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: #262b31; border: 1px solid rgba(255, 255, 255, .06); } .oits-attach .ext { font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(var(--cnvs-themecolor-rgb), .12); color: var(--cnvs-themecolor); } /* 解決方案插圖與圖說 */ .figure-caption { color: var(--oits-gray-300); } /* 表單（聯絡我們 + Modal） */ .input-group>.form-control, .sm-form-control, .form-control { background: #1e2329; border-color: #2c333b; color: var(--oits-gray-200); border-radius: 12px; } .input-group>.form-control:focus, .sm-form-control:focus, .form-control:focus { border-color: rgba(var(--cnvs-themecolor-rgb), .85); box-shadow: 0 0 0 3px rgba(var(--cnvs-themecolor-rgb), .18); color: var(--oits-white); } label { color: var(--oits-gray-300); } /* Modal 視窗（Canvas: .modal-dialog） */ .modal-content { background: linear-gradient(180deg, #1a1f25 0%, #171b20 100%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; } .modal-header, .modal-footer { border-color: rgba(255, 255, 255, .06); } /* 通用按鈕（Canvas 原生 .button 維持，補齊狀態） */ .button, .btn { border-radius: 12px; } .btn-primary, .button.button-3d, .button.button-3d:hover { background-color: var(--cnvs-themecolor) !important; border-color: var(--cnvs-themecolor) !important; color: #fff !important; } .btn-outline-primary { color: var(--cnvs-themecolor); border-color: rgba(var(--cnvs-themecolor-rgb), .9); background: transparent; } .btn-outline-primary:hover { color: #fff; background: var(--cnvs-themecolor); border-color: var(--cnvs-themecolor); } .btn-gold { color: #1a1a1a; background: var(--oits-gold); border-color: var(--oits-gold); } .btn-gold:hover { filter: brightness(.92); } /* 文字連結 */ a, .link { color: var(--cnvs-themecolor); } a:hover, .link:hover { color: rgba(var(--cnvs-themecolor-rgb), .86); } /* 背景輔助 */ .bg-dark-1 { background: var(--oits-dark); } .bg-dark-2 { background: var(--oits-dark-2); } .bg-card { background: #2a2f35; } /* Footer 區（含版權） */ #footer { background: radial-gradient(800px 240px at 10% 0%, rgba(var(--cnvs-themecolor-rgb), .12) 0%, rgba(0, 0, 0, 0) 60%), #14181c; color: var(--oits-gray-300); border-top: 1px solid rgba(255, 255, 255, .06); } #footer .footer-widgets-wrap a { color: var(--oits-gray-200); } #footer .footer-widgets-wrap a:hover { color: var(--cnvs-themecolor); } #copyrights { border-top: 1px solid rgba(255, 255, 255, .06); } .entry-meta:not(.no-separator) li:first-child::before { content: ""; } /* 段落導言、徽章、微元件 */ .lead { color: var(--oits-gray-200); } .badge-primary { background: var(--cnvs-themecolor); } .badge-gold { background: var(--oits-gold); color: #111; } /* 小型陰影與邊框共用 */ .shadow-brand { box-shadow: 0 12px 28px rgba(var(--cnvs-themecolor-rgb), .25); } .border-faint { border: 1px solid rgba(255, 255, 255, .06); } /* --------------------------------------------------------- 3) 響應式微調 --------------------------------------------------------- */ @media (max-width: 1199.98px) { #primary-menu ul li>a { padding-left: 12px; padding-right: 12px; } } @media (max-width: 991.98px) { .brand-card { padding: 18px; } } @media (max-width: 767.98px) { .oits-hero { text-align: center; } .oits-steps { padding-left: 0; } .oits-steps::before { left: 12px; } .oits-step { padding-left: 56px; } } /* --------------------------------------------------------- 4) 暗色模式（若站上有切換，可附帶支援）使用方式：或 --------------------------------------------------------- */ .dark :root { color-scheme: dark; } .dark body { background: linear-gradient(180deg, #0f1215 0%, #1a1d21 100%); } .dark #header.sticky-header { background: rgba(18, 20, 23, .88); } .dark .oits-card, .dark .oits-spec, .dark .oits-attach, .dark .bg-card { background: #262b31; } .dark .form-control, .dark .sm-form-control { background: #1c2127; border-color: #2b323a; } /* --------------------------------------------------------- 5) 可選：首頁 Hero 內文與 CTA 樣式建議 --------------------------------------------------------- */ .oits-hero .oits-title { font-size: clamp(18px, 4vw, 46px); font-weight: 800; line-height: 1.12; } .oits-hero .oits-subtitle { font-size: clamp(16px, 2.2vw, 20px); color: var(--oits-gray-200); } @media (max-width: 1399.98px) { .oits-hero .oits-title, .oits-hero .oits-subtitle { display: none; } } .oits-hero .buttons .btn { padding: 12px 18px; font-weight: 600; } /* --------------------------------------------------------- 6) 輕量動畫（偏好流暢、慎用） --------------------------------------------------------- */ .hover-rise { transition: transform .25s ease, box-shadow .25s ease; } .hover-rise:hover { transform: translateY(-3px); box-shadow: var(--oits-shadow); } /* --------------------------------------------------------- 7) 圖片邊角與遮罩（呼應設計語彙） --------------------------------------------------------- */ .rounded-brand { border-radius: 22px; overflow: hidden; } .circle-mask { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 68%, transparent 69%); mask-image: radial-gradient(circle at 50% 50%, #000 68%, transparent 69%); } /* --------------------------------------------------------- 8) 小細節：表格與提示 --------------------------------------------------------- */ .table { color: var(--oits-gray-200); } .table thead th { color: var(--oits-white); border-bottom-color: rgba(255, 255, 255, .12); } .table tbody tr { border-color: rgba(255, 255, 255, .06); } .alert-primary { background: rgba(var(--cnvs-themecolor-rgb), .12); border-color: rgba(var(--cnvs-themecolor-rgb), .38); color: var(--cnvs-themecolor); } /* ========================================================= End of OITS custom.css ========================================================= */ /* ------其它元件---------------------------------------------------*/ #gotoTop { --cnvs-gotoTop-stroke-color: var(--cnvs-themecolor); --cnvs-gotoTop-stroke-width: 4px; --cnvs-gotoTop-scroll: 260; background-color: transparent !important; } #gotoTop::before { /* font-icons.css */ content: "\F286"; font-family: 'bootstrap-icons'; position: absolute; left: 50%; top: 54%; width: calc(32px + calc(var(--cnvs-gotoTop-stroke-width) * .5)); height: calc(32px + calc(var(--cnvs-gotoTop-stroke-width) * .5)); line-height: calc(32px - 1px); font-size: 1rem; color: var(--oits-gray-600); transform: translate(-50%, -50%); border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 50%; z-index: -1; } #gotoTop circle { stroke: var(--cnvs-gotoTop-stroke-color); stroke-width: var(--cnvs-gotoTop-stroke-width); transform: rotate(-90deg); transform-origin: center; stroke-dashoffset: var(--cnvs-gotoTop-scroll); stroke-dasharray: 255 255; z-index: 1; } /* 側邊欄開啟時，游標變換 */ .side-panel-open:not(.device-xs):not(.device-sm):not(.device-md) .body-overlay:hover { cursor: url(../images/icons/close.png) 15 15, default } .entry-meta li:last-child { margin-right: 0; } .pattern-black-dot { background-image: url('../images/pattern-black-dot.png'); background-color: #676565; background-position: top right; background-repeat: repeat-y; } .pattern-black-shadow { background-image: url('../images/pattern-black-shadow.png'), url('../images/pattern.png'); background-position: top center, left top; background-repeat: repeat-x, repeat; /* background-image: url('../images/pattern-black-shadow.png'); background-position: top center; background-repeat: repeat-x; */ } .content { position: relative; } /*褶疊標題*/ .block-expand-categories h1, .block-expand-categories h2, .block-expand-categories h3 { font-family: Playfair Display, serif !important; } .block-expand-categories .expand-category { --height: 50vh; --responsive-height: 60px; --hover-flex: 10; position: relative; background-position: center center; background-size: cover; border-radius: 20px; margin: 10px 0; min-height: var(--responsive-height); cursor: pointer; } .block-expand-categories .expand-category h4 { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin: 0; transform: translateY(-50%); } /* Larger Device */ @media (min-width: 992px) { .block-expand-categories .expand-category { height: var(--height); flex: 1; margin: 0 10px; transition: flex 1s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .block-expand-categories:not(.on-click) .expand-category:hover, .block-expand-categories.on-click .expand-category.active { flex: var(--hover-flex); } .block-expand-categories .expand-category h4 { opacity: 1; top: auto; bottom: 10px; transform: none; transition: opacity .4s ease; } .block-expand-categories:hover .expand-category:not(.active):not(:hover) h4, .block-expand-categories.on-click .expand-category:not(.active) h4 { opacity: 0; } } /* gold-topleft-box Triangle */ .gold-topleft-box { background-image: url('../images/bg-topLeftGold.png'), url('../images/bg-botm-white.png'); background-position: left top, left bottom; background-repeat: no-repeat, repeat-x; } .link { position: relative; cursor: pointer; white-space: nowrap; color: #333; /* font-size: 1.125rem; */ font-family: 'Roboto', sans-serif; } .link::before, .link::after { position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0; pointer-events: none; } .link::before { content: ''; /* show by default */ } /* Link 3 */ .link-3::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1); } .link-3:hover::before { transform-origin: 0% 50%; transform: scale3d(1, 2, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } .link-3::after { content: ''; top: calc(100% + 4px); transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1); } .link-3:hover::after { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } /* Link 12 */ .link-12 { overflow: hidden; padding: 7px 0; } .link__graphic { position: absolute; top: 0; left: 0; pointer-events: none; fill: none; stroke: #FF9800; stroke-width: 1px; } .link__graphic--slide { top: -3px; stroke-width: 2px; transition: transform 0.7s; transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); } .link:hover .link__graphic--slide { transform: translate3d(-66.6%, 0, 0); } /* --- 各品牌 Logo 陰影白邊效果 --- */ .clients-grid img { filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white); } .clients-grid>.col { align-content: center; } /* --- Brand Logo Glow Effect (GSAP version) --- */ .clients-grid li a { transition: opacity .3s ease-in-out; /* 保留 hover 時的平順感 */ } /* 滑鼠移上去時強制變亮 */ .clients-grid li a:hover { opacity: 1 !important; } /*----------------專案流程-----------*/ .fbox-icon i, .fbox-icon img { border-radius: 50%; background-color: var(--cnvs-themecolor); } .feature-box-border-vertical .feature-box { position: relative; } .feature-box-border-vertical .feature-box:not(.noborder)::before, .feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after { content: ""; position: absolute; top: calc(64px + 13px); left: 59px; width: 2px; height: calc(100% - 90px); background-color: #6d0707c0; z-index: 0; } .feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after { height: 0; transition: height .3s ease-in-out; } .feature-box-border-vertical.border-hover-animate .feature-box:hover:not(.noborder)::after, .feature-box-border-vertical.border-hover-animate .feature-box.isActive:not(.noborder)::after { height: calc(100% - 90px); } .feature-box-border-vertical .fbox-icon i, .feature-box-border-vertical .fbox-border.fbox-light .fbox-icon i { line-height: 60px; font-size: 24px; z-index: 1; text-align: center; } .fbox-border.fbox-light .fbox-icon i, .fbox-border.fbox-light .fbox-icon img { color: var(--cnvs-themecolor); } .fbox-border.fbox-effect .fbox-icon i:hover, .fbox-border.fbox-effect:hover .fbox-icon i, .feature-box.isActive .fbox-icon i { color: #fff; box-shadow: 0 0 0 1px var(--cnvs-featured-box-bg-dark); } .feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after { background-color: var(--cnvs-themecolor); } .fbox-border.fbox-effect .fbox-icon i::after { background-color: var(--cnvs-themecolor); } .feature-box.fbox-effect.isActive .fbox-icon i::after { opacity: 1 !important; } /*---------解決方案-----------------*/ .blocks-sticky .sticky-section { top: 100px; } @media (max-width: 992px) { .blocks-sticky .sticky-section { position: relative !important; top: 0 !important; } } #solution .nav-link:hover { color: var(--cnvs-themecolor); } #solution .nav-link.active:hover { color: #fff; } /*---------隱私宣告----------------*/ .gdpr-settings.dark { background-color: #000000b0; /* 半透明黑背景 */ } /* ------圖片比較--------*/ .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 4px; height: 9999px; left: 50%; margin-left: -2px; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; } .twentytwenty-container img { width: 100%; position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; } .twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .twentytwenty-before-label { opacity: 0; } .twentytwenty-before-label:before { content: "Before"; } .twentytwenty-after-label { opacity: 0; } .twentytwenty-after-label:before { content: "After"; } .twentytwenty-horizontal .twentytwenty-before-label:before { left: 10px; } .twentytwenty-horizontal .twentytwenty-after-label:before { right: 10px; } .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); } .twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; } .twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; } .twentytwenty-before { z-index: 20; } .twentytwenty-after { z-index: 10; } .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; background-color: #FFF; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow { border-right: 6px solid #999; left: 50%; margin-left: -17px; } .twentytwenty-right-arrow { border-left: 6px solid #999; right: 50%; margin-right: -17px; } /* twentytwenty-horizontal End */ /* .arrow-transparent */ .arrow-transparent .twentytwenty-handle { background-color: transparent; } .arrow-transparent .twentytwenty-left-arrow, .twentytwenty-container[class*="bg-"] .twentytwenty-left-arrow { border-right-color: #FFF; } .arrow-transparent .twentytwenty-right-arrow, .twentytwenty-container[class*="bg-"] .twentytwenty-right-arrow { border-left-color: #FFF; } .arrow-rounded .twentytwenty-handle { border-radius: 4px; } /* .arrow-rounded */ .arrow-square .twentytwenty-handle { border-radius: 0; } /* .arrow-square */ /* .arrow-diamond */ .arrow-diamond .twentytwenty-handle { border: 0; box-shadow: none; background-color: transparent; } .arrow-diamond .twentytwenty-handle span.twentytwenty-left-arrow:after { content: ""; position: absolute; width: 38px; height: 38px; left: 50%; top: 50%; border: 3px solid #FFF; z-index: -1; border-radius: 2px; box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); transform: translate(-22%, -50%) rotate(45deg); } .arrow-diamond:not(.arrow-transparent) .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: #FFF } .arrow-diamond .twentytwenty-handle:before { bottom: calc(50% + 3px); } .arrow-diamond .twentytwenty-handle:after { top: calc(50% + 3px); } /* bg-primary */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-primary .twentytwenty-handle, .arrow-diamond.bg-primary .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--primary, #007bff); } /* bg-secondary */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-secondary .twentytwenty-handle, .arrow-diamond.bg-secondary .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--secondary, #6c757d); } /* bg-warning */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-warning .twentytwenty-handle, .arrow-diamond.bg-warning .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--warning, #ffc107); } /* bg-info */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-info .twentytwenty-handle, .arrow-diamond.bg-info .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--info, #17a2b8); } /* bg-danger */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-danger .twentytwenty-handle, .arrow-diamond.bg-danger .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--danger, #dc3545); } /* bg-success */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-success .twentytwenty-handle, .arrow-diamond.bg-success .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--success, #28a745); } /* bg-dark */ .twentytwenty-container:not(.arrow-transparent):not(.arrow-diamond).bg-dark .twentytwenty-handle, .arrow-diamond.bg-dark .twentytwenty-handle span.twentytwenty-left-arrow:after { background-color: var(--dark, #343a40); } /* ========================================================= 公司歷程時間軸樣式 (GSAP 動畫版) ========================================================= */ /* 時間軸容器 */ .company-timeline-gsap { position: relative; padding-left: 65px; min-height: 100px; /* 固定容器高度 */ overflow: visible; } /* 垂直金色線條 */ .company-timeline-gsap::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.9) 15%, rgba(212, 175, 55, 0.9) 85%, rgba(212, 175, 55, 0) 100%); z-index: 0; } /* 每個時間軸項目 */ .company-timeline-gsap .timeline-item { position: absolute; /* 改為絕對定位，方便 GSAP 控制 */ top: 0; left: 0; right: 0; display: flex; align-items: flex-start; padding: 15px 0; height: 100px; opacity: 0; /* 初始隱藏 */ visibility: hidden; } /* 左側圓點圖示 */ .company-timeline-gsap .timeline-icon { position: absolute; left: 9px; top: 18px; width: 25px; height: 25px; border-radius: 50%; background: var(--cnvs-themecolor); border: 3px solid rgba(212, 175, 55, 0.3); display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.15); } .company-timeline-gsap .timeline-icon i { font-size: 18px; color: #1a1a1a; font-weight: bold; line-height: 1; } /* 右側內容區 */ .company-timeline-gsap .timeline-content { flex: 1; padding-left: 60px; display: flex; flex-direction: column; justify-content: center; } .company-timeline-gsap .timeline-content h5 { font-size: 15px; font-weight: 600; color: #ffffff; line-height: 1.5; margin: 0 0 6px 0; } .company-timeline-gsap .timeline-content p { font-size: 13px; color: #999; margin: 0; line-height: 1.4; } /* 響應式調整 */ @media (max-width: 767.98px) { .company-timeline-gsap { padding-left: 50px; } .company-timeline-gsap .timeline-icon { width: 32px; height: 32px; top: 18px; left: 1px; } .company-timeline-gsap .timeline-icon i { font-size: 14px; } .company-timeline-gsap::before { left: 16px; } .company-timeline-gsap .timeline-item { height: 90px; padding: 12px 0; } .company-timeline-gsap .timeline-content { padding-left: 45px; } .company-timeline-gsap .timeline-content h5 { font-size: 14px; } .company-timeline-gsap .timeline-content p { font-size: 12px; } } .gold-topleft-box .fancy-title::before, .fancy-title::after { border-top-color: rgba(var(--cnvs-contrast-rgb), 0.7); }