@import url(./base.css);

.captcha img {
  width: 100px;
  height: 100%
}

[name="row[captcha]"] {
  width: 188px;
  height: 48px;
  outline: none;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 0 10px;
  box-sizing: border-box;
}
/* 底部社媒 */
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-links span {
  font-size: 14px;
  color: #666;
  margin-right: 4px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.social-links a:hover {
  background-color: #0077b5;
  /* LinkedIn 蓝，通用 */
}

.social-links a:hover svg {
  fill: #fff;
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: #333;
  transition: fill 0.3s ease;
}

/******************header*******************/
/* Language dropdown helpers */
.lang-dropdown {
  pointer-events: none;
}

.lang-switch.is-open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lang-switch.is-open .lang-arrow {
  transform: rotate(-90deg);
}

/* ==================== 首页 GSAP 动画初始状态 ==================== */
.js-fade-up,
.js-scale-in,
.js-testimonial-card,
.js-section-header,
.js-section-label,
.js-section-title,
.js-mask-reveal {
  will-change: transform, opacity;
}

.js-section-label {
  opacity: 0;
  transform: translateY(20px);
}

.js-section-title {
  opacity: 0;
  transform: translateY(30px);
}

.js-mask-reveal {
  clip-path: inset(100% 0 0 0);
}

/* 磁吸按钮需要相对定位，波纹按钮需要隐藏溢出 */
.js-magnetic-button {
  position: relative;
  display: inline-flex;
  transform-style: preserve-3d;
}

.js-ripple-button {
  position: relative;
  overflow: hidden;
}

.js-magnetic-button,
.js-ripple-button,
.js-hover-scale {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 链接下划线滑入效果 */
.js-link-underline {
  position: relative;
  display: inline-block;
}

.js-link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.js-link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 减少动画偏好：直接显示，避免闪烁 */
@media (prefers-reduced-motion: reduce) {

  .js-fade-up,
  .js-scale-in,
  .js-testimonial-card,
  .js-hero-text,
  .js-hero-sub,
  .js-section-header,
  .js-section-label,
  .js-section-title,
  .js-mask-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }
}


/* ==================== 移动端导航主题覆盖 ==================== */
/* 使用 mobile-nav.css :root 默认白色系主题，不再强制蓝色 */

/* 无子菜单时隐藏箭头 */
.mn-nav-item[data-has-children="0"] .mn-nav-link__arrow {
  display: none;
}

/* 汉堡按钮文字/图标颜色跟随 nav-text */
.mn-burger {
  color: var(--nav-text, #262626);
}

/* 抽屉菜单当前项高亮 */
.mn-nav-link.is-active {
  color: var(--nav-accent, #0166b3);
  background: rgba(1, 102, 179, 0.06);
}

/*****************list-image.html*******************/

@media screen and (max-width: 768px) {
  .warp {
    width: 92% !important;
    min-width: auto;
    margin: 0 auto;
    min-width: 0px !important;
  }

  body {
    --swiper-navigation-size: 14px;
  }

  #app {
    padding-top: 60px;
  }

  /* 移动端内容区通用优化 */
  section .warp {
    overflow-x: hidden;
  }

  /* 产品分类标题在手机上居中 */
  .js-section-header {
    text-align: center;
  }

  /* Newsletter 输入框在手机上占满 */
  .warp>div.inline-flex.flex-col {
    width: 100%;
    max-width: 360px;
  }

  /* 移动端产品筛选标签横向滚动优化 */
  .max-md\:flex-nowrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .max-md\:flex-nowrap::-webkit-scrollbar {
    display: none;
  }

  /* 移动端底部 TabBar 增加安全区 */
  .fixed.bottom-0.left-0.right-0.bg-white {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 移动端 Banner 高度自适应 */
  .banner,
  .swiper-banner,
  .swiper-banner .swiper-slide,
  .swiper-banner .pic {
    height: auto !important;
  }

  .banner .pic img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 移动端减少绝对定位装饰图可能造成的层级问题 */
  .js-float-icon,
  .js-parallax {
    z-index: 0;
  }

  /* 表单输入避免 iOS 自动缩放 */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* 图片默认响应式 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 移动端首页横向滑动 swiper */
  .swiper-categories .swiper-slide,
  .swiper-testimonials .swiper-slide,
  .swiper-news .swiper-slide {
    height: auto;
  }

  .swiper-categories .swiper-slide {
    width: 42%;
  }

  .swiper-testimonials .swiper-slide {
    width: 82%;
  }

  .swiper-news .swiper-slide {
    width: 74%;
  }

  .swiper-categories .swiper-pagination,
  .swiper-testimonials .swiper-pagination,
  .swiper-news .swiper-pagination {
    bottom: 0;
  }

  .swiper-categories .swiper-pagination-bullet,
  .swiper-testimonials .swiper-pagination-bullet,
  .swiper-news .swiper-pagination-bullet {
    background: #fd5e46;
  }

  .swiper-categories .swiper-pagination-bullet-active,
  .swiper-testimonials .swiper-pagination-bullet-active,
  .swiper-news .swiper-pagination-bullet-active {
    background: #fd5e46;
  }

  /* 移动端询盘 CTA 区安全间距 */
  section.md\:hidden.bg-gradient-to-br {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ==================== 数字滚动效果 ==================== */
.js-rolling-number {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  vertical-align: bottom;
}

.rolling-digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: bottom;
}

.rolling-digit__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.rolling-digit__char {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rolling-sep,
.rolling-suffix {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}

/* ==================== 装饰图跑马灯 ==================== */
.marquee-img {
  overflow: hidden;
  pointer-events: none;
}

.marquee-img__track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
}

.marquee-img__track img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.marquee-img--left .marquee-img__track {
  animation: marquee-left 25s linear infinite;
}

.marquee-img--right .marquee-img__track {
  animation: marquee-right 30s linear infinite;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-img__track {
    animation: none !important;
  }
}

/* ==========================================================
   手机端统一优化：精简、精细、规整
   针对 max-width: 768px 做全局收敛，提升可读性与触控体验
   ========================================================== */

@media screen and (max-width: 768px) {

  /* ── 1. 基础排版收敛 ── */
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 14px;
    line-height: 1.7;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: break-word;
    line-height: 1.3;
  }

  p {
    line-height: 1.7;
  }

  /* ── 2. 区块间距统一收紧 ──
     避免部分页面 calc(...*var(--vw)) 在 375px 下产生过大留白
     仅对已经有 max-md: 类但仍显松散的 section 生效 */
  #app>section[class*="py-"],
  main>section[class*="py-"],
  #app>section[class*="pt-"],
  #app>section[class*="pb-"],
  main>section[class*="pt-"],
  main>section[class*="pb-"] {
    padding-top: clamp(1rem, 5vw, 3rem) !important;
    padding-bottom: clamp(1rem, 5vw, 3rem) !important;
  }

  /* 保留这些区域的原生间距 */
  .mn-header,
  .mn-drawer,
  footer,
  .banner,
  .swiper-banner,
  .bg-gradient-to-br.from-\[\#0166b3\],
  section.py-0,
  section.pt-0,
  section.pb-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ── 3. 标题字号上限，避免溢出 ── */
  .js-section-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .js-section-label {
    font-size: 0.875rem !important;
  }

  /* ── 4. 信任背书数据条改为 2x2 规整网格 ── */
  .js-fade-up .text-\[calc\(60\*var\(--vw\)\)\],
  .js-fade-up .text-3xl {
    font-size: 1.75rem !important;
  }

  section .warp>.flex.justify-between.gap-6.text-center {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
    text-align: center;
  }

  section .warp>.flex.justify-between.gap-6.text-center>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  section .warp>.flex.justify-between.gap-6.text-center>div p {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #666;
  }

  /* ── 5. 列表/网格类统一规整 ── */
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.md\:grid-cols-3,
  .grid.grid-cols-2.md\:grid-cols-5 {
    gap: 0.75rem !important;
  }





  /* ── 6. 表单与输入优化 ── */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }



  /* ── 7. 按钮触控区域不低于 44px（仅主按钮/CTA） ── */
  button[type="submit"],
  .submit-btn,
  .mn-cta-btn,
  [data-overlay-trigger],
  .js-hover-scale,
  .js-magnetic-button,
  footer a {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── 8. 底部 TabBar 安全区与层级 ── */
  .fixed.bottom-0.left-0.right-0.bg-white {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1000 !important;
  }

  /* 确保底部 TabBar 不遮挡正文 */
  body {
    padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px));
  }

  /* ── 9. Footer 手机端精简规整 ── */
  footer .warp {
    gap: 1.5rem !important;
  }

  footer .warp>div.grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  footer .warp>div.grid>div {
    margin-bottom: 0 !important;
  }

  footer .warp>div.grid h4,
  footer .warp>div.max-md\:w-full h4,
  footer .warp>div.w-\[calc\(283\*var\(--vw\)\)\] h4 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  footer .warp>div.grid ul,
  footer .warp>div.grid ul li {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
  }

  footer .warp>div.w-\[calc\(283\*var\(--vw\)\)\],
  footer .warp>div.max-md\:w-full {
    width: 100% !important;
  }

  footer .warp>div.w-\[calc\(283\*var\(--vw\)\)\] p {
    font-size: 0.8125rem !important;
    line-height: 1.7 !important;
  }

  footer .warp>div.text-center p {
    font-size: 0.75rem !important;
  }

  /* ── 10. 弹窗面板在手机上占满底部 ── */
  [data-overlay-panel] {
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
  }

  /* ── 11. 图片默认响应式兜底 ── */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ── 12. 减少绝对定位装饰图的副作用 ── */
  .js-float-icon,
  .js-parallax,
  .marquee-img {
    pointer-events: none;
  }

  /* ── 13. 分页紧凑 ── */
  .pagination a,
  .pagination span,
  .pagination li a,
  .pagination li span,
  .pagination li.active span {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
  }

  /* ── 14. 面包屑与辅助文字收敛 ── */
  .text-sm.text-\[\#666\],
  .text-xs.text-\[\#666\],
  .text-\[calc\(14\*var\(--vw\)\)\].text-\[\#666\] {
    font-size: 0.8125rem !important;
  }

  /* ── 15. 详情页规格表格移动端可读性 ── */
  .spec-row,
  .flex.max-md\:flex-col {
    font-size: 0.8125rem;
  }

  .flex.max-md\:flex-col>span:first-child {
    color: #666;
    margin-bottom: 0.125rem;
  }

  /* ── 16. 搜索弹窗输入框撑满 ── */
  #searchPanel form {
    width: 100%;
  }

  /* ── 17. 横向滑动容器禁止滚动条 ── */
  .swiper-categories,
  .swiper-testimonials,
  .swiper-news {
    padding-bottom: 1.5rem;
  }

  /* ── 18. 小标签/徽章字号收敛 ── */
  .badge-new,
  .text-xs {
    font-size: 0.6875rem !important;
  }

  /* ── 19. 避免表格类布局溢出 ── */
  table,
  pre,
  iframe,
  embed,
  object,
  video {
    max-width: 100%;
  }

  /* ── 20. 首页 Services 四列在手机上 2x2 ── */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 21. CMS 列表卡片文字精简 ── */
  .picturebox .description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #666;
  }

  .picturebox .title a {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  /* ── 22. Banner 文字可读性增强 ── */
  .banner-m-txt {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  .banner-m-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
  }

  .banner-m-sub {
    font-size: 0.8125rem !important;
  }

  /* ── 23. Testimonials 卡片高度自适应 ── */
  .js-testimonial-card p {
    height: auto !important;
    min-height: 80px;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── 24. 详情页缩略图高度收敛 ── */
  .thumbnailSwiper .swiper-slide img {
    height: 80px !important;
  }

  /* ── 25. 联系页卡片紧凑 ── */
  .info-card {
    padding: 1rem !important;
  }

  .info-card h3 {
    font-size: 1rem !important;
  }

  .info-card p {
    font-size: 0.8125rem !important;
  }
}

/* ==========================================================
   超小屏（<=360px）进一步收敛
   ========================================================== */

@media screen and (max-width: 360px) {
  .js-section-title {
    font-size: 1.375rem !important;
  }

  section .warp>.flex.justify-between.gap-6.text-center>div p {
    font-size: 0.6875rem;
  }

  footer .warp>div.grid h4,
  footer .warp>div.max-md\:w-full h4,
  footer .warp>div.w-\[calc\(283\*var\(--vw\)\)\] h4 {
    font-size: 0.9375rem !important;
  }
}