/* ===================================
    Crafto - Bisiness
====================================== */

/* font —— 思源黑体（Source Han Sans CN）
   全站正文与标题都走这两个变量（style.css 里 .alt-font / .primary-font / body
   都引用它们），所以只改这两处就能覆盖所有文字；图标字体（feather、
   bootstrap-icons、Font Awesome、themify）各自单独声明，不受影响。

   字重映射：原始素材只有下面这几档静态字重，按实际字重声明，
   600/700 共用 BOLD，800/900 共用 HEAVY。
   路径用相对 ../font/，这样站点部署在子目录下也能取到。 */
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-EXTRALIGHT.OTF") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-LIGHT.OTF") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-NORMAL.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-MEDIUM.OTF") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-BOLD.OTF") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SourceHanSansCN";
  src: url("../font/SOURCEHANSANSCN-HEAVY.OTF") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --alt-font: 'SourceHanSansCN', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --primary-font: 'SourceHanSansCN', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* variable */

:root {
  --base-color: #c00;
  --dark-gray: #232323;
  --medium-gray: #666666;
  --primary-font: 'SourceHanSansCN', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --alt-font: 'SourceHanSansCN', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --majorelle-blue: var(--base-color);
}

/* reset */

body {
  font-size: 17px;
  line-height: 32px;
}

/* header */

/* header .navbar-brand img {
    height: 200px;
    width: auto;
} */

.navbar .navbar-nav .nav-link {
  font-size: 1.4rem;
  font-weight: 600;
}

.sticky .header-transparent .header-button .btn {
  color: var(--dark-gray);
  border-color: var(--dark-gray);
}

.sticky .header-transparent .header-button .btn:hover {
  border-color: var(--dark-gray);
  color: var(--white);
  background: var(--dark-gray);
}

header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
  color: var(--white);
}

/* accordion style 02 */

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
  background-color: #f5f5f5;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--dark-gray);
}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a {
  color: var(--base-color);
}

/* bg color */

.bg-gradient-sherpa-blue-black {
  background-image: linear-gradient(180deg, #000000 11.48%, rgba(0, 0, 0, 0.549) 50.97%, rgba(0, 0, 0, 0.51) 100%);
}

.bg-gradient-sherpa-black-blue {
  background-image: linear-gradient(to right top, #232323, #262223, #48232c, #6d2222, #8c2326);
}

/* bg transparent color */

header .navbar-brand img .bg-base-color-transparent {
  background-color: rgba(214, 87, 87, 0.8);
}

/*  tabs style 05  */

.tab-style-05 .nav-tabs > li.nav-item {
  letter-spacing: -0.5px;
}

/* accordion */

.accordion .accordion-item .accordion-header .accordion-title i {
  top: 52%;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 25px;
}

/*  progress bar style 01  */

.progress-bar-style-01 .progress .progress-bar-title {
  bottom: 15px;
}

/* page title */

.page-title-extra-large h1 {
  font-size: 4.7rem;
  line-height: 4.7rem;
}

/* separator line */

.separator-line-9px {
  height: 9px;
}

/* tag */

.tag-cloud a {
  padding-top: 5px;
  padding-bottom: 9px;
}

/* blog comment */

.blog-comment li .btn-reply {
  padding-top: 5px;
  padding-bottom: 7px;
}

/* number pagination style 01 */

.pagination-style-01 .page-item .page-link {
  line-height: 42px;
}

.pagination-style-01 .page-item.active .page-link {
  background: var(--dark-gray);
  color: var(--white);
}

/* top right bottom left */

.bottom-minus-45px {
  bottom: -45px;
}

.right-minus-45px {
  right: -45px;
}

/* footer */

footer .footer-logo img {
  max-height: 26px;
}

footer ul li {
  margin-bottom: 0;
}

.footer-dark a:hover {
  color: var(--white);
}

/* model popup */

.mfp-bg {
  background: #000000;
  opacity: 0.7;
}

.index-img {
  background-image: url("../img/index-cisonly-3.png");
}

.about-img {
  background-image: url("../img/about-hero-2.jpg");
}

/* media query responsive */

@media (max-width: 1499px) {
  .navbar .navbar-nav .nav-link {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 1399px) {
  .navbar .navbar-nav .nav-link {
    padding-left: 13px;
    padding-right: 13px;
  }
  .sticky-wrap.shadow-in {
    left: 35px;
  }
}

@media (max-width: 1300px) {
  .sticky-wrap.shadow-in {
    left: 10px;
  }
}

@media (max-width: 991px) {
  .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
  }
  .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background: var(--dark-gray);
  }
  .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    width: calc(100% + 30px) !important;
    margin-left: -15px;
    padding: 10px 45px;
    margin-bottom: 0;
    margin-right: -15px;
  }
  .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
    padding-bottom: 17px;
  }
}

@media (max-width: 767px) {
  p {
    margin-bottom: 20px;
  }
  .page-title-extra-large h1 {
    font-size: 40px;
    line-height: 46px;
  }
}

/* Ripple Animation */

.ripple-background {
  position: absolute;
  transform: translate(-50%, -50%);
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: var(--base-color);
  animation: ripple 4s infinite;
  transform: scale(0);
}

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

.circle.small {
  width: 70px;
  height: 70px;
  animation-delay: 0s;
}

.circle.medium {
  width: 80px;
  height: 80px;
  animation-delay: 1s;
}

.circle.large {
  width: 100px;
  height: 100px;
  animation-delay: 2s;
}

.circle.xlarge {
  width: 150px;
  height: 150px;
  animation-delay: 3s;
}

.circle.xxlarge {
  width: 180px;
  height: 180px;
  animation-delay: 4s;
}

/* Connecting Line */

.connecting-line {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, transparent 50%, #cc0000 50%);
  background-size: 20px 2px;
  transform: rotate(45deg);
  animation: moveLine 1s linear infinite;
}

@keyframes moveLine {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 20px 0;
  }
}

.distance-indicator {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

/* Location Cards */

.location-card {
  position: absolute;
  top: 40px;
  left: 50px;
  z-index: 1;
  padding: 20px 20px;
  box-shadow: 0px 4px 92.8px rgba(0, 0, 0, 0.25);
}

.location-point {
  z-index: 2;
}

.tag-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background-color: rgba(211, 47, 47, 0.1);
  /* 使用半透明的红色背景 */
  color: #d32f2f;
  /* 红色文字 */
  font-size: 12px;
  transition: all 0.3s ease;
}

.tag-pill:hover {
  background-color: #d32f2f;
  color: white;
}

.tag-pill span {
  font-size: 12px !important;
  line-height: 1.5;
}

.mission-vision-box {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.mission-vision-box:hover {
  transform: translateY(-10px);
  background-color: #f8f9fa !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.mission-vision-box:hover h2,
.mission-vision-box:hover .text-base-color {
  color: var(--base-color) !important;
  /* 使用你的主题基础色 */
}

.wave-animation-wrapper {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.wave-animation {
  position: relative;
  width: 100%;
  height: 100%;
}

.wave-top,
.wave-middle,
.wave-bottom {
  position: absolute;
  width: 200%;
  height: 60px;
  left: 0;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.wave-top {
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23cc0000" opacity=".25"/></svg>');
  animation: wave 15s linear infinite;
}

.wave-middle {
  bottom: 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23cc0000" opacity=".5"/></svg>');
  animation: wave 12s linear infinite;
}

.wave-bottom {
  bottom: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23cc0000" opacity=".75"/></svg>');
  animation: wave 9s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) scaleY(1.1);
  }
  100% {
    transform: translateX(-50%) scaleY(1);
  }
}

.hover-scale-110 {
  transition: transform 0.7s ease;
}

.hover-scale-110:hover {
  transform: scale(1.1);
}

.bg-base-color {
  background-color: var();
  /* 使用您的主题红色 */
}

.transition-transform {
  transition: transform 0.7s ease;
}

.duration-700 {
  transition-duration: 700ms;
}

.overflow-hidden {
  overflow: hidden;
}

/* 时间轴样式 */

.timeline-wrapper {
  position: relative;
  padding: 2rem 0;
}

.timeline-wrapper::before {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--base-color);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.timeline-block {
  position: relative;
  margin: 2rem 0;
}

.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--base-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
}

.timeline-content {
  width: calc(50% - 30px);
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.timeline-block:nth-child(odd) .timeline-content {
  margin-left: auto;
}

.timeline-block:nth-child(even) .timeline-content {
  margin-right: auto;
}

/* .map {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background: url(../img/map.jpg) center / contain no-repeat;
  background-size: contain;
} */
.container-map {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.map-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.map-img-mobile {
  display: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
/* 响应式调整 */

@media (max-width: 768px) {
  .timeline-wrapper::before {
    left: 20px;
  }
  .timeline-dot {
    left: 20px;
  }
  .timeline-content {
    width: calc(100% - 50px);
    margin-left: 50px !important;
  }
  .map {
    height: 900px;
    background: url("../img/map-phone.jpg") center/cover;
  }
}

.icon {
  display: inline-block;
  width: 33px;
  height: 33px;
  background-size: cover;
  /* 确保图片覆盖整个元素 */
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
}

.icon-ai {
  background-image: url("../img/icon/AI技术.jpg");
}

.icon-it {
  background-image: url("../img/icon/IT服务.png");
}

.icon-server {
  background-image: url("../img/icon/技术服务.jpg");
}

.icon-programme {
  background-image: url("../img/icon/解决方案2.jpg");
}

.icon-content {
  background-image: url("../img/icon/内容制作.jpg");
}

.icon-systems {
  background-image: url("../img/icon/系统运维.jpg");
}

.custom-input::placeholder {
  font-size: 17px;
}

.custom-textarea::placeholder {
  font-size: 17px;
}

.text-style-ul {
  background-color: rgb(255, 255, 255);
  width: 100px;
}

.dropdown-content {
  position: absolute;
  top: 75%;
  left: 1%;
  width: 100px;
  background: rgb(246, 246, 246);
  border: 1px solid rgb(230, 227, 227);
  border-top: none;
  border-radius: 0 0 4px 4px;
  display: none;
}

.lang-code {
  display: inline-block;
  text-align: center;
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 12px;
  margin-right: 8px;
}

.language-btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  color: rgb(0, 0, 0);
  text-transform: none;
  font-size: 1rem;
  padding: 10px 20px;
  background-color: rgb(246, 246, 246);
}

.lang-style {
  text-transform: none;
  border: 2px solid var(--light-gray);
  border-radius: 50px;
  justify-content: center;
  padding: 8px 10px;
}

#mainLanguageBtn {
  width: 40px;
  /* 固定宽度 */
  height: 30px;
  display: inline-flex;
  align-items: center;
}

.w-44 {
  width: 44% !important;
}

.page-title-padding-top {
  padding-top: 750px;
}

/* 验证码 */

.captcha-box {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.captcha-image {
  width: 160px;
  height: 50px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .captcha-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
} */

/* .message {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    height: 20px;
} */

.success {
  color: #4caf50;
}

.error {
  color: #f44336;
}

.top-leftimg-margin {
  margin-left: 0%;
}

.top-rightimg-margin {
  margin-left: 8.3%;
}

.bold-text-hr {
  font-weight: bold;
}

.text-color-hr {
  color: #000000;
}

.padding-left-hr-ul {
  padding-left: 0px;
}

.text-padding-left {
  padding-left: 3em;
  text-indent: -0.5em;
}

.w-1520px {
  width: 1520px !important;
}

.disabled {
  background-color: var(--dark-gray);
}

.undisabled {
  background-color: gray;
}

/* 未选择时的按钮样式 */

#submitBtn {
  background-color: rgb(82, 82, 82);
  color: rgb(230, 230, 230);
  cursor: not-allowed;
  border: none;
}

/* 选择后的按钮样式 */

#submitBtn:not(:disabled) {
  background-color: var(--dark-gray);
  color: white;
  cursor: pointer;
}

.custom-select {
  /* 移除默认箭头 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 自定义样式 */
  padding: 8px 32px 8px 12px;
  /* 右侧留出箭头空间 */
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  /* 添加自定义箭头（通过背景图片） */
  background-image: url("../images/custom-select.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* 可提取到CSS中的自定义样式 */

.error-icon {
  /* 可以自定义图标颜色和大小 */
  color: var(--base-color);
  font-size: 20px;
  transition: all 0.3s;
}

/* 主页鼠标变小手 */

.review-style-04[onclick] {
  cursor: pointer !important;
}

/* 兼容 Firefox */

@-moz-document url-prefix() {
  .custom-select {
    padding-right: 25px;
  }
}

/* ******business-solution****** */

/* 图片容器 */

.image-container {
  position: relative;
  display: inline-block;
}

/* 主图片样式 */

.main-image {
  display: block;
  width: 1500px;
  height: auto;
}

/* 悬停热区 */

.hotspot {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 0%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.2s;
  z-index: 2;
  /* 确保在图片上方 */
  display: flex;
  /* 启用 Flex 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  overflow: hidden;
  /* 防止涟漪动画溢出 */
}

/* 涟漪动画容器 - 确保占满父级并居中子元素 */

.ripple-background {
  position: relative;
  width: 0%;
  height: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 文字框样式 */

.info-box {
  position: absolute;
  width: 220px;
  padding: 8px;
  background-image: url(../img/index-business-solution-bg.png);
  /* border: 1px solid #ddd; */
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10;
  /* 确保在最上层 */
}

/* 热区聚焦时显示对应的文字框 */

.hotspot:hover + .info-box {
  opacity: 1;
  pointer-events: auto;
}

/* 热区红点 */

.circle-solution {
  position: absolute;
  border-radius: 50%;
  background: var(--base-color);
  animation: ripple 2s infinite;
  transform: scale(0);
}

.circle-solution.medium-2 {
  width: 40px;
  height: 40px;
  animation-delay: 0.5s;
  padding-left: 0 !important;
  /* 移除干扰定位的 padding */
  padding-bottom: 0 !important;
}

/* 热区位置 */

#hotspot1 {
  top: 32%;
  left: 26%;
}

#hotspot2 {
  top: 20%;
  left: 52%;
}

#hotspot3 {
  top: 25%;
  left: 80%;
}

#hotspot4 {
  top: 40%;
  left: 68%;
}

