@charset "utf-8";

/**** 字体 开始 ****/

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-ExtraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* 注意：字体包缺少 Poppins-Bold.otf，700 暂由 SemiBold 承接（600 700 区间） */
@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-SemiBold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../poppins-font/Poppins-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/**** 字体 结束 ****/

/**** 公共基础 开始 ****/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #64748B;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  /* Solution 页 tab 分隔线贯穿视口（100vw），在此裁掉横向溢出，避免滚动条 */
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
}

h1,
h2,
h3,
h4,
h5 {
  color: #0F172A;
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: 58px;
}

h2 {
  font-size: 46px;
}

h3 {
  font-size: 22px;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 75px;
  box-sizing: border-box;
}

.container-info{
  width: 100%;
  margin: 0 auto;
  padding: 0 205px;
  box-sizing: border-box;
}

.section-solution{
    padding: 80px 0 70px;
}
.section-intro{
    padding: 20px 0;
}

.section-soft {
  background: #F6F8FB;
  padding: 90px 0;
}

.section-projects{
  padding: 40px 0 100px;
}

.section-products{
  padding: 100px 0 100px;
}

.section-dark {
  background: #1B3C8C;
  color: rgba(255, 255, 255, .78);
}

.section-head {
  margin-bottom: 48px;
}

.section-head.center {
  text-align: center;
}

.section-head.center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  display: inline-block;
  font-size: 20px;
  font-weight: 300;
  color: #4b8aff;
  margin-bottom: 14px;
  position: relative;
}

.eyebrow-solu{
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 300;
  color: #4b8aff;
  margin-bottom: 14px;
  position: relative;
}

.eyebrow-solu-line{
  display: block;
  width: 60px;
  height: 1px;
  background-color: #4b8aff;
  margin-left: 15px;
  margin-top: 2px;
}

.adv-eyebrow-solu{
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 14px;
  position: relative;
}

.adv-eyebrow-solu-line{
  display: block;
  width: 60px;
  height: 1px;
  background-color: #ffffff;
  margin-left: 15px;
  margin-top: 2px;
}


.eyebrow .hl {
  color: #fff;
}

.eyebrow .hl ::after {
  background-color: #fff;
}

.section-title {
  color: #0F172A;
  font-weight: 500;
  font-style: normal;
}

.section-title .hl {
  color: #4b8aff;
}

.section-desc {
  color: #64748B;
}

.text-block{
   font-size: 16px;
   font-weight: 300;
   color: #000000;
   line-height: 1.5;
}

.text-block p + p {
  margin-top: 18px;
}

.text-block strong {
  color: #0F172A;
  font-weight: 600;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-90 {
  margin-top: 90px;
}
/**** 公共基础 结束 ****/


/**** 通用组件 开始 ****/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 74px;
  padding: 0 70px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}

/* 蓝底按钮统一：hover 时更深的 #1B3C8C 自左向右填满，与白底按钮同一套填充语言 */
.btn-primary {
  background-color: #4b8aff;
  color: #fff;
  background-image: linear-gradient(#1B3C8C, #1B3C8C);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, background-size .5s cubic-bezier(.4, 0, .2, 1);
}

.btn-primary:hover {
  background-size: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
}

.btn-primary-search{
  background-color: #4b8aff;
  color: #fff;
  height: 56px;
  padding: 0 50px;
  text-decoration: underline;
  background-image: linear-gradient(#1B3C8C, #1B3C8C);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, background-size .5s cubic-bezier(.4, 0, .2, 1);
}

.btn-primary-search:hover {
  background-size: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
}


.btn-white {
  background: #fff;
  color: #4b8aff;
}

.btn-white:hover {
  background: #EEF4FF;
}

.btn-dark {
  background: #0F172A;
  color: #fff;
}

.btn-dark:hover {
  background: #1B3C8C;
}

.btn-ghost {
  background: #EEF4FF;
  color: #4b8aff;
}

.btn-ghost:hover {
  background: #DCE9FF;
}

.btn-outline {
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #0F172A;
}

.btn-outline:hover {
  border-color: #4b8aff;
  color: #4b8aff;
}

.circle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #4b8aff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  background-image: linear-gradient(#1B3C8C, #1B3C8C);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-size .5s cubic-bezier(.4, 0, .2, 1);
}

.circle-btn:hover {
  background-size: 100% 100%;
  transform: translateY(-2px);
}

.tag-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  font-size: 13px;
  color: #64748B;
  background: #fff;
  transition: all .25s ease;
}

.tag-pill:hover {
  border-color: #4b8aff;
  color: #4b8aff;
}

.tag-pill.active {
  background: #4b8aff;
  border-color: #4b8aff;
  color: #fff;
}

.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: #EEF4FF;
  color: #4b8aff;
  font-size: 14px;
  font-weight: 500;
}

.back-pill:hover {
  background: #DCE9FF;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #94A3B8;
}

.breadcrumb a:hover {
  color: #4b8aff;
}

.breadcrumb span {
  color: #CBD5E1;
}

.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: all .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.card-body {
  padding: 26px;
}

.card-title {
  font-size: 18px;
  color: #0F172A;
  margin-bottom: 12px;
}

.icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #EEF4FF;
  color: #4b8aff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform .5s ease;
}

.carousel-track .slide {
  flex: 0 0 auto;
  padding: 0 12px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #0F172A;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 3;
  transition: all .25s ease;
}

.carousel-arrow:hover {
  background: #4b8aff;
  color: #fff;
}

.carousel-arrow.prev {
  left: -14px;
}

.carousel-arrow.next {
  right: -14px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #CBD5E1;
  cursor: pointer;
  transition: all .25s ease;
}

.carousel-dots .dot.active {
  width: 26px;
  background: #4b8aff;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}

.pagination .page-num {
  min-width: 49px;
  height: 49px;
  padding: 0 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #EFEFEF;
  color: #333;
  font-size: 14px;
  transition: all .25s ease;
}

.pagination .page-num:hover {
  background: #E2E5EA;
  color: #17181A;
}

.pagination .page-num.active {
  background: #4C8BFF;
  color: #fff;
}

.tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
}

.tab-btn:hover {
  border-color: #4b8aff;
  color: #4b8aff;
}

.tab-btn.active {
  background: #4b8aff;
  border-color: #4b8aff;
  color: #fff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.form-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 56px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #0F172A;
  margin-bottom: 10px;
}

.form-group label .req {
  color: #4b8aff;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  color: #0F172A;
  transition: all .25s ease;
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #4b8aff;
  box-shadow: 0 0 0 3px rgba(43, 107, 224, .12);
}

.form-tip {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 12px;
}

.back-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #4b8aff;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 10px 24px rgba(43, 107, 224, .3);
}

.back-top.show {
  display: flex;
}

/**** 通用组件 结束 ****/


/**** 头部 开始 ****/

body.solid-header {
  padding-top: 96px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header.solid,
.site-header.hover-solid,
.site-header.header-solid {
  background: #fff;
  box-shadow: 0 2px 18px rgba(15, 23, 42, .08);
  padding: 8px 0;
}

/* 透明底 + 深色文字（浅色渐变页面用） */
.site-header.header-ghost {
  background: transparent;
  box-shadow: none;
  padding: 16px 0;
}

.site-header.header-ghost .logo-light {
  display: none;
}

.site-header.header-ghost .logo-dark {
  display: block;
}

.site-header.header-ghost .main-nav ul li a {
  color: #17181C;
}

.site-header.header-ghost .main-nav ul li a:hover,
.site-header.header-ghost .main-nav ul li.current > a {
  color: #4b8aff;
}

.site-header.header-ghost .icon-btn {
  color: #17181C;
  background: transparent;
}

.site-header.header-ghost .icon-btn:hover {
  background: transparent;
  opacity: .72;
}

.site-header.header-ghost .btn-quote {
  background-color: #4C8BFF;
  color: #fff;
  background-image: linear-gradient(#4b8aff, #4b8aff);
}

/* 只有"还没下滚"时的 hover 才保持大高度；
   已经 solid（下滚过）再 hover 不能把高度弹回原样 */
.site-header.hover-solid:not(.solid) {
  padding: 16px 0;
}

/* 透明头（header-ghost）在 hover 导航 / 页面下滚时同样切换为白底 */
.site-header.header-ghost.solid,
.site-header.header-ghost.hover-solid,
.site-header.header-ghost.header-solid {
  background: #fff;
  box-shadow: 0 2px 18px rgba(15, 23, 42, .08);
}

.site-header.header-ghost.solid {
  padding: 8px 0;
}

/* 同样只在"未下滚"时 hover 才保持大高度 */
.site-header.header-ghost.hover-solid:not(.solid) {
  padding: 16px 0;
}

.logo-img {
  width: auto;
  height: 40px;
  display: block;
  vertical-align: middle;
}

.solid .logo-img {
  height: 36px;
}

.site-header.solid .main-nav > ul > li > a,
.site-header.header-solid .main-nav > ul > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.logo-dark {
  display: none;
}

.site-header.solid .logo-light ,
.site-header.hover-solid .logo-light {
  display: none;
}

.site-header.solid .logo-dark ,
.site-header.hover-solid .logo-dark {
  display: block;
}

.nav-right{
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(36px, 2.44vw, 44px);
}

.main-nav > ul > li {
  position: relative;
}

.main-nav ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  padding: 26px 0;
  transition: color .25s ease, padding .3s ease;
}

.main-nav ul li a:hover,
.main-nav ul li.current > a {
  color: #ffffff;
}

.site-header.solid .main-nav ul li a ,
.site-header.hover-solid .main-nav ul li a ,
.site-header.header-solid .main-nav ul li a {
  color: #0F172A;
}

.site-header.solid .main-nav ul li a:hover,
.site-header.hover-solid .main-nav ul li a:hover,
.site-header.solid .main-nav ul li.current > a ,
.site-header.hover-solid .main-nav ul li.current > a ,
.site-header.header-solid .main-nav ul li a:hover,
.site-header.header-solid .main-nav ul li.current > a {
  color: #4b8aff;
}

.main-nav .arrow {
  display: inline-flex;
  align-items: flex-end;
  margin-left: 2px;
  opacity: .9;
}

.main-nav .arrow svg {
  width: 10px;
  height: 6px;
  display: block;
}

.main-nav .sub-menu {
  position: absolute;
  left: -18px;
  top: 100%;
  min-width: 250px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .25s ease;
}

.main-nav li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .sub-menu a {
  display: block;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 400;
  color: #1F2937;
}

.main-nav .sub-menu a:hover {
  background: #F6F8FB;
  color: #4b8aff;
}


.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions .icon-btn {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  transition: opacity .2s ease, color .2s ease;
}

.header-actions .icon-btn:hover {
  opacity: .72;
  background: transparent;
}

.header-actions .icon-btn svg {
  width: 25px;
  height: 25px;
  display: block;
}

.header-actions .lang-ico svg {
  width: 24px;
  height: 24px;
}

/* ---------- 语言切换下拉 ---------- */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}

.header-actions .lang-switch .lang-ico {
  gap: 4px;
  height: 32px;
  padding: 0 7px;
  border-radius: 16px;
  transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}

.header-actions .lang-switch .lang-ico .lang-cur {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1;
}

.header-actions .lang-switch .lang-ico .lang-caret {
  width: 9px;
  height: 6px;
  display: block;
  opacity: .75;
  transition: transform .22s ease;
}

.header-actions .lang-switch:hover .lang-ico { opacity: .78; }
.header-actions .lang-switch.open .lang-ico { opacity: 1; }
.header-actions .lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 30, 60, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.lang-switch:hover .lang-dropdown,
.lang-switch.open .lang-dropdown,
.lang-switch:focus-within .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid #eef1f6;
  border-top: 1px solid #eef1f6;
  border-radius: 2px;
  transform: rotate(45deg);
}

.lang-dropdown .lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #17181c;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}

.lang-dropdown .lang-item:hover {
  background: #f3f7ff;
  color: #4b8aff;
}

.lang-dropdown .lang-code {
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #8a93a6;
}

.lang-dropdown .lang-item:hover .lang-code,
.lang-dropdown .lang-item.active .lang-code {
  color: #4b8aff;
}

.lang-dropdown .lang-name {
  flex: 1;
}

.lang-dropdown .lang-check {
  width: 15px;
  height: 15px;
  color: #4b8aff;
  opacity: 0;
}

.lang-dropdown .lang-item.active {
  background: #f3f7ff;
  color: #4b8aff;
  font-weight: 600;
}

.lang-dropdown .lang-item.active .lang-check {
  opacity: 1;
}

.site-header.solid .icon-btn ,
.site-header.hover-solid .icon-btn ,
.site-header.header-solid .icon-btn {
  color: #17181C;
}

.site-header.solid .icon-btn:hover ,
.site-header.hover-solid .icon-btn:hover ,
.site-header.header-solid .icon-btn:hover {
  color: #4b8aff;
}

/* 页头 Get a Quote：白底态填 #4b8aff 变白字；滚动后的蓝底态填更深的 #1B3C8C */
.btn-quote {
  height: 38px;
  padding: 0 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  color: #0071c2;
  font-size: 16px;
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, background-size .5s cubic-bezier(.4, 0, .2, 1), color .3s ease .18s, background-color .3s ease;
}

.btn-quote:hover {
  color: #fff;
  background-size: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 107, 224, .3);
}

.site-header.solid .btn-quote ,
.site-header.hover-solid .btn-quote ,
.site-header.header-solid .btn-quote {
  background-color: #4b8aff;
  color: #fff;
  background-image: linear-gradient(#1B3C8C, #1B3C8C);
}

.site-header.solid .btn-quote:hover ,
.site-header.hover-solid .btn-quote:hover ,
.site-header.header-solid .btn-quote:hover {
  background-size: 100% 100%;
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  position: relative;
}

.site-header.solid .nav-toggle ,
.site-header.hover-solid .nav-toggle {
  background: #F6F8FB;
}

.nav-toggle span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: all .25s ease;
}

.site-header.solid .nav-toggle span ,
.site-header.hover-solid .nav-toggle span {
  background: #0F172A;
}

.nav-toggle span:nth-child(1) {
  top: 14px;
}

.nav-toggle span:nth-child(2) {
  top: 20px;
}

.nav-toggle span:nth-child(3) {
  top: 26px;
}

.nav-toggle.open span:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

/**** 头部 结束 ****/


/**** 首页 开始 ****/

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-title {
  color: #fff;
}

.hero-title .hl {
  color: #7DD3FC;
}

.hero-desc {
  margin-top: 16px;
  font-size: 30px;
}

.hero-btns {
  margin-top: 90px;
  display: flex;
  gap: 16px;
}

/* 首页浅色天空 Hero（透明头部叠加） */
.hero-sky {
  display: block;
  min-height: 0;
  background: #DCEBFA;
}

.hero-sky::before {
  display: none;
}

.home-swiper {
  width: 100%;
}

.home-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

.home-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-caption,
.slide-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
  margin-top: -45px;
}

.hero-caption .container,
.slide-caption .container {
  padding-top: 0px;
}

.hero-caption a,
.hero-caption .btn,
.slide-caption a,
.slide-caption .btn {
  pointer-events: auto;
}

@keyframes bannerSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-caption .slide-anim {
  opacity: 0;
}

.swiper-slide-active .slide-caption .slide-anim {
  animation: bannerSlideInLeft .75s cubic-bezier(.22, .61, .36, 1) both;
}

.swiper-slide-active .slide-caption .hero-title {
  animation-delay: .1s;
}

.swiper-slide-active .slide-caption .hero-desc {
  animation-delay: .28s;
}

.swiper-slide-active .slide-caption .hero-btns {
  animation-delay: .46s;
}

.home-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: .55;
  transition: all .3s ease;
}

.home-swiper .swiper-pagination-bullet-active {
  width: 45px;
  border-radius: 6px;
  background: #4b8aff;
  opacity: 1;
}

/* 左右箭头：与客户评价区（.reviews-swiper）同一套交互 ——
   默认隐藏，鼠标进入 banner 出现；悬停时 #4b8aff 从左推满、箭头转白、上浮 2px、蓝色光晕 */
.home-swiper .swiper-button-prev,
.home-swiper .swiper-button-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #1B3C8C;
  /* 必须是 background-color + 独立 background-image：
     background 简写会把 image/size/position 一起重置，填充动画直接失效（本项目踩过多次） */
  background-color: rgba(255, 255, 255, .78);
  /* 填充层：background-size 0% → 100%，实现左→右推入 */
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  opacity: 0;
  /* 不用 visibility: hidden——那会把箭头移出 tab 序列，键盘用户永远够不到；
     opacity + pointer-events 既保持可聚焦，又不会挡住 banner 上的按钮 */
  visibility: visible;
  pointer-events: none;
  transition:
    opacity .3s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    color .3s ease .12s,
    box-shadow .4s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
}

.home-swiper:hover .swiper-button-prev,
.home-swiper:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

