/* Compiled from LESS. Edit this CSS going forward. */
/* Modern layout tokens — html { font-size: 10px } in site.less → 1rem = 10px */
/* 1200px content */
/* Homepage section shell — single visual column */
/* Homepage */
/* between major sections */
/* section title → main content */
/* carousel → Learn More button */
/* last section → footer */
/* Inner pages (About, etc.) */
/* Toolbox / forpros marketing page — type scale */
/* 3.2rem — page-level headings */
/* 2.4rem */
/* 1.8rem — intro copy (e.g. above search) */
/* 1.6rem — section descriptions */
/* 1.4rem */
/* 2.4rem — nested card titles */
/* 1.8rem */
/* bottom-content product name (.big-title) vs block headings (.card-title) */
/* product-library.html 品类入口卡：名称略大于素材列表标题 */
/* 手机端品类卡：图片区统一高度，便于同行标题/按钮对齐 */
/* 1.8rem */
/* 1.4rem */
/* 1.3rem */
/* Toolbox floating actions (cart, back-to-top, back, home) */
/* Mobile stack: base → back-top → goto → back-home → cart */
/* Toolbox 桌面侧栏：filter-nav / slider-bar（高于主内容，低于弹层） */
/* Form / lookup / registration pages — type scale */
/* Marketing / product toolkit (.page-toolbox) — light banner, dark text */
/* product-library-list 等：两列素材卡片 + 紧凑操作钮 */
/* 两列品类卡：等高图片区 + 标题弹性区 + 按钮贴底 */
/* product-library.html：品类网格 + 长 CTA 文案 */
/* product-library-one 等：bottom-content 内各类素材列表 */
/* gifts-detail.html / props-detail.html：详情 + You May Also Like */
/* Inner page hero — mobile (legacy mpx @ 414px design → rem) */
.page-support {
  overflow: hidden;
  background: #f4f6f8;
  box-sizing: border-box;
}
.page-support .grid-1 {
  position: relative;
  width: 100%;
  min-height: 53rem;
  color: #fff;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-support .grid-1 .title {
  position: relative;
  z-index: 2;
  font-size: 3.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  width: 100%;
  max-width: 120rem;
}
.page-support .grid-1 .desc {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 64rem;
  font-size: 1.6rem;
  margin-top: 1.2rem;
  line-height: 1.6;
}
.page-support .grid-1 .sub-title {
  font-size: 1.8rem;
  letter-spacing: -0.01em;
}
.page-support .grid-2 {
  width: 100%;
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
.page-support .grid-2 .grid-title {
  position: relative;
  width: 100%;
  color: rgba(18, 18, 18, 0.62);
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 6.4rem;
  text-align: center;
  /* 标题与 logo 同区重叠：logo 用 abs-center 居中叠在文字上 */
}
.page-support .grid-2 .grid-title .font-b {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 2.4rem 0;
}
.page-support .grid-2 .grid-title .logo {
  width: 8.2rem;
  height: 8.7rem;
  z-index: 1;
  object-fit: contain;
  pointer-events: none;
}
.page-support .grid-2 .card-group {
  width: 100%;
  margin-top: 0;
  gap: 2rem;
  align-items: stretch;
}
.page-support .grid-2 .card {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  background: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 2.4rem rgba(15, 23, 42, 0.07);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}
.page-support .grid-2 .card .location {
  flex-shrink: 0;
  width: 1.8rem;
  height: 2.4rem;
  object-fit: contain;
}
.page-support .grid-2 .card .email {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.5rem;
  object-fit: contain;
  position: relative;
  top: 0.2rem;
}
.page-support .grid-2 .card .time {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
}
.page-support .grid-2 .card-1 {
  padding: 2.4rem 2rem 2.8rem;
}
.page-support .grid-2 .card-1 .card-title {
  color: #121212;
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.page-support .grid-2 .card-1 .card-title.ca-version {
  margin-bottom: 4.2rem;
}
.page-support .grid-2 .card-1 .card-desc {
  color: #121212;
  font-size: 1.6rem;
  line-height: 1.4;
}
.page-support .grid-2 .card-1 .first-title {
  font-size: 1.6rem;
  line-height: 1.3;
  color: #121212;
  margin-bottom: 1.6rem;
}
.page-support .grid-2 .card-1 .location-text {
  flex: 1;
  min-width: 0;
  color: rgba(18, 18, 18, 0.62);
  line-height: 1.45;
  font-size: 1.5rem;
  margin-left: 1.2rem;
}
.page-support .grid-2 .card-1 .row-2,
.page-support .grid-2 .card-1 .row-4 {
  margin-top: 1.2rem;
  margin-bottom: 0;
  align-items: flex-start;
}
.page-support .grid-2 .card-1 .row-3 {
  margin-top: 1.2rem;
  align-items: flex-start;
}
.page-support .grid-2 .card-1 .phone-text,
.page-support .grid-2 .card-1 .time-text {
  color: rgba(18, 18, 18, 0.62);
  font-size: 1.5rem;
  line-height: 1.45;
  margin-left: 1.2rem;
}
.page-support .grid-2 .card-1 .other-location {
  color: rgba(18, 18, 18, 0.62);
  font-size: 1.5rem;
  line-height: 1.45;
  margin-top: 1.2rem;
}
.page-support .grid-2 .card-2,
.page-support .grid-2 .card-3 {
  position: relative;
  min-height: 54rem;
  padding: 3.2rem 2.4rem 10rem;
  margin-left: 0;
  margin-right: 0;
}
.page-support .grid-2 .card-2 > .flex,
.page-support .grid-2 .card-3 > .flex {
  align-items: flex-start;
}
.page-support .grid-2 .card-2 .write,
.page-support .grid-2 .card-3 .write,
.page-support .grid-2 .card-2 .registration,
.page-support .grid-2 .card-3 .registration {
  flex-shrink: 0;
  width: 6.5rem;
  height: auto;
  max-height: 7.2rem;
  margin-right: 2rem;
  object-fit: contain;
}
.page-support .grid-2 .card-2 .card-text,
.page-support .grid-2 .card-3 .card-text {
  flex: 1;
  min-width: 0;
  width: auto;
}
.page-support .grid-2 .card-2 .card-text .card-title,
.page-support .grid-2 .card-3 .card-text .card-title {
  color: #121212;
  font-size: 2rem;
  line-height: 1.25;
}
.page-support .grid-2 .card-2 .card-text .card-desc,
.page-support .grid-2 .card-3 .card-text .card-desc {
  color: rgba(18, 18, 18, 0.62);
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 1.2rem;
}
.page-support .grid-2 .card-2 .button,
.page-support .grid-2 .card-3 .button {
  background: #1f94d2;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.8rem;
  min-width: 21.8rem;
  height: 5.2rem;
  padding: 0 2.4rem;
  bottom: 2.4rem;
  text-decoration: none;
  /* 保留 abs-center-x 水平居中，hover 时勿单独改 transform */
  transform: translateX(-50%);
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-support .grid-2 .card-2 .button:hover,
.page-support .grid-2 .card-3 .button:hover {
  background: #1578a8 !important;
  transform: translateX(-50%);
  box-shadow: 0 0.4rem 1.2rem rgba(31, 148, 210, 0.35);
}
.page-support .grid-2 .card-3 .registration {
  margin-right: 2rem;
}
@media screen and (max-width: 990px) {
  .page-support .grid-1 {
    height: 68.4rem;
    padding-top: 19.8rem;
  }
  .page-support .grid-1 .title {
    font-size: 3.2rem;
  }
  .page-support .grid-1 .desc {
    font-size: 1.4rem;
    width: 34rem;
    margin-top: 4rem;
  }
  .page-support .grid-2 {
    padding-top: 6.7rem;
    padding-bottom: 3.2rem;
  }
  .page-support .grid-2 .grid-title {
    font-size: 2.2rem;
    width: 33.5rem;
  }
  .page-support .grid-2 .grid-title .font-b {
    text-align: center;
  }
  .page-support .grid-2 .logo {
    width: 6.2rem;
    height: 6.6rem;
  }
  .page-support .grid-2 .card-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .page-support .grid-2 .card {
    width: 38.3rem;
    height: 32.2rem;
  }
  .page-support .grid-2 .card .location {
    width: 1.7rem;
    height: 2.3rem;
  }
  .page-support .grid-2 .card .phone {
    width: 1.8rem;
    height: 1.8rem;
  }
  .page-support .grid-2 .card .time {
    width: 1.8rem;
    height: 1.8rem;
  }
  .page-support .grid-2 .card-1 {
    padding-left: 5rem;
    padding-right: 4rem;
    padding-top: 5.4rem;
    padding-bottom: 5.4rem;
    height: auto;
  }
  .page-support .grid-2 .card-1 .card-title {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 0.9rem;
  }
  .page-support .grid-2 .card-1 .card-title.ca-version {
    margin-bottom: 5.5rem;
  }
  .page-support .grid-2 .card-1 .first-title {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 2.9rem;
  }
  .page-support .grid-2 .card-1 .location-text {
    width: 22.4rem;
    font-size: 1.4rem;
    margin-left: 1.3rem;
  }
  .page-support .grid-2 .card-1 .phone-text {
    font-size: 1.4rem;
    margin-left: 1.2rem;
  }
  .page-support .grid-2 .card-1 .time-text {
    font-size: 1.4rem;
    margin-left: 1.2rem;
  }
  .page-support .grid-2 .card-1 .row-2 {
    margin-top: 2rem;
    margin-bottom: 2.4rem;
  }
  .page-support .grid-2 .card-2 {
    padding-left: 7.4rem;
    padding-right: 7.4rem;
    padding-top: 2.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .page-support .grid-2 .card-2 .flex {
    flex-direction: column;
    align-items: center;
  }
  .page-support .grid-2 .card-2 .write {
    width: 7rem;
    height: 6.8rem;
    margin-right: 0;
    margin-bottom: 1.9rem;
  }
  .page-support .grid-2 .card-2 .card-text {
    width: 100%;
  }
  .page-support .grid-2 .card-2 .card-text .card-title {
    text-align: center;
    font-size: 2.4rem;
  }
  .page-support .grid-2 .card-2 .card-text .card-desc {
    text-align: center;
    font-size: 1.4rem;
    margin-top: 0.9rem;
  }
  .page-support .grid-2 .card-2 .button {
    width: 20.4rem;
    height: 5.6rem;
    bottom: 2.5rem;
    font-size: 1.6rem;
  }
  .page-support .grid-2 .card-3 {
    padding-left: 5.4rem;
    padding-right: 5.4rem;
    padding-top: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .page-support .grid-2 .card-3 .flex {
    flex-direction: column;
    align-items: center;
  }
  .page-support .grid-2 .card-3 .registration {
    width: 7rem;
    height: 7.8rem;
    margin-right: 0;
    margin-bottom: 0.9rem;
  }
  .page-support .grid-2 .card-3 .card-text {
    width: 100%;
  }
  .page-support .grid-2 .card-3 .card-text .card-title {
    text-align: center;
    font-size: 2.4rem;
  }
  .page-support .grid-2 .card-3 .card-text .card-desc {
    text-align: center;
    font-size: 1.4rem;
    margin-top: 0.9rem;
  }
  .page-support .grid-2 .card-3 .button {
    width: 20.4rem;
    height: 5.6rem;
    bottom: 2.5rem;
    font-size: 1.6rem;
  }
}
/* Support page polish */
.page-support .grid-1 .bg-img {
  object-position: center 35%;
}
.page-support .grid-1::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.35) 45%, rgba(15, 23, 42, 0.55) 100%);
}
.page-support .grid-1 .title {
  font-family: 'Gotham-pro-bold', sans-serif;
  text-shadow: 0 0.15rem 0.8rem rgba(0, 0, 0, 0.28);
}
.page-support .grid-1 .desc {
  font-family: 'Gotham-pro-light', sans-serif;
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}
.page-support .grid-2 {
  /* 仅联系信息卡整体上移；card-2/3 含底部绝对定位按钮，整卡 transform 会与按钮 hover 冲突导致闪动 */
}
.page-support .grid-2 .grid-title .font-b {
  font-family: 'Gotham-pro-bold', sans-serif;
}
.page-support .grid-2 .card-1 {
  transition: box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 991px) {
  .page-support .grid-2 .card-1:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1.6rem 4rem rgba(15, 23, 42, 0.12);
    border-color: rgba(31, 148, 210, 0.18);
  }
}
.page-support .grid-2 .card-2,
.page-support .grid-2 .card-3 {
  transition: box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 991px) {
  .page-support .grid-2 .card-2:hover,
  .page-support .grid-2 .card-3:hover {
    box-shadow: 0 1.6rem 4rem rgba(15, 23, 42, 0.12);
    border-color: rgba(31, 148, 210, 0.18);
  }
}
.page-support .grid-2 .card-1 .card-title,
.page-support .grid-2 .card-1 .first-title {
  font-family: 'Gotham-pro-bold', sans-serif;
}
.page-support .grid-2 .card-2 .card-title,
.page-support .grid-2 .card-3 .card-title {
  font-family: 'Gotham-pro-bold', sans-serif;
}
.page-support .grid-2 .card-2 .card-desc,
.page-support .grid-2 .card-3 .card-desc {
  font-family: 'Gotham-pro-light', sans-serif;
}
.page-support .grid-2 .card-2 .button,
.page-support .grid-2 .card-3 .button {
  font-family: 'Gotham-med', sans-serif;
  font-weight: 500;
}
@media screen and (max-width: 990px) {
  .page-support .grid-1::after {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.72) 100%);
  }
}