#hotspot5 {
  top: 60%;
  left: 77%;
}

#hotspot6 {
  top: 63%;
  left: 57%;
}

#hotspot7 {
  top: 63%;
  left: 33%;
}

#hotspot8 {
  top: 15%;
  left: 26%;
}

#hotspot9 {
  top: 38%;
  left: 50%;
}

/* 文字框位置 */

#info1 {
  top: 25%;
  left: 10%;
}

#info2 {
  top: 11%;
  left: 39%;
}

#info3 {
  top: 15%;
  left: 77%;
}

#info4 {
  top: 30%;
  left: 65%;
}

#info5 {
  top: 50%;
  left: 77%;
}

#info6 {
  top: 66%;
  left: 45%;
}

#info7 {
  top: 52%;
  left: 30%;
}

#info8 {
  top: 4%;
  left: 11%;
}

#info9 {
  top: 42%;
  left: 45%;
}

/* Zoom animation */

.animation-zoom {
  animation: zoom-in-zoom-out 4000ms linear 500ms infinite alternate both;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.circle-layout-container {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto 50px;
}

.center-circle {
  position: absolute;
  width: 90%;
  height: 90%;
  border: 4px solid var(--base-color);
  border-radius: 50%;
  top: 8%;
  left: 8%;
  /* transform: translate(-50%, -50%); */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.center-image {
  width: 40%;
  height: 40%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.corner-circle {
  position: absolute;
  width: 60%;
  height: 60%;
  background-color: var(--base-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  z-index: 2;
}

.corner-circle-gray {
  position: absolute;
  width: 60%;
  height: 60%;
  background-color: rgb(173, 173, 173);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
  z-index: 2;
}

/* 位置计算 */

.circle-top-left {
  top: calc(-25%);
  left: calc(-25%);
}

.circle-top-right {
  top: calc(-25%);
  left: calc(70%);
}

.circle-bottom-left {
  top: calc(65%);
  left: calc(-25%);
}

.circle-bottom-right {
  top: calc(65%);
  left: calc(70%);
}

.index-cut-image-1 {
  /* margin-left: 45px; */
  clip-path: polygon(100% 0%, 93% 100%, 0% 100%, 0% 0%);
  /*
      四个顶点坐标：
      1. 右上角 (100% 0%)
      2. 右下角 (100% 100%)
      3. 左下角 (30% 100%)  —— 控制下边宽度（30% 表示切掉 70%）
      4. 左上角 (0% 0%)
    */
}

.index-cut-image-2 {
  /* margin-left: -45px; */
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 7% 0%);
  /*
      四个顶点坐标：
      1. 右上角 (100% 0%)
      2. 右下角 (100% 100%)
      3. 左下角 (30% 100%)  —— 控制下边宽度（30% 表示切掉 70%）
      4. 左上角 (0% 0%)
    */
}

/* 图片容器设为相对定位（关键） */

.image-with-caption {
  position: relative;
  display: block;
}

/* 朦胧文字层样式 */

.index-caption-overlay-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 20px 5px 20px;
  /* margin-left: 45px; */
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  color: white;
  border-bottom-left-radius: 6px;
  /* 匹配图片圆角 */
  border-bottom-right-radius: 6px;
  /* backdrop-filter: blur(5px); 毛玻璃效果（可选） */
  clip-path: polygon(96% 0%, 93% 100%, 0% 100%, 0% 0%);
}

.index-caption-overlay-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 20px 5px 20px;
  /* margin-left: -45px; */
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  color: white;
  border-bottom-left-radius: 6px;
  /* 匹配图片圆角 */
  border-bottom-right-radius: 6px;
  /* backdrop-filter: blur(5px); 毛玻璃效果（可选） */
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 3% 0%);
}

/* 文字样式 */

.index-caption-overlay-1 h3 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.index-caption-overlay-2 h3 {
  font-size: 1.4rem;
  margin-bottom: 0px;
  padding-left: 15px;
}

.index-caption-overlay-2 .index-caption-childs {
  padding-left: 15px;
}

/* 文字跳动 */

.word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-50px) translateY(30px) scale(0.8);
  /* animation: wordEntry 0.8s forwards; */
  margin: 0 2px;
}

.word.animate {
  animation: wordEntry 0.8s forwards;
}