/* 仅键盘 tab 到箭头时显示。不能用 :focus-within——鼠标点过箭头后它一直持有焦点，
   移出 banner 箭头会"钉"在页面上不消失 */
.home-swiper:has(.swiper-button-prev:focus-visible) .swiper-button-prev,
.home-swiper:has(.swiper-button-next:focus-visible) .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

.home-swiper .swiper-button-prev::after,
.home-swiper .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

.home-swiper .swiper-button-prev:hover,
.home-swiper .swiper-button-next:hover,
.home-swiper .swiper-button-prev:focus-visible,
.home-swiper .swiper-button-next:focus-visible {
  color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 14px 30px rgba(43, 107, 224, .38);
  /* banner 箭头靠 margin-top: -22px 居中、transform 原本是 none，
     所以这里写 -2px；评价区是 translateY(calc(-50% - 2px))，视觉上同样上移 2px */
  transform: translateY(-2px);
}

.home-swiper .swiper-button-prev:focus-visible,
.home-swiper .swiper-button-next:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 3px;
}

.hero-sky .hero-title {
  background: linear-gradient(90deg, #203d7f 0%, #2E63C4 35%, #4a89fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #203d7f;
  font-weight: 800;
}

.hero-sky .hero-desc {
  color: #203d7f;
}

/* hover 填充：白底深蓝字，鼠标移入时 #4b8aff 自左向右铺满整个胶囊，字与箭头转白 */
.btn-hero {
  position: relative;
  overflow: hidden;
  color: #203d7f;
  background-color: #fff;
  /* 填充层：纯色渐变，靠 background-size 的 0% → 100% 实现左→右推入 */
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, background-size .5s cubic-bezier(.4, 0, .2, 1), color .3s ease .18s;
}

.btn-hero .btn-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.btn-hero .btn-arrow svg {
  width: 23px;
  height: 12px;
  display: block;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.btn-hero:hover {
  color: #fff;
  background-size: 100% 100%;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(43, 107, 224, .42);
}

.btn-hero:hover .btn-arrow svg {
  transform: translateX(6px);
}

@media (hover: none) {
  .btn-hero:active {
    color: #fff;
    background-size: 100% 100%;
    transform: scale(.98);
  }

  .btn-hero:active .btn-arrow svg {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary-search,
  .btn-quote,
  .circle-btn,
  .btn-hero,
  .btn-hero .btn-arrow svg {
    transition: none;
  }

  .btn-hero:hover {
    transform: none;
  }

  .btn-hero:hover .btn-arrow svg {
    transform: none;
  }

  .hotspot::before,
  .hotspot::after {
    animation: none;
  }

  .vs-more {
    transition: none;
  }

  .home-projects-swiper .slide-info {
    transition: opacity .3s ease, visibility .3s ease;
  }

  .home-projects-swiper .swiper-slide-active .project-slide:hover .slide-info {
    transform: none;
  }

  .cases-swiper .case-info {
    transition: opacity .3s ease, visibility .3s ease;
  }

  .cases-swiper .swiper-slide-active .case-card:hover .case-info {
    transform: none;
  }

  .products-swiper .tile-btn {
    transition: none;
  }

  .products-swiper .product-tile:hover .tile-btn,
  .products-swiper .product-tile:focus-visible .tile-btn {
    transform: translateX(-50%);
  }

  .home-swiper .swiper-button-prev,
  .home-swiper .swiper-button-next {
    transition: none;
  }

  .home-swiper .swiper-button-prev:hover,
  .home-swiper .swiper-button-next:hover,
  .home-swiper .swiper-button-prev:focus-visible,
  .home-swiper .swiper-button-next:focus-visible {
    transform: none;
  }
}

.hero-tech {
  background: linear-gradient(120deg, #142B66 0%, #4b8aff 55%, #4C1D95 100%);
  min-height: 560px;
}

.hero-tech .hero-title {
  font-size: 46px;
}

.home-intro {
    position: relative;
    display: flex;
    justify-content: end;
}

.home-intro .section-title {
  font-size: 54px;
  line-height: 1.3;
  color: #16192C;
  font-weight: 500;
  font-style: normal;
}

.home-intro .section-desc {
  max-width: 610px;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  font-weight: 300;
  font-style: normal;
  margin-top: 30px;
}

.home-intro .eyebrow {
  letter-spacing: .02em;
}

.home-intro .intro-visual {
  overflow: hidden;
  position: relative;
  width: 60%;
  z-index: 0;
}

.home-intro .intro-visual-left{
  width: 48%;
  position: absolute;
  left: 75px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* 插画定位热点：波纹 + 悬停名称 */
.hotspot {
  position: absolute;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}

.hotspot i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4b8aff;
  /* box-shadow: 0 0 0 9px rgba(43, 107, 224, .25), 0 4px 14px rgba(43, 107, 224, .45); */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hotspot i svg {
  display: block;
  width: 14px;
  height: 14px;
}

.hotspot:hover i {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(43, 107, 224, .45);
}

/* 波纹默认常驻：静止态即持续呼吸，hover 不改变节奏 */
.hotspot::before,
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(43, 107, 224, .38);
  opacity: 0;
  z-index: 1;
  animation: hotspotRipple 2.2s ease-out infinite;
  animation-delay: var(--ripple-delay, 0s);
}

.hotspot::after {
  animation-delay: calc(var(--ripple-delay, 0s) + 1.1s);
}

/* 四个热点错开相位，避免同步起跳显得机械 */
.hotspot:nth-of-type(1) {
  --ripple-delay: 0s;
}

.hotspot:nth-of-type(2) {
  --ripple-delay: .55s;
}

.hotspot:nth-of-type(3) {
  --ripple-delay: 1.1s;
}

.hotspot:nth-of-type(4) {
  --ripple-delay: 1.65s;
}

@keyframes hotspotRipple {
  0% {
    transform: scale(.7);
    opacity: .9;
  }
  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

.hotspot .tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #4b8aff;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 7px 24px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(43, 107, 224, .32);
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  pointer-events: none;
  z-index: 3;
}

.hotspot .tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #4b8aff;
}

.hotspot:hover .tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.home-stats {
  padding: 0 75px;
  box-sizing: border-box;
  background: #fff;
}

.home-stats .container {
  position: relative;
  z-index: 1;
  background: #1B3C8C url('../image/static-bg.png') center / cover no-repeat;
  padding: 70px 60px;
}

.home-stats .stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
}

.home-stats .stat-num {
  /* 随屏宽流式缩放: 30px ~ 72px, 所有宽度下禁止换行 */
  font-size: clamp(30px, 5vw, 72px);
  font-weight: 800;
  font-style: normal;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
}

/* 数字滚动用等宽数字, 逐帧宽度稳定不抖动 */
.home-stats .stat-num [data-count] {
  font-variant-numeric: tabular-nums;
}

.home-stats .stat-num-border{
  border-bottom: 1px solid #ffffff;
}

.home-stats .stat-unit {
  margin-left: 10px;
  font-size: clamp(13px, 1.6vw, 22px);
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}

.home-stats .stat-label {
  margin-top: 20px;
  font-size: clamp(13px, 1.25vw, 18px);
  color: rgba(255, 255, 255, .85);
  font-weight: 400;
  font-style: normal;
}

/* ===== Solution：顶部 tab + Swiper 联动横幅 ===== */
/* 设计稿：hero 底 → 圆环顶 88px；标签底 → 横幅顶 57px；横幅底 → CTA 顶 115px */
.sol-section {
  padding: 97px 0 115px;
}

.sol-tabs {
  position: relative;
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
  margin-bottom: 57px;
}

/* 设计稿：1px 分隔线贯穿整个视口，从圆形中心穿过 */
.sol-tabs::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 32px;
  height: 1px;
  background: #DDDDDD;
}

.sol-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  cursor: pointer;
}

/* 48px 圆 + 9px 外圈 = 66px，白色 icon 居中 */
.sol-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #CDCDCD;
  box-shadow: 0 0 0 9px #EBEBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.sol-ico img {
  width: 26px;
  height: 26px;
  display: block;
}

.sol-name {
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  transition: color .25s ease;
}

.sol-tab:hover .sol-ico {
  background: #BFC9D9;
  box-shadow: 0 0 0 9px #E3EAF4;
}

.sol-tab.active .sol-ico {
  background: #4C8BFF;
  box-shadow: 0 0 0 9px #BAD2FF;
}

.sol-tab.active .sol-name {
  color: #4C8BFF;
}

.sol-swiper {
  overflow: hidden;
  border-radius: 24px;
}

.sol-slide {
  position: relative;
  overflow: hidden;
}

.sol-slide > img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform .6s ease;
}

/* 鼠标移入整个方案板块：背景图轻微放大 */
.sol-slide:hover > img {
  transform: scale(1.05);
}
.sol-slide:hover .sol-card{
  transform: translateY(-15px);
  transition: transform .5s ease;
}

/* 整块（图片 + 文字卡）点击热区：铺满整个 slide 的透明链接 */
.sol-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
  background: transparent;
  -webkit-user-drag: none;
}

.sol-hit:focus-visible {
  outline: 3px solid #3D7BF7;
  outline-offset: -4px;
}

/* 热区覆盖按钮后，按钮的 hover 态由整块 hover 驱动，保持原有效果 */
.sol-slide:hover .sol-go {
  background: #4b8aff;
}

.sol-card {
  position: absolute;
  left: 7.3%;
  top: 24.2%;
  width: 38.6%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 80px 50px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
  transition: transform .5s ease;
}

.sol-card h3 {
  color: #3D7BF7;
  font-size: 30px;
  font-weight: 500;
}
.sol-card p {
  margin: 16px 0 26px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #000000;
}

.sol-go {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #3D7BF7;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .25s ease;
}

/* 箭头图标（img/svg 同图 arr-icon.png）默认 45° 倾斜，即指向右上 */
.sol-go img,
.sol-go svg {
  display: block;
  width: 26px;
  height: 26px;
  transform: rotate(-45deg);
  transition: transform .35s ease;
}

.sol-go:hover {
  background: #4b8aff;
}

/* 鼠标移入整个板块（或按钮本身）：箭头转为水平，与首页/案例卡片 hover 效果一致 */
.sol-go:hover img,
.sol-go:hover svg,
.sol-slide:hover .sol-go img,
.sol-slide:hover .sol-go svg {
  transform: rotate(0deg);
}

.project-slide {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .5s ease;
}

.project-slide .slide-info {
  position: absolute;
  left: 30px;
  bottom: 30px;
  right: 100px;
  color: #fff;
}

.project-slide .slide-info h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
}

.project-slide .slide-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

.project-slide .circle-btn {
  position: absolute;
  right: 30px;
  bottom: 30px;
}

.project-slide:hover .circle-btn img {
  transform: rotate(0deg);
}

.project-slide-img{
  width: 100%;
  overflow: hidden;
}

.project-slide-img img{
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}

.project-slide-img:hover img{
  transform: scale(1.06);
  transition: transform .5s ease;
}

.advantages {
  background: linear-gradient(120deg, #142B66 0%, #1B3C8C 60%, #4b8aff 100%);
  position: relative;
  overflow: hidden;
}

.advantages::after {
  content: "";
  position: absolute;
  right: -160px;
  top: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 70%);
}

.advantages .container {
  position: relative;
  z-index: 2;
}

.advantages .section-title,
.advantages h3 {
  color: #fff;
}

.advantages .section-desc {
  color: rgba(255, 255, 255, .74);
}

.advantages .card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}

.advantages .card:hover {
  background: rgba(255, 255, 255, .14);
}

.advantages .card-title {
  color: #fff;
}

.advantages .card-body p {
  color: rgba(255, 255, 255, .74);
  font-size: 14px;
}

.product-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: all .3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.product-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 0;
}

.product-card .pc-body {
  padding: 20px 22px 26px;
}

.product-card .pc-name {
  font-size: 16px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 6px;
}

.product-card .pc-model {
  font-size: 13px;
  color: #94A3B8;
}

.team-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.team-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 0;
}

.team-card .team-body {
  padding: 24px;
}

.team-card .team-name {
  font-size: 18px;
  color: #0F172A;
}

.team-card .team-role {
  font-size: 13px;
  color: #4b8aff;
  margin: 4px 0 12px;
}

.team-card p {
  font-size: 14px;
}

.news-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}

.news-feature .feature-img img {
  height: 380px;
  width: 100%;
  object-fit: cover;
}

.news-feature .news-date {
  font-size: 14px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-feature h3 {
  margin: 14px 0 16px;
  font-size: 26px;
}

.news-list .news-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #E2E8F0;
  align-items: center;
}

.news-list .news-row:first-child {
  padding-top: 0;
}

.news-list .news-row img {
  height: 100px;
  width: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.news-list .news-row h4 {
  font-size: 17px;
  color: #0F172A;
  margin: 6px 0;
}

.news-list .news-row:hover h4 {
  color: #4b8aff;
}

.news-list .news-row p {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 首页垂直步骤式解决方案（滚动到 120px 锁定，滚轮依次切换，走完解锁） */
.vs-panel {
  background: #fff;
  padding: 0 75px 40px;
  box-sizing: border-box;
}

.vs-panel .container {
  background: #f5f5f5;
  border-radius: 0;
  padding: 118px 57px;
}

.vs-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: center;
}

.vs-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.vs-progress {
  position: absolute;
  left: 28px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: #CECECE;
  z-index: 1;
}

.vs-bar {
  display: block;
  width: 100%;
  height: 0;
  background: #4B8AFF;
  transition: height .2s linear;
}

.vs-item {
  position: relative;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 0;
  cursor: pointer;
}

.vs-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #CECECE;
  box-shadow: 0 0 0 8px rgba(206, 206, 206, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 圆盘压在轨道竖线之上，线穿到圆心即被遮住 */
  z-index: 2;
  transition: all .45s ease;
  /* 自动切换进度 0~100 与软过渡宽度，由 JS 逐帧写入 */
  --vs-p: 0;
  --vs-gap: 1%;
}

/* 进度环：纯 CSS（conic-gradient + 环形 mask），不使用 SVG。
   环带宽度 = 半透明外圈的 8px（半径 29→37px），进度满时整圈替换为 #4B8AFF */
.vs-icon::after {
  content: "";
  position: absolute;
  /* 必须和 .vs-item.active .vs-icon 的 box-shadow 外扩值相同 */
  inset: -8px;
  border-radius: 50%;
  /* conic-gradient 的 0deg 就在 12 点方向，无需 from 旋转。
     两端各留一段软过渡（--vs-gap，由 JS 给出 0~1%）：硬切会按设备像素栅格化
     成阶梯锯齿，0deg/360deg 接缝还会漏一条细缝。
     进度接近 0 或 100 时 gap 自动收窄，12 点不会残留一小段实心弧 */
  background: conic-gradient(
    rgba(75, 138, 255, 0) 0,
    #4B8AFF var(--vs-gap, 1%) calc(var(--vs-p) * 1%),
    rgba(75, 138, 255, 0) calc(var(--vs-p) * 1% + var(--vs-gap, 1%)) 100%
  );
  /* 环形带：外缘 = 背景圆外缘（37px）；内缘压进圆盘 1px 并做 1px 软过渡，
     既不会在圆盘交界露出抗锯齿白缝，也不会出现硬边锯齿 */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.vs-item.active .vs-icon::after {
  opacity: 1;
}

.vs-icon svg {
  width: 26px;
  height: 26px;
}

.vs-icon img {
  width: 26px;
  height: 26px;
}

.vs-item.active .vs-icon {
  background: #4B8AFF;
  /* 与未激活态同一套外扩参数：8px、无模糊，直径都是 74px，两者完全等大。
     不再加向上柔光——模糊扩散会让激活圈看起来比灰圈大一圈 */
  box-shadow: 0 0 0 8px rgba(75, 138, 255, .27);
}

/* 旧的外圈 SVG 轨道已废弃：进度改为 .vs-icon::after 的 conic-gradient */


.vs-body{
   flex: 1;
   /* 定位锚点：.vs-more::after 的点击热区相对它铺满整块说明区 */
   position: relative;
}

.vs-body h3 {
  font-size: 24px;
  color: #000000;
  padding-top: 14px;
  transition: color .35s ease, padding .45s ease;
}

.vs-item.active .vs-body h3 {
  color: #4b8aff;
  padding-top: 0;
  font-weight: 500;
  font-style: normal;
}

.vs-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: max-height .55s ease, opacity .45s ease, transform .55s ease;
}

.vs-item.active .vs-detail {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
}

.vs-detail p {
  margin-top: 12px;
  max-width: 430px;
  font-size: 16px;
  line-height: 1.5;
  color: #5B6472;
  font-weight: 300;
  font-style: normal;
}

/* Read More：默认 #4b8aff 文字 + 1.5px 下划线；
   鼠标移入右侧图片区（.vs-wrap.is-media-hover）或自身时，文字转 #1B3C8C，
   下划线用 background-size 从 0% → 100% 自左向右推入并盖住原线，形成进度条效果 */
.vs-more {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 4px;
  font-size: 14px;
  color: #4b8aff;
  background-image: linear-gradient(#1B3C8C, #1B3C8C), linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 1px, 100% 1px;
  transition: color .35s ease, background-size .55s cubic-bezier(.4, 0, .2, 1);
}

/* 红框说明区整块可点：热区铺满 .vs-detail（被其 overflow:hidden 自然裁剪到展开范围） */
.vs-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vs-wrap.is-media-hover .vs-item.active .vs-more,
.vs-more:hover,
.vs-more:focus-visible {
  color: #1B3C8C;
  background-size: 100% 1px, 100% 1px;
}

.vs-media {
  position: relative;
  height: 460px;
  border-radius: 24px;
  overflow: hidden;
}

.vs-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform .7s ease;
}

.vs-media img.active {
  opacity: 1;
  transform: scale(1);
}

.vs-media:hover img {
  transform: scale(1.06);
  transition: transform .5s ease;
}

/* 首页 Our Project 区块（左文右按钮 + Swiper 居中轮播：中间全量、两侧露半张降透明度） */
.projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}

