/* PC 端「关于我们」页面专属样式，只被 about.html 引用 */

.business {
  background-color: #fff;
  height: 46.5625rem;
  padding-top: 4.4375rem;
}

.business__grid {
  grid-template-rows: 16rem 16rem;
  grid-template-columns: 13rem 29.5rem 29.5rem;
  gap: 1.5rem;
  display: grid;
}

.business__panel {
  color: #fff;
  background-image: var(--panel-bg);
  background-position: 50%;
  background-size: cover;
  grid-row: 1/3;
  position: relative;
}

.business__panel-en {
  font-family: var(--site-font-en);
  letter-spacing: .25rem;
  opacity: .45;
  writing-mode: vertical-rl;
  font-size: .75rem;
  position: absolute;
  top: 8.375rem;
  left: 4.5625rem;
}

.business__panel-title {
  letter-spacing: .25rem;
  writing-mode: vertical-rl;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2rem;
  position: absolute;
  top: 12.375rem;
  left: 6.8125rem;
}

.business-card {
  background-color: var(--site-fill);
  transition: background-color var(--site-duration) ease, box-shadow var(--site-duration) var(--site-ease);
  border-radius: .25rem;
  padding: 7.4375rem 2.5rem 0 4.5625rem;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 2px 4px #1e3c780f;
}

@media (hover:hover) {
  .business-card:hover {
    box-shadow: var(--site-shadow-md);
    background-color: #fff;
  }
}

.business-card__no {
  font-family: var(--site-font-en);
  color: #ecf0f9;
  font-size: 5rem;
  font-weight: 700;
  line-height: 5rem;
  position: absolute;
  top: 1.125rem;
  left: .9375rem;
}

.business-card__en {
  font-family: var(--site-font-en);
  color: #1857d9;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.75rem;
  position: absolute;
  top: 3.125rem;
  left: 4.5625rem;
}

.business-card__icon {
  justify-content: center;
  align-items: center;
  width: 5.625rem;
  height: 5.625rem;
  display: flex;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.business-card__icon img {
  width: var(--w);
  height: var(--h);
  flex-shrink: 0;
}

.business-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.business-card__desc {
  color: var(--site-text-regular);
  margin-top: 1.0625rem;
  font-size: 1rem;
  line-height: 1.75rem;
}

.why {
  background-color: #f3f8fe;
  height: 36.5625rem;
  padding-top: 6.6875rem;
}

.why__en {
  font-family: var(--site-font-en);
  color: #a0a0a0;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.875rem;
}

.why__title {
  margin-top: .9375rem;
}

.why__grid {
  grid-template-columns: repeat(3,23.5rem);
  gap: 2.25rem;
  margin-top: 2.125rem;
  display: grid;
}

.why-card {
  height: 10.6875rem;
  box-shadow: var(--site-shadow-sm);
  transition: box-shadow var(--site-duration) var(--site-ease);
  background-color: #fff;
  border-radius: 1.25rem;
  padding: 2.3125rem 1.25rem 0 9.125rem;
  position: relative;
}

@media (hover:hover) {
  .why-card:hover {
    box-shadow: var(--site-shadow-md);
  }
}

.why-card__icon {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 3.4375rem;
  left: 2.5rem;
}

.why-card__divider {
  background-color: #e6e6e6;
  width: 1px;
  height: 2.1875rem;
  position: absolute;
  top: 4.375rem;
  left: 7.5rem;
}

.why-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
}

.why-card__desc {
  color: var(--site-text-regular);
  margin-top: .8125rem;
  font-size: .8125rem;
  line-height: 1.28125rem;
}

.cta {
  background-color: #f3f8fe;
  background-image: var(--cta-bg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: max(100%,90rem) 7.5rem;
  height: 11.0625rem;
  padding-top: 3.625rem;
}

.cta__inner {
  justify-content: space-between;
  align-items: center;
  height: 7.4375rem;
  display: flex;
}

.cta__text {
  color: #fff;
  padding-left: 1px;
  font-size: 1.125rem;
  font-weight: 500;
}

.cta__button {
  width: 9.75rem;
  height: 2.875rem;
  margin-right: .1875rem;
}

/* ========== 页面背景图（原组件以内联 CSS 变量传入，路径相对本 CSS 文件） ========== */

.hero {
  --hero-image: url(../image/home-hero-bg.png);
}

.intro {
  --intro-bg: url(../image/intro-building.png), url(../image/intro-skyline.png);
}

.business__panel {
  --panel-bg: url(../image/about-business-panel.png);
}

.cta {
  --cta-bg: url(../image/about-cta-bg.png);
}

.business__grid > .business-card:nth-child(2) {
  --reveal-delay: 80ms;
}

.business__grid > .business-card:nth-child(2) > .business-card__icon:nth-child(3) > img:nth-child(1) {
  --w: 6.375rem;
  --h: 6.375rem;
}

.business__grid > .business-card:nth-child(3) {
  --reveal-delay: 160ms;
}

.business__grid > .business-card:nth-child(3) > .business-card__icon:nth-child(3) > img:nth-child(1) {
  --w: 6.625rem;
  --h: 6.125rem;
}

.business__grid > .business-card:nth-child(4) {
  --reveal-delay: 240ms;
}

.business__grid > .business-card:nth-child(4) > .business-card__icon:nth-child(3) > img:nth-child(1) {
  --w: 5.25rem;
  --h: 5.25rem;
}

.business__grid > .business-card:nth-child(5) {
  --reveal-delay: 320ms;
}

.business__grid > .business-card:nth-child(5) > .business-card__icon:nth-child(3) > img:nth-child(1) {
  --w: 6.3125rem;
  --h: 6.3125rem;
}

.why__grid > .why-card:nth-child(2) {
  --reveal-delay: 100ms;
}

.why__grid > .why-card:nth-child(3) {
  --reveal-delay: 200ms;
}