@keyframes wordEntry {
  0% {
    opacity: 0;
    transform: translate(-100px, -100px) scale(0.5) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

/* 为每个字设置不同的动画延迟 */

.word.animate:nth-child(1) {
  animation-delay: 0.1s;
}

.word.animate:nth-child(2) {
  animation-delay: 0.3s;
}

.word.animate:nth-child(3) {
  animation-delay: 0.5s;
}

.word.animate:nth-child(4) {
  animation-delay: 0.7s;
}

.word.animate:nth-child(5) {
  animation-delay: 0.9s;
}

/* 添加旋转动画 */

.rotate-animation {
  animation: rotate 15s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 主标题文字 */

.title-h2 {
  letter-spacing: 2px;
  /* background: linear-gradient(135deg, #6e8efb, #a777e3, #ff7eb3); */
  background: linear-gradient(135deg, var(--base-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow: 0 0 20px rgba(167, 119, 227, 0.3); */
  /* -webkit-text-stroke: 1px lightgray; */
  text-shadow: none;
  position: relative;
  /* 原来这里挂着 float 漂浮动画，已按要求去掉。
     但那支动画的 transform 顺带给 .title-h2 建了层叠上下文，
     标题下方那条 z-index:-1 的高亮条正是靠它才画得出来；
     去掉动画后补 z-index:0 把上下文补回来，否则高亮条会沉到页面底色后面。 */
  z-index: 0;
  /* display: inline-block; */
  padding: 0 30px;
}

.title-h2-gray {
  color: var(--light-gray);
  background: linear-gradient(135deg, transparent);
}

.bg-cabaret-red {
  background-color: #d94f6f;
}

.btn-gradient-orange-sky-blue {
  background-image: linear-gradient(to right, #f36b4a, #584ccb, #f36b4a);
  background-size: 200% auto;
  color: var(--white);
}

/* 浮动动画 */

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotateX(5deg);
  }
  50% {
    transform: translateY(-15px) rotateX(5deg);
  }
}

/* SWM icon图片颜色变更 */

.hover-box:hover .hover-box-img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.feature-box:hover .welfare-img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.hover-box .hover-box-img-selected {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* 波浪动画容器 */

.wave-text {
  display: inline-block;
  position: relative;
}

/* 波浪动画实现 */

.wave-text span {
  display: inline-block;
  animation: wave 0.8s ease-in-out infinite;
  animation-delay: calc(var(--char-index) * 0.1s);
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5em);
  }
}

.box-shadow-large-hover:hover {
  background-color: var(--base-color);
  color: white;
}

.box-shadow-large-hover:hover .color-hover-change {
  color: white;
}

.box-shadow-large-hover:hover span img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.box-shadow-large-hover:hover .business-sevice-img-hover {
  /* filter: brightness(0) invert(1); */
  transition: filter 0.3s ease;
}

.box-shadow-large-hover:hover .business-sevice-img-hover-1 {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* 单个字符跳动动画 */

@keyframes char-wave {
  0%,
  40%,
  100% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-6px);
  }
  30% {
    transform: translateY(3px);
  }
}

.char-anim-text {
  display: inline-block;
  position: relative;
}
.char-anim-text::after {
  content: "";
  background-image: url("../images/highlight-separator.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 14px;
  position: absolute;
  bottom: -26px;
  left: 0;
}
.index-hover-text-white {
  color: black;
}

.index-hover-text-white:hover {
  color: white;
}

.circle-container {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /* 圆形 */
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 确保图片不会超出圆圈 */
}

/* 首页箭头悬停变色 */

.index-a-hove-fas:hover .process-step-icon {
  background-color: white !important;
}

.index-a-hove-fas:hover .process-step-icon i {
  color: var(--base-color) !important;
}

.container-title {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* .title-h2 用 background-clip:text 上色，而背景的绘制范围就是 padding box。
   .fs-50 的行盒只有 52px，字形本身却有 56px —— "g" 这类下伸字母露在盒外的部分
   没有背景可画，就被削成了平底。补纵向 padding 把绘制区撑开即可。
   .container-title 是绝对定位 + translate 居中的，内容盒顶边恒在
   (容器中心 - 41px)，与 padding 无关，所以这样加不会挪动任何布局。
   用 em 是为了跟着 html 基准字号缩放（991px 以下 14px、767px 以下 12px）。 */
.container-title .title-h2 {
  padding-top: 0.16em;
  padding-bottom: 0.16em;
}

.container-title .line {
  display: inline-block;
  position: absolute;
  z-index: -1;
  width: calc(100% - 40px);
  left: 50%;
  /* 原为 85%：那时包含块（padding box）等于内容盒。上面加了纵向 padding 后
     padding box 变高，85% 会跟着往下跑，所以改成相对内容盒恒定 ——
     50% + 0.35 × 行高，而 .fs-50 的行高 = 1.04em，故 0.35 × 1.04 ≈ 0.36em。 */
  top: calc(50% + 0.36em);
  transform: translate(-50%, -50%);
}
/* 我们的服务 */
.content-box {
  width: 100%;
  padding: 80px 80px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 20%, #f5f5f5 80%);
}
.content-card {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
}
.content-server {
  text-decoration: none;
  width: 31%;
  min-width: 280px;
  opacity: 0;
  transform: translateY(40px);
}
.content-making {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.row-cols-cum {
  display: flex;
  flex-wrap: wrap;
}

.row-cols-cum > * {
  flex: 0 0 50%;
}
/* hr  business-AItech  排序*/
.order-labor-last {
  order: 6 !important;
}
/* business */
.solution-title-1 {
  display: none !important;
}
.solution-title-2 {
  display: block !important;
}
/* 响应式调整 */
@media (min-width: 1499px) {
  .text-width-620px {
    width: 620px !important;
  }
  .padding-left-manager {
    text-align: right;
  }
  .padding-right-img {
    padding-right: 90px;
  }
  .padding-left-img {
    padding-left: 90px;
  }
  .w-1400px {
    width: 1400px !important;
  }
}
@media (min-width: 1200px) {
  .col-xl-2-1 {
    flex: 0 0 auto;
    width: 20%;
  }
}
@media (max-width: 1200px) {
  .content-server {
    width: 30% !important;
  }
}
@media (max-width: 992px) {
  .text-padding-left {
    padding-left: 1em;
    text-indent: -0.5em;
  }
  .text-width-620px {
    width: auto !important;
    text-align: center;
  }
  .index-cut-image-1,
  .index-caption-overlay-1 {
    clip-path: none !important;
  }
  .index-cut-image-2,
  .index-caption-overlay-2 {
    clip-path: none !important;
  }
}

@media (min-width: 992px) {
  .text-width-620px {
    width: 490px !important;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33% !important;
  }
}
@media (min-width: 992px) {
  .padding-left-manager {
    text-align: right;
  }
  .w-1400px {
    width: auto !important;
  }
  .padding-right-img {
    padding-right: 40px;
  }
  .padding-left-img {
    padding-left: 40px;
  }
  img {
    max-width: auto;
  }
  .w-44 {
    width: 44% !important;
  }
}
@media (max-width: 992px) {
  .padding-right-img {
    padding-right: 0px;
  }
  .padding-left-img {
    padding-left: 20px;
  }
  .padding-left-manager {
    text-align: right;
  }
  .w-44 {
    width: 90% !important;
  }
  .w-1400px {
    width: 400px !important;
  }
  .plan-card {
    padding-left: 60px;
  }
  .content-card {
    flex-direction: column;
    align-items: center;
  }
  .content-server {
    width: 60% !important;
  }
  .content-making {
    display: grid;
    grid-template-columns: none !important;
  }
  .row-cols-cum {
    flex-direction: column;
  }
  .row-cols-cum > * {
    flex: 0 0 100%;
  }
  .order-labor-last {
    order: 0 !important;
  }
  .d-flex-column {
    display: flex !important;
    flex-direction: column !important;
  }
  .solution-title-2 {
    display: none !important;
  }
  .solution-title-1 {
    display: block !important;
  }
  .about-img {
    background-image: url("../img/about-hero-2-phone.jpg");
  }
  .w-full-width {
    width: 100% !important;
  }
  .container-mobile {
    max-width: none !important;
  }
  .map-img {
    display: none;
  }
  .map-img-mobile {
    display: block;
  }
  .product-manual {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* .title-h2 {
    font-size: 3.5rem;
  } */
  .home-font {
    font-size: 1.9rem;
  }
  .txt-left {
    text-align: left;
  }
  #mainLanguageBtn {
    min-width: 30px;
    /* 固定宽度 */
    height: 30px;
  }
  .lang-code {
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
    margin-right: 8px;
  }
  .language-btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    color: white;
    text-transform: none;
    font-size: 1rem;
    padding: 10px 20px;
    background-color: var(--light-gray);
  }
  .lang-style {
    text-transform: none;
    border: 2px solid var(--light-gray);
    border-radius: 50px;
    justify-content: center;
    padding: 8px 10px;
  }
  .mr-top {
    margin-right: 8% !important;
  }
  .ml-top {
    margin-left: 10px !important;
  }
  .index-img {
    background-image: url("../img/index-cisonly-3-phone.png");
  }
  .about-img {
    background-image: url("../img/about-hero-2-phone.jpg");
  }

  .content-making {
    display: grid;
    grid-template-columns: none !important;
  }
  .content-card {
    flex-direction: column;
    align-items: center;
  }
  .content-server {
    width: 60% !important;
  }
  .row-cols-cum {
    flex-direction: column;
  }
  .row-cols-cum > * {
    flex: 0 0 100%;
  }
  .order-labor-last {
    order: 0 !important;
  }
}

/* 默认情况下（桌面端） - 隐藏顶部搜索，显示导航栏搜索 */

.nav-item.mt-25px.me-10px {
  display: none;
}

/* 默认样式（桌面端） */

.search-form-box h2 {
  font-size: 1.5rem;
}

.search-input::placeholder {
  font-size: 1rem;
}

@media (max-width: 992px) {
  .nav-item.mt-25px.me-10px {
    display: block;
  }
  .navbar-nav .nav-item.ms-30px {
    display: none !important;
  }
  .search-form-box h2 {
    font-size: 1.3rem;
  }
  .search-input::placeholder {
    font-size: 0.9rem;
  }
}

.product-manual {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.product-manual th,
.product-manual td {
  border: none;
  text-align: center;
  vertical-align: middle;
}

.product-manual th {
  background-color: lightgray;
  color: #333;
  font-weight: bold;
  min-width: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th,
td {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
}

th {
  background-color: lightgray;
  color: #333;
  font-weight: bold;
  min-width: 50px;
}

tr:nth-child(even) {
  text-align: center;
  background-color: #f5f5f5;
}
.Partners {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================
   imageFORCE 系列产品卡片（index.html 第二节）
   —— hover 时自分隔线起向右铺「左浅右深」渐变，左侧产品图区保持白色；
      常态即在卡片左下角显示 decorate.png 丝带装饰；
      产品图以正片叠底去掉 JPG 白底，让丝带能从机器后方穿过。
      同一渐变也用于后面两节的卡片 hover 背景。
   ========================================================== */

/* hover 渐变的唯一来源，三处卡片共用：
   0% #e68b41 浅端 / 50% #d3582d / 100% #c02418 深端。
   120deg 为斜向角度，浅端落左上、深端落右下。
   白字对比度 2.6~6.0:1：中右段达标，最浅端低于大字线 3:1 */
:root {
  --if-hover-gradient: linear-gradient(
    120deg,
    #e68b41 0%,
    #d3582d 50%,
    #c02418 100%
  );
}

/* 渐变层：锚定在 .feature-box-content 左边缘，
   与 .border-start 分隔线天然重合，任意屏宽都不错位 */
.if-series .feature-box-content {
  position: relative;
  /* .hover-box * 会给所有后代加 will-change:transform，把这层变成层叠上下文，
     渐变会被抬到丝带之上。这里取消，让 ::before 回到卡片自身的层叠上下文里 */
  will-change: auto;
}

.if-series .feature-box-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 向外溢出，交由卡片的 overflow-hidden 裁切，
     避免渐变色盖不满卡片上下内边距而露出白边 */
  left: 0;
  top: -200px;
  right: -200px;
  bottom: -200px;
  opacity: 0;
  background-image: var(--if-hover-gradient);
  transition: opacity 0.4s cubic-bezier(0.12, 0, 0.39, 0);
}

.if-series .feature-box:hover .feature-box-content::before {
  opacity: 1;
}

/* 分隔线：浅橙背景上白线会看不见，改用暖深色细线 */
.if-series .feature-box:hover .feature-box-content {
  border-color: rgba(120, 40, 10, 0.28) !important;
}

/* 正文全白不降透明度 —— 橙底本身对比度已偏低，不再削弱 */
.if-series .feature-box:hover .text-light-opacity {
  opacity: 1;
}

/* 浅色背景上的白字补偿：最浅端对比度仅 2.6:1，用投影托一层 */
.if-series .feature-box:hover .feature-box-content span {
  text-shadow: 0 1px 3px rgba(110, 30, 0, 0.38);
}

/* 产品图：正片叠底让 JPG 的白底透出后方丝带。
   .hover-box * 的 will-change 会给 .feature-box-icon 建层叠上下文，
   那样图片只能和这层（背景透明）混合，等于没效果，故一并取消 */
.if-series .feature-box-icon {
  will-change: auto;
}

.if-series .feature-box-icon img {
  mix-blend-mode: multiply;
}

/* 丝带装饰：常态显示，置于渐变层之上以免被渐变从中间截断 */
.if-series .feature-box .if-ribbon {
  top: auto;
  bottom: 0;
  left: 0;
  width: 62%;
  height: 100%;
  opacity: 1;
  background-color: transparent;
  background-image: url("../img/decorate.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  /* decorate.png 为 400×224 宽幅图，内容占 X 0~85%、Y 23~96% */
  background-size: 88% auto;
  -webkit-transition: none;
  transition: none;
}

/* 991px 以下卡片改为上下堆叠，产品图与文字各占一行，
   此时左下角的丝带会正压在正文上，故隐藏 */
@media (max-width: 991px) {
  .if-series .feature-box .if-ribbon {
    display: none;
  }
}

/* ==========================================================
   index.html 第三、四节的卡片 hover 背景
   —— 原为纯色品牌红 #c00，改为与产品卡片右侧相同的橙色渐变。
      这两个类（box-shadow-large-hover / feature-box-overlay.bg-base-color）
      在其他页面也被使用，故用 .if-gradient-hover 限定作用域，不影响他页。
   ========================================================== */

/* 四大核心优势：卡片自身 background-color 由 #c00 换成渐变 */
.if-gradient-hover .box-shadow-large-hover:hover {
  background-color: transparent;
  background-image: var(--if-hover-gradient);
}

/* 行业成功案例：hover 时淡入的遮罩层由 bg-base-color 换成渐变 */
.if-gradient-hover .feature-box-overlay.bg-base-color {
  background-color: transparent;
  background-image: var(--if-hover-gradient);
}

/* ==========================================================
   advantage_reliable.html 四大优势导航菜单（第 124 行那一行）
   —— 四项背景由纯色 #c00 改为与卡片相同的橙色渐变；
      并补上桌面宽度缺失的内边距，避免图标紧贴色块左沿。
      注意：本页 688~748 行还有四处同名 overlay（佳创助手草稿区），
      故用 .adv-nav 限定作用域，不波及那里。
   ========================================================== */

/* hover / 选中态的遮罩由 bg-base-color 换成渐变 */
.adv-nav .feature-box-overlay.bg-base-color {
  background-color: transparent;
  background-image: var(--if-hover-gradient);
}

/* 框架的 lg-p-30px 定义在 @media (max-width:1199px) 内，
   桌面宽度下不生效，导致图标贴边；这里补一层全宽度生效的内边距。
   下划线自带 mb-3，故底边内边距取得比顶边小，视觉上才上下等距 */
.adv-nav .feature-box {
  padding: 20px 16px 12px;
}

/* 导航项已改为 Bootstrap Tab 的 <button> 触发器，清掉浏览器默认按钮样式 */
.adv-nav button.feature-box {
  background: none;
  border: 0;
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* 选中项：.active 由 Bootstrap Tab 插件切换，渐变常显 */
.adv-nav .active .feature-box-overlay {
  opacity: 1;
}

/* 未选中时标题为品牌红 */
.adv-nav span.fs-30 {
  color: var(--base-color);
}

/* 选中项的文字与图标转为白色（hover 态由 .hover-box.dark-hover:hover 负责） */
.adv-nav .active span.fs-30 {
  color: #ffffff !important;
}

.adv-nav .active .hover-box-img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* 红色横线：常态为红色下划线；渐变浮现时（选中项 / hover 态）转为白色 */
.adv-nav .active .bg-red,
.adv-nav .feature-box:hover .bg-red {
  background-color: #ffffff;
}

/* ==========================================================
   solution_medical.html — 整页蓝色风格
   「痛点分析 / 解决方案 / 应用场景」三个主标题与下划线原本继承站点的红色
   （.text-red / .bg-cabaret-red），红色边框盒是行内 #cc0000，一并改蓝。
   蓝色取自《智慧医院折页》预览图的统计主色 #03a9eb
   （该图中出现最多、饱和度最高的品牌蓝，同族浅色 #b9e4f8）。
   ========================================================== */
/* 注意：三个行业页的正文 section 都叫 #service-loc，共用同一份 CSS，
   所以必须再用 body 上的页级类限定，否则规则会串页。 */
.page-medical #service-loc {
  /* 站点基色是 #c00（红），在本区块内换成医疗蓝，
     横幅 .bg-base-color 等一并用上 */
  --base-color: #03a9eb;
}
.page-medical #service-loc .text-red {
  color: #03a9eb !important;
}
.page-medical #service-loc .bg-cabaret-red {
  background-color: #03a9eb !important;
}

/* 「医院文印管理面临的困扰」横幅
   原为 w-40（容器 40% ≈ 528px）+ 48px 字号，11 个字约 528px，
   在笔记本（容器更窄）上会折成两行。改为按内容定宽 + nowrap。 */
.med-problem-banner {
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

/* ==========================================================
   solution_medical.html —「应用场景」小节
   —— 标题条为蓝色渐变 + 白字。
      色标直接取自 img/medical-bar.svg（横向 12 个色标浓缩为 5 个），配白字。
      与四大优势页的橙色标题按钮同一处理方式：保留素材原色调，接受低对比度
      （白字最深处 2.4:1、最浅处 1.4:1，均低于 WCAG 标准）。
      若日后要达标，需把色阶压到 #00628f → #007dae 或改用深色字。
   ========================================================== */
.med-scene-title {
  display: block;
  width: 65%;
  margin: 0 0 15px;
  padding: 10px 20px;
  text-align: left;
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* 改成两列网格后标题条变窄，长标题（如「病案室/体检中心」）会伸进原来
     57% 就开始变浅的区段，白字到末端几乎看不见。把浅色端压到 80% 之后，
     保证文字主体落在饱和蓝上。色标仍是 medical-bar.svg 的原色。 */
  background: linear-gradient(
    90deg,
    #00b3ec 0%,
    #2abdee 35%,
    #5cc9f1 65%,
    #a1daf6 85%,
    #bae2f8 100%
  );
}

/* 场景图文行：图在右时文字右对齐，与四大优势页保持一致 */
.med-scene .row { margin-bottom: 0; }

/* 「应用场景」两列网格：一行两个，文字在上、图在下；
   5 个场景中最后一个占满整行。
   用 flex + gap 而不是栅格 —— 栅格的列宽在加 gap 后会溢出。 */
.if-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 32px;
}
.if-2col-cell {
  flex: 0 0 auto;
  width: calc((100% - 40px) / 2);
  /* 套用与四大优势同款的小节面板：标题嵌在左上角，浅底 + 4px 渐变描边 */
  display: flex;
  flex-direction: column;
  border: 4px solid transparent;
  border-radius: 24px;
  background-image: linear-gradient(var(--panel-bg), var(--panel-bg)), var(--panel-stroke);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
}
.if-2col-wide {
  width: 100%;
}
.if-2col-cell .med-scene-title,
.if-2col-cell .edu-scene-title {
  /* 标题条不占满，右侧留出横线，与四大优势一致 */
  width: 80%;
  margin: 0;
}
.if-cell-text {
  margin: 0;
  padding: 18px 22px 16px;
  font-size: 21px;
  line-height: 32px;
  color: #4d4d4d;
}
.if-cell-figure {
  margin-top: auto; /* 图贴底，同排两张高度不同时也对齐 */
  padding: 4px 22px 22px;
  text-align: center;
}
.if-cell-figure img {
  display: inline-block;
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
}
.if-2col-wide .if-cell-figure img {
  max-height: 300px;
}

/* ==========================================================
   「售后服务 · 覆盖全国的售后服务网络」—— 医疗 / 教育 两页共用
   布局：横幅 + 同色边框盒 + 错位编号卡片。
   配色不写死，全部走页级变量（见 .page-medical / .page-education）：
     --svc-grad       横幅渐变（与该页小节标题条同源）
     --svc-card-bg    奇数卡底色
     --svc-card-bg-alt 偶数卡底色（略深一档，做出错位层次）
     --panel-stroke   外框渐变（与 .if-panel 描边同一支）
     --page-accent    卡片小标题的文字色
   ========================================================== */
.svc-banner {
  display: block;
  /* 主标题「售后服务」是 fs-52，此处压到 30px 以拉开层级 */
  width: 52%;
  margin: 34px auto 0; /* 与上方主标题留出间距 */
  padding: 12px 16px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  border-top-left-radius: 22px;
  border-bottom-right-radius: 22px;
  position: relative;
  z-index: 2;
  background: var(--svc-grad);
}

.svc-box {
  /* 与 .if-panel 同做法：两层背景叠出 4px 渐变描边，圆角不丢 */
  border: 4px solid transparent;
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin-top: -22px;
  background-image: linear-gradient(#ffffff, #ffffff), var(--panel-stroke);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  position: relative;
  z-index: 1;
}

/* 三张卡片之间的缝隙。
   注意：背景色画在 .col 自身上，所以必须用 gap/margin（而非 padding）
   才能在两张卡之间露出底色以外的空隙 —— 用 padding 只会把列内内容内推，
   色块仍铺满整列，看不出缝。
   列宽相应收窄 30px，配合 gap，总宽恰好 100%，不会溢出。 */
.svc-box .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* 卡片之间的缝隙，由 gap 统一控制 */
  margin-left: 0;
  margin-right: 0;
}
.svc-box .row > .col {
  /* gap 已占去 2×30px，三列各分得 (100% - 60px)/3 */
  flex: 0 0 auto;
  width: calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  padding-left: 0;
  padding-right: 0;
}

/* 卡片底色（原来写在行内，改成类以便两页换色） */
.svc-card {
  background-color: var(--svc-card-bg);
}
.svc-card-alt {
  background-color: var(--svc-card-bg-alt);
}

/* 编号水印：大字号、低透明度 */
.svc-num {
  color: var(--page-accent);
  opacity: 0.16;
}
.svc-num-alt {
  color: var(--page-accent);
  opacity: 0.1;
}

/* 卡片小标题：「快速响应 / 专业团队 / 特色服务」
   实测（417×256 的卡）：序号 90px 字号占 y30~120、x20~142；
   正文原来从 y124 起，标题就落在序号正下方，等于给标题单开了一行。
   这里把正文区上提到 y58 起、标题再左移 35px 探进序号右半边 ——
   标题压在序号上，序号退成纯背景。 */
.svc-box .feature-box-content {
  padding-top: 58px !important;
}
.svc-title {
  display: block;
  position: relative;
  z-index: 1; /* 压在序号之上 */
  margin: 0 0 8px 35px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--page-accent);
}

/* 括号注解：小字号、弱化，上下收紧 */
.svc-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
  color: #8a8a8a;
}

/* ==========================================================
   solution_education.html —「产品与服务」小节
   —— 色相取自 img/edu-bar.svg 的纯色 #df0011（白字 5.07:1 达标）。
      该 SVG 本身是纯色而非渐变，这里围绕它做一条同色系渐变，
      但收紧幅度以保证白字全段达标：#b8000e 6.9:1 / #df0011 5.1:1 / #e01f2c 4.5:1
   ========================================================== */
.edu-scene-title {
  display: block;
  width: 65%;
  margin: 0 0 15px;
  padding: 10px 20px;
  text-align: left;
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(90deg, #b8000e 0%, #df0011 55%, #e01f2c 100%);
}

/* ==========================================================
   solution_auto.html —「佳能解决方案」三小节
   色系为自定的暖色调（焦糖橙），与医疗页蓝、教育页红并列：
   #7c2d12 / #9a3412 / #b8430f，白字对比度 9.4:1 / 7.3:1 / 5.5:1，全段达标。
   标题设计取自素材「保时捷-01/02.png」：编号徽标 + 色条标题 + 正文 +
   「解决方案」小标题 + 正文 + 配图。
   ========================================================== */
.auto-sol-item { margin-top: 60px; }

.auto-sol-head {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

/* 描边大字编号，呼应素材里的 01/02/03 徽标 */
.auto-sol-num {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--auto-base);
  margin-right: 18px;
  flex: 0 0 auto;
}

/* 痛点标题条：暖色渐变 + 白字 */
.auto-sol-bar {
  display: block;
  flex: 1 1 auto;
  padding: 12px 22px;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  /* 让 #e26b1b 覆盖文字所在的左半段（标题最长 15 字，约到条的 60%），
     浅端只留在文字之后的尾巴上 —— 那一段白字对比度只有 2.4:1 */
  background: linear-gradient(90deg, #c05a12 0%, var(--auto-base) 50%, #ef8f45 100%);
}

.auto-sol-text {
  font-size: 20px;
  line-height: 1.9;
  color: #444444;
  margin: 0 0 20px;
}

.auto-sol-sub {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  color: var(--auto-deep);
  margin: 6px 0 14px;
}

/* 配图统一加暖色描边，呼应素材里的红框。
   本页是解决方案展示、图仅为辅证，故限宽居中，不占满整行
   （素材原设计是整幅宽图，那会让图喧宾夺主） */
.auto-sol-figure {
  text-align: center;
}
.auto-sol-figure img {
  width: 100%;
  max-width: 460px;
  border: 3px solid var(--auto-base);
  border-radius: 4px;
}

/* ==========================================================
   solution_auto.html —「应用场景」六张卡片
   边框卡片风格；边框与主色同族（暖焦糖橙 #b8430f）。
   图片统一裁成等高横构图，保证六张卡视觉齐整。
   ========================================================== */
.auto-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--auto-line);
  border-top: 4px solid var(--auto-base);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.auto-card:hover {
  box-shadow: 0 10px 28px rgba(226, 107, 27, 0.18);
}

.auto-card-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.auto-card-body {
  flex: 1 1 auto;
  padding: 22px 22px 26px;
}

.auto-card-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--auto-deep);
}

.auto-card-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #555555;
}

/* ==========================================================
   solution_auto.html —「行业案例视频」播放器容器
   播放器由 canon 的 video_common.js 注入（bokecc），
   尺寸参数传 100%/100%，故容器需有确定高度 —— 用 aspect-ratio 给定。
   ========================================================== */
/* 现在播放器只活在蒙版层里，尺寸交给蒙版控制。
   z-index:1 不是为压别人，而是把整块视频区变成一个层叠上下文 ——
   播放器内部那堆高层级元素就被关在这一层里，出不来。
   关闭按钮是它的兄弟节点（同在 .modal-content 里）且 z-index:2，
   于是无论播放器内部用多大的 z-index，都盖不到关闭按钮。 */
.auto-video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  overflow: hidden;
}
/* 播放器容器提到「加载中」提示之上：两者都占满同一块区域，
   提示是绝对定位（会盖住静态内容），所以必须让播放器自己成为定位元素并抬高一级，
   否则播放器加载出来后仍可能被那层提示挡着。 */