.projects-head-text .eyebrow {
  color: #4b8aff;
}

.projects-head-text .section-title {
  font-size: 54px;
  line-height: 1.25;
  color: #16192C;
  margin: 10px 0 14px;
  font-weight: 500;
  font-style: normal;
}

.projects-head-text .section-desc {
  font-size: 18px;
  color: #000000;
  max-width: 100%;
  font-weight: 400;
  font-style: normal;
}

.projects-more {
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
}

.home-projects-swiper {
  overflow: visible;
  padding: 0;
}
.home-projects-swiper .swiper-slide{
  padding: 20px 0;
}

.project-slide:hover{
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}
.home-projects {
  overflow-x: hidden;
  overflow-x: clip;
}

.home-projects-swiper .swiper-slide {
  width: 62%;
  opacity: .38;
  transition: opacity .5s ease;
}

.home-projects-swiper .swiper-slide-active {
  opacity: 1;
}

.home-projects-swiper .project-slide {
  border-radius: 18px;
  overflow: hidden;
  transition: transform .5s ease, box-shadow .5s ease;
}

.home-projects-swiper .slide-info {
  position: absolute;
  left: 40px;
  right: 96px;
  bottom: 60px;
  z-index: 2;
}

.home-projects-swiper .slide-info h3 {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  font-weight: 600;
  font-style: normal;
}

.home-projects-swiper .slide-info p {
  margin-top: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  font-weight: 400;
  font-style: normal;
}

.home-projects-swiper .circle-btn {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background-color: #4b8aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(43, 107, 224, .4);
  opacity: 0;
  visibility: hidden;
  background-image: linear-gradient(#1B3C8C, #1B3C8C);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .5s cubic-bezier(.4, 0, .2, 1), transform .25s ease, opacity .3s ease, visibility .3s ease;
}

.home-projects-swiper .swiper-slide-active .circle-btn {
  opacity: 1;
  visibility: visible;
}

/* 文字仅居中 slide 显示 */
.home-projects-swiper .slide-info {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, visibility .3s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
}

.home-projects-swiper .swiper-slide-active .slide-info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 鼠标移到卡片上：文字整体轻微上浮；移出后回落。
   必须带上 .swiper-slide-active，否则会被上面的入场位移覆盖 */
.home-projects-swiper .swiper-slide-active .project-slide:hover .slide-info {
  transform: translateY(-8px);
}

/* 文字背后底部渐变遮罩：随文字一起仅居中 slide 显示 */
.home-projects-swiper .project-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}

.home-projects-swiper .swiper-slide-active .project-slide::after {
  opacity: 1;
}

.home-projects-swiper .slide-info {
  z-index: 2;
}

.home-projects-swiper .circle-btn {
  z-index: 2;
}

.home-projects-swiper .circle-btn:hover {
  background-size: 100% 100%;
  transform: translateY(-2px);
}

.home-projects-swiper .circle-btn svg,
.home-projects-swiper .circle-btn img {
  display: block;
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.home-projects-swiper .circle-btn:hover svg,
.home-projects-swiper .circle-btn:hover img {
  transform: rotate(0deg);
}

.home-projects-swiper .swiper-pagination {
  position: static;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.home-projects-swiper .swiper-pagination-bullet {
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: #D5DBE6;
  opacity: 1;
  transition: background .3s ease, width .3s ease;
}

.home-projects-swiper .swiper-pagination-bullet-active {
  width: 40px;
  background: #4b8aff;
}


/* 首页 Hechuang'S Advantages：广告图 + 叠加面板 + 卡片 Swiper */
.home-adv {
  overflow-x: clip;
}

.adv-hero {
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 70px 0 190px;
}

.adv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .02em;
}

.adv-hero-title {
  margin-top: 14px;
  font-size: 54px;
  line-height: 1.28;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  color: #fff;
}

.video-btn {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  position: relative;
}

/* 白圆 + 蓝色三角播放按钮 */
.video-btn .video-play {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #4b8aff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}

.video-btn .video-play svg {
  width: 18px;
  height: 18px;
  display: block;
  margin-left: 2px;
}

/* 播放按钮波纹（保留） */
.video-btn .video-play::before,
.video-btn .video-play::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  animation: videoRipple 2.6s ease-out infinite;
  pointer-events: none;
}

.video-btn .video-play::after {
  animation-delay: 1.3s;
}

@keyframes videoRipple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  18% {
    opacity: .75;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.video-btn:hover .video-play {
  transform: scale(1.08);
}

.adv-panel-wrap {
  position: relative;
  z-index: 2;
  margin-top: -80px;
}

.adv-panel {
  background: #F4F6FA;
  border-radius: 6px;
  padding: 56px 60px 48px;
}

.adv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.adv-title {
  font-size: 46px;
  font-weight: 500;
  color: #000000;
}

.adv-more {
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
}

.adv-line {
  margin-top: 26px;
  background: #DDE3EE;
  position: relative;
}

.adv-line.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  cursor: pointer;
}

.adv-line .swiper-scrollbar-drag {
  background: #4b8aff;
  border-radius: 2px;
}

.home-products {
  overflow-x: clip;
}

.home-products .projects-head {
  margin-bottom: 40px;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
}

.home-products .swiper-slide{
  padding: 20px 0;
  transition: transform .5s ease;
}

.home-products .swiper-slide:hover{
  transition: transform .5s ease;
}

.products-swiper {
  padding-bottom: 8px;
}

.products-swiper .product-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: transform .5s ease, box-shadow .5s ease;
}

.products-swiper .product-tile:hover {
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.products-swiper .product-tile:focus-visible {
  outline: 3px solid #4b8aff;
  outline-offset: 3px;
}

.products-swiper .product-tile img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
  vertical-align: middle;
}

.products-swiper .product-tile:hover img {
  transform: scale(1.04);
}

.products-swiper .tile-btn {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  padding: 14px 34px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .16);
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition:
    background-size .55s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.22, .61, .36, 1),
    border-color .35s ease,
    box-shadow .35s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 200;
}

.products-swiper .tile-btn svg {
  width: 7px;
  height: 12px;
  margin-top: 1px;
}

.products-swiper .product-tile:hover .tile-btn,
.products-swiper .product-tile:focus-visible .tile-btn {
  transform: translateX(-50%) translateY(-4px);
  border-color: #4b8aff;
  background-size: 100% 100%;
}

.products-swiper .swiper-pagination {
  position: static;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.products-swiper .swiper-pagination-bullet {
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: #D5DBE6;
  opacity: 1;
  transition: background .3s ease, width .3s ease;
}

.products-swiper .swiper-pagination-bullet-active {
  width: 34px;
  background: #4b8aff;
}

.home-reviews .projects-head {
  margin-bottom: 44px;
}

.reviews-swiper {
  position: relative;
  padding: 16px 0 30px;
}

/* 等高：高度由内容最多的那张决定，其余卡片拉伸对齐。
   Swiper 自带的 .swiper-slide{height:100%} 在父级高度 auto 时解析失败，
   会让 flex 的 stretch 失效，所以必须显式改成 height:auto + display:flex */
.reviews-swiper .swiper-wrapper {
  align-items: stretch;
}

.reviews-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.reviews-swiper .review-card {
  /* 原来是 height:100%，父级高度 auto 时无效，会退化成各自内容高度 */
  flex: 1 1 auto;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 42px 36px 38px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .01);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), box-shadow .42s ease;
}

/* 悬停：模块整体上浮 + 淡淡的投影 */
.reviews-swiper .review-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .09), 0 4px 10px rgba(15, 23, 42, .04);
}

/* 左右箭头：默认隐藏，鼠标进入本区块后出现；样式与首页 banner 箭头一致 */
.reviews-swiper .swiper-button-prev,
.reviews-swiper .swiper-button-next {
  width: 46px;
  height: 46px;
  /* 垂直居中卡片区（上下 padding 不等，故上移 (44-16)/2 = 14px） */
  top: calc(50% - 14px);
  margin-top: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #1B3C8C;
  background-color: rgba(255, 255, 255, .78);
  /* 填充层：纯色渐变，background-size 0% → 100% 实现左→右推入（与 .btn-hero 同源） */
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  opacity: 0;
  /* 不用 visibility:hidden——那会把箭头移出 tab 序列，键盘用户永远够不到；
     opacity + pointer-events 既保持可聚焦，又不会挡住卡片的点击/悬停 */
  visibility: visible;
  pointer-events: none;
  z-index: 6;
  transition:
    opacity .3s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    color .3s ease .12s,
    box-shadow .4s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
}

.reviews-swiper .swiper-button-prev {
  left: 12px;
}

.reviews-swiper .swiper-button-next {
  right: 12px;
}

/* 触发范围 = 卡片这一排本身（.reviews-swiper 的盒子，含上下 padding），
   不再用 .home-reviews（整段 section 满宽 100%，左右各 75px 空白、标题区都会误触发） */
.reviews-swiper:hover .swiper-button-prev,
.reviews-swiper:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

/* 仅键盘 tab 到箭头时才显示。不能用 :focus-within——鼠标点过箭头后它一直持有焦点，
   移出区块箭头会"钉"在页面上不消失 */
.reviews-swiper:has(.swiper-button-prev:focus-visible) .swiper-button-prev,
.reviews-swiper:has(.swiper-button-next:focus-visible) .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

.reviews-swiper .swiper-button-prev::after,
.reviews-swiper .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

.reviews-swiper .swiper-button-prev:hover,
.reviews-swiper .swiper-button-next:hover,
.reviews-swiper .swiper-button-prev:focus-visible,
.reviews-swiper .swiper-button-next:focus-visible {
  color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 14px 30px rgba(43, 107, 224, .38);
  transform: translateY(calc(-50% - 2px));
}

.reviews-swiper .swiper-button-prev:focus-visible,
.reviews-swiper .swiper-button-next:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .home-reviews .container {
    max-width: none;
    padding: 0 16px;
  }

  .reviews-swiper {
    padding: 10px 0 34px;
    margin: -10px 0 -26px;
  }

  .reviews-swiper .swiper-wrapper {
    align-items: flex-start;
  }

  .reviews-swiper .swiper-button-prev,
  .reviews-swiper .swiper-button-next {
    width: 34px;
    height: 34px;
    top: calc(50% - 12px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .reviews-swiper .swiper-button-prev {
    left: 4px;
  }

  .reviews-swiper .swiper-button-next {
    right: 4px;
  }

  .reviews-swiper .swiper-button-prev::after,
  .reviews-swiper .swiper-button-next::after {
    font-size: 14px;
  }

  .reviews-swiper .review-card:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-swiper .review-card,
  .reviews-swiper .swiper-button-prev,
  .reviews-swiper .swiper-button-next {
    transition: none;
  }

  .reviews-swiper .review-card:hover {
    transform: none;
  }

  .blog-row,
  .blog-row .blog-img img {
    transition: none;
  }

  .blog-row:hover {
    transform: none;
  }
}

.reviews-swiper .rv-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.reviews-swiper .rv-name {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 600;
  color: #16192C;
}

.reviews-swiper .rv-from {
  margin-top: 6px;
  font-size: 14px;
  color: #8A93A3;
  font-weight: 200;
}

.reviews-swiper .rv-stars {
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 4px;
  color: #F5A623;
}

.reviews-swiper .rv-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #656464;
  font-weight: 200;
}

.home-blog {
  background:  url(../image/home-new-top-bg.png) no-repeat top  left #ffffff;
  background-size: 70%;
  padding-top: 100px;
}
.home-blog-bot{
  background:  url(../image/home-new-bottom-bg.png) no-repeat bottom right;
  background-size: 70%;
  padding-bottom: 100px;
}

