/* ══ 產品總覽頁 overview.html（2026-09-29 改版）══
   hero 沿用 smpBanner 斜切版型 + .device-seeker-sol 品牌藍；其餘區塊沿用 productoverview.css，
   這支只放新增區塊（Tools and apps、ePaper）、hero 微調與標題層級調整。 */

/* Hero：overview_banner（Meg 2026-10-07 提供的 1920×550 新圖；主體約在 31%–73%），og:image / schema 同一張。
   Robustie / Flexie 頁各用 Robustie_banner、flexie_banner */
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero {
	--smp-image-position-x: calc(70% - 100px); /* Meg 2026-09-30：hero 圖往左 100px（各斷點都減 100px） */
	--smp-image-position-y: 50%;
}

/* 寬螢幕原本右移 200px / 80px，之後整體再往左 100px（Meg 2026-09-30） */
@media only screen and (min-width: 1700px) {
	.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero { --smp-image-position-x: calc(70% + 100px); }
}

@media only screen and (min-width: 1441px) and (max-width: 1699px) {
	.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero { --smp-image-position-x: calc(70% - 20px); }
}

.po-hero__videos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.po-video-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: filter .2s ease;
}

.po-video-btn:hover { filter: brightness(1.1); text-decoration: none; }
.po-video-btn--robustie { background: #693ca5; }
.po-video-btn--flexie { background: #1089c6; }

/* Premium software 輪播（2026-09-30 改版，參考 Transparent Slider）
   深色區塊 + 玻璃卡片；每張卡片用 --a 當重點色（頂部亮線、標籤、標題強調、按鈕、圖示光圈）。
   productoverview.css 有全域 .swiper / .swiper-slide 規則（80% 寬、600px 高圖），這裡全部用 .po-sw 蓋掉 */
@keyframes po-sw-float { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-12px) rotate(2deg); } 70% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes po-sw-spin { to { transform: rotate(360deg); } }
@keyframes po-sw-spin-r { to { transform: rotate(-360deg); } }
@keyframes po-sw-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes po-sw-in { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes po-sw-shimmer { 0% { left: -100%; } 100% { left: 200%; } }
@keyframes po-sw-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.po-software {
	clear: both;
	position: relative;
	overflow: hidden;
	background: #f4f4f4; /* 淺底；區塊外原本白色的元件改用 CAYIN blue #007ED4 */
}

.po-software .po-section { padding-bottom: 60px; }
.po-software .po-section__lead { margin-bottom: 32px; color: #595959; }

.po-sw { position: relative; padding: 0 56px; }

.po-sw .po-sw__swiper { padding: 0; margin: 0; border-radius: 22px; }
.po-sw .swiper-wrapper { transition-timing-function: cubic-bezier(.76, 0, .24, 1); }

.po-sw .po-sw__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	box-sizing: border-box; /* 1px 外框算在寬度內，否則每張比輪播框寬 2px，切換後會露出上一張的邊 */
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 380px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 22px;
	background: rgba(12, 12, 22, .6);
	box-shadow: 0 10px 30px rgba(8, 30, 60, .18);
	text-align: left;
}

/* 產品情境照當背景，左側壓暗成玻璃面 */
.po-sw .po-sw__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% center;
	z-index: 0;
	outline: 0;
	border-radius: 0;
}

.po-sw__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(10, 14, 26, .95) 0%, rgba(10, 14, 26, .88) 45%, rgba(10, 14, 26, .45) 100%);
}

/* 頂部重點色亮線 */
.po-sw__card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 3;
	background: linear-gradient(90deg, transparent, var(--a) 35%, var(--a) 65%, transparent);
}

.po-sw__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	padding: 48px 40px 48px 56px;
}

.po-sw__card.is-anim .po-sw__content > * { animation: po-sw-in .5s cubic-bezier(.22, .68, 0, 1.2) both; }
.po-sw__card.is-anim .po-sw__content > :nth-child(2) { animation-delay: .1s; }
.po-sw__card.is-anim .po-sw__content > :nth-child(3) { animation-delay: .16s; }
.po-sw__card.is-anim .po-sw__content > :nth-child(4) { animation-delay: .22s; }

.po-sw__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px 5px 9px;
	border: 1.5px solid var(--a);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--a);
}

.po-sw__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--a);
	animation: po-sw-dot 2s ease-in-out infinite;
}

.po-page .po-sw__title {
	margin: 0;
	padding: 0;
	max-width: 520px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.po-sw__title em { font-style: normal; color: var(--a); }

.po-sw__body {
	margin: 0;
	max-width: 460px;
	font-size: 15px;
	line-height: 1.72;
	color: rgba(214, 226, 240, .75);
}

.po-sw__actions { margin-top: 4px; }

.po-sw__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	padding: 11px 22px;
	border-radius: 10px;
	background: var(--a);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #0a1220;
	text-decoration: none;
	box-shadow: 0 4px 18px -3px var(--a), 0 2px 6px rgba(0, 0, 0, .35);
	transition: transform .2s ease, box-shadow .2s ease;
}

.po-sw__btn::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 45%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-15deg);
}

.po-sw__btn:hover,
.po-sw__btn:focus-visible {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 8px 26px -3px var(--a), 0 4px 10px rgba(0, 0, 0, .4);
	color: #0a1220;
	text-decoration: none;
}

.po-sw__btn:hover::before { animation: po-sw-shimmer .55s ease; }

/* 右側：產品圖示 + 脈衝光圈 */
.po-sw__visual {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.po-sw__icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	animation: po-sw-float 8s ease-in-out infinite;
}

.po-sw__ring {
	position: absolute;
	inset: -16px;
	border: 1.5px solid var(--a);
	border-radius: 50%;
	opacity: 0;
	animation: po-sw-ring 2.6s ease-out infinite;
}