.auto-video > div {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* 播放器是点击后才异步注入的，注入完成前给一行提示，免得只看到一块黑。
   bokecc 播放器挂载后会生成 .CCH5playerContainer，用它作为「已就绪」的信号。 */
.if-video-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  letter-spacing: 1px;
  pointer-events: none;
}
.auto-video:has(.CCH5playerContainer) .if-video-loading {
  display: none;
}

/* 视频组件主色：各页取自己的强调色，没有就用全局 --base-color。
   case2 是汽车橙，case1 是医疗蓝。 */
.page-auto {
  --video-accent: #e26b1b;
  --video-accent-light: #f08a3c;
}
.page-medical {
  --video-accent: #03a9eb;
  --video-accent-light: #5cc9f1;
}

/* ---- 点击入口（封面） ---- */
.auto-video-cta {
  width: 100%;
  max-width: 900px;
  margin: 50px auto 0;
}
.auto-video-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 3px solid var(--video-accent, var(--base-color));
  border-radius: 6px;
  background-color: #1b1b1e; /* 定帧图加载前的底色 */
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.auto-video-poster:hover {
  border-color: var(--video-accent-light, var(--video-accent, var(--base-color)));
  transform: translateY(-2px);
}

/* 定帧图铺满整块封面；两张定帧分别是 3:2 和 16:9，用 cover 统一裁切 */
.auto-video-poster-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 两张定帧都偏亮，压一层渐变压暗，播放键和提示文字才立得住 */
.auto-video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.20) 50%,
      rgba(0, 0, 0, 0.58) 100%);
}
/* 定帧本身就很深的封面（如首页视频那帧全黑舞台）不需要再压暗，
   否则画面会闷掉；播放键和白色提示本来就读得清。 */
.auto-video-poster--dark::after {
  display: none;
}
/* 这一帧（舞台 + 主讲人 + 两台机器）几乎每个居中位置都会压到画面主体：
   上移切标语、正中切副标题、下移压人。左下角是整块空着的深色舞台，
   于是把「播放键 + 提示」整组横排挪到左下角 —— 播放键在最左，提示文字跟在其右。
   用 grid 而不是 flex：flex 的 justify-content 只管主轴，
   要同时「靠左」和「贴底」得靠 grid 的 align-content + justify-content。
   同时这里去掉封面那圈强调色描边（首页是红色 3px），只留图片本身。 */
.auto-video-poster--dark {
  display: grid;
  grid-template-columns: auto auto;
  align-content: end;
  justify-content: start;
  align-items: center;
  column-gap: 16px;
  padding: 0 0 5.5% 4.5%;
  border: 0;
}

/* 播放键与提示要压在定帧图和那层渐变之上 */
.auto-video-play,
.auto-video-hint {
  position: relative;
  z-index: 2;
}
.auto-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6vw, 78px);
  height: clamp(56px, 6vw, 78px);
  border-radius: 50%;
  /* 定帧是浅色照片，白底圆会糊进背景，改用页面强调色打底 */
  background-color: var(--video-accent, var(--base-color));
  color: #ffffff;
  font-size: clamp(20px, 2.2vw, 28px);
  padding-left: 4px; /* 三角形重心偏左，右移一点才视觉居中 */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.22);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.auto-video-poster:hover .auto-video-play {
  transform: scale(1.08);
  background-color: #ffffff;
  color: var(--video-accent, var(--base-color));
}
/* 首页视频的播放键：比其它页小一号（78 → 60），
   并把常态/悬停的配色对调 —— 常态白底红十字，悬停红底白字。 */