.home-blog .projects-head {
  margin-bottom: 40px;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 滚动堆叠（对齐 apsystems.cn 首页新闻） */
.blog-row {
  position: sticky;
  top: 96px; 
  display: flex;
  min-height: 320px;
  text-decoration: none;
  background: #f6f6f6;
  border-radius: 12px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

/* DOM 里靠后的卡片盖在前一张上面（顺序 + 显式 z-index 双保险） */
.blog-row:nth-child(1) { z-index: 1; }
.blog-row:nth-child(2) { z-index: 2; }
.blog-row:nth-child(3) { z-index: 3; }
.blog-row:nth-child(4) { z-index: 4; }

.blog-row:hover {
  box-shadow: 0 26px 60px rgba(15, 23, 42, .16), 0 6px 16px rgba(15, 23, 42, .04);
}

.blog-img{
   width: 44%; 
   overflow: hidden;
  border-radius: 8px;
}

.blog-row  .blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.blog-row:hover img {
  transform: scale(1.06);
  transition: transform .5s ease;
}

.blog-panel {
  flex: 1;
  border-radius: 0 12px 12px 0;
  padding: 32px 38px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blog-panel .blog-date {
  font-size: 16px;
  color: #000000;
  font-weight: 400;
}

.blog-panel h3 {
  margin-top: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: #16192C;
  max-width: 92%;
  font-weight: 500;
  transition: color .25s ease;
}

.blog-panel p {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #656464;
  max-width: 94%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-panel .blog-arrow {
  margin-top: auto;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background: #1B3C8C;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
}

.blog-panel .blog-arrow svg,
.blog-panel .blog-arrow img {
  display: block;
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.blog-row:hover .blog-arrow svg,
.blog-row:hover .blog-arrow img {
  transform: rotate(0deg);
}

.blog-row.active .blog-panel h3,
.blog-row:hover .blog-panel h3 {
  color: #4b8aff;
}

.blog-row.active .blog-arrow,
.blog-row:hover .blog-arrow {
  background: #3D7BF7;
}

.adv-swiper {
  margin-top: 40px;
  padding-bottom: 8px;
}

/* 等高：卡片高度由「文字最多」的那张决定，其余拉平。
   .swiper-slide 自带 height:100%，父级高度不固定时百分比失效，所以下面把它改成
   height:auto + flex，stretch 才真正生效 */
.adv-swiper .swiper-wrapper {
  align-items: stretch;
}

.adv-swiper .adv-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  border-top-right-radius: 0;
  padding: 95px 30px 40px;
  /* 原 height:100% 在此结构下恒为 auto，改由 flex 撑满 slide */
  height: auto;
  flex: 1 1 auto;
  /* 纵向排布：正文 flex:1 吃掉多余空间，Read More 统一落到距底 40px */
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: transform .3s ease, box-shadow .3s ease, border-radius .3s ease;
}

/* 默认态右上角切角造型：露出面板底色，直角无圆角 */
.adv-swiper .adv-one{
   background: #F4F6FA;
   width: 18px;
   height: 18px;
   position: absolute;
   top: 0;
   right: 92px;
}
.adv-swiper .adv-one::before{
   background: #ffffff;
   width: 18px;
   height: 18px;
   position: absolute;
   top: 0;
   right: 0;
   content: "";
   border-radius: 0 18px 0 0;
}
.adv-swiper .adv-two{
   background: #F4F6FA;
   width: 18px;
   height: 18px;
   position: absolute;
   top: 92px;
   right: 0;
}
.adv-swiper .adv-two::before{
   background: #ffffff;
   width: 18px;
   height: 18px;
   position: absolute;
   top: 0;
   right: 0;
   content: "";
   border-radius: 0 18px 0 0;
}
.adv-swiper .adv-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 92px;
  background: #F4F6FA;
  transition: opacity .3s ease;
  pointer-events: none;
  border-radius: 0 0 0 18px;
}

.adv-swiper .adv-card:hover {
  transform: translateY(-30px);
}

.adv-swiper .adv-card:hover,
.adv-swiper .adv-card.active {
  border-top-right-radius: 18px;
  background: #ffffff;
}

.adv-swiper .adv-card:hover::before,
.adv-swiper .adv-card.active::before {
  opacity: 0;
}

.adv-swiper .adv-card:hover .adv-one{
  display: none;
}


.adv-swiper .adv-card:hover .adv-two{
  display: none;
}

.adv-swiper .adv-logo {
  height: 60px;
  width: auto;
  display: block;
  /* flex 列的子项默认 cross 轴 stretch，会把 img 横向拉满 60px 高度导致变形 */
  align-self: flex-start;
}

.adv-swiper .adv-card h3 {
  margin-top: 40px;
  font-size: 26px;
  color: #16192C;
  font-weight: 500;
  transition: color .25s ease;
}

.adv-swiper .adv-card.active h3,
.adv-swiper .adv-card:hover h3 {
  color: #4b8aff;
}

.adv-swiper .adv-card p {
  margin-top: 15px;
  /* 吃掉卡片剩余高度，把 Read More 压到卡片底部；行数少的那张留白在正文下方 */
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #000000;
}

.adv-swiper .adv-read {
  display: inline-block;
  /* flex 列里必须自己收紧宽度，否则会被 stretch 拉满整卡，
     下划线（background 宽 100%）会横贯整张卡片 */
  align-self: flex-start;
  /* 注意：这里必须保持 static 定位。::after 的 inset:0 要相对 .adv-card（position:relative）
     展开成整卡热区；一旦给链接加 position:relative，热区就缩回文字那一小块 */
  margin-top: 35px;
  /* 下划线改用 background 两层叠：底层固定的浅灰打底，上层蓝色默认 0% 宽，
     hover 时从左往右长到 100%（text-decoration 没法控制长度）。
     底层不能用 currentColor —— 文字 hover 会变蓝，底衬跟着变蓝，
     蓝色进度线就盖在上面看不出来了 */
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 300;
  color: #a4a4a4;
  background-image: linear-gradient(#4b8aff, #4b8aff), linear-gradient(#A4A4A4, #A4A4A4);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 1px, 100% 1px;
  transition: color .35s ease, background-size .55s cubic-bezier(.4, 0, .2, 1);
}

.adv-swiper .adv-card.active .adv-read,
.adv-swiper .adv-card:hover .adv-read {
  color: #4b8aff;
}

.adv-swiper .adv-card.active .adv-read,
.adv-swiper .adv-card:hover .adv-read,
.adv-swiper .adv-read:hover,
.adv-swiper .adv-read:focus-visible {
  background-size: 100% 1px, 100% 1px;
}

/* 整卡可点：把 Read More 这个链接「拉伸」成铺满 .adv-card 的透明热区。
   链接本身保持 static，所以 ::after 的定位基准是 .adv-card（relative），
   视觉、hover 动效全都不变，只是点击范围变成整张卡。
   z-index 2 要高于 .adv-arrow（z-index 1），右上角箭头区域才可点 */
.adv-swiper .adv-read::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 18px;
}

.adv-swiper .adv-arrow {
  position: absolute;
  top: 15px;
  right: 14px;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background: #203D7F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background .25s ease, top .3s ease;
}

.adv-swiper .adv-arrow svg,
.adv-swiper .adv-arrow img {
  display: block;
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.adv-swiper .adv-card:hover .adv-arrow svg,
.adv-swiper .adv-card:hover .adv-arrow img {
  transform: rotate(0deg);
}

.adv-swiper .adv-card.active .adv-arrow,
.adv-swiper .adv-card:hover .adv-arrow {
  background: #4377F4;
}

.adv-swiper .swiper-slide{
  padding: 30px 0;
  height: auto;
  display: flex;
}

/**** 首页 结束 ****/


/**** 关于我们 开始 ****/

.page-head.about-hero {
  min-height: 665px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  background: url(../image/about-banner.png) center / cover no-repeat;
}

.page-head.about-hero .container {
  width: 100%;
  padding-bottom: 54px;
}

.page-head.about-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #203d7f;
}

.page-head.about-hero .eyebrow::after {
  content: "";
  width: 46px;
  height: 1px;
  background: #6B7688;
}

.page-head.about-hero h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.32;
  color: #203d7f;
  max-width: 780px;
}


.page-head {
  padding: 70px 0 90px;
}

.page-head .eyebrow {
  font-size: 15px;
}

.page-head h1 {
  font-size: 42px;
  max-width: 900px;
}

.page-head h1 .hl {
  color: #4b8aff;
}

.page-head .head-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-profile {
  padding: 110px 0 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 110px;
}

.profile-title {
  font-size: 34px;
  font-weight: 600;
  color: #1F2937;
}

.profile-text .intro-line {
  color: #4b8aff;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
}

.profile-text .company-line {
  color: #4b8aff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.profile-text p {
  font-size: 16px;
  line-height: 1.95;
  color: #000000;
}

.profile-text .sub-line {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #4b8aff;
  font-size: 22px;
  font-weight: 500;
  margin: 34px 0 24px;
}

.profile-text .sub-line::before {
  content: "";
  width: 56px;
  height: 2px;
  background: #4A7FE8;
}

.video-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 90px;
}

.video-banner:hover img{  
  transform: scale(1.06);
   transition: transform .5s ease;
}

.video-banner img {
  width: 100%;
  display: block;
   transition: transform .5s ease;
}

/* 视频播放按钮 + 波纹 */
.video-banner .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border: none;
  border-radius: 50%;
  background: #3D7BF7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 34px rgba(61, 123, 247, 0.55);
  transition: transform 0.3s ease, background 0.3s ease;
}
.video-banner .video-play i {
  display: block;
  position: relative;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.video-banner .video-play::before,
.video-banner .video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(61, 123, 247, 0.45);
  animation: playRipple 2.4s ease-out infinite;
  pointer-events: none;
}
.video-banner .video-play::after {
  animation-delay: 1.2s;
}
.video-banner .video-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #4b8aff;
}
@keyframes playRipple {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

.about-future {
  position: relative;
  margin-top: 110px;
  padding: 110px 0 85px;
  overflow: hidden;
  background: url(../image/about-page-03.png) no-repeat top left;
  background-size: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-future .container {
  position: relative;
  z-index: 1;
}

.future-text {
  width: 50%;
  padding-left: 75px;
  padding-right: 75px;
  box-sizing: border-box;
}

.future-text h2 {
  font-size: 36px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 26px;
}

.future-text p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  color: #000000;
}

.future-img {
  width: 50%;
  overflow: hidden;
  border-radius: 24px 0 0 24px;
}

.future-img:hover img{
  transform: scale(1.06);
  transition: transform .5s ease;
}

.future-img img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
}

.about-history {
  padding: 50px 0 150px;
  background: url(../image/about-mountain.png) no-repeat center bottom;
  background-size: 100%;
  overflow-x: hidden;
}

.history-title {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #1F2937;
}

.history-zone {
  position: relative;
  margin-top: 70px;
}

/* 贯穿年份行的虚线（设计稿样式） */
.history-zone::before {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  top: 26px;
  height: 1px;
  background: repeating-linear-gradient(90deg, #B9CCE4 0 7px, transparent 7px 14px);
}

.h-year-box{
  padding-left: 80px;
  box-sizing: border-box;
  width: 100%;
}

.history-swiper {
  overflow: hidden;
}

.history-swiper .swiper-slide {
  height: auto;
}

.h-year {
  display: flex;
  align-items: center;
  margin-bottom: 34px;
}

.h-year-pad{
  background: #ffffff;
  padding:  0 20px;
  box-sizing: border-box;
}

.h-year .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3D7BF7;
  flex: none;
}

.h-year span {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg, #1B3C8C, #3D7BF7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h-col ul {
  max-width: 380px;
}

.h-col li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: #5A6472;
  margin-bottom: 14px;
}

.h-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8FA6C4;
}

.history-bar {
  margin: 80px auto 0;
  height: 108px;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 110px;
  box-shadow: 0 10px 30px rgba(31, 59, 115, .08);
  max-width: 1520px;
}

.history-bar .year-pill {
  font-size: 22px;
  color: #33415C;
  padding: 13px 46px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
}

.history-bar .year-pill:hover {
  color: #4b8aff;
}

.history-bar .year-pill.active {
  background: #3D7BF7;
  color: #fff;
}

.history-mountain {
  margin-top: 46px;
}

.history-mountain img {
  width: 100%;
  display: block;
}

.about-certs {
  padding: 100px 0 100px;
  background: url("../image/certificate-bg.png") no-repeat  center;
  background-size: 100%;
}

.cert-swiper {
  margin-top: 64px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, #000 9%, #000 91%, rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, #000 9%, #000 91%, rgba(0,0,0,.25) 100%);
}

.cert-swiper .swiper-slide {
  height: auto;
  padding: 20px 0;
  transition: transform .5s ease;
}

.cert-swiper .swiper-slide:hover {
  transform: translateY(-15px);
  transition: transform .5s ease;
}

.cert-swiper .swiper-slide:hover p{
  color: #4b8aff;
}

.cert-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(31, 59, 115, .10);
}

.cert-card img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

.cert-slide > p {
  text-align: center;
  margin-top: 16px;
  font-size: 15px;
  color: #273246;
}

/* 箭头放在 .cert-swiper 外层：swiper 本身带 mask-image 两侧渐隐，
   放在里面箭头会被一起蒙版（边缘只剩 25% 不透明度） */
.cert-wrap {
  position: relative;
}

/* 左右箭头：与首页 banner / 客户评价区完全同一套交互 ——
   默认隐藏，鼠标进入证书区出现；悬停时 #4b8aff 从左推满、箭头转白、上浮 2px、蓝色光晕 */
.cert-wrap .swiper-button-prev,
.cert-wrap .swiper-button-next {
  width: 46px;
  height: 46px;
  /* 覆盖 Swiper 默认 44px / margin-top:-22px，让圆心与卡片中心对齐 */
  margin-top: -23px;
  border-radius: 50%;
  color: #1B3C8C;
  /* background-color + 独立 background-image：不能用 background 简写，否则填充动画失效 */
  background-color: rgba(255, 255, 255, .78);
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  opacity: 0;
  /* 不用 visibility:hidden——那会把箭头移出 tab 序列；opacity + pointer-events 保持可聚焦又不挡卡片 */
  visibility: visible;
  pointer-events: none;
  /* ⚠️ 必须提升为独立合成层：.cert-swiper 带 mask-image 会生成一个被蒙版的合成层，
     这一层在绘制与命中顺序上会盖住同级定位元素（箭头 z-index 更高也没用），
     表现就是鼠标移到箭头上永远不触发 :hover、填充色不出来。
     will-change: transform 让箭头自己升到更高一层合成层，问题消失。 */
  will-change: transform;
  z-index: 5;
  transition:
    opacity .3s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    color .3s ease .12s,
    box-shadow .4s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
}

.cert-wrap .swiper-button-prev {
  left: 24px;
  right: auto;
}

.cert-wrap .swiper-button-next {
  right: 24px;
  left: auto;
}

.cert-wrap:hover .swiper-button-prev,
.cert-wrap:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

/* 仅键盘 tab 到箭头时显示（不用 :focus-within，鼠标点过后会一直停在页面上） */
.cert-wrap:has(.swiper-button-prev:focus-visible) .swiper-button-prev,
.cert-wrap:has(.swiper-button-next:focus-visible) .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

.cert-wrap .swiper-button-prev::after,
.cert-wrap .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

.cert-wrap .swiper-button-prev:hover,
.cert-wrap .swiper-button-next:hover,
.cert-wrap .swiper-button-prev:focus-visible,
.cert-wrap .swiper-button-next:focus-visible {
  color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 14px 30px rgba(43, 107, 224, .38);
  transform: translateY(-2px);
}

.cert-wrap .swiper-button-prev:focus-visible,
.cert-wrap .swiper-button-next:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 3px;
}

@media (hover: none) {
  .cert-wrap .swiper-button-prev,
  .cert-wrap .swiper-button-next {
    transition: none;
  }

  .cert-wrap .swiper-button-prev:hover,
  .cert-wrap .swiper-button-next:hover {
    transform: none;
  }
}

/**** 关于我们 结束 ****/


/**** 解决方案 开始 ****/

.solution-hero {
  position: relative;
  min-height: 490px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding-bottom: 100px;
}

.solution-hero .container {
  position: relative;
  z-index: 2;
}

/* 设计稿：浅底插画上为深色文字 */
.solution-hero .eyebrow {
  color: #14161F;
  font-size: 15px;
}

.solution-hero h1 {
  color: #14161F;
  font-size: 46px;
  max-width: 820px;
}

.detail-head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: 80px;
}

.detail-head h1 {
  font-size: 42px;
  font-weight: 500;
}

/* solution-detail 顶部：Turn Back 按钮 + 面包屑（设计稿 20261017） */
.back-pill.turnback {
  height: 58px;
  padding: 0 32px 0 9px;
  gap: 14px;
  background: #4285F4;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(66, 133, 244, .35);
}

.back-pill.turnback:hover {
  background: #3574e0;
}

.back-pill.turnback .tb-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #4285F4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.back-pill.turnback .tb-ico svg {
  width: 17px;
  height: 17px;
}

.breadcrumb .b-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4b8aff;
}

.breadcrumb .b-home svg {
  width: 15px;
  height: 15px;
}

.detail-hero-img {
  margin-top: 80px;
  border-radius: 10px;
  overflow: hidden;
}

.detail-hero-img:hover img {
  transform: scale(1.06);
  transition: transform .5s ease;
}

.detail-hero-img img {
  width: 100%;
  transition: transform .5s ease;
}

.feature-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 60px;
  position: relative;
  z-index: 3;
}

.feature-pair .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 40px 42px;
  transition: transform .5s ease;
}

.feature-pair .feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0px 7px 12px rgba(15, 23, 42, .12);
  transition: transform .6s ease;
}

.feature-pair .feature-item:hover .fi-text h3 {
  color: #4285F4;
}

.feature-pair .fi-ico {
  width: 52px;
  height: 52px;
  flex: none;
  color: #4285F4;
}

.feature-pair .fi-ico svg {
  width: 100%;
  height: 100%;
}

.feature-pair .fi-text h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.feature-pair .fi-text p {
  font-size: 14px;
  line-height: 1.75;
  color: #64748B;
}

/* Solution Type 模块（设计稿 20261017） */
.stype-sec{
  background: #f1f1f1;
}
.stype-head {
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 44px;
  padding-bottom: 40px;
}

.stype-head .section-title {
  font-size: 46px;
  font-weight: 500;
}

.stype-desc {
  margin-top: 30px;
  font-size: 16px;
  color: #000000;
  font-weight: 300;
}

.stype-slide {
  height: auto;
}

.stype-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .6s ease;
}

.stype-card img {
  width: 100%;
  aspect-ratio: 285 / 165;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .6s ease;
}

.stype-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 7px 12px rgba(15, 23, 42, .08);
  transition: transform .6s ease;
}

.stype-swiper .swiper-slide{
  padding: 20px 0 0;
}

.stype-card:hover img {
  transform: scale(1.06);
}

.stype-img{
  width: 100%;
  overflow: hidden;
}

.stype-name {
  padding: 20px 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  transition: color .3s ease;
}

.stype-card:hover .stype-name {
  color: #4b8aff;
}

.stype-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 55px;
}

.stype-pagination .stype-bullet {
  width: 30px;
  height: 5px;
  border-radius: 999px;
  background: #C9D2E0;
  cursor: pointer;
  transition: all .3s ease;
}

.stype-pagination .stype-bullet.active {
  width: 38px;
  background: #4285F4;
}

.scene-sec{
  width: 100%;
  background: #ffffff;
  padding: 100px 0;
}

.scene-sec .scene-title {
  margin-bottom: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid #E7E9EE;
}

.scene-grid {
  width: 100%;
}

.scene-li{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  margin-top: 66px;
}

.scene-li:nth-child(even) .scene-img {
  order: 2;
}
.scene-li:nth-child(even) .scene-text {
  order: 1;
}
.scene-card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform .6s ease;
}

.scene-card:hover{
  transform: translateY(-10px);
  box-shadow: 0px 7px 12px rgba(15, 23, 42, .12);
  transition: transform .6s ease;
}

.scene-card:hover h3{
 color: #4C8BFF!important;
}

.scene-card.scene-img {
  aspect-ratio: 735 / 394;
}

.scene-card.scene-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .6s ease;
}

/* 鼠标移入场景图：图片微放大，移出恢复（卡片 overflow:hidden 裁剪，无布局位移） */
.scene-card.scene-img:hover img {
  transform: scale(1.06);
}

.scene-card.scene-text {
  background: #F5F6F8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}

.scene-card.scene-text h3 {
  font-size: 26px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 16px;
}

.scene-card.scene-text p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  color: #000000;
}

.cases-sec {
  padding: 0px 0 90px 0;
}


.cases-sec-2{
  padding: 90px 0 90px 0;
  background: #f5f5f5;
}

.cases-sec-2 .cases-title {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 800;
}

.cases-sec-3{
  padding: 90px 0 90px 0;
  background: #ffffff;
}

.cases-sec-3 .cases-title {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 800;
}

.cases-sec .cases-title {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 800;
}