.po-sw__ring:nth-child(2) { inset: -30px; animation-delay: .85s; }
.po-sw__ring:nth-child(3) { inset: -44px; animation-delay: 1.7s; }

.po-sw__spin,
.po-sw__spin2 {
	position: absolute;
	border-radius: 50%;
	border: 1.5px dashed var(--a);
}

.po-sw__spin { inset: -24px; opacity: .25; animation: po-sw-spin 20s linear infinite; }
.po-sw__spin2 { inset: -38px; border-width: 1px; opacity: .12; animation: po-sw-spin-r 28s linear infinite; }

.po-sw__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	border: 1.5px solid rgba(255, 255, 255, .14);
	border-radius: 26px;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .35), 0 0 36px -6px var(--a);
}

.po-sw .po-sw__icon-box img { width: 80px; height: 80px; border-radius: 18px; outline: 0; }

/* 左右箭頭（在卡片外側） */
.po-sw__nav {
	position: absolute;
	top: 190px; /* 卡片 380px 高的中線 */
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	border: 1.5px solid #007ED4;
	border-radius: 11px;
	background: #fff;
	color: #007ED4;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}

.po-sw__nav:hover { background: #007ED4; border-color: #007ED4; color: #fff; transform: translateY(-50%) scale(1.07); }
.po-sw__nav--prev { left: 0; }
.po-sw__nav--next { right: 0; }

/* 圓點 + 自動播放進度條 */
.po-sw__controls { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 28px; }
.po-sw .po-sw__dots { position: static; display: flex; justify-content: center; gap: 8px; width: auto; line-height: 0; }

.po-sw .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 999px;
	background: rgba(0, 126, 212, .25);
	opacity: 1;
	transition: width .4s cubic-bezier(.4, 0, .2, 1), background .4s ease;
}

.po-sw .swiper-pagination-bullet:hover { background: rgba(0, 126, 212, .5); }
.po-sw .swiper-pagination-bullet-active { width: 32px; background: #007ED4; box-shadow: 0 0 10px rgba(0, 126, 212, .35); }

.po-sw__bar { width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(0, 126, 212, .15); }
.po-sw__fill { display: block; width: 0; height: 100%; border-radius: 2px; transition: background .4s; }

@media (prefers-reduced-motion: reduce) {
	.po-sw__icon-wrap, .po-sw__spin, .po-sw__spin2, .po-sw__badge-dot,
	.po-sw__card.is-anim .po-sw__content > * { animation: none; }
	.po-sw__ring { display: none; }
}

@media only screen and (max-width: 860px) {
	.po-sw { padding: 0 44px; }
	.po-sw .po-sw__card { grid-template-columns: minmax(0, 1fr) 210px; min-height: 340px; }
	.po-sw__content { padding: 40px 28px 40px 40px; }
	.po-sw__icon-wrap { width: 100px; height: 100px; }
	.po-sw__icon-box { width: 86px; height: 86px; border-radius: 20px; }
	.po-sw .po-sw__icon-box img { width: 64px; height: 64px; border-radius: 14px; }
	.po-sw__nav { top: 170px; }
}

@media only screen and (max-width: 760px) {
	.po-sw { padding: 0; }
	.po-sw .po-sw__card { grid-template-columns: 1fr; min-height: 0; }
	.po-sw__card::before { background: linear-gradient(180deg, rgba(10, 14, 26, .7) 0%, rgba(10, 14, 26, .94) 55%); }
	.po-sw__visual, .po-sw__nav { display: none; } /* 手機用滑動 */
	.po-sw__content { padding: 36px 24px; gap: 14px; }
}

/* SMP / SMP-XXXX / CMS 產品名稱用 good-times 字型（這頁原本沒有 .gt 規則） */
.po-page .gt { font-family: good-times, 'Poppins', sans-serif; }
/* productoverview.css 的 .box span / .Box span 是 display:block + float:left，會把 .gt 整段斷行（同 face-detection 的做法） */
#MainWrap.po-page span.gt { display: inline; float: none; width: auto; margin: 0; padding: 0; }

/* 新增區塊共用 */
.po-section {
	clear: both; /* 前一區塊 #enhancmentSoftwareP 在 productoverview.css 是 float:left */
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px 20px;
	box-sizing: border-box;
	text-align: center;
}

.po-section__title { margin: 0 0 8px; color: #595959; font-weight: 300; } /* 同 web-technologies 區塊標題 */

.po-section__lead {
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	color: #595959;
}

/* SMP 播放器型號卡片（放在 SMP Players 區塊右欄，取代系列合照）：8100 / 2400 / 2200 */
.po-page .digitalSignagePlayers2 .contents .box.po-players { justify-content: center; }

.po-players__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 四台機種（加入 SMP-2210 後）：排成 2x2 */
.po-players__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.po-player {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 16px 12px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(87, 197, 255, 0.22);
	text-align: center;
	text-decoration: none;
	transition: box-shadow .3s cubic-bezier(.2, 0, 0, 1), transform .3s cubic-bezier(.2, 0, 0, 1);
}

.po-player:hover { box-shadow: 0 3px 18px rgba(87, 197, 255, 0.45); transform: translateY(-3px); text-decoration: none; }
.po-player__img { display: flex; align-items: center; justify-content: center; width: 100%; height: 90px; }
.po-player__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.po-page .po-player__name { margin: 10px 0 6px; padding: 0; font-size: 17px; font-weight: 600; color: #333; text-align: center; }
.po-player p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #595959; flex: 1; }
/* 大小顏色同左欄「Compare players >」；要用 #MainWrap 蓋過 productoverview.css 的 .box span 規則 */
#MainWrap.po-page .po-player__link { float: none; width: auto; font-size: 1.08em; font-weight: 300; color: #007ED4; }
#MainWrap.po-page .po-player:hover .po-player__link { text-decoration: underline; }

/* 手機：一張一列，圖左文右 */
@media only screen and (max-width: 600px) {
	.po-players__list { grid-template-columns: 1fr; gap: 10px; }
	.po-player { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; padding: 12px 14px; text-align: left; }
	.po-player__img { grid-row: 1 / 4; height: 64px; }
	.po-page .po-player__name { margin: 0 0 2px; font-size: 16px; text-align: left; }
	.po-player p { margin: 0 0 4px; font-size: 13px; }
}

/* Tools and apps */
.po-tools {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 28px;
}

.po-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 22px 24px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(87, 197, 255, 0.22);
	text-decoration: none;
	transition: box-shadow .3s cubic-bezier(.2, 0, 0, 1);
}

.po-tool:hover { box-shadow: 0 3px 18px rgba(87, 197, 255, 0.45); text-decoration: none; }
.po-tool img { width: 72px; height: 72px; object-fit: contain; }

.po-tool__tag {
	margin-top: 12px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(225deg, #4FC3F7 0%, #0575D7 100%);
	border-radius: 50px;
}

.po-tool__tag--app { background: #595959; }
.po-tool h3 { margin: 10px 0 6px; padding: 0; font-size: 20px; font-weight: 500; color: #333; }
.po-tool p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #595959; flex: 1; }
.po-tool__link { font-size: 14px; font-weight: 500; color: #0575D7; }

/* ePaper */
.po-epaper__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: stretch; /* 圖片欄撐滿卡片高度，上下不留白 */
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 15px rgba(142, 163, 175, .2);
	text-align: left;
}

.po-epaper__media { position: relative; min-height: 280px; }
.po-epaper__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; } /* 電子紙看板在圖片右側 */
.po-epaper__text { align-self: center; padding: 28px 32px 28px 0; }

.po-epaper__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #199FAE;
}

.po-epaper__text h2 { margin: 0 0 10px; padding: 0; color: #595959; font-weight: 300; text-align: left; }
.po-epaper__text p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: #595959; }
.po-epaper__link { font-size: 15px; font-weight: 500; color: #199FAE; text-decoration: none; }
.po-epaper__link:hover { text-decoration: underline; }

/* Why choose CAYIN：每項加一句說明 */
.po-why__desc {
	max-width: 240px;
	margin: 8px auto 0;
	font-size: 14px;
	line-height: 1.6;
	color: #757575;
}

@media only screen and (max-width: 1152px) {
	.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero { --smp-image-position-x: calc(80% - 100px); }
}

@media only screen and (max-width: 760px) {
	.po-tools { grid-template-columns: 1fr; }
	.po-epaper__inner { grid-template-columns: 1fr; gap: 0; }
	.po-epaper__text { padding: 22px 22px 26px; }
}

@media only screen and (max-width: 600px) {
	.po-hero__videos { order: 3; justify-content: center; margin: 0 16px 20px; }
	.smpBanner-section--slant.po-hero .smpBanner-media img { object-position: 70% center; } /* 共用 CSS 手機版寫死 center，右側 icon 會被切 */
}

/* 產品名稱改用 h3（標題層級）：以下由 productoverview.css 的 h2 規則複製 */

.po-page .digitalSignagePlayers2 .contents .box h3 {
  color: #595959;
  font-weight: 400;
  text-align: left;
}

.po-page .digitalSignagePlayers3 .contents .box h3 {
  width: 100%;
  float: left;
  display: block;
  color: #595959;
  font-weight: 700;
  text-align: left;
}

.po-page .contents .box h3.good-times {
  font-family: good-times, 'Poppins', sans-serif;

}

.po-page .digitalSignagePlayers4 .contents .box h3 {
  width: 100%;
  float: left;
  display: block;
  color: #595959;
  font-weight: 400;
  text-align: left;
}


@media only screen and (max-width: 1024px) {
.po-page .digitalSignagePlayers2 .contents .box h3,
.po-page .digitalSignagePlayers3 .contents .box h3,
.po-page .digitalSignagePlayers4 .contents .box h3 {
    text-align: center;
  }
}


/* 大區塊標題（介紹、Players、Servers、Premium software）：字級用 .f35（同 web-technologies，桌機 32px），這裡只管置中與間距 */
.po-page h2.po-title {
	font-weight: 300;
	color: #595959;
	text-align: center;
	padding: 60px 20px 16px;
	box-sizing: border-box;
}

/* 產品說明下方的連結列（SMP Players、CAYIN Signage Player）：與文案距離統一
   productoverview.css 的 .box span 是 float:left + width:100%，這裡明確設成獨立一列 */
#MainWrap.po-page .contents .box span.po-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; float: none; width: 100%; margin-top: 10px; }
#MainWrap.po-page .contents .box span.po-links .video_link_btn { margin-top: 0; }
/* 每個文字連結都用按鈕高度（39px）置中，不管有沒有 Selection guide 按鈕、有沒有換行，距離文案都一樣 */
#MainWrap.po-page .contents .box span.po-links > a:not(.video_link_btn) { display: inline-flex; align-items: center; min-height: 39px; }
/* 平板以下文案置中，連結列跟著置中 */
@media only screen and (max-width: 1024px) {
	#MainWrap.po-page .contents .box span.po-links { justify-content: center; }
}

/* ══ 區塊間距統一 60px（Meg 2026-09-30）══
   規則：每個區塊內容距離區塊上下邊緣 60px；相鄰且同為白底的區塊（Tools → ePaper → Why → One system）
   下一個區塊不再加上方 60px，內容之間維持 60px，不會疊成 120px。
   各區塊原本的間距來自不同 CSS（h2 padding、margin、float 容器），這裡全部歸零後重設。 */
.po-page h2.po-title { padding-top: 0; }

/* 介紹（白） */
.po-page .intro.Overview { padding: 60px 0; }
.po-page .intro .contents { margin-bottom: 0; }

/* Players（灰）、Servers（白）：標題列上方 60px，最後一列下方 60px */
.po-page #playerP,
.po-page #serverP { padding-top: 60px; }
.po-page #playerP .contents,
.po-page #serverP .contents { margin: 0 auto; }
.po-page #playerP + .solution_section,
.po-page #serverP + .solution_section { padding-top: 0; }

/* Premium software（灰） */
.po-page .po-software .po-section { padding-top: 60px; padding-bottom: 60px; }
.po-page .po-software .po-section__lead { margin-top: 0; }

/* Tools（白）→ ePaper（白）→ Why（白）→ One system（白） */
.po-page #toolsP { padding-top: 60px; padding-bottom: 0; }
.po-page #epaperP { padding-top: 60px; padding-bottom: 0; }
.po-page .whyChooseCayin { padding-top: 60px; }
.po-page .whyChooseCayin h2 { margin-top: 0; }
.po-page .whyChooseCayin .Contents .Box { margin-bottom: 0; padding-bottom: 0; }
.po-page .oneFitsAll { padding-top: 60px; padding-bottom: 60px; }
.po-page .oneFitsAll h2 { margin-top: 0; }
.po-page .oneFitsAll .Contents .Box { margin-bottom: 0; padding-bottom: 0; }

/* Players / Servers 各列：列與列、最後一列到區塊底都是 60px（原本 .contents margin 20/60 + 列 padding 20） */
.po-page .solution_section { padding-top: 0; padding-bottom: 0; }
.po-page .solution_section .contents { margin-top: 20px; margin-bottom: 60px; }

/* Why / One system：包住舊 CSS 的 float，標題到內容 24px，內容到底不再多 35px */
.po-page .whyChooseCayin,
.po-page .oneFitsAll { display: flow-root; }
.po-page .whyChooseCayin .Contents .Box span { float: none; }
.po-page .whyChooseCayin .Contents,
.po-page .oneFitsAll .Contents { margin-top: 24px; margin-bottom: 0; }

/* 頁尾按鈕區（灰）：上下 60px（原本 padding 1% + .contents margin 35px + .box padding 20px） */
.po-page .finalButton { padding: 0; }
.po-page .finalButton .contents { margin-top: 40px; margin-bottom: 40px; }
/* Why 每一項原本寫死 height:210px，加了說明文字後會溢出 */
.po-page .whyChooseCayin .Contents .Box { height: auto; }
/* 只有文字連結（沒有影片按鈕）的最後一列：文字在 39px 連結列內置中，扣掉多出的 12px */
.po-page .solution_section .contents:has(.po-links):not(:has(.video_link_btn)) { margin-bottom: 48px; }
/* 平板以下舊 CSS 給產品說明段落 padding-bottom:36px，會讓區塊底部多出空白 */
.po-page .solution_section .contents .box > span.f18 { padding-bottom: 0; }
.po-page .solution_section .contents .box span.po-links { padding: 0; }

/* ══ One system for every network size（2026-09-30 改版）══
   標題原本是 18px 細字灰色，跟說明分不出來。改成三欄：架構圖底部對齊、標題用 CAYIN blue 22px、
   欄與欄之間細線分隔（不做卡片、色條、標籤） */
#MainWrap.po-page .oneFitsAll .Contents {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	max-width: 1100px;
	padding: 0 20px;
}

#MainWrap.po-page .oneFitsAll .Contents .Box.po-net {
	width: auto;
	margin: 0;
	padding: 8px 32px 0;
	border-radius: 0;
	background: none;
	text-align: left;
}

#MainWrap.po-page .oneFitsAll .Contents .Box.po-net + .Box.po-net { border-left: 1px solid #e3e3e3; }

#MainWrap.po-page .oneFitsAll .Contents .Box.po-net .photo {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	height: 120px;
	margin: 0 0 22px;
}

#MainWrap.po-page .oneFitsAll .Contents .Box.po-net .photo img { width: auto; max-width: 100%; height: auto; max-height: 100%; }

#MainWrap.po-page .oneFitsAll .po-net__title {
	width: auto;
	margin: 0 0 8px;
	padding: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: #007ED4;
	text-align: left;
}

#MainWrap.po-page .oneFitsAll .Contents .Box.po-net span.po-net__desc {
	width: auto;
	font-size: 15px;
	line-height: 1.65;
	color: #595959;
}

/* 平板以下改直排，細線改成上下分隔 */
@media only screen and (max-width: 900px) {
	#MainWrap.po-page .oneFitsAll .Contents { grid-template-columns: 1fr; max-width: 560px; }
	#MainWrap.po-page .oneFitsAll .Contents .Box.po-net { padding: 28px 0 0; }
	#MainWrap.po-page .oneFitsAll .Contents .Box.po-net:first-child { padding-top: 8px; }
	#MainWrap.po-page .oneFitsAll .Contents .Box.po-net + .Box.po-net { margin-top: 28px; border-left: 0; border-top: 1px solid #e3e3e3; }
	#MainWrap.po-page .oneFitsAll .Contents .Box.po-net .photo { justify-content: center; height: 110px; }
}

/* 方案標籤：比照全站 .wt-pill（web-technologies 等頁）：12px、圓角 5px、Robustie 紫 / Flexie 藍底 */
#MainWrap.po-page .oneFitsAll a.po-net__sol { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 5px; background: #693ca5; font-size: 12px; font-weight: 500; line-height: 1.5; color: #f8f8f8; text-decoration: none; }
#MainWrap.po-page .oneFitsAll a.po-net__sol--flexie { background: #1089c6; }
#MainWrap.po-page .oneFitsAll a.po-net__sol:hover { color: #fff; filter: brightness(1.1); text-decoration: none; }
/* 標籤固定在架構圖區右上角（圖是底部對齊，上方有空間） */
#MainWrap.po-page .oneFitsAll .Contents .Box.po-net .photo { position: relative; }
#MainWrap.po-page .oneFitsAll .photo a.po-net__sol { position: absolute; top: 0; right: 0; margin: 0; }
@media only screen and (max-width: 900px) {
	/* 單欄時圖片變寬會頂到上緣，頂部留 34px 給標籤 */
	#MainWrap.po-page .oneFitsAll .Contents .Box.po-net .photo { height: 144px; padding-top: 34px; box-sizing: border-box; }
}

/* 標題字重同 solution 頁（web-technologies）：區塊大標題 300，產品／卡片標題 500（Meg 2026-09-30）
   原本產品名稱混用 400 / 600 / 700（舊版 <b> 與各區塊各自的規則） */
#MainWrap.po-page .contents .box h3.f35,
#MainWrap.po-page .po-sw__title,
#MainWrap.po-page .po-player__name { font-weight: 500; }

/* 區塊大標題同 web-technologies「Turn Your Data into Automated Content」：Poppins 32px、字重 500、#595959（Meg 2026-09-30） */
#MainWrap.po-page h2.po-title,
#MainWrap.po-page h2.po-section__title,
#MainWrap.po-page .whyChooseCayin h2.f35,
#MainWrap.po-page .oneFitsAll h2.f35,
#MainWrap.po-page .po-epaper__text h2 { font-weight: 500; color: #595959; }

/* ══ Contact Us（One system 與頁尾按鈕之間）══
   按鈕沿用全站 .mail_btn（web-technologies / compare-smp 同款信封動畫），顏色用本頁 hero 品牌藍 */
#MainWrap.po-page .po-contact { padding-top: 0; padding-bottom: 60px; }
#MainWrap.po-page .po-contact__title { margin: 0 0 8px; padding: 0; font-weight: 500; color: #595959; }
.po-page .contact-us-section { margin: 0; padding: 0 20px; text-align: center; }
.po-page .contact-us-section .btn_wrap { display: flex; justify-content: center; margin-top: 24px; }

.po-page .mail_btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
	width: auto;
	margin: 0;
	padding: 8px 20px;
	border: none;
	border-radius: 50px;
	background: linear-gradient(90deg, #4FC3F7 0%, #0575D7 100%);
	font-size: 18px;
	font-weight: 700;
	word-spacing: 2px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: padding 0.3s 0.15s, background 0.45s;
}

.po-page .mail_btn:hover { padding: 8px 65px 8px 20px; text-decoration: none; transition: all 0.3s; }

.po-page .mail_btn_icon {
	position: absolute;
	top: 50%;
	right: 8%;
	display: flex;
	align-items: flex-end;
	height: 30px;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s, right 0.2s;
}

.po-page .mail_btn:hover .mail_btn_icon { right: 2%; opacity: 1; transition: opacity 0.3s 0.15s, right 0.2s 0.15s; }
.po-page .mail_btn_img { width: 32px; }
.po-page .mail_btn_img.bg { height: 20px; background-color: #007ED4; box-shadow: 0 2px 10px rgba(0, 70, 120, 0.2); transition: all 0.3s; }
.po-page .mail_btn:hover .mail_btn_img.bg { box-shadow: 0 2px 10px rgba(0, 39, 124, 0.8); }
.po-page .mail_btn_img.front { position: absolute; top: 45%; left: 50%; width: 32px; transform: translate(-50%, -50%); }
.po-page .mail_btn_icon > img:nth-child(2) { opacity: 0.9; transform: translate(-50%, -40%); transition: all 0.35s linear 0.4s; }
.po-page .mail_btn:hover .mail_btn_icon > img:nth-child(2) { opacity: 1; transform: translate(-50%, -52%); }

/* ══ Testimonials（同首頁 index.css 的 testimonial，範圍限定 .po-testimonial）══
   productoverview.css 有全域 .swiper / .swiper-slide / .swiper-slide>img 規則（600px 高、白框），這裡全部蓋掉 */
.po-testimonial { clear: both; background: none; } /* 白底（Meg 2026-09-30） */
.po-testimonial .po-section { max-width: 1240px; padding-top: 0; padding-bottom: 60px; } /* 前一區 One System 同為白底，上方不再加 60px */
.po-testimonial .po-section__lead { margin-bottom: 32px; }

.po-testimonial .contents.testimonial {
	display: grid;
	grid-template-columns: 2.35fr 2.15fr 1fr;
	column-gap: 20px;
	align-items: start;
	width: 100%;
	margin: 0;
	text-align: left;
}

.po-testimonial .swiper { width: 100%; padding: 0; margin: 0; }
.po-testimonial .swiper-slide { width: 100%; max-width: none; } /* productoverview.css 全域 .swiper-slide 是 width:80% */

.po-testimonial .slider--testimonial-2 { grid-column: 1 / 3; }
.po-testimonial .slider--testimonial-2 .swiper-slide { width: 100%; }
.po-testimonial .main_content { display: grid; grid-template-columns: 1.3fr 1.2fr; column-gap: 20px; align-items: center; background: none; }
.po-testimonial .main_content .img_box { width: 100%; height: 300px; overflow: hidden; border-radius: 5px; }
.po-testimonial .main_content .img_box img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.po-testimonial .main_content .wrapper--text { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12px; }
.po-page .po-testimonial .main_content h3.f28 { margin: 0; padding: 0; font-weight: 500; line-height: 1.35; color: #595959; text-align: left; }
.po-testimonial .main_content p { margin: 0; font-size: 15px; line-height: 1.65; color: #595959; }
.po-testimonial .main_content a { font-size: 16px; color: #007ED4; text-decoration: none; }
.po-testimonial .main_content a:hover { text-decoration: underline; }

.po-testimonial .slider--testimonial { grid-column: 3 / 4; height: 300px; box-sizing: border-box; }
.po-testimonial .slider--testimonial .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc((100% - 20px) / 3) !important;
	opacity: 0.4;
	cursor: pointer;
}
.po-testimonial .slider--testimonial .swiper-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; outline: 0; }
/* 目前案例 = 縮圖輪播的 active（最上面／最左邊那張） */
.po-testimonial .slider--testimonial .swiper-slide-active { position: relative; opacity: 1; }
.po-testimonial .slider--testimonial .swiper-slide-active::before {
	content: url('/images/index/icon-magnifier.svg');
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: #007fd44b;
}

/* All Cases：同首頁 .all_cases_link（藍色膠囊按鈕，壓在縮圖欄右上角） */
.po-testimonial .contents.testimonial { position: relative; }
.po-page .po-testimonial__all {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-block;
	padding: 8px 32px;
	border-radius: 50px;
	background: var(--gradient-color, #00A0E9);
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transform: translate(20%, -50%);
	transition: background 0.3s;
}
.po-page .po-testimonial__all:hover { background: #00A0E9; color: #fff; text-decoration: none; }

/* 「Latest >」連結（同首頁 Testimonials 標題旁的連結；Meg 2026-10-08），放在輪播左上方 */
.po-testimonial__bar { margin: 0 0 12px; text-align: left; }
.po-page .po-testimonial__latest { font-size: 16px; color: #007ED4; text-decoration: none; }
.po-page .po-testimonial__latest:hover { text-decoration: underline; }

@media only screen and (max-width: 1024px) {
	.po-testimonial .contents.testimonial { grid-template-columns: 1fr; row-gap: 16px; }
	.po-testimonial .slider--testimonial-2,
	.po-testimonial .slider--testimonial { grid-column: 1 / -1; }
	.po-testimonial .slider--testimonial { height: 110px; }
	.po-testimonial .slider--testimonial .swiper-slide { height: 100% !important; }
	.po-page .po-testimonial__all { position: static; justify-self: end; transform: none; } /* 單欄時放在縮圖下方靠右 */
}

@media only screen and (max-width: 768px) {
	.po-testimonial .main_content { grid-template-columns: 1fr; row-gap: 14px; }
	.po-testimonial .main_content .img_box { height: 220px; }
	.po-testimonial .slider--testimonial { height: 80px; }
	.po-testimonial .main_content .wrapper--text p br { display: none; }
}
/* Swiper autoHeight 需要 wrapper 不撐滿（product_new.css 內建的 swiper 樣式沒有 .swiper-autoheight 規則） */
.po-testimonial .slider--testimonial-2 .swiper-wrapper { align-items: flex-start; transition-property: transform, height; }
.po-testimonial .slider--testimonial-2 .swiper-slide { height: auto; }
/* product_new.css 在 1366px 以下給所有 .swiper-wrapper padding: 95px 0 40px（舊版輪播用），本頁兩組輪播都要歸零 */
.po-page .po-sw .swiper-wrapper,
.po-page .po-testimonial .swiper-wrapper { padding: 0; }

/* 手機版子選單（Meg 2026-09-30）：改版時移除了舊 overview.css（手機子選單的藍底白字在那支），
   沒有它會變成白底灰色 10px 小字；比照 device_seeker.css 用品牌藍 #0575D7 + 白字 */
@media only screen and (max-width: 762px) {
	.whiteSelector,
	.subButtonAll { background-color: #0575D7; opacity: 1; }
	.productName span,
	.subButtonAll a { color: #fff; }
	.subButtonAll a { font-size: 16px; }
	.subButtonAll a + a { border-top: 1px solid rgba(255, 255, 255, 0.25); }
}

/* ══ Robustie Solution 頁（robustie-solution.html，版型同 overview）══
   hero、頁首色帶、手機子選單改用 Robustie 紫（同 Robustie 影片按鈕 / 方案標籤 #693ca5） */
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero--robustie {
	--smp-right-bg: linear-gradient(225deg, #8E5CD9 0%, #693ca5 100%);
	--smp-purple: linear-gradient(225deg, #8E5CD9 0%, #693ca5 100%);
	--smp-stripe: rgba(105, 60, 165, 0.7);
	background: linear-gradient(225deg, #8E5CD9 0%, #693ca5 100%);
}
.smpBanner-section--slant.device-seeker-sol.po-hero--robustie .smpBanner-stripe--primary {
	background: linear-gradient(180deg, rgba(142, 92, 217, 0.7) 0%, rgba(105, 60, 165, 0.7) 100%);
}
.po-robustie-page .menubackground.device-seeker-sol { background: linear-gradient(225deg, #8E5CD9 0%, #693ca5 100%); }
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.po-hero--robustie { background: linear-gradient(135deg, #8E5CD9 0%, #693ca5 100%); }
	.smpBanner-section--slant.po-hero.po-hero--robustie .smpBanner-media img { object-position: 45% center; } /* Robustie_banner 的 icon 在左側，沿用 70% 會被切 */
}
@media only screen and (max-width: 762px) {
	.po-robustie .whiteSelector,
	.po-robustie .subButtonAll { background-color: #693ca5; }
}

/* One System 只有 Basic、Advanced 兩欄 */
#MainWrap.po-robustie-page .oneFitsAll .Contents { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
@media only screen and (max-width: 900px) {
	#MainWrap.po-robustie-page .oneFitsAll .Contents { grid-template-columns: 1fr; max-width: 560px; }
}

/* ══ Flexie Solution 頁（flexie-solution.html，版型同 overview）══
   hero、頁首色帶、手機子選單改用 Flexie 藍（同 Flexie 影片按鈕 / 方案標籤 #1089c6） */
.smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero--flexie {
	--smp-right-bg: linear-gradient(225deg, #4CC2F0 0%, #1089c6 100%);
	--smp-purple: linear-gradient(225deg, #4CC2F0 0%, #1089c6 100%);
	--smp-stripe: rgba(16, 137, 198, 0.7);
	background: linear-gradient(225deg, #4CC2F0 0%, #1089c6 100%);
}
.smpBanner-section--slant.device-seeker-sol.po-hero--flexie .smpBanner-stripe--primary {
	background: linear-gradient(180deg, rgba(76, 194, 240, 0.7) 0%, rgba(16, 137, 198, 0.7) 100%);
}
.po-flexie-page .menubackground.device-seeker-sol { background: linear-gradient(225deg, #4CC2F0 0%, #1089c6 100%); }
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.po-hero--flexie { background: linear-gradient(135deg, #4CC2F0 0%, #1089c6 100%); }
}
@media only screen and (max-width: 762px) {
	.po-flexie .whiteSelector,
	.po-flexie .subButtonAll { background-color: #1089c6; }
}

/* One System 只有 Flexible Display 一欄 */
#MainWrap.po-flexie-page .oneFitsAll .Contents { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
#MainWrap.po-flexie-page .oneFitsAll .Contents .Box.po-net .photo { justify-content: center; }
#MainWrap.po-flexie-page .oneFitsAll .Contents .Box.po-net { text-align: center; }
#MainWrap.po-flexie-page .oneFitsAll .po-net__title { text-align: center; }
#MainWrap.po-flexie-page .oneFitsAll .Contents .Box.po-net span.po-net__desc { text-align: center; }

/* Premium software 上方的軟體名稱分頁（Meg 2026-10-08；按鈕由 products-overview.js 依卡片名稱產生），點了直接切換。
   文字 + 底線樣式（不用膠囊）；高亮色跟頁面主色：overview 鎧應藍、Robustie 紫、Flexie 藍 */
.po-sw__tabs {
	--po-sw-tab: #007ED4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 36px;
	width: fit-content;
	max-width: calc(100% - 32px);
	margin: 0 auto 28px;
	border-bottom: 1px solid #d9dfe4;
}
.po-robustie .po-sw__tabs { --po-sw-tab: #693ca5; }
.po-flexie .po-sw__tabs { --po-sw-tab: #1089c6; }
.po-sw__tab {
	appearance: none;
	margin: 0 0 -1px;
	padding: 10px 4px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	color: #757575;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}
.po-sw__tab:hover { color: var(--po-sw-tab); }
.po-sw__tab:focus-visible { outline: 2px solid var(--po-sw-tab); outline-offset: 2px; }
.po-sw__tab.is-active { color: var(--po-sw-tab); border-bottom-color: var(--po-sw-tab); font-weight: 600; }
@media only screen and (max-width: 600px) {
	.po-sw__tabs { gap: 0 22px; margin-bottom: 20px; }
	.po-sw__tab { padding: 8px 2px; font-size: 15px; }
}

/* 播放器卡片的圖置中（Meg 2026-10-08）：productoverview.css 的 .box span { display:block; float:left } 會蓋掉 .po-player__img 的 flex 置中 */
#MainWrap.po-page .po-player .po-player__img { display: flex; float: none; align-items: center; justify-content: center; width: 100%; }

/* ══ Robustie 頁主色紫 #693ca5（Meg 2026-10-08）：頁面上原本的鎧應藍改用主色。
   Premium Software 卡片內的各軟體重點色、進度條顏色不動 ══ */
body.po-robustie #MainWrap .po-links > a:not(.video_link_btn),
body.po-robustie #MainWrap .po-player__link,
body.po-robustie #MainWrap .po-tool__link,
body.po-robustie #MainWrap.po-page .oneFitsAll .po-net__title,
body.po-robustie #MainWrap .po-testimonial__latest,
body.po-robustie #MainWrap .po-testimonial .main_content a,
body.po-robustie #MainWrap .finalButton .contents .box a { color: #693ca5; }
body.po-robustie #MainWrap .po-player,
body.po-robustie #MainWrap .po-tool { box-shadow: 0 0 15px rgba(105, 60, 165, 0.16); }
body.po-robustie #MainWrap .po-player:hover,
body.po-robustie #MainWrap .po-tool:hover { box-shadow: 0 3px 18px rgba(105, 60, 165, 0.34); }
body.po-robustie .po-sw__nav { border-color: #693ca5; color: #693ca5; }
body.po-robustie .po-sw__nav:hover { background: #693ca5; border-color: #693ca5; color: #fff; }
body.po-robustie .po-sw .swiper-pagination-bullet { background: rgba(105, 60, 165, .25); }
body.po-robustie .po-sw .swiper-pagination-bullet:hover { background: rgba(105, 60, 165, .5); }
body.po-robustie .po-sw .swiper-pagination-bullet-active { background: #693ca5; box-shadow: 0 0 10px rgba(105, 60, 165, .35); }
body.po-robustie .po-sw__bar { background: rgba(105, 60, 165, .15); }
body.po-robustie #MainWrap .po-testimonial__all { background: #693ca5; }
body.po-robustie #MainWrap .po-testimonial__all:hover { background: #8E5CD9; }
body.po-robustie .po-testimonial .slider--testimonial .swiper-slide-active::before { background-color: rgba(105, 60, 165, .3); }
body.po-robustie #MainWrap .mail_btn { background: #693ca5; }
body.po-robustie #MainWrap .mail_btn_img.bg { background-color: #693ca5; box-shadow: 0 2px 10px rgba(60, 30, 100, 0.2); }
body.po-robustie #MainWrap .mail_btn:hover .mail_btn_img.bg { box-shadow: 0 2px 10px rgba(60, 30, 100, 0.6); }

/* ══ Flexie 頁主色 Flexie 藍 #1089c6（Meg 2026-10-08）：頁面上原本的鎧應藍 #007ED4 改用主色。
   Premium Software 卡片內的各軟體重點色、進度條顏色不動 ══ */
body.po-flexie #MainWrap .po-links > a:not(.video_link_btn),
body.po-flexie #MainWrap .po-player__link,
body.po-flexie #MainWrap .po-tool__link,
body.po-flexie #MainWrap.po-page .oneFitsAll .po-net__title,
body.po-flexie #MainWrap .po-testimonial__latest,
body.po-flexie #MainWrap .po-testimonial .main_content a,
body.po-flexie #MainWrap .finalButton .contents .box a { color: #1089c6; }
body.po-flexie #MainWrap .po-player,
body.po-flexie #MainWrap .po-tool { box-shadow: 0 0 15px rgba(16, 137, 198, 0.16); }
body.po-flexie #MainWrap .po-player:hover,
body.po-flexie #MainWrap .po-tool:hover { box-shadow: 0 3px 18px rgba(16, 137, 198, 0.34); }
body.po-flexie .po-sw__nav { border-color: #1089c6; color: #1089c6; }
body.po-flexie .po-sw__nav:hover { background: #1089c6; border-color: #1089c6; color: #fff; }
body.po-flexie .po-sw .swiper-pagination-bullet { background: rgba(16, 137, 198, .25); }
body.po-flexie .po-sw .swiper-pagination-bullet:hover { background: rgba(16, 137, 198, .5); }
body.po-flexie .po-sw .swiper-pagination-bullet-active { background: #1089c6; box-shadow: 0 0 10px rgba(16, 137, 198, .35); }
body.po-flexie .po-sw__bar { background: rgba(16, 137, 198, .15); }
body.po-flexie #MainWrap .po-testimonial__all { background: #1089c6; }
body.po-flexie #MainWrap .po-testimonial__all:hover { background: #4CC2F0; }
body.po-flexie .po-testimonial .slider--testimonial .swiper-slide-active::before { background-color: rgba(16, 137, 198, .3); }
body.po-flexie #MainWrap .mail_btn { background: #1089c6; }
body.po-flexie #MainWrap .mail_btn_img.bg { background-color: #1089c6; box-shadow: 0 2px 10px rgba(10, 80, 120, 0.2); }
body.po-flexie #MainWrap .mail_btn:hover .mail_btn_img.bg { box-shadow: 0 2px 10px rgba(10, 80, 120, 0.6); }
/* 「Free」標籤與介紹影片按鈕也跟頁面主色（Mobile app 灰標籤不動） */
body.po-robustie #MainWrap .po-tool__tag:not(.po-tool__tag--app),
body.po-robustie #MainWrap .po-links .video_link_btn { background: #693ca5; }
body.po-flexie #MainWrap .po-tool__tag:not(.po-tool__tag--app),
body.po-flexie #MainWrap .po-links .video_link_btn { background: #1089c6; }

/* ══ 產品總覽頁主色鎧應藍 #007ED4（Meg 2026-10-08）：body.po-overview。
   原本 hero／選單底帶／Contact Us／Free 標籤用的是 device-seeker 品牌藍漸層 #4FC3F7→#0575D7，統一成鎧應藍（漸層淺端 #00A0E9，同全站 --gradient-color）。
   不動：Robustie／Flexie 的方案標籤與影片按鈕、ePaper 區塊、Premium Software 卡片內各軟體重點色 ══ */
body.po-overview .smpBanner-section.smpBanner-section--slant.device-seeker-sol.po-hero {
	--smp-right-bg: linear-gradient(225deg, #00A0E9 0%, #007ED4 100%);
	--smp-purple: linear-gradient(225deg, #00A0E9 0%, #007ED4 100%);
	--smp-stripe: rgba(0, 126, 212, 0.7);
	background: linear-gradient(225deg, #00A0E9 0%, #007ED4 100%);
}
body.po-overview .smpBanner-section--slant.device-seeker-sol.po-hero .smpBanner-stripe--primary {
	background: linear-gradient(180deg, rgba(0, 160, 233, 0.7) 0%, rgba(0, 126, 212, 0.7) 100%);
}
body.po-overview .menubackground.device-seeker-sol { background: linear-gradient(225deg, #00A0E9 0%, #007ED4 100%); }
body.po-overview #MainWrap .mail_btn { background: #007ED4; }
body.po-overview #MainWrap .po-tool__tag:not(.po-tool__tag--app),
body.po-overview #MainWrap .po-links .video_link_btn,
body.po-overview #MainWrap .po-testimonial__all { background: #007ED4; }
body.po-overview #MainWrap .po-testimonial__all:hover { background: #00A0E9; }
body.po-overview #MainWrap .po-tool__link { color: #007ED4; }
body.po-overview #MainWrap .po-player,
body.po-overview #MainWrap .po-tool { box-shadow: 0 0 15px rgba(0, 126, 212, 0.16); }
body.po-overview #MainWrap .po-player:hover,
body.po-overview #MainWrap .po-tool:hover { box-shadow: 0 3px 18px rgba(0, 126, 212, 0.34); }
@media screen and (max-width: 600px) {
	body.po-overview .smpBanner-section--slant.device-seeker-sol.po-hero { background: linear-gradient(135deg, #00A0E9 0%, #007ED4 100%); }
}
@media only screen and (max-width: 762px) {
	body.po-overview .whiteSelector,
	body.po-overview .subButtonAll { background-color: #007ED4; }
}

/* 手機版 hero 是整片主色底（藍／紫／金），主標原本的灰字 #595959 對比太低：po-hero 主標在手機改白字（2026-10-08） */
@media screen and (max-width: 600px) {
	.smpBanner-section--slant.device-seeker-sol.po-hero .smpBanner-copy__inner h1.smpBanner-title .smpBanner-title__line:first-child { color: #fff; }
}