.auto-video-poster--dark .auto-video-play {
  width: clamp(44px, 4.5vw, 60px);
  height: clamp(44px, 4.5vw, 60px);
  font-size: clamp(16px, 1.7vw, 22px);
  padding-left: 3px;
  background-color: #ffffff;
  color: var(--video-accent, var(--base-color));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.18);
}
/* 悬停时只换配色，不做任何位移/缩放：
   封面整体上浮 2px 和播放键放大 1.08 都会让中间的三角在两态之间移动，
   看起来像在跳。 */
.auto-video-poster--dark:hover {
  transform: none;
}
.auto-video-poster--dark:hover .auto-video-play {
  transform: none;
  background-color: var(--video-accent, var(--base-color));
  color: #ffffff;
}
.auto-video-hint {
  color: #ffffff;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* ---- 蒙版层 ---- */
.if-video-modal {
  position: relative;
  background-color: #000000;
  border: 0;
  border-radius: 8px;
  /* 黑底宽度跟播放区一致：矮窗口下播放区被 84vh 的 16:9 上限收窄，
     如果蒙版仍按 modal-xl 的宽度铺开，左右就会露出一条比视频宽的黑边。 */
  width: 100%;
  max-width: calc(84vh * 16 / 9);
  margin-left: auto;
  margin-right: auto;
}
/* 16:9 的播放区还要受视口高度约束，否则宽屏矮窗口下会被裁掉上下 */
.if-video-modal .auto-video {
  max-width: calc(84vh * 16 / 9);
  margin: 0 auto;
  border-radius: 8px;
}
/* 关闭按钮：简化为一个白色 X，挪到播放区上方的留白里，
   不再压住播放器右上角的控件。 */
.if-video-close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  transition: color 0.25s ease;
}
.if-video-close:hover {
  color: #cfcfcf;
}
@media (max-width: 575px) {
  .if-video-close {
    top: -40px;
    right: 0;
  }
}

/* ==========================================================
   index.html —— 三套卡片改用随视口缩放的尺寸
   原来图标、字号、内边距都是固定 px，缩放或改窗口时列宽先变、内容不跟着变，
   于是出现「imageFORCE / C7165」这类硬折行。统一改成 clamp(下限, vw, 上限)：
   下限保证小屏不挤，上限保持原有观感。
   ========================================================== */

/* ==========================================================
   index.html —— 三套卡片的字号阶梯
   上一版用容器查询单位（cqw）让字号跟着卡片宽度走，确实不再折行了，
   但代价是 §3 在 992~1399 被压到 12.5px —— 比 §2 的正文还小，
   卡片之间不一致，也不好看。
   真正的问题不在字号，在于那些宽度下卡片本身太窄：
   站点容器在 992~1399 只有 960 宽，§3 却排了四列（每列 240px）。
   所以这版把「宽度」还给卡片（见 HTML 里 §3 改为 col-md-6 col-xxl-3），
   字号退回成一套统一的阶梯：三套卡片共用同样的档位，只用 vw 缓慢缩放。
   ========================================================== */
:root {
  /* 三档都收在很窄的区间里（2~7px 的跨度），既能随视口轻微呼吸，
     又不至于出现「同一排卡片字号不一」或「标题比别处的正文还小」。
     上下限是按各卡片最窄时的可用宽度反推的，见下方注释。 */
  --card-title: clamp(19px, 1.6vw, 26px); /* 卡片主标题：最紧 1200px 下占可用宽的 90% */
  --card-body: clamp(16px, 1.25vw, 19px); /* 卡片正文：最紧 1440px（§3 四列）下占 89% */
  --card-accent: clamp(24px, 2vw, 30px); /* §3 大字标签（可靠/安全/高效/环保） */
}

#service-aidata .col-12 > a > div,
#service-aidata .col-12 > div {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
#service-aidata .fs-30 {
  margin-bottom: 14px !important;
}

/* ---- §2 imageFORCE系列 产品卡（6 张）---- */
.if-series .feature-box-icon {
  /* col-lg-4 是固定 33.33% 宽，光收它自己的外边距不会把宽度让给正文；
     真正要让出宽度必须改列宽比例本身。22% 给正文腾出足够放下一行标题。 */
  flex: 0 0 22%;
  max-width: 22%;
  margin-left: clamp(6px, 1vw, 40px);
  margin-right: clamp(4px, 0.6vw, 40px);
}
.if-series .feature-box-icon img {
  width: 100%;
  max-width: clamp(110px, 10vw, 185px);
  height: auto;
}
.if-series .feature-box-content {
  /* 原 lg-ps-15px/lg-pe-15px 与 ps-40px/pe-40px 把宽度吃得太狠，用 !important 压回去 */
  padding-left: clamp(10px, 1.1vw, 24px) !important;
  padding-right: clamp(8px, 0.8vw, 20px) !important;
}
.if-series .feature-box-content .fs-28 {
  font-size: var(--card-title);
  line-height: 1.35;
}

/* ---- §3 四大核心优势 卡（4 张）---- */
/* 注意：这一组里「可靠」卡外面套了 <a>，其余三张没有，
   选择器必须两种结构都覆盖，否则四张卡的左右内边距会差 6px。 */
#service-aidata .col-12 > a > div,
#service-aidata .col-12 > div {
  padding-left: clamp(14px, 1.4vw, 28px) !important;
  padding-right: clamp(14px, 1.4vw, 28px) !important;
}
.section-aidata .feature-box-icon img,
#service-aidata .w-70px {
  width: clamp(48px, 4.8vw, 70px) !important;
  height: clamp(48px, 4.8vw, 70px) !important;
}
#service-aidata .fs-30 {
  font-size: var(--card-accent);
}
#service-aidata .fs-20 {
  font-size: var(--card-body);
}

/* ---- §4 行业卡（3 张）---- */
.idx-card-body .fs-25 {
  font-size: var(--card-title);
}

/* ---- §4 行业成功案例 卡（3 张）----
   KV 满宽贴到卡片上边沿：卡片自身的 padding 归零，改由正文块自带内边距；
   右箭头相对正文块居中，不再挂在内容底部。 */
.event-style-01 .feature-box {
  padding: 0 !important;
}
.event-style-01 .feature-box-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.idx-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.idx-card-body {
  position: relative;
  flex: 1 1 auto;
  /* 卡变宽后文字块也要跟着"松"一点，否则信息密度比页面其它部分高 */
  /* 下边距原本 clamp(24px,2.1vw,34px)，1440px 下实测「文字底→卡底」只有 38px，
     比产品卡的 68px 局促得多。实测该间距与 padding 是 1:1，故取 4.1vw
     （1440px → 59px padding → 67px 间距）对齐产品卡。 */
  padding: clamp(20px, 1.8vw, 30px) clamp(18px, 1.6vw, 26px) clamp(36px, 4.1vw, 60px);
}
.idx-card-body .fs-25 {
  font-size: clamp(18px, 1.75vw, 25px);
}
.idx-card-arrow {
  position: absolute;
  right: clamp(14px, 1.5vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.8vw, 40px);
  height: clamp(32px, 2.8vw, 40px);
  border-radius: 50%;
  background-color: var(--base-color);
  color: #ffffff;
  font-size: clamp(14px, 1.25vw, 18px);
  text-decoration: none;
  transition: transform 0.3s ease;
}
.event-style-01 .feature-box:hover .idx-card-arrow {
  transform: translateY(-50%) translateX(4px);
}

/* ==========================================================
   index.html —— 首屏轮播指示点
   轮播图有深有浅，单一颜色的圆点在浅色图上会消失（原样式是半透明白点）。
   改成「白色实心 + 深色描边」：白底上靠描边显形，深底上靠白心显形，
   两侧都不丢。当前页再加一圈浅色光晕拉开层次。
   ========================================================== */
.section-dark .swiper-pagination-bullets .swiper-pagination-bullet,
.index-kv .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 8px !important;
  opacity: 1;
  /* 深色实心 + 白色描边：浅底靠实心显形，深底靠白圈显形 */
  background-color: rgba(0, 0, 0, 0.42);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.section-dark .swiper-pagination-bullets .swiper-pagination-bullet-active,
.index-kv .swiper-pagination-bullets .swiper-pagination-bullet-active {
  transform: scale(1.3);
  background-color: #c02418;
}

/* 首页 KV：与案例页同一思路 —— 图片按原始宽高比撑开，不裁切。
   两张 KV 都是 1900×720（2.64:1），宽度决定高度。 */
.index-kv {
  line-height: 0;
  position: relative;
}
.index-kv-swiper {
  width: 100%;
}
.index-kv-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   三个行业案例页 —— KV 完整显示
   KV 素材是 1900×720（2.64:1）。原先 hero 用 height:100vh + background-size:cover，
   在 1440×800 视口下要放大到 1858×704，横向裁掉约 22%；1920×1080 下裁掉约 26%。
   改为 <img> 撑高：宽度决定高度，任何视口都能看到完整 KV。
   ========================================================== */
.kv-banner {
  line-height: 0;
}
.kv-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   solution_auto.html — 配色统一到 KV 主色 #E26B1B
   --auto-base 就是 KV 里的那支橙；深/中/浅三档由它派生：
     base  #e26b1b  白字 3.31:1 —— 大字号标题、描边、边框（≥3:1 达标）
     mid   #c95a12  白字 4.24:1 —— 渐变中段
     deep  #a8480c  白字 5.84:1 —— 正文/小字，压白底同样 5.84:1
     light #f08a3c  白字 2.50:1 —— 只做渐变浅端，不承载文字
   ========================================================== */
.page-auto {
  --auto-base: #e26b1b;
  --auto-mid: #c95a12;
  --auto-deep: #a8480c;
  --auto-light: #f08a3c;
  --auto-tint: #fdf0e4;
  --auto-line: #f2d3b4;
}
/* ==========================================================
   solution_auto.html — 主标题统一到主色
   ========================================================== */
.page-auto #service-loc .text-red {
  color: var(--auto-base) !important;
}
.page-auto #service-loc .bg-cabaret-red {
  background-color: var(--auto-base) !important;
}

/* ==========================================================
   advantage_reliable.html —四大优势各页：内容背景色块 + 行首圆点
   色块色取自标题渐变 #ff6f61→#ffcc70 的最浅端 #ffcc70 的淡化版；
   圆点取自该渐变深端 #ff6f61。色块不含带渐变背景的 title 按钮。
   （样式规范取自 canon.com.cn 产品页的 .cipcont-padd4 / .text-com）
   ========================================================== */
:root {
  --adv-block: #fff7ea;
  --adv-dot: #ff6f61;
}

/* ---- 小节面板的底色 / 描边 ----
   底色取自各页标题渐变的浅色端再淡化，描边是同族的中间色。
   四个行业页共用 .if-panel 组件，靠 body 上的页级类换色。
   底色都接近白，正文 #666 压在上面约 5.3:1，达标。 */