.cases-swiper {
  overflow: visible;
  padding: 6px 0;
}

.cases-sec,
.cases-sec-2,
.cases-sec-3 {
  overflow-x: hidden;
  overflow-x: clip;
}

.cases-swiper .cases-slide {
  width: 62%;
  opacity: .38;
  transition: opacity .5s ease;
  padding: 20px 0;
  transition: transform .6s ease;
}

.cases-swiper .cases-slide:hover{
  transition: transform .6s ease;
}

.cases-swiper .swiper-slide-active {
  opacity: 1;
}

.cases-swiper .case-card {
  position: relative;
  display: block;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}


.cases-swiper .case-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}

.cases-swiper .swiper-slide-active .case-card::after {
  opacity: 1;
}

.cases-swiper .case-info {
  position: absolute;
  left: 32px;
  right: 96px;
  bottom: 28px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, visibility .3s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
}

.cases-swiper .swiper-slide-active .case-info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 与首页 Our Project 保持一致：hover 卡片时文字轻微上浮 */
.cases-swiper .swiper-slide-active .case-card:hover .case-info {
  transform: translateY(-8px);
}

.cases-swiper .case-card:hover .case-btn img {
  transform: rotate(0deg);
  vertical-align: middle;
}

.cases-swiper .case-card .case-card-img img{
  transition: transform .5s ease;
}
.cases-swiper .case-card:hover .case-card-img img{
  transform: scale(1.06);
  transition: transform .5s ease;
}

.cases-swiper .case-info h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.cases-swiper .case-info p {
  margin-top: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.cases-swiper .case-btn {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background: #203d7f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(43, 107, 224, .4);
  opacity: 0;
  visibility: hidden;
  transition: background .25s ease, transform .25s ease, opacity .3s ease, visibility .3s ease;
}

.cases-swiper .swiper-slide-active .case-btn {
  opacity: 1;
  visibility: visible;
}

.cases-swiper .case-btn img,
.cases-swiper .case-btn svg {
  display: block;
  width: 26px;
  height: 26px;
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.cases-swiper .case-btn:hover {
  background: #1B3C8C;
  transform: translateY(-2px);
}

.cases-swiper .case-btn:hover img,
.cases-swiper .case-btn:hover svg {
  transform: rotate(0deg);
}

.case-card:hover .case-btn{
  background: #4477f3;
}

.cases-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.cases-pagination .cases-bullet {
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: #D5DBE6;
  cursor: pointer;
  transition: all .3s ease;
}

.cases-pagination .cases-bullet.active {
  width: 40px;
  background: #4b8aff;
}

.case-card-img{
  width: 100%;
}

.case-card-img img{
  width: 100%;
  vertical-align: middle;
}

.contact-sec {
  background: #fff;
  padding: 100px 0;
}

.contact-sec .contact-title {
  text-align: center;
  color: #32324A;
  font-weight: 600;
  margin-bottom: 14px;
}

.contact-sec .contact-desc {
  text-align: center;
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 56px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 26px;
  row-gap: 23px;
  max-width: 1512px;
  margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  outline: none;
  transition: border-color .25s ease;
}

.contact-form input {
  height: 56px;
  padding: 0 18px;
}

.contact-form textarea {
  grid-column: 1 / -1;
  height: 132px;
  padding: 16px 18px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #A9AEBC;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4285F4;
}

/* 悬停：与首页 banner 主按钮同源 —— #4C8BFF 自左向右推满整个按钮 + 上浮 3px + 蓝色光晕 */
.contact-submit {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  margin-top: 17px;
  height: 58px;
  padding: 0 66px;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background-color: #343434;
  /* 填充层：纯色渐变，靠 background-size 的 0% → 100% 实现左→右推入（与 .btn-hero 同源） */
  background-image: linear-gradient(#4C8BFF, #4C8BFF);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    transform .4s cubic-bezier(.22, .61, .36, 1),
    box-shadow .4s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1);
}

.contact-submit:hover {
  background-size: 100% 100%;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(43, 107, 224, .42);
}

.contact-submit:focus-visible,
.sv10-cta-btn:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 3px;
}

/* 触屏无悬停：按下时给同样的填充反馈，避免点完残留浮起态 */
@media (hover: none) {
  .contact-submit:active {
    background-size: 100% 100%;
    transform: scale(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-submit {
    transition: none;
  }

  .contact-submit:hover {
    transform: none;
  }
}

.tech-points {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 592px;
  padding: 100px 0;
  overflow: hidden;
  background: url('../image/technical-bg.jpg') no-repeat center / cover;
  background-size: cover;
  color: #fff;
}

.tech-points__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tech-points .container {
  position: relative;
  z-index: 1;
}

.tp-title {
  padding-bottom: 65px;
  border-bottom: 1px solid rgba(255, 255, 255, .92);
  color: #fff;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2px;
}

.tp-list {
  margin-top: 88px;
}

.tp-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.tp-txt {
  flex: 1 1 auto;
  min-width: 0;
}

.tp-list li + li {
  margin-top: 21px;
}

.tp-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #fff;
  color: #0B1524;
}

.tp-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/**** 解决方案 结束 ****/


/**** 项目案例 开始 ****/

/* 筛选条（设计稿 20261017：白条贴 hero 底部，左侧蓝色 Case Studies 标签 + 两个下拉 + Back to top） */
.filter-bar {
  position: relative;
  z-index: 20;
  background: #fff;
  height: 71px;
  display: flex;
  align-items: stretch;
}

.filter-bar .filter-tab {
  flex: 0 0 292px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4C8BFF;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.filter-bar .filter-dd {
  position: relative;
  display: flex;
}

.filter-bar .filter-dd + .filter-dd {
  border-left: 1px solid #E7E7E7;
}

.filter-bar .filter-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-width: 241px;
  padding: 0 28px;
  border: none;
  background: #fff;
  font-size: 18px;
  font-family: inherit;
  color: #1A1A1A;
  cursor: pointer;
}

.filter-bar .filter-dd-btn svg {
  width: 12px;
  height: 12px;
  color: #8A8F9C;
  transition: transform .25s ease;
}

.filter-bar .filter-dd.open .filter-dd-btn svg {
  transform: rotate(180deg);
}

.filter-bar .filter-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 30px rgba(20, 30, 60, .10);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .25s ease;
  z-index: 30;
}

.filter-bar .filter-dd.open .filter-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.filter-bar .filter-dd-opt {
  display: block;
  padding: 10px 24px;
  font-size: 16px;
  font-weight: 300;
  color: #555B6B;
  cursor: pointer;
  white-space: nowrap;
}

.filter-bar .filter-dd-opt:hover {
  background: #F4F7FD;
  color: #4b8aff;
}

.filter-bar .filter-dd-opt.active {
  color: #4C8BFF;
  font-weight: 600;
}

.filter-bar .filter-backtop {
  margin-left: auto;
  margin-right: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
}

.filter-bar .filter-backtop svg {
  width: 22px;
  height: 22px;
}

/* 灰底内容区（projects 设计稿 20261017） */
.page-head.sec-gray {
  background: #F1F1F1;
  padding-top: 0;
}

.quick-search {
  background: transparent;
  border-radius: 0;
  padding: 100px 0 0;
  margin-top: 0;
}

.quick-search h3 {
  font-size: 36px;
  font-weight: 700;
  color: #17181A;
  margin-bottom: 24px;
}

.search-row {
  display: flex;
  gap: 10px;
}

.search-row input {
  flex: 0 0 auto;
  width: 520px;
  max-width: 60%;
  height: 62px;
  padding: 0 20px;
  border-radius: 0;
  border: none;
  background: #fff;
  font-size: 16px;
  font-weight: 300;
  color: #333;
}

.search-row input::placeholder {
  color: #B3B8C4;
}

.search-row .search-btn {
  width: 220px;
  height: 62px;
  border: none;
  border-radius: 0;
  background: #4C8BFF;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
}

.search-row .search-btn svg {
  width: 28px;
  height: 28px;
}

.search-row .search-btn:hover {
  background: #2F6FE8;
}

.recommend-tags {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.recommend-tags .rec-label {
  font-size: 16px;
  color: #17181A;
  font-weight: 400;
}

.recommend-tags .rec-link {
  font-size: 16px;
  color: #265c3b;
  transition: color .25s ease;
}

.recommend-tags .rec-link:hover {
  color: #4C8BFF;
}

.year-group {
  background: #fff;
  border-radius: 10px;
  padding: 46px 42px 50px;
  margin-top: 46px;
}

.year-title {
  font-size: 34px;
  font-weight: 700;
  color: #4C8BFF;
  margin-bottom: 30px;
}

.case-row {
  display: grid;
  grid-template-columns: 1fr 46%;
  gap: 48px;
  align-items: center;
  position: relative;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 40px 42px 40px 52px;
  transition: transform .3s ease;
}

/* 整行（左文 + 右图）点击热区：铺满整行的透明链接 */
.case-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
  background: transparent;
  -webkit-user-drag: none;
}

.case-hit:focus-visible {
  outline: 3px solid #4C8BFF;
  outline-offset: -3px;
}

.case-row + .case-row {
  margin-top: 30px;
}

.case-row:hover {
  box-shadow: 0 12px 30px rgba(20, 30, 60, .10);
  transition: transform .3s ease;
}

.case-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 440;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.case-info .case-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8A8F9C;
}

.case-date-img{
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.case-date-img img{
  transition: transform .3s ease;
  width: 100%;
}

.case-info .case-date svg {
  width: 16px;
  height: 16px;
}


.case-info h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 24px 0 12px;
}

.case-info h3 a {
  color: #17181A;
  font-size: 26px;
  transition: color .3s ease;
}

.case-info h3 a:hover {
  color: #4C8BFF;
}

/* 整行悬停：标题变蓝（与案例卡片 hover 规则统一） */
.case-row:hover .case-info h3 a {
  color: #4C8BFF;
}

.case-info p {
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 30px;
}

.case-info .case-go {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #203d7f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, transform .3s ease;
}

.case-info .case-go img {
  width: 24px;
  height: 24px;
  display: block;
  transform: rotate(-45deg);
  transition: transform .35s ease;
}

.case-row:hover .case-info .case-go img,
.case-info .case-go:hover img {
  transform: rotate(0deg);
}

.case-row:hover .case-go{
  background: #4C8BFF;
}

.case-row:hover .case-date-img img{
  transform: scale(1.05);
  transition: transform .3s ease;
}

/* 项目详情（设计稿 5Projects_详情 20261017） */
/* 项目详情页：与 blog-detail 一致的浅色渐变顶部 + 透明导航 */
body.pd5-page {
  padding-top: 96px;
  background: url('../image/blog-bg.png') no-repeat top left #f1f1f1;
  background-size: 80%;
}

.pd-page {
  background: transparent;
}

.pd-card {
  max-width: 1510px;
  margin: 52px auto 60px;
  background: #fff;
  border-radius: 12px;
  padding: 34px 56px 46px;
}

.pd-topbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ECECEC;
  padding-bottom: 22px;
}

.pd-topbar .pd-cat {
  width: 280px;
  font-size: 14px;
  color: #9AA0A6;
}

.pd-topbar .pd-date {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #9AA0A6;
}

.pd-icons {
  display: flex;
  gap: 12px;
}

.pd-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #E3E3E3;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B6B6B;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

.pd-ico svg {
  width: 17px;
  height: 17px;
}

.pd-ico.dark {
  background: #232A4D;
  border-color: #232A4D;
  color: #fff;
}

.pd-ico:hover {
  border-color: #4C8BFF;
  color: #4C8BFF;
}

.pd-ico.dark:hover {
  background: #4C8BFF;
  border-color: #4C8BFF;
  color: #fff;
}

.pd-title {
  font-size: 26px;
  font-weight: 600;
  color: #17181A;
  margin: 30px 0 26px;
}

/* 图集：主图 Swiper + 缩略图 Swiper 联动 */
.pd-gallery {
  margin-top: 4px;
}

.gal-main-swiper {
  border-radius: 6px;
  overflow: hidden;
}

.gal-main-swiper img {
  width: 100%;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  aspect-ratio: 1401 / 643;
  object-fit: cover;
  display: block;
}

/* 主图 hover 略微放大（1.03，不与下缘缩略图抢视线） */
.gal-main-swiper .swiper-slide:hover img {
  transform: scale(1.03);
}

 
.gal-bottom {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-top: 16px;
}

/* 左右翻页按钮：交互与首页 banner 箭头完全一致 ——
   hover 时 #4b8aff 从左向右推满、上浮 2px、蓝色光晕。
   注意必须是 background-color + 独立 background-image：
   background 简写会把 image/size/position 一起重置，填充动画直接失效（本项目踩过多次） */
.gal-nav {
  flex: none;
  width: 44px;
  height: 88px;
  border: none;
  background-color: #929292;
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    box-shadow .4s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
}

.gal-nav svg {
  width: 20px;
  height: 20px;
}

.gal-nav:hover,
.gal-nav:focus-visible {
  background-size: 100% 100%;
  box-shadow: 0 14px 30px rgba(43, 107, 224, .38);
  transform: translateY(-2px);
}

.gal-nav:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 2px;
}

.gal-nav.next {
  margin-left: auto;
}

.gal-thumbs-swiper {
  flex: 1 1 auto;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
}

.gal-thumbs-swiper .swiper-slide {
  width: calc((100% - 48px) / 5);
  cursor: pointer;
}

.gal-thumbs-swiper img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
  border: 2px solid transparent;
}

.gal-thumbs-swiper .swiper-slide-thumb-active img,
.gal-thumbs-swiper .swiper-slide.is-active img {
  border-color: #4C8BFF;
}

.pd-subtitle {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 600;
  color: #1F2329;
  max-width: 1200px;
  margin-top: 36px;
}

.pd-block {
  margin-top: 34px;
}

.pd-block + .pd-block {
  margin-top: 100px;
}

.pd-tagline {
  display: flex;
  border-bottom: 1px solid #E7E7E7;
}

.pd-tagbtn {
  display: inline-block;
  background: #343434;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  padding: 18px 20px;
  cursor: pointer;
}

.pd-block-text {
  font-size: 16px;
  line-height: 1.5;
  color: #888888;
  margin-top: 42px;
  max-width: 1030px;
}

/* 产品 Swiper（Use The Product） */
.pdprod-swiper {
  margin-top: 32px;
  overflow: hidden;
}

.pdprod-swiper .swiper-slide {
  padding: 10px 0;
}

.pdprod-card{
  transition: transform .6s ease;
}

.pdprod-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 7px 12px rgba(15, 23, 42, .12);
  transition: transform .6s ease;
}

.pdprod-card-img{
  overflow: hidden;
}

.pdprod-card-img img{
  transition: transform .3s ease;
  width: 100%;
  vertical-align: middle;
}

.pdprod-card:hover .pdprod-card-img img{
  transform: scale(1.05);
  transition: transform .3s ease;
}

.pdprod-card:hover .pdprod-name {
  color: #4C8BFF;
}

.pdprod-card {
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  background: #fff;
  padding: 18px 18px 24px;
}

.pdprod-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.pdprod-name {
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-top: 20px;
}

.pdprod-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.pdprod-pagination .pdprod-bullet {
  width: 34px;
  height: 6px;
  border-radius: 3px;
  background: #D9D9D9;
  cursor: pointer;
  transition: background .25s ease;
}

.pdprod-pagination .pdprod-bullet.active {
  background: #4C8BFF;
}

.pd-share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
  padding-top: 42px;
  border-top: 1px solid #e6e6e6;
}

.pd-share-label {
  font-size: 12px;
  letter-spacing: 3px;
  color: #8A8A8A;
  margin-right: 6px;
}

/**** 项目案例 结束 ****/


/**** 产品中心 开始 ****/

.business-scope {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 60px;
  align-items: center;
}

.business-scope img {
  border-radius: 24px;
}

.scope-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #E2E8F0;
  font-size: 16px;
  color: #0F172A;
  font-weight: 500;
  cursor: pointer;
}

.scope-list li:hover {
  color: #4b8aff;
}

.scope-list li .circle-btn {
  width: 34px;
  height: 34px;
  font-size: 14px;
  margin-left: auto;
}

.zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.zone-head h3 {
  font-size: 26px;
}

.zone-head .more-link {
  color: #4b8aff;
  font-size: 14px;
  font-weight: 500;
}

.brand-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.brand-row .brand-pill {
  padding: 8px 22px;
  border-radius: 999px;
  background: #F6F8FB;
  color: #0F172A;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
}

.brand-row .brand-pill.active,
.brand-row .brand-pill:hover {
  background: #4b8aff;
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.product-grid img {
  height: 220px;
}

.om-banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #142B66;
  margin-top: 80px;
}

.om-banner .om-text {
  padding: 60px;
  color: rgba(255, 255, 255, .8);
}

.om-banner .om-text .eyebrow {
  color: #7DD3FC;
}

.om-banner .om-text h2 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 18px;
}

.om-banner img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 0;
}

