.auto-parts-page {
  color: #000;
  font-family: "Noto Sans SC:Light", "Microsoft YaHei", sans-serif;
}

.auto-parts-canvas {
  width: 1920px;
  height: 4577px;
  background: #fff;
}

.auto-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 666px;
  overflow: hidden;
}

.auto-hero-image {
  width: 1929px;
  height: 666px;
  max-width: none;
  object-fit: cover;
}

.auto-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 58%);
}

.auto-header {
  position: absolute;
  top: 29px;
  left: 92px;
  width: 1728px;
}

.auto-logo {
  display: block;
  width: 260px;
  height: 45px;
}

.auto-logo img {
  width: 175px;
  height: 45px;
  object-fit: contain;
  object-position: left center;
}

.auto-hero-title {
  position: absolute;
  top: 299px;
  left: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.auto-hero-title i {
  width: 7px;
  height: 62px;
  background: #f4b53f;
}

.auto-hero-title h1 {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 65px;
  font-weight: 700;
  letter-spacing: -1.625px;
  line-height: 77px;
}

.auto-intro {
  position: absolute;
  top: 824px;
  left: 105px;
  display: flex;
  width: 1673px;
  height: 140px;
  justify-content: space-between;
}

.auto-title h2,
.auto-title p {
  margin: 0;
}

.auto-title h2 {
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 68px;
  font-weight: 700;
  line-height: 72px;
}

.auto-title p {
  margin-top: 10px;
  font-family: "Noto Sans SC:Light", sans-serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 58px;
}

.auto-lead {
  width: 805px;
  margin: 0;
  padding-top: 4px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.52;
}

.industry-demands {
  position: absolute;
  top: 1076px;
  left: 117px;
  width: 1639px;
  height: 541px;
}

.industry-demands > h2,
.auto-solutions > h2,
.service-cases > h2 {
  margin: 0;
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 64px;
  text-align: center;
}

.industry-demands > h2 span,
.auto-solutions > h2 span,
.service-cases > h2 span {
  margin-left: 18px;
  font-family: "Noto Sans SC:Light", sans-serif;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.52px;
}

.demand-grid {
  position: absolute;
  top: 157px;
  left: 0;
  display: grid;
  width: 1639px;
  grid-template-columns: 1.02fr 1.1fr 1fr 0.72fr;
}

.demand-item {
  position: relative;
  min-height: 378px;
  padding: 0 28px;
  border-left: 3px solid #f4b53f;
}

.demand-item strong {
  display: block;
  margin-bottom: 28px;
  color: #f4b53f;
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 54px;
}

.demand-item h3 {
  margin: 0 0 35px;
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.95px;
  line-height: 1.2;
}

.demand-item p {
  max-width: 360px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 30px;
}

.auto-solutions {
  position: absolute;
  top: 1751px;
  left: 0;
  width: 1920px;
  height: 912px;
  overflow: hidden;
}

.solutions-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 810px;
  max-width: none;
  object-fit: cover;
  opacity: 1;
}

.auto-solutions > h2 {
  position: absolute;
  top: 109px;
  left: 0;
  width: 100%;
}

.solution-grid {
  position: absolute;
  top: 302px;
  left: 286px;
  display: grid;
  width: 1418px;
  grid-template-columns: repeat(3, 420px);
  gap: 68px 79px;
}

.solution-card {
  display: flex;
  height: 270px;
  flex-direction: column;
  justify-content: center;
  padding: 34px 44px;
  background: #ffb200;
  color: #464646;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 18px 30px rgb(111 76 0 / 16%);
}

.solution-card h3 {
  margin: 0;
  font-family: "Noto Sans SC:Bold", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 45.6px;
}

.solution-card p {
  margin: 17px 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
}

.service-cases {
  position: absolute;
  top: 2783px;
  left: 0;
  width: 1920px;
  height: 1127px;
  overflow: hidden;
}

.cases-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 1231px;
  height: 1122px;
  max-width: none;
  object-fit: contain;
  object-position: right top;
  opacity: 0.32;
}

.service-cases > h2 {
  position: absolute;
  top: 221px;
  left: 0;
  width: 100%;
}

.case-band {
  position: absolute;
  top: 380px;
  left: 0;
  width: 1920px;
  height: 514px;
  background: rgb(238 238 238 / 68%);
}

.case-grid {
  display: grid;
  width: 1240px;
  height: 350px;
  margin: 88px auto 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.case-logo {
  position: relative;
  display: grid;
  place-items: center;
}

.case-logo:nth-child(3n + 2)::before,
.case-logo:nth-child(3n + 3)::before {
  position: absolute;
  top: 46px;
  bottom: 46px;
  left: 0;
  width: 1px;
  background: #808080;
  content: "";
}

.case-logo img {
  width: auto;
  height: auto;
  max-width: 251px;
  max-height: 135px;
  object-fit: contain;
}

.auto-footer {
  position: absolute;
  top: 3910px;
  left: 0;
  width: 1920px;
  height: 667px;
}

.auto-footer .footer-html {
  height: 667px;
}

.auto-footer .footer-brand-strip {
  top: 82px;
  left: 102px;
}

.auto-footer .footer-contact {
  top: 202px;
  left: 104px;
}

.auto-footer .footer-copyright {
  top: 504px;
  left: 106px;
}

.auto-footer .footer-social {
  top: 495px;
  left: 1653px;
}

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