.page-advantage {
  --panel-bg: #fdf6ee; /* 标题渐变 #ff6f61→#ffcc70 的淡化版 */
  --panel-line: #f6dcc2;
  --page-accent: #ff6f61;
  --adv-dot: var(--page-accent);
  /* 面板描边：与标题条同一支渐变，两者在左上角相接 */
  --panel-stroke: linear-gradient(135deg, #ff6f61 0%, #ff9a63 50%, #ffcc70 100%);
}
.page-medical {
  --panel-bg: #f1f9fd; /* 标题渐变 #00b3ec→#bae2f8 的淡化版 */
  --panel-line: #c6e7f7;
  --page-accent: #03a9eb; /* 同《智慧医院折页》主色 */
  --adv-dot: var(--page-accent);
  --panel-stroke: linear-gradient(135deg, #00b3ec 0%, #5cc9f1 50%, #bae2f8 100%);
  /* 售后服务区块 */
  --svc-grad: linear-gradient(90deg, #00b3ec 0%, #5cc9f1 40%, #bae2f8 100%);
  --svc-card-bg: #f0f9fd;
  --svc-card-bg-alt: #e4f3fc;
}
.page-education {
  --panel-bg: #fef4f4; /* 标题渐变 #b8000e→#e01f2c 的淡化版 */
  --panel-line: #f6cccc;
  --page-accent: #df0011; /* 同 edu-bar.svg 主色 */
  --adv-dot: var(--page-accent);
  --panel-stroke: linear-gradient(135deg, #b8000e 0%, #df0011 50%, #e01f2c 100%);
  /* 售后服务区块 —— 同一套版式换成本页红色系 */
  --svc-grad: linear-gradient(90deg, #b8000e 0%, #df0011 55%, #e01f2c 100%);
  --svc-card-bg: #fef6f6;
  --svc-card-bg-alt: #fdeaea;
}

/* ---- 小节面板 ----
   结构：<div class="if-panel">
           <div class="if-panel-head"><button>标题</button></div>
           <div class="row">…</div>  ← 第 1 组
           <div class="row">…</div>  ← 第 2 组，用分隔线隔开
         </div>
   标题条嵌在面板左上角（面板的圆角与标题的圆角重合，靠 overflow:hidden 裁齐），
   标题的下边沿自然延伸成一条横线，划开标题区与内容区。
   一个小节内有多组内容时，用同色横线分隔。
   面板底色/描边由页级变量给（见下面 .page-* 一段）。 */
.if-panel {
  position: relative;
  /* 4px 渐变描边：两层背景叠出来 —— 内层 padding-box 铺底色，
     外层 border-box 铺标题同款渐变，透明边框把外层露成一条描边。
     不能直接用 border-image，那样 border-radius 会失效。 */
  border: 4px solid transparent;
  border-radius: 24px;
  background-image: linear-gradient(var(--panel-bg), var(--panel-bg)), var(--panel-stroke);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
  margin-bottom: 34px;
}
/* 首个面板与顶部色块导航之间的距离。
   原来这里另加 70px，叠上 section 自带的 90px 上内边距，
   导航到第一节实测 160px，空得太多；现在只保留 section 的 90px。 */
.tab-pane > .if-panel:first-child,
.tab-pane > .if-pair:first-child {
  margin-top: 0;
}

/* 两个面板并排（四大优势页里成对的章节）。
   窄屏自动改为上下堆叠。 */
/* 并排两组时，两组文字长短不一 → 图文块整体高度不一，短的那组右侧会空一大片。
   让两列等高伸展，并把每组的图推到列底，两张图就落在同一水平线上。
   （行上原本挂着 Bootstrap 的 .align-items-start，带 !important，这里要盖掉。） */
.if-split {
  align-items: stretch !important;
}
.if-split > .col-lg-6 {
  display: flex;
  flex-direction: column;
}
.if-split > .col-lg-6 > .mt-30px:last-child {
  /* .mt-30px 是 Crafto 的 !important 工具类，这里必须同样加 !important 才盖得住 */
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.if-pair {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.if-pair > .if-panel {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 991px) {
  .if-pair {
    flex-direction: column;
    gap: 0; /* 堆叠时由 .if-panel 自带的 margin-bottom 控制间距 */
  }
  /* 上面的 flex:1 1 0 在 column 方向意味着 flex-basis:0，会把面板高度压成 0。
     堆叠时改回按内容撑高。 */
  .if-pair > .if-panel {
    flex: 0 0 auto;
  }
}
.tab-pane > .if-panel:last-child {
  margin-bottom: 0;
}

.if-panel-head > button {
  display: block;
  margin: 0 !important; /* 清掉 mt-100px / mb-15px，标题紧贴面板左上角 */
}

/* 四大优势页：面板去掉渐变描边，底色改成比页面稍深的灰；
   标题条由原来的橙金渐变改为佳能红渐变。
   标题条的颜色原本写在四个页面按钮的行内 style 里，只能靠 !important 盖。 */
.page-advantage .if-panel {
  border: 0;
  border-radius: 20px;
  background-image: none;
  background-color: #f2f2f2;
}
.page-advantage .if-panel-head > button {
  background: linear-gradient(135deg, #b8000e 0%, #df0011 55%, #e01f2c 100%) !important;
  /* 客户在 150% 屏幕缩放下觉得字号偏大：小节标题 30px → 23px */
  font-size: 23px;
  line-height: 1.25;
  /* 标题条只是视觉标题，不承担点击操作：
     去掉 Bootstrap 给 button 加的手型光标 */
  cursor: default;
}

/* ==========================================================
   四大优势页 —— KV 下方四个色块导航
   ==========================================================
   原来是容器内「图标 + 文字 + 下划线」的卡片式入口。
   现改为紧贴 KV 下沿、通栏等分的四个色块：默认近黑，当前页佳能红，白字。
   ========================================================== */
.adv-nav {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}
.adv-nav-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 10px 12px;
  background-color: #333338; /* 深灰：常态 */
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.adv-nav-item:hover {
  background-color: #1b1b1e; /* 近黑：悬停 */
  /* style.css:134 有一条全局 `a:hover { color: var(--base-color) }`，
     改成语义化的 <a> 之后它会把白字变红。这里显式写回白色。 */
  color: #ffffff;
}
.adv-nav-item.active {
  background-color: var(--base-color); /* 佳能红 */
}

.if-panel > .row {
  margin: 0 !important; /* 去掉栅格的负外边距 */
  padding: 20px 16px 22px;
  /* 左右布局时文字块纵向居中（文字列的 mt-4 已在 HTML 里去掉，
     否则会把居中往下顶 12px）。列换行成上下排列时，
     每行只有一个元素，居中对它没有影响。 */
  align-items: center;
}
/* 多组上下排列时不画横线 —— 组与组之间靠间距区分就够了。
   （原 .if-panel > .row + .row 的 4px 渐变横线已删除；
     左右并排的两组仍保留 .col-lg-6 + .col-lg-6 的竖线。） */

/* 一条目内换行后的续行不再补圆点，但要保持缩进 —— .if-list > span 已是
   display:block + padding-left，续行靠 <br /> 在同一个 span 里自然继承缩进。
   这里只是给「下一段落」补一行空行的高度。 */
.if-list-gap {
  margin-top: 32px;
}

/* 面板内文案字号下调，与 23px 的标题协调。
   客户在 150% 屏幕缩放下仍觉得字大：正文再降到 17px。 */
.if-panel .fs-25,
.if-panel .if-list-sm {
  font-size: 17px !important;
  line-height: 26px;
}
.if-panel .if-list-sm {
  line-height: 24px;
}
.if-panel .if-list-sm > span::before {
  top: 8px;
}
/* 17px/26px 下圆点圆心在 13px 处，点 8px 见方 → top 9px */
.page-advantage .if-panel .if-list:not(.if-list-sm) > span::before {
  top: 9px;
}

/* 高效 §2 的外链图：限宽 620px，避免整幅铺满抢走正文 */
.qeditor-link {
  display: inline-block;
  width: 100%;
  max-width: 620px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  vertical-align: top;
}
.qeditor-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: filter 0.35s ease;
}

/* hover：图片虚化 + 压暗，居中浮出提示文字。
   压暗层是必需的 —— 底图偏亮，白字直接叠上去读不出来。 */
.qeditor-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.qeditor-link::after {
  content: "点击查看Quick Editor使用说明并下载";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  color: #ffffff;
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 1px;
  /* 底图中心本来就亮，压暗层之外再加描边阴影，白字才稳 */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.qeditor-link:hover img,
.qeditor-link:focus-visible img {
  filter: blur(6px);
}
.qeditor-link:hover::before,
.qeditor-link:focus-visible::before,
.qeditor-link:hover::after,
.qeditor-link:focus-visible::after {
  opacity: 1;
}

/* 并排两组之间的竖直渐变分隔线（环保页 §2 等仍在使用）。
   可靠 §1 已改成错位布局，不再需要这条线，故只留下 .if-split 这一支。
   只在 ≥lg 生效 —— 列换行成上下排列时不该再画竖线。 */
@media (min-width: 992px) {
  .if-panel .if-split > .col-lg-6 + .col-lg-6 {
    border-left: 4px solid transparent;
    /* 与面板标题条的佳能红渐变同源（原来是橙金，面板改红后已不搭） */
    border-image: linear-gradient(180deg, #e01f2c 0%, #df0011 50%, #a80000 100%) 1;
  }
}

/* ---- 行首圆点 ----
   文案是「<span class="if-list"><span>行1</span><span>行2</span>…</span>」结构，
   每个语义行（原 <br /> 分隔处）一个 <span>，各带一个 ::before 圆点。
   早先用背景图按 32px 平铺，结果是**视觉行**有点：文字自动折行时折出来的
   半行也会补一个点，出现「3 句话 5 个点」。改成逐行元素后，
   折行不再补点，点数恒等于语义行数。 */
.if-list {
  display: block;
}
.if-list > span {
  display: block;
  position: relative;
  padding-left: 22px;
}
.if-list > span::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px; /* 首行行高 32px，圆心落在 16px 处；圆点 8px 见方 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--adv-dot);
}

/* 语义上属于上一条的补充说明，不单独成点；缩进由 .if-list > span 的
   padding-left 提供，去掉圆点后自然保持与其它条目对齐。 */
.if-list > span.if-list-sub::before {
  display: none;
}

/* 小字号列表的圆点跟着行高上移（面板内另有 .if-panel .if-list-sm 的 10px 覆盖） */
.if-list-sm > span::before {
  top: 11px;
}

/* 文字右对齐的段落，圆点镜像到右侧。
   右对齐时各行右端对齐，所以圆点钉在行的右沿即可与每行文字保持等距；
   留在左侧则会离文字很远。 */
[style*="text-align: right"] .if-list > span {
  padding-left: 0;
  padding-right: 22px;
}
[style*="text-align: right"] .if-list > span::before {
  left: auto;
  right: 4px;
}

/* ---- 白底图融入面板底色 ----
   只给「边缘确实是不透明白」的图加 multiply，这个类由 _blend.js 采样后逐个标记。
   不能一刀切：
     · 边缘全透明的 PNG（gaoxiao4/5/6a、medical_product_01~05、edu_product_01/03…）
       本来就透底，再加 multiply 反而会压暗边缘的羽化像素；
     · 边缘是浅蓝/浅粉的（gaoxiao1c、medical_solution_1~3、medical_tongdian、
       education_tongdian/software）multiply 上去会发浑。
   （采样口径：取最外 3px 环，忽略 alpha<200 的像素；
     亮度 ≥240 且无蓝偏才算白底。） */
.blend-white {
  mix-blend-mode: multiply;
}

/* ==========================================================
   移动端（窄屏）适配
   ==========================================================
   两个「最小宽度」把整页撑死在 768px，比视口还宽，导致窄屏下
   header 横向溢出、右侧内容被切、下拉菜单错位：
     · style.css `.no-animation` 上被手工加了一句 min-width:768px
       （注释写着「关键：最小宽度」）—— 而 main.js 运行时会把这个类
       加到 <body> 上，于是整个页面都被撑到 768；
     · 模板自带的 `.container-fluid { min-width:768px }`，这个类
       全站只有 header 导航在用，窄屏同样要放开。
   ========================================================== */
@media (max-width: 991px) {
  .no-animation,
  .container-fluid {
    min-width: 0;
  }

  /* ---- header 移动端导航 ----
     原来是「整行链接 + 绝对定位压在右上角的箭头」：链接占满整行 375px，
     箭头只有 40×40 叠在上面，点箭头稍偏一点就落到链接上、直接跳页。
     改成 flex 两段式：链接占左边自适应，箭头固定 56px 独占右侧一块，
     两者各管各的点击区域，互不重叠。

     选择器必须带 `header .navbar [class*="col-"]` 前缀：
     responsive.css:19710 有一条 `header .navbar [class*="col-"] .navbar-nav
     .nav-item { display:block }`，特异性 (0,4,1) 高过我原来写的 (0,4,0)，
     不加前缀 display:flex 会被它压掉（flex-wrap 却能生效，很容易看岔）。 */
  header .navbar [class*="col-"] .navbar-nav > .nav-item {
    border-bottom: 1px solid rgba(23, 23, 23, 0.08);
  }
  header .navbar [class*="col-"] .navbar-nav > .nav-item:last-child {
    border-bottom: 0;
  }
  header .navbar [class*="col-"] .navbar-nav .nav-item > .nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 15px;
    font-size: 18px;
    line-height: 1.3;
  }

  header .navbar [class*="col-"] .navbar-nav .nav-item.dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
  }
  header .navbar [class*="col-"] .navbar-nav .nav-item.dropdown > .nav-link {
    /* basis 必须是 0：模板里 .nav-link 自带 width:100%，
       用 auto 会占满整行把箭头挤到下一行 */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 4px;
  }
  header .navbar [class*="col-"] .navbar-nav .nav-item.dropdown > i.dropdown-toggle {
    position: static;
    flex: 0 0 56px;
    width: 56px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-left: 1px solid rgba(23, 23, 23, 0.08);
    font-size: 16px;
    color: var(--dark-gray);
    cursor: pointer;
  }
  /* 子菜单落到下一行、占满整宽，左边距与一级条目文字对齐 */
  header .navbar [class*="col-"] .navbar-nav .nav-item.dropdown > .dropdown-menu {
    flex: 0 0 100%;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    border-radius: 0;
    box-shadow: none;
  }
  header .navbar [class*="col-"] .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    padding: 12px 15px 12px 28px;
    font-size: 16px;
    line-height: 1.4;
  }
  header .navbar [class*="col-"] .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
    padding-bottom: 12px;
  }

  /* ---- 四大优势页 KV 下方色块导航 ----
     四个色块在窄屏压到 94px 一列，字号和行高同步收小，
     保证「可靠稳定」四个字能横排放下不被挤成竖排。 */
  .adv-nav-item {
    min-height: 56px;
    padding: 8px 4px;
    font-size: 16px;
    letter-spacing: 1px;
  }

  /* ---- 医疗「应用场景」/ 教育「产品与服务」 ----
     这两个区块共用 .if-2col：两列并排、每格内「标题 + 文字 + 图」纵向排列。
     窄屏两列各只剩 160 多像素，正文被挤成一行两三个字，改为单列上下。 */
  .if-2col-cell {
    width: 100%;
  }
  .if-2col {
    gap: 24px;
  }

  /* ---- 医疗 / 教育「售后服务」 ----
     .svc-box .row > .col 把三列宽度写死成 (100%-60px)/3，
     覆盖了标记里 row-cols-1 row-cols-lg-3 的响应式列宽，
     所以窄屏仍是三列、每列不到 90px。这里恢复成单列纵向。 */
  .svc-box .row > .col {
    width: 100%;
    max-width: 100%;
    /* 列上原本还有 mb-30px，和 row 的 gap 叠加会变成 60px 的大空档 */
    margin-bottom: 0 !important;
  }
  .svc-box .row {
    gap: 16px;
  }
  .svc-box {
    padding: 16px 14px 10px;
  }
  .svc-banner {
    width: 88%;
    font-size: 22px;
    padding: 10px 12px;
  }
}

/* 手机宽度（≤767）单独处理需要更激进收缩的地方 */
@media (max-width: 767px) {
  /* 医疗页「医院文印管理面临的困扰」标题条：
     模板给它 white-space:nowrap + display:table + 行内 font-size:44px，
     整条宽度被撑到 572px，直接把页面撑出横向滚动。
     手机下改为可换行的普通块，字号和内边距同步收小。 */
  .med-problem-banner {
    display: block !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    padding: 12px 18px !important;
  }
  .med-problem-frame {
    padding: 18px !important;
    margin-top: -18px !important;
  }
}

/* 手机竖屏（≤480）：小节标题条
   .container-title 是 white-space:nowrap 的居中块，
   「imageFORCE系列」在 37.5px 字号下宽 387px，360px 的屏幕上
   左右各溢出 20 多像素，把整页撑出横向滚动。
   缩小字号并收窄左右内边距即可放得下。 */
@media (max-width: 480px) {
  .container-title .title-h2 {
    font-size: 30px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==========================================================
   首页第一节标题改用 imageFORCE 的 logo 图（524×165，带透明通道）
   ==========================================================
   高度跟着视口缩放，窄屏也不会撑破。原来标题下面那条高亮色块已一并去掉 ——
   logo 自己已经有红色书法字，再叠一条色块会打架。 */
.title-logo {
  display: block;
  /* 按宽度定尺寸：原来「imageFORCE系列」文字宽约 387px，
     logo 是 3.18:1 的横版组合（imageFORCE + 赢 + 系列），
     用宽度对齐才和下方 38px 的副标题撑得起层级。 */
  width: clamp(300px, 34vw, 500px);
  height: auto;
  max-width: 100%;
  /* 图上自带约 10% 的透明下留白，但和下方副标题还是贴得太近，再补一点 */
  margin-bottom: 14px;
}

/* 首段导语：原来用的是 fs-25（25px），比下方产品卡标题大出一大截。
   压到 17px，与 .prod-name 同量级。 */
.page-index .intro-copy {
  font-size: 17px !important;
  line-height: 1.85;
}
/* 首页 logo 标题是绝对居中定位的，会向下压到灰色副标题上：
   实测 768px 起开始重叠，1200px 约 22px、1440px 约 29px。
   logo 高度随视口变化，所以副标题的上边距也按视口宽度给：
   5.1vw - 3px 覆盖各断点的重叠量，再留 8–15px 空隙；
   覆盖 .mt-2 原本的 28px。 */
.page-index .if-series .title-h2-gray {
  margin-top: clamp(18px, calc(5.1vw - 3px), 72px) !important;
}

/* 首页 KV 第二张整图可点 */
.index-kv-link {
  display: block;
  line-height: 0;
}

/* 首页产品卡片与「四大核心优势」之间的视频区（无小节标题） */
.index-video-section {
  padding: 70px 0 60px;
}

/* ==========================================================
   首页 —— 小节标题与下方内容的间距
   ==========================================================
   「四大核心优势」「行业成功案例」这两行原来是靠下面的灰色小标题撑高度的；
   小标题去掉后行高归零，而标题是绝对居中定位的（.container-title），
   于是标题直接贴到下方内容上 —— 实测只差 4px。

   给行补 padding-bottom 把后续内容推开。注意不能给里面的 .position-relative
   加 padding：标题的 top:50% 是相对那个元素的 padding box 算的，
   加 padding 会把标题本身也一起往下推。行的 padding 则不影响它。

   用 :only-child 限定，第一张「imageFORCE系列」那行还带着灰色小标题，
   不算 only-child，不会被动到。
   ========================================================== */
.page-index .row:has(> .position-relative:only-child) {
  padding-bottom: 64px;
}

/* ==========================================================
   首页 —— 产品卡片（五张纵向面板并排）
   ==========================================================
   参考 prod-layout.jpg：名称在上、产品图居中、文案在下，五张等分并排。
   默认白底；hover 时 6100 / 4000 系列变近黑（.is-dark），其余变佳能红。

   丝巾图横贯整排：把图片放到 img/prod-scarf.jpg 即可自动生效。
   卡片是白底盖在丝巾之上，丝巾从四周和卡片缝隙里透出来；
   没放图片时这一层为空，排版不受影响。
   ========================================================== */
.prod-row {
  /* 路径相对本 CSS 文件（css/），素材放在项目 img/ 下 */
  --prod-scarf: url("../img/prod-scarf.jpg");
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  background-color: #ffffff;
  background-image: var(--prod-scarf);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prod-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 16px 28px;
  background-color: #ffffff;
  color: #1b1b1e;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.prod-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
/* 换了思源黑体后字面更宽：992~1399 区间容器只有 960px，五列每列约 190px，
   「imageFORCE C5100系列」会折行、其余四张不折，一排名字参差不齐。
   这一档把字号降到 15px 即可放得下。 */
@media (min-width: 992px) and (max-width: 1399px) {
  .prod-name {
    font-size: 15px;
  }
}
.prod-figure {
  display: block;
  margin: 18px 0 16px;
}
.prod-figure img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}
.prod-copy {
  margin-top: auto; /* 文案贴底，五张卡高度不一时也对齐 */
  font-size: 14px;
  line-height: 1.65;
  color: #6b6b6b;
  transition: color 0.35s ease;
}
.prod-card:hover {
  background-color: var(--base-color);
  color: #ffffff;
}
.prod-card:hover .prod-copy {
  color: rgba(255, 255, 255, 0.88);
}
.prod-card.is-dark:hover {
  background-color: #1b1b1e; /* 近黑，不用纯黑 */
}
.prod-card.is-dark:hover .prod-copy {
  color: rgba(255, 255, 255, 0.88);
}

/* ---- 首页「四大核心优势」四张图卡 ----
   底图 + 底部半透明横条写四个词；hover 时背景虚化压暗、浮出原卡片的小字文案，
   交互与高效页 Quick Editor 那张外链图一致。
   层级：底图 0 → 压暗层 1 → 文案 2 → 横条 3。 */
.adv-card {
  position: relative;
  display: block;
  /* 与 P7 素材一致（440×670），图片不裁切 */
  aspect-ratio: 440 / 670;
  width: 100%;
  overflow: hidden;
  border-radius: 0; /* 按要求去掉圆角 */
  text-decoration: none;
  isolation: isolate; /* 把内部层级关在卡片里 */
}

/* 四张卡之间的间距对齐上方产品卡：产品卡 6px 缝（外层 6px padding + 6px gap）。
   Bootstrap 栅格默认每列左右各 15px padding、行外负 15px 边距 → 30px 缝，
   这里把两侧 padding 收到 3px、行边距收到 -3px，正好 6px。 */
#service-aidata .row:has(.adv-card) {
  margin-left: -3px;
  margin-right: -3px;
}
#service-aidata .row:has(.adv-card) > [class*="col-"] {
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 0;
}
.adv-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  /* 略微放大，避免虚化后边缘透出底色 */
  transform: scale(1.06);
  transition: filter 0.4s ease;
}
.adv-card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 14px 10px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
}
.adv-card-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 70px; /* 底部让开横条 */
  color: #ffffff;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* .adv-card-copy 是 flex 容器，行内文字会被拆成匿名 flex item，
   <sup> 也会变成独立 item —— D² 的上标就被挤到下一行去了。
   用一个内层 span 把整段文字包成唯一的 flex item，
   内部恢复普通行内排版，上标和 <br> 都能正常工作。 */
.adv-card-copy-inner {
  display: block;
}
/* 压暗层：底图偏亮，不压一层白字读不出来 */
.adv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.adv-card:hover .adv-card-bg,
.adv-card:focus-visible .adv-card-bg {
  filter: blur(6px);
}
.adv-card:hover::after,
.adv-card:focus-visible::after,
.adv-card:hover .adv-card-copy,
.adv-card:focus-visible .adv-card-copy {
  opacity: 1;
}

/* 窄屏：两列 → 最后一卡占满整行；手机竖屏单列 */
@media (max-width: 991px) {
  .prod-row {
    flex-wrap: wrap;
  }
  .prod-card {
    flex: 0 0 calc(50% - 3px);
  }
  .prod-card:last-child {
    flex: 0 0 100%;
  }
}
@media (max-width: 575px) {
  .prod-card {
    flex: 0 0 100%;
  }
}

/* ==========================================================
   rel.html —— 可靠稳定页的版式调整
   ==========================================================
   §1 独特焊接框架：按参考稿做错位排布 —— 首行图左文右，
      次行整体右移、文左图右；并与 §2 仿真模拟测试并排。
   §2 并排后列宽收到 2/5，改为上文下图。
   §3 E²分析：文字在上，kekao-3a 与 kekao-3b 并排在下方。
   ========================================================== */

/* 可靠 §1/§2 现在两列等宽（默认 .if-pair 的 flex:1 1 0），
   错位图文的比例改由下面的行内规则在各断点微调。 */

/* ---- §1 错位图文 ----
   两行的「图在哪一侧」不同，所以各用一套行类控制比例，
   比整块网格更好调 —— 图宽按各自行的内容盒计算。 */
.rel-frame {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 18px 26px;
}
.rel-frame-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.rel-frame-row--a .rel-frame-figure {
  flex: 0 0 38%;
}
/* 第二行整体右移，接在第一行文字块的起始位置；
   图宽取 40%，两张图在视觉上大小相当，且第二张贴住面板右沿。
   缩进分两档：宽屏 34%（文字接在第一行文字块起点附近，最接近参考稿）；
   窄一档只留 10%，否则「无螺钉，增强可靠性」会被挤到折行。 */
.rel-frame-row--b {
  padding-left: 10%;
}
.rel-frame-row--b .rel-frame-figure {
  flex: 0 0 40%;
}
.rel-frame-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.rel-frame-figure {
  margin: 0;
  min-width: 0;
}
.rel-frame-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- §2 上文下图 ---- */
.rel-sim {
  padding: 22px 18px 26px;
}
.rel-sim-figure {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.rel-sim-figure img {
  display: block;
  /* 64%：§2 只有 §1 六成的列宽，图再小面板底部会空一大片，
     与并排的 §1 等高后更明显 */
  width: 64%;
  max-width: 100%;
  height: auto;
}

/* ---- §3 文字在上，两图并排在下 ---- */
.rel-e2 {
  padding: 22px 18px 26px;
}
.rel-e2-figs {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 26px;
}
.rel-e2-fig {
  margin: 0;
  min-width: 0;
}
.rel-e2-fig--wide {
  flex: 1 1 58%;
}
.rel-e2-fig--diagram {
  flex: 0 1 36%;
}
.rel-e2-fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* 宽屏：两列等宽后 §1 的行宽比原来窄，第二行缩进取 20%
   —— 再大「无螺钉，增强可靠性」就会折行。 */
@media (min-width: 1440px) {
  .rel-frame-row--b {
    padding-left: 20%;
  }
}

/* 两列改成等宽后，§1 的行宽比原来窄，992–1279px 这一档
   需要把首行图再收窄一点，否则「高强度和耐用性有机结合」会折行。 */
@media (min-width: 992px) and (max-width: 1279px) {
  .rel-frame-row--a .rel-frame-figure {
    flex-basis: 33%;
  }
  .rel-frame-row--b {
    padding-left: 6%;
  }
}

/* 窄屏：并排的面板已上下堆叠，错位布局再留着只会把文字挤窄，
   改为「图在上、文在下」的常规竖排。 */
@media (max-width: 767px) {
  .rel-frame {
    gap: 26px;
    padding: 18px 14px 22px;
  }
  .rel-frame-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .rel-frame-row--a .rel-frame-figure,
  .rel-frame-row--b .rel-frame-figure {
    flex: 0 0 auto;
    width: 62%;
    margin: 0 auto;
  }
  .rel-frame-row--b {
    padding-left: 0;
  }
  /* 竖排后第二组的图跟在第一组文字后面，会连成「5 条一组」的错觉；
     把图提到第二组文字上方，两组都是「图 + 文」，分组一眼能分辨。 */
  .rel-frame-row--b .rel-frame-figure {
    order: -1;
  }
  .rel-sim {
    padding: 18px 14px 22px;
  }
  .rel-sim-figure img {
    width: 72%;
  }
  .rel-e2 {
    padding: 18px 14px 22px;
  }
  .rel-e2-figs {
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  .rel-e2-fig--wide,
  .rel-e2-fig--diagram {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ==========================================================
   eco.html —— 环保友好页改版
   ==========================================================
   §1 降低能耗整行；§2/§3、§4/§5 两两并排。
   各节都是「文字在上、图片在下」，文案沿用 .if-list 的圆点列表，
   与安全页等其余优势页保持一致。
   ========================================================== */
.eco-sec {
  padding: 22px 18px 26px;
}
.eco-figs {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
}
.eco-fig {
  margin: 0;
  min-width: 0;
}
.eco-fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* §1 只用一张合并图，独占整行 */
.eco-figs--single .eco-fig {
  flex: 1 1 100%;
}

/* 并排面板里的单图：给图区一个固定高度，宽高比不同的图按 contain 缩放并居中，
   左右面板的图文基线不会被拉得七长八短。 */
.eco-figs--panel {
  height: clamp(200px, 27vw, 380px);
  justify-content: center;
}
.eco-figs--panel .eco-fig {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eco-figs--panel img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ---- 页尾：环保相关荣誉证书 ---- */
.cert-section {
  padding: 20px 0 90px;
}
/* 标题沿用 .container-title 的绝对居中定位，行本身靠上下 padding 撑出高度 */
.cert-title-row {
  padding: 40px 0 56px;
}
/* 与优势页其它小节一起收字号：首页同款标题 52px → 40px */
.page-advantage .cert-title-row .title-h2 {
  font-size: 40px;
}
.cert-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.cert-item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.cert-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin-bottom: 18px;
}
.cert-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.cert-copy {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: #5b5b5b;
}
/* 证书下方的链接说明：无论宽窄都占满整行居中；
   窄屏在冒号处换行（桌面保持一行）。 */
.cert-note-row .cert-item {
  flex: 1 1 100%;
}
.cert-note-br {
  display: none;
}
@media (max-width: 991px) {
  .cert-note-br {
    display: inline;
  }
}
/* 避免把「铂金」两个引号内的字拆到两行 */
.cert-nowrap {
  white-space: nowrap;
}

@media (max-width: 991px) {
  .cert-row {
    flex-wrap: wrap;
    gap: 34px 24px;
  }
  .cert-item {
    flex: 0 0 calc(50% - 12px);
  }
  /* 面板已上下堆叠、占满整行，固定高度的图区会显得很小，
     改为按面板宽度定尺寸。 */
  .eco-figs--panel {
    height: auto;
  }
  .eco-figs--panel .eco-fig {
    height: auto;
  }
  .eco-figs--panel img {
    width: 78%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .eco-sec {
    padding: 18px 14px 22px;
  }
  .eco-figs {
    gap: 16px;
    margin-top: 20px;
  }
  .cert-section {
    padding-bottom: 60px;
  }
  .cert-logo {
    height: 140px;
  }
}

@media (max-width: 575px) {
  .eco-figs--panel img {
    width: 100%;
  }
  .cert-logo {
    height: 120px;
  }
  .cert-copy {
    font-size: 15px;
  }
}

/* ==========================================================
   移动版（窄布局）增强
   ========================================================== */
/* KV：≤767px 由 <picture> 切到竖版素材 */
.kv-banner picture,
.index-kv picture {
  display: block;
}

/* 首页四大优势卡：≤991px 改为 2×2（col-6 + col-md-6），
   纵向间距从 mb-4 的 24px 收到与横向一致的 6px。 */
@media (max-width: 991px) {
  #service-aidata .row:has(.adv-card) > [class*="col-"] {
    margin-bottom: 6px !important;
  }
}
/* 手机竖屏：卡片只有约 165px 宽，文案字号与内边距同步收一点，
   避免每行都折成两行 */
@media (max-width: 767px) {
  .adv-card-copy {
    padding: 16px 10px 58px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* 首页四大优势卡：窄屏没有 hover，脚本给当前卡加 .is-active，
   视觉与 hover 状态完全一致（背景虚化、压暗、文案浮出）。 */
.adv-card.is-active .adv-card-bg {
  filter: blur(6px);
}
.adv-card.is-active::after,
.adv-card.is-active .adv-card-copy {
  opacity: 1;
}

/* 高效页 Quick Editor 图片：窄屏没有 hover，
   图片中心进入视口纵向中心带时，脚本加 .is-centered 展示说明文字。 */
.qeditor-link.is-centered img {
  filter: blur(6px);
}
.qeditor-link.is-centered::before,
.qeditor-link.is-centered::after {
  opacity: 1;
}

/* ==========================================================
   header 收窄
   ==========================================================
   logo 图高 79px，加上 30px 上下内边距，桌面 header 高达 139px；
   窄屏虽然显示的是 46px 的 mobile-logo，但被隐藏的 default/alt-logo
   仍保留 79px 的行高，header 也有 123px。这里分别降到约 92px / 70px。 */
@media (min-width: 992px) {
  header .navbar-brand {
    padding: 18px 0;
  }
  /* 三种 logo 用同一高度：悬浮状态会从 default 切到 alt，
     高度必须一致，否则切换时 header 会跳高或被压扁 */
  header .navbar-brand img {
    height: 56px;
  }
}
@media (max-width: 991px) {
  /* 不缩小 logo：mobile-logo 从模板的 46px 提到与桌面一致的 56px，
     高度靠减小上下内边距来控制（56 + 7×2 = 70px，与原 header 同高）。 */
  header .navbar-brand {
    padding: 7px 10px;
  }
  header .navbar-brand .default-logo,
  header .navbar-brand .alt-logo {
    display: none !important;
  }
  header .navbar-brand .mobile-logo {
    height: 56px;
  }
  /* 滚动后的悬浮状态，模板会把内边距改回 22px，这里保持 7px */
  header.sticky .navbar-brand {
    padding: 7px 10px;
  }
}
/* 滚动后的悬浮状态：桌面端模板把 brand 内边距改回 20px，
   这里与常态保持一致（18px），header 仍是 92px。
   限定 ≥992px，避免覆盖上面窄屏的 7px。 */
@media (min-width: 992px) {
  header.sticky .navbar-brand {
    padding: 18px 0;
  }
  /* 悬浮状态会从 default 切到 alt-logo，显式保证它可见且有尺寸，
     避免不同浏览器下宽度/可见性计算不一致导致 logo 消失。 */
  header.sticky.sticky-active .navbar-brand .alt-logo {
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 56px !important;
  }
}

/* bokecc 播放器内部的控制条也是一个 <section>，
   会被全站的 section { padding-top: 90px; padding-bottom: 90px } 撑高，
   让播放/暂停键脱离底部控制条、跑到画面中间（部分浏览器可见）。
   播放器内部的 section 一律去掉内边距。 */
.auto-video section {
  padding: 0 !important;
}

/* ==========================================================
   eff.html —— 高效精印页改版
   ==========================================================
   七个整行面板，不再两两并排。
   共用两种内容排法：
     .eff-top   文案与一张图左右布局（图在右）
     .eff-two   两张图在文字下方并排
   两图比例不同，用 --eff-grow 按各自宽高比分配宽度，排出来高度齐平。
   ========================================================== */
.eff-body {
  padding: 22px 18px 26px;
}
.eff-top {
  display: flex;
  align-items: center;
  gap: 40px;
}
.eff-copy {
  flex: 1 1 0;
  min-width: 0;
}
.eff-top > .eff-fig {
  flex: 0 1 40%;
  max-width: 480px;
  margin: 0;
  min-width: 0;
}
/* Quick Editor 的下载入口图比其它图宽，单独放宽 */
.eff-top > .eff-fig--wide {
  flex-basis: 46%;
  max-width: 620px;
}
.eff-fig img {
  display: block;
  width: 100%;
  height: auto;
}
.eff-fig .qeditor-link {
  max-width: 100%;
}
.eff-under {
  margin-top: 26px;
}
.eff-under > img {
  display: block;
  width: 100%;
  height: auto;
}
/* 单图节限宽居中（gaoxiao7a 原图 794px，再放大就发虚） */
.eff-under--narrow {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.eff-two {
  display: flex;
  align-items: center;
  gap: 24px;
}
.eff-two > figure {
  flex: var(--eff-grow, 1) 1 0;
  min-width: 0;
  margin: 0;
}
.eff-two img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .eff-body {
    padding: 18px 14px 22px;
  }
  .eff-top {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .eff-top--spread {
    justify-content: flex-start;
  }
  .eff-top > .eff-fig,
  .eff-top > .eff-fig--wide {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .eff-two {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .eff-two > figure {
    flex: 0 0 auto;
  }
}

/* 高效 §1：文案列限宽，避免一行铺得太散 */
.eff-copy--narrow {
  max-width: 640px;
}
.eff-top--spread {
  justify-content: space-between;
}

/* 高效 §3：两幅 UI 图再收一档，整行限宽居中（高度由 flex-grow 保持齐平） */
.eff-two--ui {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 高效页各节末尾的小字注释（* / *1 / *2） */
.eff-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6d6d6d;
}
/* 写在文案列里的注释：与圆点正文对齐 */
.eff-note--copy {
  margin-left: 22px;
}
/* 图片下方的注释：图注按图片宽度换行，两图顶部对齐 */
.eff-two--captioned {
  align-items: flex-start;
}
.eff-two--captioned .eff-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* 安全 §1 / §2 并排：§2 文案多、内容撑满面板，§1 内容短、底部会空一截。
   让内容区吃掉剩余高度并两端分布 —— 文案贴顶、图片贴底，
   两张图的下沿落在同一水平线上；§1 的图同时放开 320px 限高。 */
@media (min-width: 992px) {
  #tab-secure .if-pair > .if-panel {
    display: flex;
    flex-direction: column;
  }
  #tab-secure .if-pair > .if-panel > .row {
    flex: 1 1 auto;
    align-content: space-between;
  }
  #tab-secure .if-pair > .if-panel:first-child .row img {
    max-height: none !important;
  }
}