/**** 产品中心 结束 ****/


/**** 服务与运维 开始 ****/

.service-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: all .3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.service-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
}

.service-card .sc-body {
  padding: 26px;
}

.service-card .sc-num {
  font-size: 14px;
  font-weight: 600;
  color: #4b8aff;
  letter-spacing: .08em;
}

.service-card h3 {
  margin: 10px 0 12px;
  font-size: 19px;
}

.market-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.market-block img {
  border-radius: 24px;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.market-stat {
  font-size: 60px;
  font-weight: 700;
  color: #4b8aff;
  line-height: 1.1;
}

.market-stat-label {
  font-size: 14px;
  color: #64748B;
  margin-top: 8px;
}

.wide-banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
}

.wide-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.wide-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 23, 42, .85), rgba(27, 60, 140, .55));
}

.wide-banner .container {
  position: relative;
  z-index: 2;
}

.wide-banner h2 {
  color: #fff;
  font-size: 36px;
  max-width: 700px;
}

.banner-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.banner-feature {
  background: #fff;
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.banner-feature h4 {
  font-size: 17px;
  color: #0F172A;
  margin-bottom: 10px;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
}

.faq-q .q-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF4FF;
  color: #4b8aff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}

.faq-q .q-arrow {
  margin-left: auto;
  color: #94A3B8;
  transition: transform .3s ease;
}

.faq-item.open .q-arrow {
  transform: rotate(180deg);
}

.faq-item.open .faq-q {
  color: #4b8aff;
}

.faq-a {
  display: none;
  padding: 0 28px 24px 72px;
  font-size: 14px;
}

.faq-item.open .faq-a {
  display: block;
}

.om-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #F6F8FB;
  border-radius: 999px;
  padding: 8px;
  margin-top: 40px;
}

.om-tabs .tab-btn {
  border: none;
  background: transparent;
  text-align: center;
  justify-content: center;
}

.om-tabs .tab-btn.active {
  background: #4b8aff;
}

.om-block-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 40px;
}

.om-block-head .head-line {
  width: 4px;
  height: 56px;
  border-radius: 999px;
  background: #4b8aff;
  flex: 0 0 auto;
}

.om-block-head h3 {
  font-size: 22px;
  color: #4b8aff;
}

.om-block-head p {
  margin-top: 8px;
  font-size: 14px;
}

.om-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.om-row + .om-row {
  margin-top: 24px;
}

.om-tile {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 240px;
}

.om-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.om-tile .tile-body {
  padding: 28px;
}

.om-tile .tile-body h4 {
  font-size: 18px;
  color: #0F172A;
  margin-bottom: 12px;
}

.om-tile .tile-body p {
  font-size: 14px;
}

/**** 服务与运维 结束 ****/


/**** 新闻中心 开始 ****/

.blog-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}

.featured-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.featured-post img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 0;
}

.featured-post .fp-body {
  padding: 40px 44px;
}

.featured-post .post-date {
  font-size: 14px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-post h2 {
  font-size: 28px;
  margin: 16px 0 16px;
}

.featured-post p {
  font-size: 14px;
  margin-bottom: 26px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}

.post-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transition: all .3s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.post-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
}

.post-card .pc-body {
  padding: 24px;
}

.post-card .post-date {
  font-size: 13px;
  color: #94A3B8;
}

.post-card h3 {
  font-size: 18px;
  margin: 10px 0 18px;
  min-height: 54px;
}

.post-card:hover h3 {
  color: #4b8aff;
}

.article-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.article-body {
  font-size: 16px;
}

.article-body p {
  margin-top: 22px;
}

.article-body h3 {
  margin-top: 40px;
  font-size: 22px;
}

.article-body img {
  width: 100%;
  border-radius: 20px;
  margin: 36px 0;
}

.article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  border-top: 1px solid #E2E8F0;
  margin-top: 40px;
}

.article-tags {
  display: flex;
  gap: 10px;
}

/**** 新闻中心 结束 ****/


/**** 新闻列表页 8Blog 开始 ****/

.bl8-hero {
  height: 660px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.bl8-hero .container {
  padding-bottom: 92px;
}

.bl8-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 18px;
  font-weight: 500;
}

.bl8-dash {
  width: 46px;
  height: 2px;
  background: rgba(255, 255, 255, .75);
}

.bl8-title {
  margin-top: 26px;
  color: #fff;
  font-size: 45px;
  line-height: 55px;
  font-weight: 500;
}

.bl8-main {
  padding: 84px 0 126px;
}

.bl8-wrap {
  width: 1510px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

.bl8-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.bl8-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 25px;
  border: none;
  border-radius: 10px;
  background: #F1F1F1;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s ease;
}

.bl8-tab:hover {
  color: #4C8BFF;
}

.bl8-tab.active {
  background: #4C8BFF;
  color: #fff;
}

.bl8-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
}

.bl8-check svg {
  width: 14px;
  height: 11px;
}

.bl8-feat {
  display: flex;
  margin-top: 74px;
  height: 534px;
  border-radius: 16px;
  overflow: hidden;
  background: #F1F1F1;
  position: relative;
  transition: box-shadow .3s ease;
}

.bl8-feat:hover {
  box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
}

.bl8-feat-media {
  display: block;
  width: 56.36%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.bl8-feat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* 鼠标移入：图片略微放大，移出恢复 */
.bl8-feat:hover .bl8-feat-img {
  transform: scale(1.05);
}

.bl8-feat-body {
  flex: 1;
  padding: 68px 60px;
  min-width: 0;
}

.bl8-date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #6B7280;
}

.bl8-date svg {
  width: 20px;
  height: 20px;
}

.bl8-date.sm {
  font-size: 14px;
}

.bl8-feat-body h2 {
  margin-top: 42px;
  max-width: 540px;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 600;
  color: #17181C;
  transition: color .3s ease;
}

/* 鼠标移入：标题变蓝 */
.bl8-feat:hover .bl8-feat-body h2 {
  color: #4b8aff;
}

.bl8-line {
  display: block;
  width: 63px;
  height: 1px;
  background: #4477f3;
  margin-top: 30px;
  transition: width .35s ease, background-color .35s ease;
}

/* 鼠标移入：装饰横线略微拉长 */
.bl8-feat:hover .bl8-line {
  width: 92px;
  background: #4b8aff;
}

.bl8-feat-body p {
  margin-top: 26px;
  max-width: 545px;
  font-size: 16px;
  line-height: 1.45;
  color: #373737;
}

.bl8-arrow-lg {
  position: absolute;
  right: 61px;
  bottom: 62px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #4C8BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.bl8-feat:hover .bl8-arrow-lg {
  background: #4b8aff;
}

/* 箭头图标（img，与首页 arr-icon.png 同一张图）默认 45° 倾斜 */
.bl8-arrow-lg img,
.bl8-arrow-lg svg {
  display: block;
  width: 26px;
  height: 26px;
  transform: rotate(-45deg);
  transition: transform .35s ease;
}

/* 鼠标移入：箭头转为水平，与首页 hover 效果一致 */
.bl8-feat:hover .bl8-arrow-lg img,
.bl8-feat:hover .bl8-arrow-lg svg {
  transform: rotate(0deg);
}

.bl8-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 85px;
}

.bl8-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #F1F1F1;
  transition: all .3s ease;
}

.bl8-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.bl8-card-media {
  display: block;
  height: 320px;
  overflow: hidden;
}

.bl8-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* 鼠标移入：图片略微放大，移出恢复 */
.bl8-card:hover .bl8-card-media img {
  transform: scale(1.06);
}

.bl8-card-body {
  padding: 28px 32px 43px;
}

.bl8-card-body h3 {
  margin-top: 12px;
  min-height: 54px;
  font-size: 19px;
  line-height: 27px;
  font-weight: 600;
  color: #17181C;
  transition: color .25s ease;
}

.bl8-card:hover h3 {
  color: #4C8BFF;
}

.bl8-arrow-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 40px;
  border-radius: 50%;
  background: #fff;
  transition: all .3s ease;
}

.bl8-card:hover .bl8-arrow-sm {
  background: #4C8BFF;
}

.bl8-card:hover .bl8-arrow-sm svg path {
  stroke: #fff;
}

.bl8-arrow-sm svg {
  width: 18px;
  height: 12px;
  /* 默认 45° 倾斜 */
  transform: rotate(-45deg);
  transition: transform .35s ease;
}

/* 鼠标移入：箭头转为水平 */
.bl8-card:hover .bl8-arrow-sm svg {
  transform: rotate(0deg);
}

.bl8-pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 57px;
}

.bl8-pager a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #F1F1F1;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  transition: all .25s ease;
}

.bl8-pager a:hover {
  color: #4C8BFF;
}

.bl8-pager a.active {
  background: #4C8BFF;
  color: #fff;
}

/**** 新闻列表页 8Blog 结束 ****/


/**** 新闻详情页 9Blog 开始 ****/

body.bd9-page {
  padding-top: 96px;
  background: url('../image/blog-bg.png') no-repeat top left #ffffff;
  background-size: 80%;
}

body.bd9-page-blog {
  padding-top: 96px;
  background: url('../image/blog-bg.png') no-repeat top left #f6f6f6;
  background-size: 80%;
}

.bd9-wrap {
  width: 100%;
  margin: 0 auto;
}

.bd9-top {
  padding-top: 104px;
}

.bd9-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 74px;
  padding: 0 45px;
  border-radius: 999px;
  background: #4C8BFF;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  transition: transform .5s ease;
}

.bd9-back:hover {
  background: #4b8aff;
  background-size: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 107, 224, .28);
  color: #fff;
  transition: transform .5s ease;
}

.bd9-back svg {
  width: 20px;
  height: 18px;
}

.bd9-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
  font-size: 15px;
  line-height: 1;
  color: #374151;
}

.bd9-crumb a {
  color: #374151;
}

.bd9-crumb a:hover {
  color: #4b8aff;
}

.bd9-crumb .bd9-home {
  width: 16px;
  height: 15px;
  margin-right: 2px;
}

.bd9-crumb .sep {
  color: #9CA3AF;
}

.bd9-crumb .cur {
  color: #374151;
}

.bd9-sec {
  padding: 59px 0 99px;
}

.bd9-card {
  background: #fff;
  border-radius: 24px;
  padding: 39px 56px 95px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.bd9-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.bd9-tag,
.bd9-date {
  font-size: 14px;
  color: #9CA3AF;
}

.bd9-date {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.bd9-meta-ico {
  display: flex;
  gap: 14px;
}

.bd9-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F1F1F1;
  cursor: pointer;
  transition: all .25s ease;
}

.bd9-ico:hover {
  background: #4C8BFF;
}

.bd9-ico:hover svg {
  filter: brightness(0) invert(1);
}

.bd9-ico svg {
  width: 16px;
  height: 16px;
}

.bd9-title {
  margin-top: 79px;
  font-size: 26px;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
}

.bd9-body {
  margin-top: 46px;
}

.bd9-body p {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #8B8B8B;
}

.bd9-article-img {
  display: block;
  width: 896px;
  max-width: 100%;
  height: auto;
  margin: 17px auto 36px;
}

.bd9-divider {
  height: 1px;
  background: #E6E6E6;
  margin-top: 60px;
}

.bd9-share {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 41px;
}

.bd9-share-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #6B7280;
  margin-right: 22px;
}

.bd9-sub {
  margin-top: 59px;
  font-size: 24px;
  font-weight: 700;
  color: #111;
}

.bd9-rel {
  margin-top: 33px;
  overflow: hidden;
}

.bd9-rel .swiper-slide {
  height: auto;
  padding: 18px 0;
}

.bd9-rel-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #F1F1F1;
  transition: all .3s ease;
}

.bd9-rel-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 7px 12px rgba(15, 23, 42, .12);
}

/* 封面图裁切容器：hover 时图片在容器内微放大，不溢出卡片 */
.bd9-rel-media {
  display: block;
  height: 298px;
  overflow: hidden;
}

.bd9-rel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.bd9-rel-card:hover .bd9-rel-media img {
  transform: scale(1.06);
}

/* 兼容旧结构（未包容器时） */
.bd9-rel-card > img {
  width: 100%;
  height: 298px;
  object-fit: cover;
  display: block;
}

.bd9-rel-body {
  padding: 26px 28px 40px;
}

.bd9-rel-date {
  font-size: 14px;
  color: #6B7280;
}

.bd9-rel-body h3 {
  margin-top: 14px;
  min-height: 52px;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  color: #17181C;
  transition: color .25s ease;
}

.bd9-rel-card:hover h3 {
  color: #4C8BFF;
}

.bd9-rel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 30px;
  border-radius: 50%;
  background: #fff;
  transition: all .3s ease;
}

.bd9-rel-card:hover .bd9-rel-arrow {
  background: #4C8BFF;
}

.bd9-rel-card:hover .bd9-rel-arrow svg path {
  stroke: #fff;
}

/* 箭头默认 45° 倾斜，与首页 / blog 列表页一致 */
.bd9-rel-arrow img,
.bd9-rel-arrow svg {
  display: block;
  width: 17px;
  height: 11px;
  transform: rotate(-45deg);
  transition: transform .35s ease;
}

/* 鼠标移入：箭头转为水平 */
.bd9-rel-card:hover .bd9-rel-arrow img,
.bd9-rel-card:hover .bd9-rel-arrow svg {
  transform: rotate(0deg);
}

.bd9-progress {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 50px;
}

.bd9-progress span {
  width: 46px;
  height: 8px;
  border-radius: 4px;
  background: #C4C4C4;
  cursor: pointer;
  transition: background .25s ease;
}

.bd9-progress span.active,
.bd9-progress span:hover {
  background: #4C8BFF;
}

/**** 新闻详情页 9Blog 结束 ****/


/**** 服务页 10Service 开始 ****/

.sv10-hero {
  height: 660px;
  background: url('../image/sv10-hero.jpg') center / cover no-repeat;
}

.sv10-hero-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 345px 0 0 76px;
}

.sv10-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 16px;
}

.sv10-eyebrow i {
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, .9);
}

.sv10-title {
  margin-top: 28px;
  font-size: 48px;
  line-height: 62px;
  font-weight: 700;
  color: #fff;
}

.sv10-wrap {
  width: 1510px;
  max-width: calc(100% - 60px);
  margin: 0 auto;
}

.sv10-h2 {
  font-size: 42px;
  font-weight: 700;
  color: #111;
}

.sv10-sub {
  margin-top: 24px;
  font-size: 14px;
  color: #555;
}

.sv10-line {
  height: 1px;
  background: #DBDBDB;
  margin-top: 32px;
}

/* Service Content */
.sv10-sc {
  background: #F8F6F7;
  padding: 120px 0 118px;
}

.sv10-grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sv10-card {
  display: flex;
  flex-direction: column;
}

/* 封面图裁切容器：hover 时内部图片微放大，超出部分不溢出到正文 */
.sv10-media {
  overflow: hidden;
  flex: none;
}

.sv10-media img {
  display: block;
  width: 100%;
  height: 383px;
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sv10-card:hover .sv10-media img {
  transform: scale(1.03);
}

.sv10-card-body {
  height: 332px;
  padding: 41px 60px 0 55px;
  background: #fff;
}

/* 灰底按设计稿的棋盘格走：01 / 04 / 05 灰、02 / 03 / 06 白。
   两列布局下即「左列第 1 张、右列第 2 张」交替，用 nth-child 计算，
   HTML 里不再手工挂 sv10-bg-gray —— 4n+1 → 1,5,9…；4n+4 → 4,8,12… */
.sv10-card:nth-child(4n+1) .sv10-card-body,
.sv10-card:nth-child(4n+4) .sv10-card-body {
  background: #F1F1F1;
}

/* 灰底卡上的序号反白，与设计稿一致（01 = 灰底 + 白圆 + 蓝字） */
.sv10-card:nth-child(4n+1) .sv10-num,
.sv10-card:nth-child(4n+4) .sv10-num {
  background: #fff;
}

.sv10-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 默认就带圆底，颜色取所在卡片的「反转色」：
     白底卡 → #F1F1F1 淡灰圆；灰底卡 → 纯白圆（见下方 nth-child 规则） */
  background: #F1F1F1;
  color: #4B8AFF;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .3s ease, color .3s ease;
}

/* 悬停：序号底色填充 #3D7BF7、数字转白 */
.sv10-card:hover .sv10-num {
  background: #3D7BF7;
  color: #fff;
}

.sv10-card-body h3 {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  transition: color .3s ease;
}

/* 悬停：标题转品牌蓝 */
.sv10-card:hover .sv10-card-body h3 {
  color: #3D7BF7;
}

.sv10-card-body p {
  margin-top: 78px;
  font-size: 14px;
  line-height: 22px;
  color: #555;
  max-width: 648px;
}

/* Market Distribution */
.sv10-mkt {
  background: url(../image/blog-bg.png) no-repeat top left #ffffff;
  background-size: 80%;
  padding-top: 121px;
}

