/* 強頓科技網站共用樣式 - 已由各頁面 inline CSS 集中抽離 */
/* 內頁共用樣式 */
body.page-inner {
  --navy: #0a1930;
  --blue: #12365a;
  --cyan: #16a6c9;
  --orange: #f28a24;
  --light: #f4f7fa;
  --line: #dce4eb;
  --text: #182533;
  --muted: #607080;
  --white: #fff
}
body.page-inner * {
  box-sizing: border-box
}
body.page-inner {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7
}
body.page-inner a {
  color: inherit;
  text-decoration: none
}
body.page-inner .top {
  background: var(--navy);
  color: #cdd9e5;
  font-size: 13px
}
body.page-inner .top .wrap {
  max-width: 1180px;
  margin: auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between
}
body.page-inner .header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line)
}
body.page-inner .header .wrap {
  max-width: 1180px;
  margin: auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 28px
}
body.page-inner .brand {
  font-weight: 900;
  font-size: 22px;
  color: var(--navy);
  white-space: nowrap
}
body.page-inner .brand span {
  color: var(--orange)
}
body.page-inner .nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1
}
body.page-inner .nav-link {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px
}
body.page-inner .nav-link:hover, body.page-inner .nav-link.active {
  background: #edf5f8;
  color: #087a9a
}
body.page-inner .hero {
  background: linear-gradient(120deg, #08182c, #12385c 60%, #0d657a);
  color: #fff
}
body.page-inner .hero .wrap {
  max-width: 1180px;
  margin: auto;
  padding: 58px 20px
}
body.page-inner .eyebrow {
  color: #69d1e7;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 13px
}
body.page-inner h1 {
  font-size: 40px;
  line-height: 1.25;
  margin: 10px 0 14px
}
body.page-inner .hero p {
  max-width: 760px;
  color: #d8e6ee;
  margin: 0;
  font-size: 17px
}
body.page-inner .wrap {
  max-width: 1180px;
  margin: auto;
  padding: 0 20px
}
body.page-inner .layout {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 38px;
  padding: 38px 0 70px
}
body.page-inner .side-tree {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: max-content;
  position: sticky;
  top: 90px
}
body.page-inner .side-title {
  padding: 15px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 800
}
body.page-inner .side-main, body.page-inner .side-sub-link {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid #edf1f4;
  font-size: 14px
}
body.page-inner .side-main {
  font-weight: 750
}
body.page-inner .side-main.active {
  color: #087a9a;
  background: #edf8fb
}
body.page-inner .side-sub {
  background: #fafcfd
}
body.page-inner .side-sub-link {
  padding-left: 28px;
  font-size: 14px;
  color: #536474
}
body.page-inner .side-sub-link.active {
  color: #087a9a;
  font-weight: 800;
  background: #f0f8fa
}
body.page-inner .section {
  margin-bottom: 32px
}
body.page-inner h2 {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 38px;
  color: var(--navy)
}
body.page-inner h3 {
  font-size: 19px;
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--navy);
}
body.page-inner .lead {
  color: #ff7007;
  font-size: 16px;
  font-weight: 800;
}
body.page-inner .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 20px;
}
body.page-inner .card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 38, 58, .05)
}
body.page-inner .card .tag {
  display: inline-block;
  background: #edf7fa;
  color: #087a9a;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px
}
body.page-inner .funnel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0
}
body.page-inner .step {
  padding: 17px;
  border-radius: 12px;
  background: var(--light);
  border-top: 3px solid var(--cyan)
}
body.page-inner .step b {
  display: block;
  color: var(--navy);
  margin-bottom: 5px
}
body.page-inner .cta {
  background: linear-gradient(100deg, #0b223e, #0e566c);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}
body.page-inner .cta h3 {
  color: #fff;
  margin: 0 0 5px
}
body.page-inner .cta p {
  margin: 0;
  color: #d5e7ee
}
body.page-inner .btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 850;
  padding: 11px 18px;
  border-radius: 8px;
  white-space: nowrap
}
body.page-inner .btn.secondary {
  background: transparent;
  border: 1px solid #8acbd9
}
a.btn.secondary {
    margin-top: 10px;
}
body.page-inner .table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px
}
body.page-inner .table th, body.page-inner .table td {
  padding: 11px 12px;
  border: 1px solid var(--line);
  text-align: left;
  font-size: 14px
}
body.page-inner .table th {
  background: #f4f7fa;
  color: var(--navy)
}
body.page-inner .formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
body.page-inner input, body.page-inner select, body.page-inner textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cfd9e1;
  border-radius: 8px;
  font: inherit
}
body.page-inner textarea {
  min-height: 130px
}
body.page-inner .full {
  grid-column: 1/-1
}
body.page-inner .footer {
  background: #08182c;
  color: #b8c8d6;
  margin-top: 0
}
body.page-inner .footer .wrap {
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap
}
body.page-inner .footer strong {
  color: #fff
}
@media (max-width:850px) {
  body.page-inner .layout {
    grid-template-columns: 1fr
  }
  body.page-inner .side-tree {
    position: static
  }
  body.page-inner .cards {
    grid-template-columns: 1fr 1fr
  }
  body.page-inner .funnel {
    grid-template-columns: 1fr 1fr
  }
  body.page-inner .nav {
    display: none
  }
  body.page-inner h1 {
    font-size: 32px
  }
}
@media (max-width:560px) {
  body.page-inner .cards, body.page-inner .funnel, body.page-inner .formgrid {
    grid-template-columns: 1fr
  }
}
/* 首頁 index.html */
body.page-home {
  --n: #071522;
  --n2: #0d293c;
  --a: #f18a27;
  --c: #39c8df;
  --bg: #f5f7f8;
  --tx: #15232d;
  --mu: #697985;
  --ln: #dce5ea;
  --w: #fff
}
body.page-home * {
  box-sizing: border-box
}
body.page-home {
  scroll-behavior: smooth
}
body.page-home {
  margin: 0;
  font-family: "Noto Sans TC", system-ui, sans-serif;
  color: var(--tx);
  line-height: 1.75
}
body.page-home a {
  text-decoration: none;
  color: inherit
}
body.page-home .wrap {
  width: min(1180px, calc(100% - 40px));
  margin: auto
}
body.page-home .top {
  background: #04101a;
  color: #9db1bd;
  font-size: 12px
}
body.page-home .top .wrap {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
body.page-home nav {
  height: 78px;
  position: relative;
  z-index: 5;
  color: #101f2a;
  background: #fff;
  border-bottom: 1px solid #e8eef1;
  box-shadow: 0 2px 10px rgba(4, 16, 26, .04)
}
body.page-home nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}
body.page-home .logo {
  font-weight: 900;
  font-size: 22px;
  display: flex;
  gap: 11px;
  align-items: center
}
body.page-home .logo b {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #f18a27, #ffa23b);
  color: #fff;
  box-shadow: 0 6px 18px rgba(241, 138, 39, .22)
}
body.page-home .logo small {
  display: block;
  font-size: 8px;
  letter-spacing: 2.2px;
  color: #7c8b96;
  line-height: 1.1;
  margin-top: 2px
}
body.page-home .links {
  display: flex;
  gap: 27px;
  font-size: 15px;
  font-weight: 800;
  align-items: center
}
body.page-home .links a {
  transition: .2s
}
body.page-home .links a:hover {
  color: #1687a4
}
body.page-home .links a:last-child {
  background: #071522;
  color: #fff;
  padding: 10px 19px;
  border-radius: 999px
}
body.page-home .links a:last-child:hover {
  background: #123d51;
  color: #fff
}
body.page-home .hero {
  min-height: 745px;
  background-image: linear-gradient(90deg, rgba(3, 17, 27, .93) 0%, rgba(4, 24, 37, .82) 42%, rgba(5, 32, 48, .60) 72%, rgba(4, 22, 34, .68) 100%), url("../image/hero-industrial-bg-opt.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden
}
body.page-home .hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 36%, rgba(50, 191, 220, .20), transparent 30%);
  pointer-events: none
}
body.page-home .hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 210px;
  background: linear-gradient(to top, rgba(3, 15, 24, .72), transparent);
  pointer-events: none
}
body.page-home .hero .wrap {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 58px;
  position: relative;
  z-index: 1;
  padding-top: 20px
}
body.page-home .eyebrow {
  font-size: 12px;
  letter-spacing: 2.7px;
  font-weight: 900;
  color: #59d6ec
}
body.page-home .eyebrow:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--a);
  border-radius: 50%;
  margin-right: 9px
}
body.page-home h1 {
  font-size: clamp(48px, 5.3vw, 68px);
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 17px 0 22px
}
body.page-home h1 em {
  font-style: normal;
  color: #49d0e7
}
body.page-home .hero p {
  color: #d4e2e8;
  max-width: 690px;
  font-size: 16px;
  line-height: 1.9
}
body.page-home .btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 13px 23px;
  font-weight: 900;
  margin: 0 8px 0 0;
  cursor: pointer
}
body.page-home .primary {
  background: var(--a);
  color: #fff;
  margin-top: 20px;
}
body.page-home .ghost {
  border: 1px solid rgba(255, 255, 255, .25);
  margin-top: 20px;
  color: #fff
}
body.page-home .visual {
  height: 405px;
  padding: 15px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .28), inset 0 0 45px rgba(79, 210, 232, .04)
}
body.page-home .thermal {
  height: 100%;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 53% 46%, #ffd96c 0 5%, #ff684c 10%, #d52b61 20%, #722657 42%, #17223d 78%), linear-gradient(135deg, #171b45, #54234f)
}
body.page-home .thermal:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  height: 1px;
  background: #fff;
  box-shadow: 0 0 14px #fff
}
body.page-home .hud {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font: 11px monospace;
  color: #e2f9fc
}
body.page-home .hud b {
  color: #ffb65f
}
body.page-home .thermal-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font: 11px monospace;
  color: #fff;
  letter-spacing: 1px
}
body.page-home .hero-features {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 23px
}
body.page-home .hf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, .16)
}
body.page-home .hf:first-child {
  padding-left: 0
}
body.page-home .hf:last-child {
  border-right: 0
}
body.page-home .hf .hi {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #35d7ef;
  flex: 0 0 52px
}
body.page-home .hf .hi svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}
body.page-home .hf b {
  display: block;
  font-size: 18px
}
body.page-home .hf small {
  display: block;
  color: #9db9c5;
  font-size: 9px;
  letter-spacing: 1.5px
}
body.page-home .hero-note {
  font-size: 14px;
  color: #8fb4c3;
  margin-top: 15px
}
body.page-home section {
  padding: 95px 0
}
body.page-home .light {
  background: var(--bg)
}
body.page-home .head {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: end;
  margin-bottom: 40px
}
body.page-home .head h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  margin: 7px 0 0;
  letter-spacing: -1px
}
body.page-home .head p {
  max-width: 560px;
  color: var(--mu);
  margin: 0
}
body.page-home .k {
  font-size: 12px;
  letter-spacing: 3px;
  color: #207fa5;
  font-weight: 900
}
body.page-home .problem {
  background: #fff
}
body.page-home .problemgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}
body.page-home .p {
  padding: 25px;
  border: 1px solid var(--ln);
  border-radius: 18px;
  transition: .25s;
  cursor: pointer
}
body.page-home .p:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(8, 35, 52, .1);
  border-color: #b9d9e4
}
body.page-home .p strong {
  display: block;
  font-size: 22px;
  margin: 7px 0
}
body.page-home .p span {
  font-size: 14px;
  color: var(--mu)
}
body.page-home .ico {
  font-size: 25px
}
body.page-home .diag {
  margin-top: 20px;
  padding: 20px 23px;
  border: 1px solid #d4e8ee;
  background: #f2fafc;
  border-radius: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
body.page-home .diag small {
  display: block;
  color: var(--mu);
  font-size: 14px;
}
body.page-home .cap {
  background: var(--bg)
}
body.page-home .capgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}
body.page-home .capcard {
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 20px;
  padding: 28px;
  min-height: 230px
}
body.page-home .capcard.dark {
  background: linear-gradient(145deg, #0b2030, #123d51);
  color: #fff;
  border: 0
}
body.page-home .capcard h3 {
  font-size: 22px;
  margin: 12px 0 7px;
  font-weight: 800;
}
body.page-home .capcard p {
  font-size: 13px;
  color: var(--mu)
}
body.page-home .capcard.dark p {
  color: #bfd0d9
}
body.page-home .num {
  font: 11px monospace;
  letter-spacing: 2px;
  color: var(--c)
}
body.page-home .ai {
  background: #fff
}
body.page-home .aigrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}
body.page-home .aipanel {
  background: var(--n);
  color: #fff;
  border-radius: 26px;
  padding: 38px
}
body.page-home .aipanel h3 {
  font-size: 30px;
  margin: 0
}
body.page-home .aipanel p {
  color: #bdccd4
}
body.page-home .flow {
  display: grid;
  gap: 10px;
  margin-top: 25px
}
body.page-home .flow div {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px
}
body.page-home .flow b {
  color: var(--a);
  margin-right: 10px
}
body.page-home .ailist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
body.page-home .aiitem {
  background: #f7fafb;
  border: 1px solid var(--ln);
  border-radius: 16px;
  padding: 20px
}
body.page-home .aiitem b {
  display: block
}
body.page-home .aiitem span {
  font-size: 12px;
  color: var(--mu)
}
body.page-home .industry {
  background: #f7f3ed
}
body.page-home .rows {
  border-top: 1px solid #d9d0c4
}
body.page-home .rows a {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 21px 5px;
  border-bottom: 1px solid #d9d0c4
}
body.page-home .rows b {
  font-size: 19px
}
body.page-home .rows span {
  color: #777
}
body.page-home .center {
  background: linear-gradient(120deg, #081722, #10384c);
  color: #fff
}
body.page-home .centergrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center
}
body.page-home .center p {
  color: #c1d1da
}
body.page-home .center h2 {
  font-size: 45px;
  line-height: 1.2
}
body.page-home .boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}
body.page-home .box {
  padding: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px
}
body.page-home .box b {
  display: block
}
body.page-home .box span {
  font-size: 12px;
  color: #aabec8
}
body.page-home .cta {
  padding: 75px 0;
  background: #eef7f9
}
body.page-home .ctabox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px
}
body.page-home .ctabox h2 {
  font-size: 40px;
  line-height: 1.25;
  margin: 0
}
body.page-home .ctabox p {
  color: var(--mu)
}
body.page-home footer {
  background: #04101a;
  color: #8ea4af;
  padding: 32px 0;
  font-size: 12px
}
body.page-home footer .wrap {
  display: flex;
  justify-content: space-between
}
body.page-home .diagnosis-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 20;
  align-items: center;
  justify-content: center;
  padding: 20px
}
body.page-home .diagnosis-modal.open {
  display: flex
}
body.page-home .modalbox {
  background: #fff;
  width: min(720px, 100%);
  padding: 30px;
  border-radius: 23px;
  position: relative
}
body.page-home .close {
  position: absolute;
  right: 17px;
  top: 10px;
  border: 0;
  background: none;
  font-size: 28px
}
body.page-home .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
body.page-home .choice {
  border: 1px solid var(--ln);
  padding: 15px;
  border-radius: 13px;
  cursor: pointer
}
body.page-home .choice:hover, body.page-home .choice.sel {
  background: #eefafd;
  border-color: var(--c)
}
body.page-home .choice b {
  display: block
}
body.page-home .choice span {
  font-size: 11px;
  color: var(--mu)
}
body.page-home .q {
  display: none
}
body.page-home .q.active {
  display: block;
  margin-top: 5px;
}
body.page-home .steps {
  display: flex;
  gap: 5px
}
body.page-home .sd {
  height: 5px;
  flex: 1;
  background: #e3eaee;
  border-radius: 5px
}
body.page-home .sd.on {
  background: var(--c)
}
@media (max-width:850px) {
  body.page-home .links {
    display: none
  }
  body.page-home .hero .wrap, body.page-home .aigrid, body.page-home .centergrid {
    grid-template-columns: 1fr
  }
  body.page-home .hero .wrap {
    padding: 70px 0 60px
  }
  body.page-home .hero-features {
    grid-template-columns: 1fr 1fr;
    margin-top: 0
  }
  body.page-home .hf {
    padding: 12px 18px
  }
  body.page-home .visual {
    height: 300px
  }
  body.page-home .problemgrid, body.page-home .capgrid {
    grid-template-columns: 1fr 1fr;
  }
  body.page-home .head {
    display: block
  }
  body.page-home .head p {
    margin-top: 12px
  }
  body.page-home .ctabox {
    display: block
  }
  body.page-home .rows a {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
@media (max-width:560px) {
  body.page-home .wrap {
    width: calc(100% - 28px)
  }
  body.page-home .hero-features {
    grid-template-columns: 1fr;
  }
  body.page-home .hf {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding-left: 0
  }
  body.page-home .problemgrid, body.page-home .capgrid, body.page-home .ailist, body.page-home .boxes, body.page-home .choices {
    grid-template-columns: 1fr;
  }
  body.page-home section {
    padding: 65px 0
  }
  body.page-home .hero h1 {
    font-size: 41px
  }
  body.page-home .hero p {
    font-size: 15px
  }
  body.page-home .diag {
    display: block
  }
  body.page-home .diag .btn {
    margin-top: 12px
  }
  body.page-home .top .wrap {
    justify-content: center
  }
  body.page-home .top span:last-child {
    display: none
  }
  body.page-home footer .wrap {
    display: block
  }
}
.extracted-inline-1 {
  margin: 0
}
.extracted-inline-2 {
  margin: 0
}
.extracted-inline-3 {
  margin: 5px 0
}
.extracted-inline-4 {
  color: var(--mu);
  font-size: 13px
}
.extracted-inline-5 {
  background: #f1fafb;
  border: 1px solid #d1e8ed;
  padding: 18px;
  border-radius: 14px
}
.extracted-inline-6 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px
}
.extracted-inline-7 {
  background: #edf2f4;
  color: #182630;
  margin: 0
}
.extracted-inline-8 {
  margin: 0
}
.extracted-inline-9 {
  font-size: 19px
}
.extracted-inline-10 {
  color: var(--mu);
  margin: 5px 0
}
.extracted-inline-11 {
  color: #207fa5;
  font-weight: 800
}
.extracted-inline-12 {
  color: #667985
}
.extracted-inline-13 {
  border: 0;
  cursor: pointer
}
.extracted-inline-14 {
  margin-top: 12px;
  font-weight: 700
}
/* 後台樣式 1 */
body.admin-login {
  font-family: system-ui;
  background: #0b1f2a;
  color: #fff;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0
}
body.admin-login .box {
  width: min(420px, 88vw);
  background: #fff;
  color: #17313f;
  padding: 28px;
  border-radius: 16px
}
body.admin-login input, body.admin-login button {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  margin-top: 10px
}
body.admin-login button {
  background: #1283a8;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 700
}
body.admin-login .err {
  color: #b42318
}
/* 後台樣式 2 */
body.admin-dashboard {
  font-family: system-ui;
  margin: 0;
  background: #f4f7f9;
  color: #17313f
}
body.admin-dashboard .top {
  background: #0b1f2a;
  color: #fff;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
body.admin-dashboard .wrap {
  padding: 24px;
  overflow: auto
}
body.admin-dashboard .stats {
  margin-bottom: 16px
}
body.admin-dashboard a {
  color: #147da0
}
body.admin-dashboard table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px
}
body.admin-dashboard th, body.admin-dashboard td {
  padding: 10px;
  border-bottom: 1px solid #e3e9ed;
  text-align: left;
  vertical-align: top
}
body.admin-dashboard th {
  background: #eef4f6;
  position: sticky;
  top: 0
}
body.admin-dashboard .score {
  font-weight: 800
}
body.admin-dashboard .detail {
  max-width: 380px;
  white-space: pre-wrap
}
body.admin-dashboard .pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  background: #e9f5f8
}
.extracted-inline-15 {
  color: #fff
}
/*=== 耐超高溫產品總覽 ===*/
body.page-high-temp main {
  min-width: 0
}
body.page-high-temp .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0
}
body.page-high-temp .card .tag, body.page-high-temp .card h3 {
  margin: 0
}
body.page-high-temp .card .btn {
  margin-top: auto;
  color: #087a9a;
  white-space: normal
}
body.page-high-temp .high-temp-product-image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f4f7fa;
  border-radius: 8px
}
body.page-high-temp .high-temp-contact {
  margin-top: 32px;
  overflow-wrap: anywhere
}
@media(max-width:560px) {
  body.page-high-temp .cta {
    flex-direction: column;
    align-items: flex-start
  }
}
/*===================================
耐超高溫彩色／熱成像攝影系統 1.爐內監視系統
====================================*/
.hf-brochure {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 34px 88px 34px 32px;
  margin: 0 0 28px;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  color: #333
}
.hf-brochure * {
  box-sizing: border-box
}
.hf-brochure-head {
  border-bottom: 2px solid #0b4f94;
  padding-bottom: 7px;
  margin-bottom: 22px
}
.hf-brochure-kicker {
  text-align: right;
  color: #064888;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2
}
.hf-brochure-kicker small {
  display: block;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px
}
.hf-brochure h2 {
  margin: 12px 0 0;
  color: #064888;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: .04em
}
.hf-brochure h2 span {
  display: block;
  font-family: Georgia, serif;
  font-size: 23px;
  letter-spacing: 0;
  margin-top: 4px
}
.hf-model {
  display: inline-block;
  background: #f0f0f0;
  color: #064888;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .05em;
  padding: 5px 28px;
  margin-bottom: 12px
}
.hf-photo-grid, .hf-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}
.hf-photo-grid img, .hf-bottom-grid img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover
}
.hf-bottom-grid img {
  height: 190px
}
.hf-rule-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #064888;
  font-size: 20px;
  font-weight: 800;
  margin: 20px 0 7px
}
.hf-rule-title:after {
  content: "";
  height: 1px;
  background: #0b5cac;
  flex: 1
}
.hf-copy {
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
  margin: 0 0 7px
}
.hf-specs {
  font-size: 15px;
  line-height: 1.75
}
.hf-specs div {
  margin: 1px 0
}
.hf-en-title {
  font-family: Georgia, "Times New Roman", serif
}
.hf-list {
  margin: 7px 0 16px;
  padding-left: 27px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.5
}
.hf-ribbon {
  position: absolute;
  right: 0;
  top: 0px;
  width: 58px;
  min-height: 500px;
  background: linear-gradient(180deg, #07519b, #003f7d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 13px
}
.hf-ribbon span {
  writing-mode: vertical-rl;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .13em
}
.hf-brochure-note {
  font-size: 12px;
  color: #777;
  margin-top: 12px
}
@media(max-width:900px) {
  .hf-brochure {
    padding: 26px 24px
  }
  .hf-ribbon {
    display: none
  }
  .hf-brochure h2 {
    font-size: 31px
  }
  .hf-brochure h2 span {
    font-size: 20px
  }
  .hf-photo-grid img {
    height: 190px
  }
  .hf-bottom-grid img {
    height: 170px
  }
}
@media(max-width:620px) {
  .hf-brochure {
    padding: 20px 16px
  }
  .hf-brochure-kicker {
    text-align: left
  }
  .hf-brochure h2 {
    font-size: 27px
  }
  .hf-brochure h2 span {
    font-size: 17px
  }
  .hf-model {
    font-size: 18px
  }
  .hf-photo-grid, .hf-bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }
  .hf-photo-grid img, .hf-bottom-grid img {
    height: auto
  }
  .hf-copy, .hf-specs, .hf-list {
    font-size: 14px
  }
  .hf-rule-title {
    font-size: 18px
  }
}
/*=== Heat-proof Camera System brochure - high-temp-window ===*/
.hw-brochure {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 28px 42px 42px;
  margin: 0 0 28px;
  border: 1px solid #e3e9f0;
  color: #17243a;
  font-family: Georgia, "Times New Roman", "Noto Serif TC", serif
}
.hw-head h2 {
  margin: 0;
  color: #064789;
  font-size: 44px;
  line-height: 1.02;
  font-weight: 800;
  border-bottom: 2px solid #0b5ca8;
  padding-bottom: 10px
}
.hw-head h2 span {
  display: block;
  font-size: 28px
}
.hw-head p {
  color: #064789;
  font-size: 19px;
  line-height: 1.35;
  margin: 10px 0 12px
}
.hw-head p span {
  display: inline-block;
  text-align: right
}
.hw-model {
  display: inline-block;
  background: #edf0f3;
  color: #064789;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 28px;
  margin: 0 0 18px
}
.hw-columns {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 28px
}
.hw-left {
  min-width: 0
}
.hw-lead {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 12px
}
.hw-product-photo, .hw-furnace-photo {
  display: block;
  width: 100%;
  height: auto
}
.hw-caption {
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  margin: 10px 0 14px
}
.hw-left h3 {
  color: #064789;
  font-size: 28px;
  margin: 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px
}
.hw-left h3:after {
  content: "";
  height: 2px;
  background: #0b5ca8;
  flex: 1
}
.hw-features-en, .hw-features-zh {
  font-size: 15.5px;
  line-height: 1.55
}
.hw-features-zh {
  margin-top: 16px;
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif
}
.hw-furnace-photo {
  margin-top: 22px
}
.hw-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 11px;
  line-height: 1.15
}
.hw-spec-table th, .hw-spec-table td {
  border: 1px solid #aab2bb;
  padding: 4px 6px;
  vertical-align: middle
}
.hw-spec-table th {
  width: 34%;
  text-align: left;
  font-weight: 700;
  background: #f1f3f5
}
.hw-spec-table .hw-group th {
  width: auto;
  background: #064d91;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  padding: 5px 8px
}
.hw-ribbon {
  position: absolute;
  right: -55px;
  top: 65px;
  width: 82px;
  min-height: 590px;
  background: linear-gradient(155deg, #004286, #0054a4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  writing-mode: vertical-rl;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 5px;
  box-shadow: 0 0 0 1px rgba(0, 45, 100, .15)
}
@media(max-width:1100px) {
  .hw-brochure {
    padding: 24px
  }
  .hw-ribbon {
    display: none
  }
  .hw-head {
    padding-right: 0
  }
  .hw-head h2 {
    font-size: 36px
  }
  .hw-columns {
    gap: 20px
  }
  .hw-spec-table {
    font-size: 10px
  }
}
@media(max-width:767px) {
  .hw-brochure {
    padding: 18px 14px
  }
  .hw-head h2 {
    font-size: 30px
  }
  .hw-head h2 span {
    font-size: 20px
  }
  .hw-head p {
    font-size: 16px
  }
  .hw-model {
    font-size: 27px;
    padding: 4px 18px
  }
  .hw-columns {
    grid-template-columns: 1fr
  }
  .hw-lead {
    font-size: 16px
  }
  .hw-caption {
    font-size: 19px
  }
  .hw-left h3 {
    font-size: 24px
  }
  .hw-features-en, .hw-features-zh {
    font-size: 14px
  }
  .hw-right {
    overflow-x: auto
  }
  .hw-spec-table {
    min-width: 560px;
    font-size: 10.5px
  }
}
/*=== 爐壁視窗監視系統網頁型錄 ===*/
.hw-brochure {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 28px 92px 34px 32px;
  margin: 0 0 28px;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  color: #18253a
}
.hw-brochure * {
  box-sizing: border-box
}
.hw-head {
  border-bottom: 2px solid #0b4f94;
  padding-bottom: 30px;
  margin-bottom: 20px;
}
.hw-brochure h2 {
  margin: 0;
  color: #064888;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: .04em
}
.hw-brochure h2 span {
  display: block;
  font-family: Georgia, serif;
  font-size: 24px;
  letter-spacing: 0;
  margin-top: 3px
}
.hw-subtitle {
  color: #064888;
  font-size: 16px;
  line-height: 1.35;
  margin-top: 12px
}
.hw-subtitle span {
  float: right;
  text-align: right;
  font-family: Georgia, serif;
  font-size: 16px
}
.hw-layout {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 28px;
  clear: both
}
.hw-model {
  display: inline-block;
  background: #f0f0f0;
  color: #064888;
  font-family: serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .04em;
  padding: 7px 30px;
  margin: 0 0 15px
}
.hw-intro {
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 10px
}
.hw-product, .hw-furnace {
  display: block;
  width: 100%;
  height: auto
}
.hw-focus {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin: 9px 0 14px
}
.hw-rule-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #064888;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  margin: 10px 0 6px
}
.hw-rule-title:after {
  content: "";
  height: 1px;
  background: #0b5cac;
  flex: 1
}
.hw-features {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.55
}
.hw-features p {
  margin: 0 0 12px
}
.hw-features .hw-cn {
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  line-height: 1.75
}
.hw-spec {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 11px;
  color: #111
}
.hw-spec th, .hw-spec td {
  border: 1px solid #aeb7c0;
  padding: 3px 6px;
  vertical-align: middle;
  line-height: 1.15
}
.hw-spec th {
  width: 33%;
  text-align: left;
  font-weight: 700;
  background: #f1f3f5
}
.hw-spec .hw-sec th {
  width: auto;
  background: #07519b;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 16px;
  padding: 4px 7px
}
.hw-ribbon {
  position: absolute;
  right: 0;
  top: 0;
  width: 62px;
  min-height: 610px;
  background: linear-gradient(180deg, #07519b, #003f7d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 13px
}
.hw-ribbon span {
  writing-mode: vertical-rl;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .13em
}
.hw-furnace {
  margin-top: 18px
}
@media(max-width:900px) {
  .hw-brochure {
    padding: 26px 24px
  }
  .hw-ribbon {
    display: none
  }
  .hw-layout {
    grid-template-columns: 1fr
  }
  .hw-brochure h2 {
    font-size: 31px
  }
  .hw-subtitle span {
    float: none;
    display: block;
    text-align: left;
    margin-top: 4px
  }
  .hw-right {
    overflow-x: auto
  }
  .hw-spec {
    min-width: 560px
  }
}
@media(max-width:620px) {
  .hw-brochure {
    padding: 20px 16px
  }
  .hw-brochure h2 {
    font-size: 27px
  }
  .hw-brochure h2 span {
    font-size: 18px
  }
  .hw-model {
    font-size: 22px
  }
  .hw-subtitle, .hw-subtitle span {
    font-size: 14px
  }
  .hw-focus {
    font-size: 17px
  }
}
/*=== Portable 360-degree ===*/
.hf360-brochure {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 34px 88px 34px 32px;
  margin: 0 0 28px;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  color: #333
}
.hf360-brochure * {
  box-sizing: border-box
}
.hf360-head {
  border-bottom: 2px solid #0b4f94;
  padding-bottom: 7px;
  margin-bottom: 22px
}
.hf360-kicker {
  text-align: right;
  color: #064888;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2
}
.hf360-kicker small {
  display: block;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px
}
.hf360-brochure h2 {
  margin: 12px 0 0;
  color: #064888;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: .04em
}
.hf360-brochure h2 span {
  display: block;
  font-family: Georgia, serif;
  font-size: 23px;
  letter-spacing: 0;
  margin-top: 4px
}
.hf360-model {
  display: inline-block;
  background: #f0f0f0;
  color: #064888;
  font-family: serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .05em;
  padding: 5px 28px;
  margin-bottom: 12px
}
.hf360-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 4px
}
.hf360-visual-grid > div {
  min-width: 0
}
.hf360-caption {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 8px;
  min-height: 40px
}
.hf360-visual-grid img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #f5f5f5
}
.hf360-rule-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #064888;
  font-size: 20px;
  font-weight: 800;
  margin: 20px 0 7px
}
.hf360-rule-title:after {
  content: "";
  height: 1px;
  background: #0b5cac;
  flex: 1
}
.hf360-copy {
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
  margin: 0 0 7px
}
.hf360-specs {
  font-size: 15px;
  line-height: 1.75
}
.hf360-specs div {
  margin: 1px 0
}
.hf360-list {
  margin: 12px 0 16px;
  padding-left: 27px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.5
}
.hf360-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}
.hf360-bottom-grid img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover
}
.hf360-ribbon {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  min-height: 500px;
  background: linear-gradient(180deg, #07519b, #003f7d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 13px
}
.hf360-ribbon span {
  writing-mode: vertical-rl;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .13em
}
@media(max-width:900px) {
  .hf360-brochure {
    padding: 26px 24px
  }
  .hf360-ribbon {
    display: none
  }
  .hf360-brochure h2 {
    font-size: 31px
  }
  .hf360-brochure h2 span {
    font-size: 20px
  }
  .hf360-visual-grid img {
    height: 190px
  }
  .hf360-bottom-grid img {
    height: 170px
  }
}
@media(max-width:620px) {
  .hf360-brochure {
    padding: 20px 16px
  }
  .hf360-kicker {
    text-align: left
  }
  .hf360-brochure h2 {
    font-size: 27px
  }
  .hf360-brochure h2 span {
    font-size: 17px
  }
  .hf360-model {
    font-size: 18px
  }
  .hf360-visual-grid, .hf360-bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }
  .hf360-caption {
    min-height: 0
  }
  .hf360-visual-grid img, .hf360-bottom-grid img {
    height: auto
  }
  .hf360-copy, .hf360-specs, .hf360-list {
    font-size: 14px
  }
  .hf360-rule-title {
    font-size: 18px
  }
}
/*=== 防爆型產品總覽圖片 ===*/
body.page-explosion-proof main {
  min-width: 0;
}
body.page-explosion-proof .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
body.page-explosion-proof .card .tag, body.page-explosion-proof .card h3, body.page-explosion-proof .card p {
  margin-top: 0;
}
body.page-explosion-proof .product-image-zoom {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f7fa;
  cursor: zoom-in;
}
body.page-explosion-proof .explosion-proof-product-image {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  background: #f4f7fa;
  border-radius: 8px;
}
body.page-explosion-proof .card .btn {
  margin-top: auto;
}
/*=== AI智慧型辨識系統產品總覽圖片 ===*/
body.page-ai main {
  min-width: 0;
}
body.page-ai .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
body.page-ai .card .tag, body.page-ai .card h3, body.page-ai .card p {
  margin-top: 0;
}
body.page-ai .product-image-zoom {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f7fa;
  cursor: zoom-in;
}
body.page-ai .ai-product-image {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  background: #f4f7fa;
  border-radius: 8px;
}
body.page-ai .card .btn {
  margin-top: auto;
}
/*=========================
防爆小型攝錄影機
==========================*/
.epmnc-catalog {
  background: #fff;
  color: #151515
}
.epmnc-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  border-bottom: 2px solid #064a94;
  padding-bottom: 12px;
  margin-bottom: 16px
}
.epmnc-head h2 {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  color: #064a94;
  margin: 0
}
.epmnc-sub {
  font-family: serif;
  font-size: 24px;
  margin: 6px 0 0
}
.epmnc-model {
  text-align: center;
  color: #064a94;
  min-width: 230px
}
.epmnc-model small {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25
}
.epmnc-model strong {
  display: block;
  background: #e7e7e7;
  color: #1c2530;
  border-radius: 10px;
  padding: 8px 16px;
  margin-top: 16px;
  font: 700 30px Georgia, serif
}
.epmnc-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 20px
}
.epmnc-products {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px
}
.epmnc-products img:first-child {
  width: 48%;
  align-self: flex-start;
  margin-left: 5%
}
.epmnc-products img:last-child {
  width: 70%;
  align-self: flex-end
}
.epmnc-catalog h3 {
  font: 700 28px Georgia, serif;
  color: #064a94;
  border-top: 2px solid #064a94;
  padding: 8px 0 3px;
  margin: 8px 0
}
.epmnc-features {
  margin: 6px 0 12px;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.55
}
.epmnc-table {
  margin: 8px 0
}
.epmnc-table h3 {
  background: #064a94;
  color: #fff;
  border: 0;
  padding: 5px 9px;
  margin: 0;
  font-size: 21px
}
.epmnc-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.18
}
.epmnc-table th, .epmnc-table td {
  border: 1px solid #9aa3ad;
  padding: 4px 7px;
  vertical-align: top
}
.epmnc-table th {
  width: 34%;
  background: #f0f2f4;
  text-align: left;
  font-weight: 700
}
.epmnc-install {
  width: 100%;
  display: block;
  margin-top: 10px
}
.epmnc-note {
  margin: 8px 0 0;
  font-size: 14px
}
.epmnc-right .epmnc-table {
  margin-top: 0;
  margin-bottom: 7px
}
@media(max-width:900px) {
  .epmnc-head {
    display: block
  }
  .epmnc-model {
    text-align: left;
    margin-top: 12px;
    min-width: 0
  }
  .epmnc-model strong {
    display: inline-block;
    font-size: 24px
  }
  .epmnc-grid {
    grid-template-columns: 1fr
  }
  .epmnc-products {
    min-height: 0
  }
  .epmnc-table {
    overflow-x: auto
  }
  .epmnc-table table {
    min-width: 560px
  }
  .epmnc-features {
    font-size: 16px
  }
}
@media(max-width:520px) {
  .epmnc-head h2 {
    font-size: 34px
  }
  .epmnc-sub {
    font-size: 24px;
  }
  .epmnc-products img:first-child {
    width: 55%
  }
  .epmnc-products img:last-child {
    width: 78%
  }
}
/*=========================
防爆電動迴轉台
==========================*/
.ep-catalog {
  background: #fff;
  color: #212529;
  padding: 24px 18px;
  margin-bottom: 28px
}
.ep-catalog .cat-title {
  font-family: serif;
  color: var(--navy);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0
}
.ep-catalog .cat-en {
  font-family: serif;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  margin: 2px 0 12px
}
.ep-catalog .blue-rule {
  height: 4px;
  background: #04347f;
  margin: 10px 0 20px
}
.ep-catalog h3 {
  color: #04347f;
  font-size: 30px;
  font-weight: 800;
  border-bottom: 2px solid #04347f;
  padding-bottom: 7px
}
.ep-catalog .intro {
  font-size: 18px;
  line-height: 1.9;
  text-align: justify
}
.ep-catalog .model {
  text-align: center;
  margin: 24px auto 20px;
  background: #eef0f3;
  padding: 12px 28px;
  max-width: 310px;
  font: 700 31px Georgia, serif
}
.ep-catalog .products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px
}
.ep-catalog .product img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  display: block
}
.ep-catalog table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px
}
.ep-catalog th, .ep-catalog td {
  border: 1px solid #aab2bd;
  padding: 8px 10px
}
.ep-catalog th {
  background: #04347f;
  color: #fff;
  text-align: left
}
.ep-catalog td:first-child {
  font-weight: 700;
  width: 32%;
  background: #f1f3f5
}
@media(max-width:760px) {
  .ep-catalog {
    padding: 18px 8px
  }
  .ep-catalog .products {
    grid-template-columns: 1fr
  }
  .ep-catalog .product img {
    height: auto
  }
  .ep-catalog .intro {
    font-size: 16px
  }
  .ep-catalog table {
    font-size: 14px
  }
}
/*=== 防爆微型網路攝錄影機型錄 - ep-mini ===*/
.epm-brochure {
  background: #fff;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  padding: 28px;
  margin: 0 0 28px;
  color: #182238;
  font-family: Georgia, "Times New Roman", "Microsoft JhengHei", serif;
  overflow: hidden
}
.epm-head {
  text-align: center;
  border-bottom: 3px solid #064789;
  padding-bottom: 12px;
  margin-bottom: 28px
}
.epm-head h2 {
  margin: 0;
  color: #063f7d;
  font-family: "Microsoft JhengHei", serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .04em
}
.epm-head div {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px
}
.epm-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 26px
}
.epm-model {
  background: #eef0f2;
  color: #172143;
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  padding: 8px 12px;
  margin: 8px 0 24px
}
.epm-product, .epm-board {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain
}
.epm-cert {
  text-align: center;
  color: #a40000;
  font-size: 21px;
  font-weight: 700;
  margin: 22px 0 34px
}
.epm-left h3 {
  color: #0a3977;
  font-size: 29px;
  border-bottom: 2px solid #0b579d;
  padding-bottom: 7px;
  margin: 0 0 14px
}
.epm-left ul {
  padding-left: 24px;
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.65
}
.epm-sd {
  text-align: center;
  color: #b30000;
  font-size: 27px;
  line-height: .8
}
.epm-sd strong {
  color: #111;
  font-size: 18px
}
.epm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.15
}
.epm-table th, .epm-table td {
  border: 1px solid #9da8b3;
  padding: 5px 7px;
  vertical-align: middle;
  text-align: center
}
.epm-table thead th {
  background: #07509a;
  color: #fff;
  font-size: 22px;
  padding: 8px
}
.epm-table td:first-child {
  background: #f2f4f6
}
.epm-table td:nth-child(2) {
  background: #fafafa
}
.epm-right {
  overflow-x: auto
}
@media(max-width:900px) {
  .epm-brochure {
    padding: 22px
  }
  .epm-grid {
    grid-template-columns: 1fr
  }
  .epm-head h2 {
    font-size: 30px
  }
  .epm-head div {
    font-size: 19px
  }
  .epm-table {
    min-width: 620px
  }
}
@media(max-width:620px) {
  .epm-brochure {
    padding: 16px
  }
  .epm-head h2 {
    font-size: 25px
  }
  .epm-head div {
    font-size: 16px
  }
  .epm-model {
    font-size: 22px
  }
  .epm-left h3 {
    font-size: 25px
  }
  .epm-left ul {
    font-size: 15px
  }
}
/* 防爆產品型錄外框：比照 high-temp-furnace.html */
.hf-like-frame {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 34px 32px;
  margin: 0 0 28px;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
}
@media (max-width: 760px) {
  .hf-like-frame {
    padding: 22px 16px;
  }
}
/* ep-mini desktop specification table: fit fully without horizontal scrolling */
@media (min-width:901px) {
  .epm-grid {
    grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
    gap: 20px
  }
  .epm-right.table-responsive {
    overflow-x: visible !important;
    width: 100%;
    max-width: 100%
  }
  .epm-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 11px;
    line-height: 1.12
  }
  .epm-table th, .epm-table td {
    padding: 4px 5px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal
  }
  .epm-table td:first-child {
    width: 16%
  }
  .epm-table td:nth-child(2) {
    width: 28%
  }
  .epm-table td:nth-child(3) {
    width: 56%
  }
}
/*=== ep-fire 型錄網頁版 ===*/
.epfire-brochure {
  background: #fff;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  padding: 28px;
  margin: 0 0 28px;
  color: #222;
  font-family: Georgia, "Times New Roman", "Microsoft JhengHei", serif;
  overflow: hidden
}
.epfire-brochure * {
  box-sizing: border-box
}
.epfire-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 4px solid #064888;
  padding-bottom: 12px;
  margin-bottom: 20px
}
.epfire-head h2 {
  margin: 0;
  color: #064888;
  font-family: "Microsoft JhengHei", serif;
  font-size: 34px;
  font-weight: 800
}
.epfire-head div {
  color: #064888;
  font-size: 18px;
  font-weight: 700;
  text-align: right
}
.epfire-model {
  display: inline-block;
  background: #eef0f2;
  color: #173b6f;
  font-size: 27px;
  font-weight: 700;
  padding: 5px 16px;
  margin-bottom: 18px
}
.epfire-top {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 28px;
  align-items: start;
  border-bottom: 2px solid #0b5cac;
  padding-bottom: 20px
}
.epfire-brochure h3 {
  color: #123f7d;
  font-size: 25px;
  margin: 8px 0 12px;
  font-weight: 700
}
.epfire-top ul {
  margin: 18px 0 0;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.65
}
.epfire-top li::marker {
  color: #0b5cac
}
.epfire-brochure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto
}
.epfire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr
}
.epfire-grid article {
  padding: 24px 20px 10px
}
.epfire-grid article + article {
  border-left: 1px solid #0b5cac
}
.epfire-grid p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px
}
.epfire-grid article img {
  margin-bottom: 18px
}
@media(max-width:900px) {
  .epfire-head {
    display: block
  }
  .epfire-head div {
    text-align: left;
    margin-top: 5px
  }
  .epfire-top {
    grid-template-columns: 1fr
  }
  .epfire-grid {
    grid-template-columns: 1fr
  }
  .epfire-grid article + article {
    border-left: 0;
    border-top: 1px solid #0b5cac
  }
}
@media(max-width:620px) {
  .epfire-brochure {
    padding: 18px 14px
  }
  .epfire-head h2 {
    font-size: 27px
  }
  .epfire-head div {
    font-size: 15px
  }
  .epfire-model {
    font-size: 21px
  }
  .epfire-brochure h3 {
    font-size: 22px
  }
  .epfire-grid article {
    padding: 18px 0
  }
}
/*=== ep-gas 型錄網頁版 ===*/
.eg-brochure {
  background: #fff;
  border: 1px solid #e4e8ed;
  box-shadow: 0 10px 28px rgba(13, 59, 108, .08);
  padding: 24px 22px 28px;
  margin: 0 0 28px;
  color: #222;
  font-family: Georgia, "Times New Roman", "Microsoft JhengHei", serif;
  overflow: hidden
}
.eg-brochure * {
  box-sizing: border-box
}
.eg-topline {
  text-align: right;
  color: #b51f18;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 3px solid #0b4f94;
  padding: 0 4px 8px
}
.eg-head {
  border-bottom: 3px solid #0b4f94;
  padding: 16px 2px 14px;
  margin-bottom: 24px
}
.eg-head h2 {
  margin: 0;
  color: #111;
  font-family: "Microsoft JhengHei", sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15
}
.eg-subtitle {
  font-size: 23px;
  font-weight: 700;
  margin-top: 5px
}
.eg-grid {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  gap: 20px
}
.eg-left, .eg-right {
  min-width: 0
}
.eg-product {
  display: block;
  width: 78%;
  max-height: 245px;
  object-fit: cover;
  margin: 0 auto
}
.eg-caption {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 7px 0 10px;
  border-bottom: 3px solid #0b4f94
}
.eg-bar {
  margin: 12px 0 0;
  background: linear-gradient(90deg, #07539c, #00427f);
  color: #fff;
  font-size: 24px;
  padding: 7px 12px
}
.eg-features {
  font-size: 16px;
  line-height: 1.55;
  margin: 8px 0 12px;
  padding-left: 24px
}
.eg-thermal-stack {
  border-top: 3px solid #0b4f94;
  padding-top: 12px
}
.eg-thermal-stack img {
  display: block;
  width: 78%;
  margin: 0 auto 6px;
  max-height: 205px;
  object-fit: cover
}
.eg-model {
  text-align: center;
  border: 1px solid #0b4f94;
  background: #f1f3f5;
  font-size: 29px;
  font-weight: 700;
  padding: 10px 8px;
  margin-bottom: 14px
}
.eg-spec {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.28
}
.eg-spec th, .eg-spec td {
  border: 1px solid #9ca3aa;
  padding: 8px 9px;
  vertical-align: middle;
  overflow-wrap: anywhere
}
.eg-spec th {
  width: 35%;
  font-weight: 400;
  text-align: left;
  background: #fafafa
}
.eg-spec td {
  width: 65%
}
@media(max-width:900px) {
  .eg-head h2 {
    font-size: 31px
  }
  .eg-subtitle {
    font-size: 19px
  }
  .eg-grid {
    grid-template-columns: 1fr
  }
  .eg-product, .eg-thermal-stack img {
    width: min(100%, 520px)
  }
  .eg-spec {
    font-size: 14px
  }
}
@media(max-width:620px) {
  .eg-brochure {
    padding: 16px 12px
  }
  .eg-topline {
    text-align: left;
    font-size: 12px
  }
  .eg-head h2 {
    font-size: 26px
  }
  .eg-subtitle {
    font-size: 16px
  }
  .eg-model {
    font-size: 23px
  }
  .eg-spec {
    font-size: 12px
  }
  .eg-spec th, .eg-spec td {
    padding: 6px 5px
  }
  .eg-spec th {
    width: 38%
  }
  .eg-spec td {
    width: 62%
  }
}
/*=== ep-4g 型錄網頁版 ===*/
.ep4g-catalog {
  border: 1px solid #d7dde5;
  background: #fff;
  padding: 28px;
  margin: 0 0 28px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
  color: #20252b
}
.ep4g-catalog * {
  box-sizing: border-box
}
.ep4g-head {
  border-bottom: 5px solid #064889;
  margin-bottom: 12px
}
.ep4g-head .brandline {
  text-align: right;
  color: #064889;
  font-weight: 700;
  font-size: 18px
}
.ep4g-head h2 {
  font-size: 42px;
  margin: 8px 0 0;
  color: #111;
  font-weight: 800;
  letter-spacing: .02em
}
.ep4g-head .en {
  font-family: Georgia, serif;
  font-size: 25px;
  margin: 0 0 10px
}
.ep4g-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 18px
}
.ep4g-photo {
  width: 100%;
  display: block;
  object-fit: contain;
  max-height: 460px
}
.ep4g-titlebox {
  border: 1px solid #0b4d89;
  background: linear-gradient(90deg, #f1f3f5, #fff);
  font: 700 31px Georgia, serif;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px
}
.ep4g-blue {
  background: linear-gradient(90deg, #064b8d, #00529a);
  color: #fff;
  font: 700 22px Georgia, serif;
  padding: 5px 12px;
  margin: 8px 0 0
}
.ep4g-features {
  border-top: 4px solid #064889;
  margin-top: 10px
}
.ep4g-features h3 {
  background: #075095;
  color: #fff;
  padding: 8px 14px;
  font: 700 27px Georgia, serif;
  margin: 10px 0 8px
}
.ep4g-features ul {
  list-style: none;
  padding: 0 18px;
  margin: 0
}
.ep4g-features li {
  margin: 12px 0;
  line-height: 1.55
}
.ep4g-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed
}
.ep4g-table th, .ep4g-table td {
  border: 1px solid #8b949d;
  padding: 4px 7px;
  vertical-align: top;
  overflow-wrap: anywhere
}
.ep4g-table th {
  width: 32%;
  text-align: left;
  font-weight: 700;
  background: #f1f3f5
}
.ep4g-smalltable {
  font-size: 13px;
  margin-top: 12px
}
.ep4g-smalltable th {
  width: auto
}
.ep4g-smalltable td:first-child {
  font-weight: 700;
  background: #f1f3f5
}
.ep4g-note {
  font-size: 12px;
  color: #555;
  margin-top: 10px
}
@media(max-width:991px) {
  .ep4g-grid {
    grid-template-columns: 1fr
  }
  .ep4g-head h2 {
    font-size: 32px
  }
  .ep4g-catalog {
    padding: 18px
  }
  .ep4g-table {
    font-size: 12px
  }
}
@media(max-width:575px) {
  .ep4g-catalog {
    padding: 12px
  }
  .ep4g-head h2 {
    font-size: 27px
  }
  .ep4g-head .en {
    font-size: 19px
  }
  .ep4g-titlebox {
    font-size: 24px
  }
}
/*==========================
防水球型 4G/WiFi 移動式攝錄影機
===========================*/
.epdome-catalog {
  border: 1px solid #d7dde5;
  background: #fff;
  padding: 28px;
  margin: 0 0 28px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
  color: #20252b
}
.epdome-catalog * {
  box-sizing: border-box
}
.epdome-head {
  border-bottom: 5px solid #064889;
  margin-bottom: 14px
}
.epdome-head h2 {
  font-size: 40px;
  margin: 0;
  color: #073b76;
  font-weight: 800;
  letter-spacing: .02em
}
.epdome-head .en {
  font-family: Georgia, serif;
  font-size: 24px;
  margin: 4px 0 10px
}
.epdome-model {
  display: inline-block;
  float: right;
  background: #edf0f3;
  border-radius: 18px;
  padding: 7px 20px;
  color: #0b376c;
  font: 700 27px Georgia, serif;
  margin-top: -52px
}
.epdome-grid {
  display: grid;
  grid-template-columns: 47% 53%;
  gap: 18px;
  clear: both
}
.epdome-photo {
  width: 100%;
  display: block;
  object-fit: contain;
  max-height: 390px
}
.epdome-features {
  border-top: 4px solid #064889;
  margin-top: 10px
}
.epdome-features h3, .epdome-blue {
  background: linear-gradient(90deg, #064b8d, #00529a);
  color: #fff;
  padding: 6px 12px;
  font: 700 24px Georgia, serif;
  margin: 8px 0
}
.epdome-features ul {
  padding-left: 22px;
  margin: 0
}
.epdome-features li {
  margin: 9px 0;
  line-height: 1.5
}
.epdome-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed
}
.epdome-table th, .epdome-table td {
  border: 1px solid #8b949d;
  padding: 4px 7px;
  vertical-align: top;
  overflow-wrap: anywhere
}
.epdome-table th {
  width: 34%;
  text-align: left;
  background: #f1f3f5;
  font-weight: 700
}
.epdome-general {
  margin-top: 12px
}
.epdome-general th {
  width: 32%
}
@media(max-width:991px) {
  .epdome-grid {
    grid-template-columns: 1fr
  }
  .epdome-model {
    float: none;
    margin: 8px 0 12px
  }
  .epdome-catalog {
    padding: 18px
  }
  .epdome-head h2 {
    font-size: 31px
  }
}
@media(max-width:575px) {
  .epdome-catalog {
    padding: 12px
  }
  .epdome-head h2 {
    font-size: 26px
  }
  .epdome-head .en {
    font-size: 18px
  }
  .epdome-model {
    font-size: 22px
  }
  .epdome-table {
    font-size: 12px
  }
}
/*==========================
防爆迴轉台
==========================*/
.epptz-catalog {
  background: #fff
}
.epptz-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px
}
.epptz-title {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1.05;
  margin: 0;
  color: #064486
}
.epptz-en {
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  margin-top: 8px;
  color: #111
}
.epptz-model {
  background: #e9ecef;
  border-radius: 10px;
  padding: 10px 24px;
  font: 700 clamp(1.25rem, 2.4vw, 2rem) Georgia, serif;
  white-space: nowrap
}
.epptz-rule {
  height: 6px;
  background: #064486;
  margin: 16px 0 28px
}
.epptz-intro {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  align-items: center
}
.epptz-features h3, .epptz-spec-title {
  color: #064486;
  font-size: 1.7rem;
  border-bottom: 2px solid #064486;
  padding-bottom: 8px;
  margin: 0 0 14px
}
.epptz-features ul {
  list-style: none;
  padding: 0;
  margin: 0
}
.epptz-features li {
  position: relative;
  padding: 0 0 10px 30px;
  line-height: 1.75
}
.epptz-features li:before {
  content: '●';
  position: absolute;
  left: 2px;
  color: #064486
}
.epptz-product {
  margin: 0;
  text-align: center
}
.epptz-product img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto
}
.epptz-product figcaption {
  display: inline-block;
  margin-top: 10px;
  background: #e9ecef;
  border-radius: 8px;
  padding: 7px 18px;
  font: 700 1.3rem Georgia, serif
}
.epptz-spec-title {
  background: #064486;
  color: #fff;
  padding: 9px 14px;
  border: 0;
  margin-top: 26px
}
.epptz-table th {
  white-space: nowrap;
  background: #eef1f4;
  color: #1d2733
}
.epptz-table th, .epptz-table td {
  vertical-align: middle
}
.epptz-note {
  margin: 10px 0 0;
  font-size: .92rem
}
@media(max-width:760px) {
  .epptz-head {
    align-items: flex-start;
    flex-direction: column
  }
  .epptz-intro {
    grid-template-columns: 1fr
  }
  .epptz-model {
    white-space: normal
  }
  .epptz-product {
    order: -1
  }
  .epptz-table th {
    white-space: normal
  }
}

