/* 僅服務頁：左側索引、中央敘事與大幅玻璃視覺共用同一個緊密構圖。 */
.digital_services_body .service_explorer { position: relative; isolation: isolate; padding-block: 76px 72px; border-top: 0; background: #fcfdfc; }
.digital_services_body .services_explorer_ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.digital_services_body .services_explorer_ambient::before { content: ''; position: absolute; width: 60%; height: 80%; right: -5%; top: 8%; background: radial-gradient(ellipse, #b9e3e43d, transparent 65%); transition: transform var(--services-duration-scene, 850ms) var(--services-ease-out, ease), opacity var(--services-duration-scene, 850ms) ease; }
.digital_services_body [data-active-kind='system'] .services_explorer_ambient::before { transform: translate(-6%, 8%) scale(.94); opacity: .7; }
.digital_services_body [data-active-kind='intelligence'] .services_explorer_ambient::before { transform: translate(-11%, -8%) scale(1.08); opacity: .88; }
.digital_services_body [data-active-kind='mobile'] .services_explorer_ambient::before { transform: translate(3%, 10%) scale(.88); opacity: .64; }
@media (max-width: 700px) { .digital_services_body .services_explorer_ambient::before { width: 110%; height: 50%; top: auto; bottom: 0; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .digital_services_body .services_explorer_ambient::before { transition: none; transform: none; } }
.digital_services_body .service_explorer_layout { display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr); gap: 5%; align-items: center; }
.digital_services_body .services_explorer_sidebar { position: relative; z-index: 2; min-width: 0; }
.digital_services_body .service_explorer .digital_section_intro { display: block; margin: 0 0 30px; }
.digital_services_body .service_explorer .digital_section_intro .digital_eyebrow { margin: 0 0 22px; font-size: 9px; letter-spacing: .18em; }
.digital_services_body .service_explorer .digital_section_intro h2 { margin: 0 0 17px; font-size: clamp(29px, 2.65vw, 43px); line-height: 1.5; letter-spacing: .04em; }
.digital_services_body .service_explorer .digital_section_intro > p:last-child { margin: 0; font-size: 12px; line-height: 1.95; color: #6d8188; }
@media (min-width: 1700px) { .digital_services_body .service_explorer { padding-block: 95px; } }
@media (max-width: 1100px) { .digital_services_body .service_explorer { padding-block: 68px; } .digital_services_body .service_explorer_layout { grid-template-columns: minmax(0, 29%) minmax(0, 1fr); gap: 5%; align-items: start; } .digital_services_body .service_explorer .digital_section_intro h2 { font-size: 28px; } }
@media (max-width: 700px) { .digital_services_body .service_explorer { padding-block: 56px 38px; } .digital_services_body .service_explorer_layout { display: block; } .digital_services_body .service_explorer .digital_section_intro { margin-bottom: 25px; } .digital_services_body .service_explorer .digital_section_intro h2 { font-size: 32px; } .digital_services_body .service_explorer .digital_section_intro > p:last-child { font-size: 13px; } }

/* 索引顯示所有後台服務，清楚的細線與節點指出目前選項。 */
.digital_services_body .service_index { position: static; }
.digital_services_body .service_index a { position: relative; min-height: 37px; padding: 8px 8px 8px 0; gap: 15px; border-bottom: 1px solid #1f475313; color: #5b737c; line-height: 1.6; transition: color .35s, border-color .35s, padding .35s; }
.digital_services_body .service_index a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #249fa5; transform: scaleX(0); transform-origin: left; transition: transform .65s var(--services-ease-out, ease); }
.digital_services_body .service_index a[aria-current='true']::after { transform: scaleX(1); }
.digital_services_body .service_index a > .service_index_number { min-width: 18px; font-size: 9px; letter-spacing: .08em; }
.digital_services_body .service_index_label { font-size: clamp(10px, .87vw, 13px); text-transform: uppercase; letter-spacing: .045em; }
.digital_services_body .service_index a > i { margin-left: auto; font-size: 14px; line-height: 1; }
.digital_services_body .service_index a[aria-current='true'] { color: #168f96; border-color: #1f475313; padding-left: 12px; }
.digital_services_body .service_index a[aria-current='true']::before { content: ''; width: 4px; height: 4px; background: #249fa5; border-radius: 50%; position: absolute; left: 0; box-shadow: 0 0 0 4px #249fa510; }
.digital_services_body .service_index a:focus-visible { outline: 1px solid #249fa5; outline-offset: 5px; }
.digital_services_body .service_index a:hover { padding-left: 12px; color: #168f96; }
@media (max-width: 1100px) { .digital_services_body .service_index_label { font-size: 10px; letter-spacing: .02em; } .digital_services_body .service_index a { gap: 10px; } }
@media (max-width: 700px) { .digital_services_body .service_index { display: flex; gap: 20px; overflow-x: auto; margin: 0 -24px 25px; padding: 0 24px 12px; scrollbar-width: thin; scrollbar-color: #94c0c1 transparent; scroll-padding-inline: 24px; } .digital_services_body .service_index a { min-height: 45px; padding-inline: 0; flex: 0 0 auto; } .digital_services_body .service_index_label { font-size: 11px; } .digital_services_body .service_index a:hover, .digital_services_body .service_index a[aria-current='true'] { padding-left: 0; } .digital_services_body .service_index a[aria-current='true']::before { display: none; } }

/* 伺服器已選中一項服務，停用 JavaScript 時仍能以原生服務網址完成切換。 */
.digital_services_body .service_panels { position: relative; min-width: 0; }
.digital_services_body .service_panel, .digital_services_body .service_explorer.is_enhanced .service_panel { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 0; min-height: 610px; margin: 0; padding: 0; border: 0; align-items: center; }
.digital_services_body .service_panel[data-transition-role='outgoing'] { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.digital_services_body .service_panel_copy { position: relative; z-index: 2; padding-right: 26px; align-self: center; }
.digital_services_body .service_panel_copy .services_text_mask { overflow: clip; padding-block: .08em; overflow-wrap: anywhere; }
.digital_services_body .services_text_inner { display: block; }
.digital_services_body .services_explorer_status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.digital_services_body .service_panel_copy > .digital_eyebrow { justify-content: space-between; margin: 0 0 24px; color: #6b838a; font-size: 9px; letter-spacing: .14em; }
.digital_services_body .service_panel_copy .digital_service_icon { width: 20px; height: 20px; }
.digital_services_body .service_english { margin: 0 0 6px; font-size: clamp(25px, 2.2vw, 36px); line-height: 1.28; letter-spacing: -.025em; color: #284958; }
.digital_services_body .service_panel h3 { margin: 0 0 23px; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.5; letter-spacing: .06em; }
.digital_services_body .service_intro { margin: 0; font-size: 13px; line-height: 2.05; color: #617984; }
.digital_services_body .service_capabilities { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #36576220; font-size: 12px; line-height: 1.95; color: #607780; overflow-wrap: anywhere; }
.digital_services_body .service_capabilities :is(ul,ol) { margin: 0; padding: 0; list-style: none; }
.digital_services_body .service_capabilities li { position: relative; margin: 0 0 12px; padding-left: 15px; }
.digital_services_body .service_capabilities li::before { content: '+'; position: absolute; left: 0; top: 0; color: #229d9c; font-size: 12px; }
.digital_services_body .service_capabilities > :last-child { margin-bottom: 0; }
.digital_services_body .service_panel_links { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 27px; }
.digital_services_body .services_explore_link { width: min(215px, 100%); display: flex; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid #2a899659; font-size: 10px; letter-spacing: .09em; }
.digital_services_body .services_explore_link > span:first-child { font-size: 11px; line-height: 1.6; white-space: nowrap; color: inherit; transform: none; transition: none; }
.digital_services_body .services_explore_link > span:last-child { font-size: 21px; line-height: 1; transition: transform .4s ease; }
.digital_services_body .services_explore_link:hover > span:last-child { transform: translate(3px, -3px); }
.digital_services_body .service_panel_links .digital_permalink { color: #6b858b; font-size: 11px; }
@media (max-width: 1100px) { .digital_services_body .service_panel, .digital_services_body .service_explorer.is_enhanced .service_panel { grid-template-columns: 1fr; min-height: 0; } .digital_services_body .service_panel_copy { padding: 7px 0 0; max-width: 510px; } .digital_services_body .service_english { font-size: 31px; } .digital_services_body .service_capabilities { margin-top: 18px; } .digital_services_body .service_panel_links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 22px; } }
@media (max-width: 700px) { .digital_services_body .service_panel_copy { max-width: none; padding-top: 6px; } .digital_services_body .service_english { font-size: 31px; } .digital_services_body .service_panel h3 { font-size: 24px; margin-bottom: 18px; } .digital_services_body .service_intro { font-size: 14px; } .digital_services_body .service_capabilities { font-size: 13px; } .digital_services_body .service_panel_copy > .digital_eyebrow { margin-bottom: 20px; } }

/* 視覺超出欄寬，保留品牌圖庫的完整玻璃結構與底座，不套卡片邊框。 */
.digital_services_body .service_panel_visual { position: relative; display: grid; align-self: stretch; place-items: center; min-height: 560px; width: 100%; max-width: none; background: radial-gradient(ellipse at 62% 46%, #d1eeef55 0, transparent 67%); isolation: isolate; }
.digital_services_body .service_panel_visual[data-visual-kind='intelligence'] { background: radial-gradient(ellipse at 62% 46%, #d4e7ec55 0, transparent 67%); }
.digital_services_body .service_panel_visual[data-visual-kind='mobile'] { background: radial-gradient(ellipse at 62% 46%, #d6eee555 0, transparent 67%); }
.digital_services_body .service_panel_visual > img { position: relative; z-index: 1; width: 138%; max-width: none; height: auto; max-height: none; object-fit: contain; transform: translateX(3%); transition: transform .9s var(--services-ease-out, ease); }
.digital_services_body .services_visual_orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; stroke: #60abb64d; stroke-width: .7; }
.digital_services_body .services_visual_orbits > path { stroke-dasharray: 2 8; opacity: .5; }
.digital_services_body .services_orbit_node { fill: #489bac; stroke: #e3f8f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: services_node_drift 23s ease-in-out infinite alternate; }
.digital_services_body .services_orbit_node_secondary { animation-name: services_node_drift_secondary; animation-duration: 31s; animation-delay: -9s; opacity: .7; }
.digital_services_body .service_panel_visual:not([data-motion-visible='true']) .services_orbit_node,
.digital_services_body[data-motion-paused='true'] .services_orbit_node { animation-play-state: paused; }
.digital_services_body .services_visual_fallback_icon { display: none; place-items: center; width: 70%; aspect-ratio: 1; border: 1px solid #7bbac62b; border-radius: 50%; background: radial-gradient(circle, #d4eff170, transparent 70%); }
.digital_services_body .services_visual_fallback_icon .digital_service_icon { width: 25%; height: auto; color: #4798a2; }
.digital_services_body .service_panel_visual.is_image_unavailable .services_visual_fallback_icon { display: grid; }
@keyframes services_node_drift { 0% { transform: translate(0, 0); opacity: .7; } 42% { transform: translate(13px, -19px); opacity: 1; } 100% { transform: translate(-9px, 15px); opacity: .5; } }
@keyframes services_node_drift_secondary { 0% { transform: translate(0, 0); } 58% { transform: translate(-18px, 12px) scale(.85); } 100% { transform: translate(8px, -16px); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) { .digital_services_body .service_panel_visual:hover > img { transform: translateX(3%) translateY(-6px) scale(1.025); } }
@media (max-width: 1100px) { .digital_services_body .services_orbit_node { animation: none; } .digital_services_body .services_visual_orbits { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .digital_services_body .services_orbit_node { animation: none; } .digital_services_body .service_panel_visual > img { transition: none; } .digital_services_body .service_panel_visual:hover > img { transform: translateX(3%); } .digital_services_body .service_index a::after { transition: none; } }
.digital_services_body .service_visual_brand > img { mix-blend-mode: multiply; }
.digital_services_body .service_visual_uploaded > img { width: 112%; max-height: 550px; }
.digital_services_body .services_visual_coordinate { position: absolute; left: 6%; top: 6%; color: #7c949a; font-size: 7px; letter-spacing: .19em; }
.digital_services_body .services_visual_coordinate::before { content: '+'; display: inline-block; margin-right: 13px; font-size: 15px; color: #3a929a; }
.digital_services_body .service_visual_label { inset: auto 0 7% 7%; padding-top: 15px; font-size: 7px; letter-spacing: .17em; color: #7b9097; border-color: #4769751b; }
@media (min-width: 1700px) { .digital_services_body .service_panel_visual { min-height: 660px; } }
@media (max-width: 1100px) { .digital_services_body .service_panel_visual { min-height: 310px; margin: 12px 0 0; justify-self: stretch; } .digital_services_body .service_panel_visual > img { width: 115%; max-width: 640px; transform: translateX(3%); } .digital_services_body .services_visual_coordinate { top: 2%; } .digital_services_body .service_visual_label { bottom: 0; } .digital_services_body .service_visual_uploaded > img { max-height: 330px; } }
@media (max-width: 700px) { .digital_services_body .service_panel_visual { min-height: 300px; margin-top: 20px; padding-bottom: 20px; } .digital_services_body .service_panel_visual > img { width: 120%; transform: none; } .digital_services_body .services_visual_coordinate { left: 0; font-size: 6px; } .digital_services_body .service_visual_label { left: 0; right: 0; font-size: 6px; } }

/* 流程段以一條連續細線串起階段，與兩側影像場景形成沉靜的閱讀停頓。 */
.digital_services_body .digital_process { padding-block: 84px 72px; background: #fafcfb; }
.digital_services_body .digital_process_heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.digital_services_body .digital_process_heading .digital_eyebrow { margin-bottom: 20px; font-size: 9px; letter-spacing: .18em; }
.digital_services_body .digital_process_heading h2 { margin: 0; font-size: clamp(27px, 2.6vw, 39px); line-height: 1.5; letter-spacing: .04em; }
.digital_services_body .digital_process_heading h2 br { display: none; }
.digital_services_body .services_process_promise { padding-bottom: 5px; }
.digital_services_body .services_process_promise p { margin: 0 0 5px; font-size: clamp(15px, 1.3vw, 20px); letter-spacing: -.01em; }
.digital_services_body .services_process_promise > span { display: block; color: #7f9196; font-size: 9px; letter-spacing: .025em; }
.digital_services_body .services_process_body { display: grid; grid-template-columns: minmax(0, 1fr) 165px; align-items: start; gap: 40px; margin-top: 60px; }
.digital_services_body .digital_process_line { display: grid; grid-template-columns: repeat(var(--process_stages), minmax(0, 1fr)); padding: 0; margin: 0; overflow: visible; list-style: none; }
.digital_services_body .digital_process_line li { position: relative; min-width: 0; flex: none; padding: 0; border-top: 1px solid #577c8633; list-style: none; }
.digital_services_body .digital_process_line li::before { display: none; }
.digital_services_body .digital_process_line li::marker { content: ''; }
.digital_services_body .digital_process_line li::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #58a6a4; transform: scaleX(0); transform-origin: left; transition: transform .65s ease; }
.digital_services_body .digital_process_line li.is_complete::after { transform: scaleX(1); }
.digital_services_body .digital_process_line li:last-child { border-top-color: transparent; }
.digital_services_body .digital_process_line a { display: block; position: relative; padding: 23px 8px 0 0; min-height: 116px; }
.digital_services_body .services_process_node { position: absolute; top: -5px; left: 0; display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #89b7b8; background: #fafcfb; transition: background .4s, box-shadow .4s; }
.digital_services_body .digital_process_line .is_active .services_process_node { background: #2c9d9c; border-color: #2c9d9c; box-shadow: 0 0 0 5px #2c9d9c12; }
.digital_services_body .digital_process_line .is_complete .services_process_node { background: #2c9d9c; }
.digital_services_body .digital_process_line .services_process_number { display: block; margin: 0 0 8px; color: #8c9ba1; font-size: 10px; letter-spacing: .08em; }
.digital_services_body .digital_process_line strong { display: block; font-size: 14px; line-height: 1.5; letter-spacing: .055em; font-weight: 500; color: #47636f; overflow-wrap: anywhere; }
.digital_services_body .digital_process_line small { display: block; margin-top: 6px; font-size: 13px; color: #758b93; line-height: 1.7; }
.digital_services_body .digital_process_line .is_active :is(strong, .services_process_number) { color: #1c9696; }
.digital_services_body .services_process_controls { padding-top: 0; }
.digital_services_body .services_process_arrows { display: none; gap: 9px; margin-bottom: 16px; }
.digital_services_body .digital_process.is_enhanced .services_process_arrows { display: flex; }
.digital_services_body .services_process_arrows button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #57818b54; border-radius: 50%; background: transparent; cursor: pointer; transition: background .3s, border-color .3s; }
.digital_services_body .services_process_arrows button > span { display: block; font-size: 19px; line-height: 1; }
.digital_services_body .services_process_arrows button:hover { border-color: #1b9597; background: #eaf4f2; }
.digital_services_body .services_process_arrows button:disabled { opacity: .35; cursor: default; }
.digital_services_body .services_process_controls > .digital_text_link { font-size: 10px; letter-spacing: .02em; gap: 11px; }
.digital_services_body .services_process_description { min-height: 22px; margin: 10px 205px 0 0; color: #7a9399; font-size: 12px; line-height: 1.8; }
.digital_services_body .services_process_description:empty { display: none; }
@media (max-width: 1100px) { .digital_services_body .digital_process { padding-block: 60px 45px; } .digital_services_body .services_process_body { grid-template-columns: minmax(0, 1fr) 105px; gap: 22px; margin-top: 42px; } .digital_services_body .digital_process_line strong { font-size: 11px; letter-spacing: .02em; } .digital_services_body .digital_process_line small { font-size: 11px; } .digital_services_body .services_process_description { margin-right: 127px; } }
@media (max-width: 700px) { .digital_services_body .digital_process { padding-block: 55px 45px; } .digital_services_body .digital_process_heading { display: block; } .digital_services_body .digital_process_heading h2 { font-size: 30px; margin: 0; } .digital_services_body .digital_process_heading h2 br { display: initial; } .digital_services_body .services_process_promise { margin-top: 22px; } .digital_services_body .services_process_promise p { font-size: 16px; } .digital_services_body .services_process_body { display: block; margin-top: 31px; } .digital_services_body .digital_process_line { display: block; padding: 0 0 0 5px; } .digital_services_body .digital_process_line li { border-top: 0; border-left: 1px solid #577c8633; min-height: 68px; padding-left: 23px; } .digital_services_body .digital_process_line li:last-child { border-left-color: transparent; } .digital_services_body .digital_process_line li::after { top: 0; bottom: 0; right: auto; left: -1px; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; } .digital_services_body .digital_process_line li.is_complete::after { transform: scaleY(1); } .digital_services_body .digital_process_line a { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 0 0 22px; min-height: 68px; } .digital_services_body .services_process_node { left: -28px; top: 5px; } .digital_services_body .digital_process_line .services_process_number { margin: 0; line-height: 1.8; } .digital_services_body .digital_process_line strong { font-size: 11px; line-height: 1.6; letter-spacing: .04em; } .digital_services_body .digital_process_line small { font-size: 11px; line-height: 1.6; margin: 0; } .digital_services_body .services_process_controls { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; } .digital_services_body .services_process_arrows { margin: 0; } .digital_services_body .services_process_arrows button { width: 44px; height: 44px; } .digital_services_body .services_process_description { margin: 20px 0 0; font-size: 12px; } }
@media (max-width: 380px) { .digital_services_body .digital_process_line a { grid-template-columns: 19px 91px minmax(0, 1fr); column-gap: 7px; } .digital_services_body .digital_process_line strong, .digital_services_body .digital_process_line small { font-size: 10px; } }

/* 使用者降低動態時，保留選中狀態但不播放視覺轉場。 */
@media (prefers-reduced-motion: reduce) { .digital_services_body :is(.service_index a, .services_explore_link > span:last-child, .services_process_node, .digital_process_line li::after, .services_process_arrows button) { transition: none; } }