.sv10-map {
  position: relative;
  margin-top: 10px;
}

/* 标签的定位基准 = 地图图片矩形；cqw 也以这里为准，
   所以标签的字号 / 圆点 / 内边距都随图等比缩放 */
.sv10-canvas {
  position: relative;
  container-type: inline-size;
}

.sv10-canvas > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 地图上的国家标签（China / Nigeria / Zambia）：
   left / top 由 HTML 的 style 直接给定，单位为百分比（相对地图图片），
   后期后台按「国家名 + left + top」输出即可增删改，不需要动 CSS。
   外观尺寸用 cqw（1cqw = 地图宽度的 1%）随图等比缩放，
   外层 max() 是给小屏兜底：图缩到 300px 时字号仍不小于 8.5px，否则完全看不清。 */
.sv10-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(.7cqw, 5px);
  box-sizing: border-box;
  min-width: max(7.1cqw, 58px);
  height: max(1.5cqw, 15px);
  padding: 0 max(.9cqw, 7px) 0 max(.95cqw, 7px);
  border-radius: 999px;
  /* 设计稿里胶囊略微透出底图纹理，用 95% 白而不是纯白 */
  background: rgba(255, 255, 255, .95);
  color: #16181D;
  font-size: max(.92cqw, 8.5px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* 1px 淡蓝描边 + 极浅投影，与设计稿的白胶囊一致 */
  box-shadow: 0 0 0 max(.07cqw, 1px) rgba(198, 216, 249, .95),
              0 max(.1cqw, 1px) max(.28cqw, 3px) rgba(28, 54, 130, .10);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), box-shadow .38s ease;
  will-change: transform;
  z-index: 2;
}

/* 左侧蓝点：实心蓝圆 + 内部白心（inset 阴影挖空），纯 CSS，无需图片 */
.sv10-pin::before {
  content: "";
  flex: none;
  width: max(.94cqw, 9px);
  height: max(.94cqw, 9px);
  border-radius: 50%;
  background: #3D7BF7;
  box-shadow: inset 0 0 0 max(.26cqw, 2.5px) #fff;
}

.sv10-pin:hover {
  transform: translateY(calc(-1 * max(.3cqw, 2px))) scale(1.06);
  box-shadow: 0 0 0 max(.07cqw, 1px) rgba(61, 123, 247, .85),
              0 max(.55cqw, 6px) max(1.2cqw, 12px) rgba(20, 50, 120, .20);
  z-index: 3;
}

/* 触屏没有 hover：点过之后不要残留浮起态 */
@media (hover: none) {
  .sv10-pin:hover {
    transform: none;
    box-shadow: 0 0 0 max(.07cqw, 1px) rgba(198, 216, 249, .95),
                0 max(.1cqw, 1px) max(.28cqw, 3px) rgba(28, 54, 130, .10);
  }
}

/* 数字滚动：等宽数字 + 到位后轻轻「弹一下」，避免逐帧换字时行内抖动 */
.sv10-stat-num .sv10-count {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  margin-left: 0;
  font-variant-numeric: tabular-nums;
  /* 预留「3,602.33」的宽度（实测 4.55em）：滚动过程中 GWh+ 与下划线不会左右伸缩 */
  min-width: 4.6em;
}

.sv10-stat-num.is-done .sv10-count {
  animation: sv10CountPop .55s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes sv10CountPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.05); }
  68%  { transform: scale(.985); }
  100% { transform: scale(1); }
}


.sv10-stat {
  position: absolute;
  left: 10.73%;
  top: 67.4%;
}

.sv10-stat-num {
  /* 随屏幕宽度流式缩放: 28px ~ 72px */
  font-size: clamp(28px, 5vw, 72px);
  font-weight: 700;
  color: #2E53AB;
  line-height: 1;
  white-space: nowrap;
  border-bottom: 1px solid #000000;
  padding-bottom: 20px;
}

.sv10-stat-num span {
  /* 单位文字随宽度流式缩放: 12px ~ 24px */
  font-size: clamp(12px, 1.7vw, 24px);
  font-weight: 600;
  margin-left: 10px;
}

.sv10-stat-label {
  margin-top: 15px;
  /* 标签文字随宽度流式缩放: 12px ~ 18px */
  font-size: clamp(12px, 1.25vw, 18px);
  color: #000000;
}

/* CTA 大图 */
.sv10-cta {
  height: 603px;
  background: url('../image/sv10-cta.jpg') center / cover no-repeat;
  text-align: center;
  padding-top: 164px;
  background-attachment: fixed;
}

.sv10-cta h2 {
  font-size: 36px;
  line-height: 70px;
  font-weight: 600;
  color: #fff;
}

/* 悬停：与首页 banner 主按钮同源 —— 深蓝自左向右推满 + 上浮 3px + 蓝色光晕 */
.sv10-cta-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  height: 73px;
  padding: 0 40px;
  margin-top: 36px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  background-color: #4C8BFF;
  /* 填充层：纯色渐变，靠 background-size 的 0% → 100% 实现左→右推入（与 .btn-hero 同源） */
  background-image: linear-gradient(#2B6BE0, #2B6BE0);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    transform .4s cubic-bezier(.22, .61, .36, 1),
    box-shadow .4s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1);
}

.sv10-cta-btn:hover {
  background-size: 100% 100%;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(43, 107, 224, .42);
}

@media (hover: none) {
  .sv10-cta-btn:active {
    background-size: 100% 100%;
    transform: scale(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv10-cta-btn {
    transition: none;
  }

  .sv10-cta-btn:hover {
    transform: none;
  }
}

/* 四特性卡 */
.sv10-feats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
  margin-top: -87px;
}

.sv10-feat {
  height: 206px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 9px 11px rgba(15, 23, 42, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 29px;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1),
              box-shadow .38s ease;
  will-change: transform;
}

/* 悬停：整张卡上浮 10px、投影加大，标题转品牌蓝（与同页六宫格一致 #3D7BF7） */
.sv10-feat:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .16);
}

.sv10-feat:hover span {
  color: #3D7BF7;
}

/* 键盘可达时与鼠标悬停表现一致 */
.sv10-feat:focus-within {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .16);
}

.sv10-feat:focus-within span {
  color: #3D7BF7;
}

.sv10-feat img {
  width: 100px;
  height: 88px;
  object-fit: contain;
}

.sv10-feat span {
  margin-top: 10px;
  font-size: 14px;
  color: #17181C;
  transition: color .3s ease;
}

/* 触屏没有 hover：点击后不要残留上浮态 */
@media (hover: none) {
  .sv10-feat:hover,
  .sv10-feat:focus-within {
    transform: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
  }

  .sv10-feat:hover span {
    color: #17181C;
  }
}

/* FAQ */
.sv10-faq {
  background: #fff;
  padding: 146px 0 120px;
}

.sv10-faq-list {
  margin-top: 43px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sv10-faq-item {
  background: #F1F1F1;
  border-radius: 12px;
  padding: 0 55px;
}

/* 问题行：语义化 button（保留原 86px 行高），右侧放加减号 */
.sv10-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 86px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #111;
  text-align: left;
  cursor: pointer;
}

.sv10-qtext {
  flex: 1 1 auto;
  min-width: 0;
  transition: color .3s ease;
}

/* 悬停整行：问句文字与图标一起转品牌蓝 */
.sv10-faq-item:hover .sv10-qtext {
  color: #3D7BF7;
}

/* 全局 button 规则里 outline:none，键盘聚焦时补回可见描边 */
.sv10-faq-q:focus-visible {
  outline: 2px solid #3D7BF7;
  outline-offset: 3px;
  border-radius: 8px;
}

/* 问号图标：深灰实心对话气泡 + 白问号（按设计稿） */
.sv10-qico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #515151;
  transition: color .3s ease;
}

.sv10-qico svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.sv10-faq-item:hover .sv10-qico {
  color: #3D7BF7;
}

/* 加减号：竖线收成 0 + 整体转 180°（转 90° 会把剩下的横线也转成竖线） */
.sv10-qplus {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #515151;
  transition: color .3s ease;
}

.sv10-qplus svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

.sv10-qplus .v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

.sv10-faq-item.open .sv10-qplus svg {
  transform: rotate(180deg);
}

.sv10-faq-item.open .sv10-qplus .v {
  transform: scaleY(0);
}

.sv10-faq-item:hover .sv10-qplus {
  color: #3D7BF7;
}

/* 答案区：grid-template-rows 0fr → 1fr 做真实高度展开动画，
   .sv10-faq-a-clip 负责剪裁（⚠️ 内边距/分隔线必须放在 body 上，
   放在 clip 上时收起状态会漏出 padding 高度与 1px 边线） */
.sv10-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear .42s;
}

.sv10-faq-item.open .sv10-faq-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear 0s;
}

.sv10-faq-a-clip {
  overflow: hidden;
  min-height: 0;
}

.sv10-faq-a-body {
  display: flex;
  gap: 16px;
  border-top: 1px solid #DDDDDD;
  padding: 22px 0 30px 0;
  font-size: 14px;
  line-height: 19px;
  color: #8B8B8B;
}

.sv10-faq-a-body p {
  margin: 0;
}

/* 答句图标：深灰实心气泡 + 两条白线 */
.sv10-aico {
  flex: none;
  margin-top: 2px;
  width: 22px;
  height: 19px;
  color: #515151;
}

.sv10-aico svg {
  width: 22px;
  height: 19px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .sv10-faq-a,
  .sv10-qplus svg,
  .sv10-qplus .v {
    transition: none;
  }
}

/**** 服务页 10Service 结束 ****/


/**** 联系我们 开始 ****/

.contact-hero {
  background: linear-gradient(120deg, #142B66 0%, #1B3C8C 50%, #4C1D95 100%);
  padding: 110px 0 180px;
  text-align: center;
  color: rgba(255, 255, 255, .8);
}

.contact-hero h1 {
  color: #fff;
  font-size: 58px;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.contact-hero p {
  margin-top: 18px;
  font-size: 16px;
}

.contact-form-card {
  margin-top: -120px;
  position: relative;
  z-index: 5;
}

.global-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.contact-card {
  border-radius: 20px;
  padding: 40px 34px;
  background: linear-gradient(150deg, #EEF4FF 0%, #F6F8FB 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.contact-card .cc-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #4b8aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
}

.contact-card h3 {
  font-size: 18px;
  margin-bottom: 14px;
}

.contact-card p {
  font-size: 15px;
  color: #0F172A;
}

.contact-card p + p {
  margin-top: 8px;
}

.map-box {
  margin-top: 60px;
  border-radius: 24px;
  overflow: hidden;
  background: #F6F8FB;
  height: 420px;
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/**** 联系我们 结束 ****/


/**** CTA 订阅横幅 开始 ****/

.cta-band {
  background: #203D7F;
  padding: 34px 0;
  position: relative;
  overflow: hidden;
}

.cta-band .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-band h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
}

.cta-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 35px;
  width: 100%;
  flex-shrink: 0;
  max-width: 740px;
  flex: 1;
}

.cta-form input {
  flex: 1;
  height: 44px;
  background: transparent;
  color: #0F172A;
  font-size: 16px;
}

.cta-form input::placeholder {
  color: #94A3B8;
}

/**** CTA 订阅横幅 结束 ****/


/**** 底部 开始 ****/

.site-footer {
  background: #F1F1F1;
  color: #3E4759;
  padding: 64px 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: 60px;
  padding-bottom: 40px;
}

.footer-col h4 {
  color: #16192C;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.5;
}

.footer-brand .logo-text strong {
  color: #fff;
}

.footer-brand p {
  margin: 20px 0 24px;
  font-size: 14px;
  max-width: 300px;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 45px;
}

.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4477F3;
  transition: all .25s ease;
}

.social-links a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-links a svg.ic-ig {
  width: 19px;
  height: 19px;
}

.social-links a svg.ic-x {
  width: 17px;
  height: 17px;
}

.social-links a:hover {
  background: #4b8aff;
  color: #fff;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 2px 28px;
}

.footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-left: 8px;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: .01em;
  color: #000;
  transition: color .25s ease;
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 11px;
  margin-top: -5.5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'%3E%3Cpath d='M1 1 5 5.5 1 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'%3E%3Cpath d='M1 1 5 5.5 1 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.footer-links a:hover {
  color: #4b8aff;
}

.footer-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-tags .tag-pill {
  background: #fff;
  border: 1px solid #E3E6EB;
  color: #3E4759;
  font-size: 14px;
  padding: 10px 20px;
}

.footer-tags .tag-pill:hover {
  border-color: #4b8aff;
  color: #4b8aff;
  background: #fff;
}

.footer-contact li {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #3E4759;
  margin-bottom: 14px;
  max-width: 380px;
}

.footer-contact li a {
  color: #3E4759;
}

.footer-contact li i {
  display: none;
}

.footer-contact li a:hover {
  color: #4b8aff;
}

.footer-bottom {
  padding-bottom: 26px;
  display: block;
  font-size: 14px;
  color: #000000;
}

.footer-bottom .fb-links {
  display: flex;
  gap: 24px;
}

.footer-bottom .fb-links a:hover {
  color: #4b8aff;
}

/**** 底部 结束 ****/

/**** products 页 (UI/6Products) ****/

.pd6-hero {
  min-height: 660px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
}

.pd6-hero .hero-title {
  max-width: 700px;
  font-size: 48px;
}

.pd6-crumb {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 16px;
  margin-bottom: 22px;
}

.pd6-crumb .crumb-dash {
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, .85);
}

/* Business scope */
.pd6-scope {
  background: #F3F4F6;
  padding: 88px 0 80px;
}

.scope6-head {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 40px;
  align-items: start;
}

.scope6-head h2 {
  font-size: 46px;
  font-weight: 700;
  color: #17181C;
}

.scope6-head p {
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}

.scope6-card {
  position: relative;
  margin-top: 54px;
  border-radius: 12px;
  overflow: hidden;
}

.scope6-card > img {
  width: 100%;
  display: block;
}

/* 悬停：#4C8BFF 自左向右推满胶囊，文字与圆点转白（填充写法与 .btn-hero 同源） */
.scope6-pill {
  position: absolute;
  left: 74.7%;
  width: 19.6%;
  height: 9.3%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: .7em;
  padding-left: 1.5em;
  font-size: clamp(10px, .95vw, 17px);
  color: #2B2E34;
  background-color: #fff;
  /* 填充层：纯色渐变，靠 background-size 的 0% → 100% 实现左→右推入 */
  background-image: linear-gradient(#4C8BFF, #4C8BFF);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 2px 10px rgba(30, 64, 175, .08);
  transition:
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    box-shadow .25s ease,
    transform .25s ease,
    color .3s ease .16s;
  font-size: 18px;
}

.scope6-pill:hover,
.scope6-pill:focus-visible {
  background-size: 100% 100%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 64, 175, .18);
  transform: translateY(-2px);
}

.scope6-pill:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 3px;
}

.scope6-pill .sp-ico {
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 4px solid #4C8BFF;
  position: relative;
  transition: border-color .3s ease .16s;
}

/* 底色填满后蓝环会与背景同色消失，同步转白 */
.scope6-pill:hover .sp-ico,
.scope6-pill:focus-visible .sp-ico {
  border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .scope6-pill {
    transition: none;
  }

  .scope6-pill:hover {
    transform: none;
  }
}


/* 产品分区 */
.pd6-cat {
  background: #F3F4F6;
  padding: 0 0 80px;
}

.pd6-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #17181C;
  padding: 0 0 40px;
}

.pd6-carousel {
  position: relative;
  padding: 0 58px;
  margin: 0 -58px;
}

.pd6-swiper {
  overflow: hidden;
}

.pd6-swiper .swiper-slide {
  height: auto;
  padding: 20px 0;
}

.pd6-swiper .pd6-card {
  height: 100%;
}

.pd6-carousel .swiper-button-prev,
.pd6-carousel .swiper-button-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #1B3C8C;
  background-color: rgba(255, 255, 255, .9);
  background-image: linear-gradient(#4b8aff, #4b8aff);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  margin-top: -23px;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity .3s ease,
    background-size .5s cubic-bezier(.4, 0, .2, 1),
    color .3s ease .12s,
    box-shadow .4s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pd6-carousel .swiper-button-prev {
  left: 6px;
}

.pd6-carousel .swiper-button-next {
  right: 6px;
}

.pd6-carousel:hover .swiper-button-prev,
.pd6-carousel:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

/* 仅键盘 tab 到箭头时显示（不用 :focus-within：鼠标点过箭头后会一直停在页面上） */
.pd6-carousel:has(.swiper-button-prev:focus-visible) .swiper-button-prev,
.pd6-carousel:has(.swiper-button-next:focus-visible) .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

.pd6-carousel .swiper-button-prev::after,
.pd6-carousel .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

.pd6-carousel .swiper-button-prev:hover,
.pd6-carousel .swiper-button-next:hover,
.pd6-carousel .swiper-button-prev:focus-visible,
.pd6-carousel .swiper-button-next:focus-visible {
  color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 14px 30px rgba(43, 107, 224, .38);
  transform: translateY(-2px);
}

.pd6-carousel .swiper-button-prev:focus-visible,
.pd6-carousel .swiper-button-next:focus-visible {
  outline: 2px solid #4b8aff;
  outline-offset: 2px;
}

/* 没有可滚动余量时（slides 不足）Swiper 会加 swiper-button-lock，直接不显示 */
.pd6-carousel .swiper-button-lock {
  display: none;
}

.pd6-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.pd6-card:hover {
  transform: translateY(-4px);
  box-shadow: -1px 3px 32px rgba(23, 24, 28, .10);
}

.pd6-card-logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
}
.pd6-card-logo img{
  max-width: 100%;
  vertical-align: middle;
}
.pd6-card-img img {
  width: 100%;
  display: block;
}