/* Central monitoring system product images - same presentation as high-temp.html */
body.page-central .cards .card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
body.page-central .card .tag,body.page-central .card h3{margin:0}
body.page-central .card .btn{margin-top:auto;white-space:normal}
body.page-central .product-image-zoom{display:block;width:100%;max-width:100%;overflow:hidden;border-radius:8px}
body.page-central .central-product-image{display:block;width:100%;max-width:100%;height:180px;object-fit:contain;background:#f4f7fa;border-radius:8px}

/* Product card moved to the high-pressure category. */
body.page-high-pressure main {
  min-width: 0;
}
body.page-high-pressure .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
body.page-high-pressure .card .tag, body.page-high-pressure .card h3, body.page-high-pressure .card p {
  margin-top: 0;
}
body.page-high-pressure .product-image-zoom {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f7fa;
  cursor: zoom-in;
}
body.page-high-pressure .ai-product-image {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  background: #f4f7fa;
  border-radius: 8px;
}
body.page-high-pressure .card .btn {
  margin-top: auto;
}
body.page-high-pressure .product-viewer{width:min(1500px,94vw);max-width:94vw;max-height:94vh;margin:auto;padding:0;border:0;border-radius:12px;background:#fff;overflow:auto}
body.page-high-pressure .product-viewer-image{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}

/* 工安異常辨識警報內頁 */
body.page-ai-safety main { min-width: 0; }
body.page-ai-safety .safety-example .safety-image-frame { display: block; width: 100%; border: 1px solid #dce3eb; border-radius: 8px; overflow: hidden; cursor: default; }
body.page-ai-safety .safety-example img { display: block; width: 100%; max-width: 100%; height: auto; }

/* AI 辨識方案內頁圖片 */
.ai-detail-visual { min-width: 0; }
.ai-detail-image { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid #dce3eb; border-radius: 8px; }

/* 晶片封裝製程方案：直式產品照片完整顯示 */
body.page-high-pressure .chip-product-image { height: auto; max-height: 440px; object-fit: contain; background: #fff; }
.chip-detail-image { max-width: 620px; margin: 0 auto; height: auto; }

/* 產品總覽 */
body.page-products .layout { display: grid; }
body.page-products .cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.page-products .cards .card { display:flex; flex-direction:column; gap:12px; min-width:0; }
body.page-products .card h3 { margin:0; }
body.page-products .card .product-image-zoom { display:block; width:100%; cursor:zoom-in; }
body.page-products .product-overview-image { display:block; width:100%; height:240px; object-fit:contain; border-radius:8px; background:#f4f7fa; }
body.page-products .card .btn { margin-top:auto; align-self:flex-start; }
.product-category { scroll-margin-top:110px; }
.product-category-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.product-category-nav a { padding:10px 16px; border:1px solid #dce3eb; border-radius:6px; color:#04347f; font-weight:700; }
.product-category-nav a:hover { color:#ff7007; }
body.page-products .product-viewer { width:min(1500px,94vw); max-width:94vw; max-height:94vh; margin:auto; padding:0; border:0; border-radius:12px; }
body.page-products .product-viewer-image { display:block; width:100%; height:auto; max-height:78vh; object-fit:contain; }
@media(max-width:991.98px) { body.page-products .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575.98px) { body.page-products .cards { grid-template-columns:minmax(0,1fr); } }

/* 手機版產品總覽：五個分類按鈕各佔一列 */
@media (max-width: 767.98px) {
  body.page-products .product-category-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body.page-products .product-category-nav a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 產品總覽：保留原本解決方案標籤的藍色圓邊樣式，只讓標籤依文字寬度並固定在產品左上方 */
body.page-products .cards .card .tag {
  align-self: flex-start;
  width: auto;
  max-width: max-content;
}


/* Dynamic article styles */
.dynamic-news-release{background:#fff;border:1px solid #d9e2ec;border-radius:12px;padding:clamp(22px,4vw,46px);box-shadow:0 8px 28px rgba(15,55,95,.08)}
.dynamic-news-release .news-hero-photo{margin:0 0 28px}
.dynamic-news-release .news-hero-photo img{display:block;width:100%;height:auto;border-radius:8px;object-fit:cover}
.dynamic-news-release .news-meta{color:#64748b;font-size:.95rem;margin:0 0 12px}
.dynamic-news-release h2{color:#04347f;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.35;margin:0 0 20px}
.dynamic-news-release p{line-height:1.95;margin:0 0 18px;color:#212529}
.dynamic-news-release .lead{font-size:1.08rem}
.dynamic-news-release .article-content{line-height:1.95;color:#212529}
.dynamic-news-release .article-content p{margin:0 0 18px}
.dynamic-news-release h3{color:#04347f;font-size:1.25rem;margin:30px 0 12px;border-left:4px solid #04347f;padding-left:12px}
.dynamic-news-release blockquote{margin:26px 0;padding:20px 24px;background:#f4f8fc;border-left:5px solid #04347f;color:#27364a;line-height:1.9}
.dynamic-news-release blockquote strong{color:#212529}
@media(max-width:767px){.dynamic-news-release blockquote{padding:16px}}
@media(max-width:767px){.dynamic-news-release{padding:20px 16px}}
/* 動態新聞左側子選單完全沿用既有內頁 side-sub-link */
#dynamicNewsMenu{display:contents}

.article-content a{color:#04347f;text-decoration:underline;text-underline-offset:3px}
.article-content .article-inline-image{margin:24px 0}
.article-content .article-inline-image img{display:block;max-width:100%;height:auto;border-radius:8px}

/* Homepage: four-image monitoring collage. */
body.page-home .visual.visual-collage { height: auto; }
body.page-home .hero-monitor-collage { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Homepage YouTube preview and enlarged player */
body.page-home .visual.hero-video { height: auto; min-width: 0; padding: 14px; }
.hero-video-stage { position: relative; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; border-radius: 16px; background: #071727; }
.hero-video-stage iframe, .hero-video-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.hero-video-stage iframe { position: absolute; inset: 0; pointer-events: none; }
.hero-video-open { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 20px; text-decoration: none; color: #fff; }
.hero-video-open:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.hero-video-dialog { width: min(1120px, calc(100vw - 24px), calc((100dvh - 140px) * 16 / 9)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid #ffffff40; border-radius: 14px; background: #08131f; color: #fff; overflow: auto; }
.hero-video-dialog::backdrop { background: #000d; }
.hero-video-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.hero-video-toolbar h2 { font-size: 16px; margin: 0; color: #fff; }
.hero-video-toolbar button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #ffffff60; border-radius: 50%; background: #ffffff14; color: #fff; cursor: pointer; font-size: 20px; }
.hero-video-player { aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
body.page-home .hero-video-help { margin: 0; padding: 12px 16px; font-size: 13px; color: #d7e2ed; }
.hero-video-help a { color: #a9d7ff; text-decoration: underline; }
html.hero-video-is-open, html.hero-video-is-open body { overflow: hidden; }
@media (max-width: 600px) { body.page-home .visual.hero-video { padding: 8px; } .hero-video-open { padding: 12px; } }

/* In-site playlist navigation */
button.hero-video-open { width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.hero-playlist-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; color: #fff; font-size: 13px; }
.hero-playlist-nav button { padding: 8px 12px; color: #fff; background: #04347f; border: 1px solid #ffffff50; border-radius: 8px; cursor: pointer; }
.hero-playlist-nav button:disabled { opacity: .45; cursor: default; }
.hero-video-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 220px; overflow-y: auto; }
.hero-video-list button { min-width: 0; padding: 3px; background: #092541; color: #fff; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; }
.hero-video-list button[aria-current="true"] { border-color: #ff7007; }
.hero-video-list img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.hero-video-list span { display: block; padding: 4px; }

.hero-full-nav { padding: 12px 16px 0; }
.hero-full-nav button { min-height: 44px; }
.hero-full-nav span { text-align: center; }
@media (max-width: 420px) { .hero-full-nav { gap: 6px; padding: 10px 8px 0; } .hero-full-nav button { padding: 8px; font-size: 13px; } }

/* 2026-10-06: homepage readability, two 2px steps above original sizes. */
body.page-home .hero .hero-note{font-size:16px;line-height:1.9;}
body.page-home section#cap,body.page-home section#ai,body.page-home section#industry,body.page-home section#problem,body.page-home section.center{font-size:20px;}
body.page-home :is(#cap,#ai,#industry,#problem,.center) .k{font-size:16px;}
body.page-home :is(#cap,#ai,#industry,#problem) .head h2{font-size:clamp(36px,calc(4vw + 4px),52px);}
body.page-home :is(#cap,#ai,#industry,#problem) .head p{font-size:20px;line-height:1.8;}
body.page-home #cap .num{font-size:15px;}
body.page-home #cap .capcard h3{font-size:26px;line-height:1.4;}
body.page-home #cap .capcard p{font-size:17px;line-height:1.8;}
body.page-home #ai .aipanel h3{font-size:34px;line-height:1.3;}
body.page-home #ai .aipanel p,body.page-home #ai .flow div,body.page-home #ai .aiitem b{font-size:20px;}
body.page-home #ai .aiitem span{font-size:16px;line-height:1.8;}
body.page-home #industry .rows b{font-size:23px;}
body.page-home #industry .rows span{font-size:20px;line-height:1.7;}
body.page-home #problem .p strong{font-size:26px;line-height:1.4;}
body.page-home #problem .p span{font-size:18px;line-height:1.8;}
body.page-home #problem .diag small{font-size:18px;line-height:1.8;}
body.page-home #problem .diag .btn{font-size:20px;white-space:normal;}
body.page-home section.center h2{font-size:49px;line-height:1.25;}
body.page-home section.center p,body.page-home section.center .btn,body.page-home section.center .box b{font-size:20px;}
body.page-home section.center .box span{font-size:16px;line-height:1.8;}
body.page-home :is(#cap,#ai,#industry,#problem,.center) :is(h2,h3,p,b,strong,span){overflow-wrap:break-word;}
body.page-home #problem .diag{gap:20px;}
body.page-home #problem .diag>div{min-width:0;}
.footer .footer-social-links,footer.site-footer .footer-social-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;}
@media(max-width:575.98px){
 body.page-home #ai .aipanel h3{font-size:30px;}
 body.page-home section.center h2{font-size:36px;}
 body.page-home #ai .aipanel{padding:26px;}
}
@media(max-width:560px){body.page-home .hero .hero-note{font-size:15px;}}


/* Shared frontend language selector, top-right on desktop and mobile. */
body:is(.page-home,.page-inner) .top .wrap{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;}
body:is(.page-home,.page-inner) .top .wrap>span:first-child{flex:1;min-width:0;}
body:is(.page-home,.page-inner) .top .language-switch{flex:0 0 auto;margin-left:auto;}
body:is(.page-home,.page-inner) .top select.language-select{display:block;width:auto;min-width:112px;max-width:160px;min-height:36px;margin:0;padding:5px 28px 5px 10px;border:1px solid #9aacb8;border-radius:6px;background-color:#fff;color:#04347f;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;line-height:1.5;cursor:pointer;}
.top select.language-select:focus-visible{outline:3px solid #16a6c9;outline-offset:2px;}
html[lang="en"] body.page-home .site-navbar .links>a,
html[lang="en"] body.page-inner .header .nav>a,
html[lang="en"] body:is(.page-home,.page-inner) .menu-toggle{font-size:13px;}
@media(max-width:1199.98px){body:is(.page-home,.page-inner) .top .wrap>span:nth-of-type(2){display:none;}}
@media(max-width:575.98px){
 body:is(.page-home,.page-inner) .top .wrap{justify-content:space-between;gap:10px;}
 body:is(.page-home,.page-inner) .top select.language-select{font-size:16px;min-height:44px;max-width:150px;}
}

/* Match the homepage language control to the inner-page reference. */
body.page-home .top .wrap{height:auto;min-height:60px;padding-top:12px;padding-bottom:12px;}
body.page-home .top select.language-select{width:112px;min-width:112px;max-width:112px;}
/* Keep the English engineering CTA label and arrow on one line. */
html[lang="en"] body.page-home .ctabox>div{min-width:0;flex:1;}
html[lang="en"] body.page-home .ctabox .engineering-cta{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:10px;max-width:100%;white-space:nowrap;}
html[lang="en"] body.page-home .engineering-cta>span{white-space:nowrap;}
html[lang="en"] body.page-home .engineering-cta .cta-arrow{flex:0 0 auto;line-height:1;}
@media(max-width:575.98px){
 html[lang="en"] body.page-home .ctabox .engineering-cta{font-size:clamp(12px,3.4vw,16px);gap:8px;padding-left:16px;padding-right:16px;}
}

/* Cooling categories and expanded primary navigation. */
.cooling-solutions .card{scroll-margin-top:120px;}
@media(min-width:1200px){
 body.page-inner .header .wrap{gap:18px;}
 body.page-inner .header .nav{gap:2px;}
 body.page-inner .header .nav-link{padding-left:7px;padding-right:7px;}
 html[lang="en"] body.page-inner .header .nav-link{padding-left:5px;padding-right:5px;}
}

/* Optimized mobile hero background. */
@media(max-width:800px){body.page-home .hero{background-image:linear-gradient(90deg,rgba(3,17,27,.93),rgba(4,24,37,.82) 42%,rgba(5,32,48,.60) 72%,rgba(4,22,34,.68)),url("../image/hero-industrial-bg-800.webp");}}
.hero-video-stage.is-playing