.pd6-card-name {
  font-size: 16px;
  font-weight: 500;
  color: #17181C;
  padding: 5px 20px 20px;
  text-align: center;
}

.pd6-card-img{
  overflow: hidden;
}

.pd6-card:hover .pd6-card-name {
  color: #4b8aff;
}

.pd6-card-img  img{
  transition: transform .3s ease;
}


.pd6-card:hover .pd6-card-img  img{
  transform: scale(1.05);
  transition: transform .3s ease;
}

/* 连接线 + Hardware base layer */
.pd6-connector {
  position: relative;
  height: 108px;
  margin-top: -20px;
}

.pd6-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  display: block;
}

.pd6-pill-blue {
  position: absolute;
  left: 50%;
  top: 23px;
  transform: translateX(-50%);
  height: 31px;
  line-height: 31px;
  padding: 0 27px;
  background: #4C8BFF;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
}

.pd6-chev {
  position: absolute;
  left: 50%;
  top: 68px;
  transform: translateX(-50%);
  width: 20px;
  height: 16px;
}

.pd6-chev svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* PV O&M */
.pd6-om {
  position: relative;
  background: #fff;
  border: 1px solid #ECECEE;
  border-radius: 6px;
  padding: 46px 46px 46px 56px;
  display: grid;
  grid-template-columns: 1fr 49.9%;
  gap: 60px;
  align-items: center;
  transition: box-shadow .3s ease;
}

/* 整块热区：铺满卡片，点击跳转 om-detail.html */
.om6-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
  background: transparent;
  -webkit-user-drag: none;
}

.om6-hit:focus-visible {
  outline: 3px solid #4C8BFF;
  outline-offset: -3px;
}

.pd6-om .om6-text h3 {
  font-size: 26px;
  font-weight: 700;
  color: #4C8BFF;
  margin-bottom: 22px;
}

.pd6-om .om6-text p {
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}

.om6-btn {
  margin-top: 36px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
  background: #203D7F;
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.om6-btn:hover {
  background: #3A78EC;
}

.om6-btn svg {
  width: 18px;
  height: 18px;
}

/* 图片裁切容器：hover 时内部图片微放大，超界不溢出圆角 */
.om6-media {
  overflow: hidden;
  border-radius: 4px;
}

.om6-media img {
  width: 100%;
  display: block;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.pd6-om:hover .om6-media img {
  transform: scale(1.03);
}

.pd6-om:hover {
  box-shadow: 0 12px 30px rgba(20, 30, 60, .10);
}

.pd6-om:hover .om6-btn{
  transform: rotate(0deg);
  transition: transform .3s ease;
  background: #4477f3;
}

/* 表单灰底变体 */
.contact-sec.on-gray {
  background: #EFEFEF;
}

/**** products 页 结束 ****/


/**** 联系页 11Contact 开始 ****/
.ct11-wrap {
  width: 1510px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

.ct11-hero {
  height: 660px;
  background: #0A1428 center / cover no-repeat;
  overflow: hidden;
}

.ct11-title {
  padding-top: 208px;
  font-size: 64px;
  line-height: 82px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.ct11-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  font-size: 15px;
  color: #E6ECF5;
}

.ct11-line {
  width: 54px;
  height: 1px;
  background: #9DB3D6;
}

.ct11-form-sec {
  background: #fff;
  display: flow-root;
}

.ct11-card {
  margin-top: -159px;
  position: relative;
  background: #f7f9fb;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-radius: 24px;
  padding: 74px 86px 67px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.ct11-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 51px;
  row-gap: 51px;
}

.ct11-field label {
  display: block;
  margin-bottom: 14px;
  font-size: 16px;
  color: #3A3F4A;
}

.ct11-field .req {
  color: #E2574C;
}

.ct11-field input {
  width: 100%;
  height: 67px;
  border: 1px solid #ECEEF3;
  border-radius: 8px;
  background: #fff;
  padding: 0 24px;
  font-size: 15px;
  color: #1F2937;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .03);
}

.ct11-field input:focus {
  outline: none;
  border-color: #4C8BFF;
}

.ct11-hint {
  margin-top: 66px;
  font-size: 16px;
  color: #3A3F4A;
}

.ct11-textarea {
  display: block;
  width: 100%;
  height: 277px;
  margin-top: 17px;
  border: 1px solid #ECEEF3;
  border-radius: 8px;
  background: #fff;
  padding: 22px 24px;
  font-size: 15px;
  color: #1F2937;
  resize: vertical;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .03);
}

.ct11-textarea:focus {
  outline: none;
  border-color: #4C8BFF;
}

.ct11-submit {
  margin-top: 41px;
  width: 205px;
  height: 63px;
  border-radius: 6px;
  background: #343434;
  color: #fff;
  font-size: 15px;
  transition: background .25s ease;
}

.ct11-submit:hover {
  background: #4C8BFF;
}

.ct11-contacts {
  background: #fff;
  padding-top: 113px;
}

.ct11-gst {
  font-size: 42px;
  font-weight: 700;
  color: #111;
}

.ct11-gst-sub {
  margin-top: 24px;
  font-size: 16px;
  color: #555;
}

.ct11-gst-line {
  height: 1px;
  background: #DBDBDB;
  margin-top: 45px;
}

.ct11-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 74px;
}

.ct11-ccard {
  border-radius: 16px;
  background: linear-gradient(135deg, #FBFCFE 0%, #E9EDF9 55%, #DCE2F5 100%);
  padding: 53px 56px 24px 64px;
  min-height: 275px;
}

.ct11-cico {
  width: 38px;
  height: 38px;
}

.ct11-ccard h3 {
  margin-top: 36px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #111;
}

.ct11-ccard p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 20px;
  color: #4A4F5A;
}

/* 图标与首行文字垂直居中对齐（行高 20px，图标 18px → 上留 1px） */
.ct11-ccard p img,
.ct11-ccard p svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  object-fit: contain;
}

.ct11-ccard p:first-of-type {
  margin-top: 30px;
}

.ct11-ccard a {
  color: #4A4F5A;
}

.ct11-ccard a:hover {
  color: #4C8BFF;
}

.ct11-map {
  height: 668px;
  margin-top: 110px;
  background: #D5D5D5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #4A4A4A;
  letter-spacing: 6px;
}

.ct11-cta {
  background: #203D7F;
  padding: 46px 0;
}

.ct11-cta-wrap {
  width: 1776px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ct11-cta h2 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}

.ct11-cta-form {
  flex: none;
  width: 732px;
  height: 88px;
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 19px 0 0;
}

.ct11-cta-form input {
  flex: 1;
  height: 100%;
  padding: 0 20px 0 62px;
  font-size: 15px;
  color: #1F2937;
  background: transparent;
}

.ct11-cta-form input::placeholder {
  color: #9AA3AF;
}

.ct11-cta-form button {
  flex: none;
  width: 156px;
  height: 50px;
  border-radius: 25px;
  background: #4C8BFF;
  color: #fff;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: background .25s ease;
}

.ct11-cta-form button:hover {
  background: #3A78F0;
}

/**** 联系页 11Contact 结束 ****/

/**** 光伏运维详情 7OM 开始 ****/
.om7-page {
  background: #fff;
}

.om7-top {
  background: linear-gradient(180deg, #EAF3FB 0%, #FDFEFF 320px, #FFFFFF 560px);
}

.om7-wrap {
  width: 1510px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding-bottom: 110px;
}

.om7-back {
  margin-top: 200px;
}

.om7-back svg {
  width: 24px;
  height: 24px;
}

.om7-title {
  padding-top: 107px;
  font-size: 42px;
  line-height: 57px;
  font-weight: 700;
  color: #0B0B0B;
}

.om7-intro {
  margin-top: 25px;
  max-width: 1462px;
  font-size: 16px;
  line-height: 30px;
  color: #595959;
}

.om7-tabs {
  display: flex;
  margin-top: 44px;
}

.om7-tab {
  position: relative;
  flex: 1;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  background: #F5F5F5;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.om7-tab + .om7-tab {
  border-left: 1px solid #fff;
}

.om7-tab.active {
  background: #4C8BFF;
  color: #fff;
  font-weight: 500;
}

.om7-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top-color: #4C8BFF;
  border-bottom: none;
}

.om7-subtitle {
  margin-top: 80px;
  padding-left: 18px;
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: #4C8BFF;
}

.om7-subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 20px;
  background: #4C8BFF;
}

.om7-sec-p {
  margin-top: 25px;
  font-size: 16px;
  line-height: 30px;
  color: #595959;
}

.om7-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 35px;
  row-gap: 30px;
  grid-template-rows: 394px 394px 444px 394px 394px;
}

.om7-empty {
  margin-top: 50px;
  padding: 60px 20px;
  text-align: center;
  color: #9aa4b2;
  font-size: 15px;
  background: #f6f8fb;
  border-radius: 14px;
}

.om7-row {
  display: contents;
}

.om7-photo {
  border-radius: 12px;
  overflow: hidden;
}

.om7-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.om7-text {
  background: #F5F5F5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 50px;
}

.om7-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.om7-text p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 25px;
  color: #595959;
}

.om7-cta {
  margin-top: 116px;
  padding: 41px 0;
}

/**** 光伏运维详情 7OM 结束 ****/

/**** 内页 Banner 统一组件（20261021：img 引入 + 统一文字样式） ****/

.page-hero {
  --ph-title: 46px;
  position: relative;
  height: 660px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0A1428;
  color: #fff;
}

/* 图片层：整图铺满裁切，替代原 background-image */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: 135px;
}

/* 眉标：文字 + 46px 细线 */
.page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  color: inherit;
}

.page-hero__eyebrow::after {
  content: "";
  flex: none;
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: .75;
}

/* 主标题：7 个内页统一字号 / 行高 / 字重 */
.page-hero__title {
  margin: 0;
  max-width: 900px;
  font-size: var(--ph-title);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}

/* 浅色配图上的深色文字（solution / about） */
.page-hero--ink { color: #14161F; }
.page-hero--navy { color: #203D7F; }


/**** 搜索结果页 Search 开始 ****/
/* 搜索页只新增"容器/切换"样式；三种结果卡片分别沿用
   products 的 .pd6-card、blog 的 .bl8-card、projects 的 .case-row，
   保证与各自栏目板块视觉一致，后续换数据不用改样式 */

.sr-box {
  margin-top: 46px;
}

/* Tab 行：视觉与 blog 列表页 .bl8-tab 一致，多一个结果数徽标 */
.sr-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sr-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 25px;
  border: none;
  border-radius: 10px;
  background: #F1F1F1;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s ease;
}

.sr-tab:hover {
  color: #4C8BFF;
}

.sr-tab.active {
  background: #4C8BFF;
  color: #fff;
}

.sr-tab:focus-visible {
  outline: 2px solid #4C8BFF;
  outline-offset: 2px;
}

.sr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: #4C8BFF;
  font-size: 13px;
  font-weight: 600;
  transition: background .25s ease, color .25s ease;
}

/* 蓝底上把徽标翻成白底蓝字，半透明白在浅色背景里几乎不可见 */
.sr-tab.active .sr-num {
  background: #fff;
  color: #4C8BFF;
}

.sr-summary {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: #17181A;
}

.sr-summary b {
  color: #4C8BFF;
  font-weight: 600;
}

.sr-pane {
  display: none;
  margin-top: 40px;
}

.sr-pane.is-active {
  display: block;
}

/* 关键词命中高亮 */
.sr-hl {
  color: #4b8aff;
  padding: 0 2px;
}

/* 产品结果：网格 + products 的 .pd6-card */
.sr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* products 页的白卡铺在灰底上，搜索页容器是白底，
   这里补一圈极浅边框 + 轻投影，卡片边界才看得出来 */
.sr-grid .pd6-card {
  display: block;
  border: 1px solid #EEEFF2;
  box-shadow: 0 6px 18px rgba(23, 24, 28, .05);
}

.sr-grid .pd6-card:hover {
  border-color: transparent;
}

/* 产品的原图比例各不相同（竖版组件 / 横版逆变器），
   统一 logo 行与图片区高度并 contain 居中，四列才不会参差 */
.sr-grid .pd6-card-logo {
  height: 30px;
  padding: 20px 12px 6px;
  box-sizing: content-box;
}

.sr-grid .pd6-card-logo img {
  max-height: 30px;
  width: auto;
}

.sr-grid .pd6-card-img {
  height: 210px;
  padding: 8px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-grid .pd6-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sr-cat {
  padding: 0 20px 20px;
  margin-top: -12px;
  text-align: center;
  font-size: 13px;
  color: #8B8B8B;
}

/* 新闻结果：直接沿用 .bl8-grid（3 列），只去掉与 tab 之间的多余间距 */
.sr-pane .bl8-grid {
  margin-top: 0;
}

/* 项目结果：沿用 .case-row，行间距改为同一 pane 内的统一间距 */
.sr-pane .case-row {
  margin-top: 24px;
}

.sr-pane .case-row:first-child {
  margin-top: 0;
}

/* 分页：沿用 projects 的 .pagination */
.sr-box .pagination {
  justify-content: center;
  margin-top: 50px;
}

.sr-box .pagination.is-hide {
  display: none;
}

/* 无结果 */
.sr-empty {
  display: none;
  padding: 72px 20px 76px;
  text-align: center;
}

.sr-empty.is-show {
  display: block;
}

.sr-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #F1F1F1;
  color: #4C8BFF;
}

.sr-empty-ico svg {
  width: 32px;
  height: 32px;
}

.sr-empty h4 {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 600;
  color: #17181C;
}

.sr-empty p {
  margin-top: 12px;
  font-size: 15px;
  color: #8B8B8B;
}

/* 被关键词过滤掉的卡片：用 class 而不是 hidden 属性，
   便于分页逻辑复用同一套显示/隐藏 */
.sr-item.is-hidden {
  display: none;
}

/**** 搜索结果页 Search 结束 ****/

/* 顶部对齐（contact：标题上移，留出下方表单卡叠压空间） */
.page-hero--top {
  align-items: flex-start;
}

.page-hero--top .page-hero__inner {
  padding-top: 208px;
  padding-bottom: 0;
}

/* contact：大写特大标题 + 副标题 */
.page-hero--upper .page-hero__title {
  --ph-title: 60px;
  max-width: 860px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-hero__sub {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
}

.page-hero__sub::before {
  content: "";
  flex: none;
  width: 54px;
  height: 1px;
  background: rgba(157, 179, 214, .9);
}



/**** 咨询弹窗 开始 ****/
.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

.consult-modal.open {
  display: block;
}

.consult-mask {
  position: absolute;
  inset: 0;
  background: rgba(9, 17, 36, .55);
  opacity: 0;
  transition: opacity .3s ease;
}

.consult-modal.open .consult-mask {
  opacity: 1;
}

.consult-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(1060px, calc(100% - 48px));
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: #f7f9fb;
  border-radius: 24px;
  padding: 58px 72px 50px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .32);
  opacity: 0;
  transition: opacity .3s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
}

.consult-modal.open .consult-dialog {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.consult-body {
  overflow-y: auto;
}

.consult-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.consult-close:hover {
  background: #2B6BE0;
  border-color: #2B6BE0;
  color: #fff;
}

.consult-dialog .ct11-grid {
  row-gap: 30px;
}

.consult-dialog .ct11-field input {
  height: 56px;
}

.consult-dialog .ct11-hint {
  margin-top: 30px;
}

.consult-dialog .ct11-textarea {
  height: 170px;
  margin-top: 12px;
}

.consult-dialog .ct11-submit {
  margin-top: 28px;
  width: 165px;
  height: 54px;
}

body.consult-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .consult-mask,
  .consult-dialog {
    transition: none;
  }
}
/**** 咨询弹窗 结束 ****/


/* about 锚点定位偏移(避开固定头部) */
#profile, #history, #certs { scroll-margin-top: 92px; }

/* 首页项目卡整卡为 a 标签 */
.project-slide { display: block; color: inherit; text-decoration: none; }

/* 首页优势卡整卡为 a 标签(样式保持不变) */
.adv-swiper a.adv-card { text-decoration: none; color: inherit; cursor: pointer; }