@charset "UTF-8";

/* 关于我们：首屏保留品牌动效，其余模块使用可响应的真实 HTML/CSS。 */
.rzg-about-live,
.rzg-about-live *,
.rzg-about-live *::before,
.rzg-about-live *::after {
  box-sizing: border-box;
}

.rzg-about-live {
  width: 100%;
  overflow: hidden;
  color: #202763;
  background: #fff;
}

.rzg-about-live img {
  display: block;
}

.rzg-about-live-container {
  width: max(1720px, calc(85%));
  margin-right: auto;
  margin-left: auto;
}

.rzg-about-live-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1289 / 580;
  overflow: hidden;
  isolation: isolate;
  background: #303b96;
}

.rzg-about-live-hero img {
  position: absolute;
  max-width: none;
  height: auto;
  object-fit: contain;
}

/* 原 Logo 自带透明留白，按可见图形对齐设计稿。 */
.rzg-about-live-hero-logo {
  top: 25.8%;
  left: 6.5%;
  width: 37.6%;
  animation: rzg-about-logo-fade-in 1.2s ease-out .2s both;
}

.rzg-about-live-hero-product {
  position: absolute;
  inset: 0;
}

.rzg-about-live-hero-pro {
  top: 12.4%;
  left: 48.9%;
  z-index: 0;
  width: 32.4%;
  animation: rzg-about-pro-enter .9s ease-out .3s both;
}

.rzg-about-live-hero-tablet {
  top: 18.3%;
  left: 52.1%;
  z-index: 1;
  width: 42.6%;
  animation: rzg-about-tablet-enter 1.1s cubic-bezier(.22, 1, .36, 1) .65s both;
}

@keyframes rzg-about-logo-fade-in {
  from {
    opacity: 0;
    transform: scale(.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rzg-about-pro-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rzg-about-tablet-enter {
  from {
    opacity: 0;
    transform: translate(24px, 32px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (max-width: 640px) {
  .rzg-about-live-hero {
    aspect-ratio: auto;
    padding: 64px 0 24px;
  }

  .rzg-about-live-hero .rzg-about-live-hero-logo {
    position: relative;
    top: auto;
    left: auto;
    width: 82%;
    margin: 0 auto;
  }

  .rzg-about-live-hero-product {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1.12;
    margin-top: -12px;
  }

  .rzg-about-live-hero-pro {
    top: 0;
    left: 11%;
    width: 66%;
  }

  .rzg-about-live-hero-tablet {
    top: 10%;
    left: 5%;
    width: 90%;
  }
}

.rzg-about-live-section {
  position: relative;
}

.rzg-about-live-title h1,
.rzg-about-live-title h2 {
  margin: 0;
  color: #303b96;
  font-size: clamp(40px, 3.35vw, 64px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
}

.rzg-about-live-title > span {
  display: block;
  margin-bottom: 18px;
  color: #303b96;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
}

.rzg-about-live-title > p {
  margin: 28px 0 0;
  color: #303b96;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.9;
}

.rzg-about-live-title-line::after {
  content: "";
  display: block;
  width: clamp(130px, 9vw, 178px);
  height: 10px;
  margin-top: 25px;
  background: #ffa800;
}

.rzg-about-live-company {
  min-height: min(69vw, 1320px);
  padding: clamp(90px, 6.5vw, 126px) 0 clamp(110px, 7.2vw, 140px);
  background: #fff;
}

.rzg-about-live-company-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
  margin-top: clamp(70px, 5.4vw, 104px);
}

.rzg-about-live-company-lead p {
  margin: 0;
  color: #303b96;
  font-size: clamp(21px, 1.65vw, 32px);
  font-weight: 700;
  line-height: 1.75;
}

.rzg-about-live-company-lead img {
  width: clamp(190px, 14vw, 270px);
  max-height: 120px;
  object-fit: contain;
}

.rzg-about-live-company-copy {
  max-width: 1580px;
  margin: clamp(44px, 3vw, 58px) 0 0;
  color: #303b96;
  font-size: clamp(16px, 1.12vw, 22px);
  font-weight: 600;
  line-height: 2;
}

.rzg-about-live-company-gallery {
  display: grid;
  grid-template-columns: minmax(220px, .29fr) minmax(0, .71fr);
  gap: clamp(28px, 2.5vw, 48px);
  margin-top: clamp(58px, 4.5vw, 88px);
}

.rzg-about-live-company-gallery figure,
.rzg-about-live-history-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.rzg-about-live-company-gallery img {
  width: 100%;
  height: clamp(300px, 22vw, 430px);
  object-fit: cover;
}

.rzg-about-live-company-building img {
  object-position: center;
}

.rzg-about-live-company-event img {
  object-position: center 42%;
}

.rzg-about-live-history,
.rzg-about-live-mission {
  color: #fff;
  background-color: #303b96;
  background-image: linear-gradient(rgba(48,59,150,.9), rgba(48,59,150,.94)), url('https://cdn.ruizhigu.com/images/about/live/blue-flow-background.png?v=20261026-about-div1');
  background-position: center;
  background-size: cover;
}

.rzg-about-live-history {
  min-height: min(51vw, 980px);
  padding: clamp(90px, 6.3vw, 122px) 0;
}

.rzg-about-live-history-layout {
  display: grid;
  grid-template-columns: minmax(520px, .86fr) minmax(540px, 1.14fr);
  gap: clamp(70px, 7vw, 135px);
  align-items: center;
}

.rzg-about-live-title-light h2,
.rzg-about-live-title-light > span,
.rzg-about-live-title-light > p {
  color: #fff;
}

.rzg-about-live-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: clamp(50px, 3.8vw, 74px) 0 0;
  padding: 0;
  list-style: none;
}

.rzg-about-live-timeline::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 28px;
  left: clamp(135px, 9.5vw, 182px);
  width: 2px;
  background: rgba(255,255,255,.35);
}

.rzg-about-live-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(115px, 8vw, 154px) minmax(0, 1fr);
  gap: clamp(48px, 4vw, 76px);
  min-height: 126px;
  padding-bottom: 26px;
}

.rzg-about-live-timeline li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: clamp(130px, 9.23vw, 177px);
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 3px solid #303b96;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}

.rzg-about-live-time strong,
.rzg-about-live-time span {
  display: block;
}

.rzg-about-live-time strong {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.1;
}

.rzg-about-live-time span {
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.rzg-about-live-timeline h3 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(17px, 1.13vw, 25px);
  line-height: 1.45;
  font-weight: 700;
}

.rzg-about-live-timeline p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.75;
}

.rzg-about-live-history-photo {
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 30px 70px rgba(10,22,91,.28);
}

.rzg-about-live-history-photo img {
  width: 100%;
  height: clamp(500px, 36vw, 690px);
  object-fit: cover;
  object-position: center;
}

.rzg-about-live-brand {
  min-height: min(59vw, 1130px);
  padding: clamp(90px, 6.7vw, 130px) 0 clamp(110px, 7.5vw, 145px);
  background: #fbfbff;
}

.rzg-about-live-brand-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
}

.rzg-about-live-brand-head > img {
  width: clamp(230px, 17vw, 330px);
  max-height: 145px;
  object-fit: contain;
}

.rzg-about-live-brand-shift {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  margin: clamp(45px, 3.3vw, 64px) 0 0;
  padding: 0 30px;
  border-radius: 9px;
  color: #fff;
  background: #ffa800;
  font-size: clamp(16px, 1.12vw, 22px);
  font-weight: 700;
}

.rzg-about-live-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 2.4vw, 46px);
  margin-top: clamp(50px, 4vw, 78px);
}

.rzg-about-live-brand-grid article {
  position: relative;
  min-height: clamp(330px, 23vw, 445px);
  padding: clamp(38px, 2.8vw, 54px);
  overflow: hidden;
  border: 3px solid #d9def8;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 20px rgba(48,59,150,.04);
}

.rzg-about-live-brand-grid b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: #fff;
  background: #303b96;
  font-size: 46px;
}

.rzg-about-live-brand-grid img {
  position: absolute;
  top: 24px;
  right: 22px;
  width: clamp(110px, 9vw, 172px);
  height: clamp(110px, 9vw, 172px);
  object-fit: contain;
}

.rzg-about-live-brand-grid h3 {
  position: relative;
  margin: clamp(50px, 3.5vw, 68px) 0 20px;
  color: #303b96;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.35;
}

.rzg-about-live-brand-grid p {
  position: relative;
  margin: 0;
  color: #000;
  font-size: clamp(15px, 1vw, 19px);
  line-height: 1.85;
}

.rzg-about-live-mission {
  padding-top: clamp(90px, 6.4vw, 124px);
}

.rzg-about-live-mission-head > p {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 28px;
  color: #fff;
  background: #ffa800;
  font-size: clamp(14px, .9vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}

.rzg-about-live-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 52px);
}

.rzg-about-live-mission-grid article {
  position: relative;
  min-height: clamp(490px, 31vw, 600px);
  padding: 65px clamp(45px, 4.2vw, 80px) 50px 0;
}

.rzg-about-live-mission-grid article + article {
  padding-right: 0;
  padding-left: clamp(45px, 4.2vw, 80px);
}

.rzg-about-live-mission-ghost {
  display: block;
  color: rgba(255,255,255,.21);
  font-size: clamp(68px, 6vw, 116px);
  font-weight: 900;
  line-height: 1;
}

.rzg-about-live-mission-grid img {
  position: absolute;
  top: 30px;
  right: clamp(40px, 4vw, 75px);
  width: clamp(130px, 11vw, 210px);
  height: clamp(130px, 11vw, 210px);
  object-fit: contain;
}

.rzg-about-live-mission-grid article + article img {
  right: 0;
}

.rzg-about-live-mission-grid h3 {
  position: relative;
  margin: 48px 0 42px;
  color: #fff;
  font-size: clamp(31px, 2.55vw, 49px);
  line-height: 1.3;
  font-weight: 700;
}

.rzg-about-live-mission-grid p {
  position: relative;
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(17px, 1.22vw, 23px);
  line-height: 1.95;
}

/* 页面滚入动效：复用公共 IntersectionObserver，仅在本页定义方向与错峰节奏。 */
.rzg-about-live [data-reveal-group] .rzg-about-live-reveal-item {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity .72s ease,
    transform .9s cubic-bezier(.2,.75,.25,1);
  transition-delay: calc(var(--reveal-order, 0) * .12s);
}

.rzg-about-live [data-reveal-group] .rzg-about-live-reveal-left {
  transform: translate3d(-56px, 18px, 0);
}

.rzg-about-live [data-reveal-group] .rzg-about-live-reveal-right {
  transform: translate3d(56px, 18px, 0);
}

.rzg-about-live [data-reveal-group].is-visible .rzg-about-live-reveal-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rzg-about-live .rzg-reveal.rzg-about-live-reveal-zoom {
  transform: translateY(30px) scale(.965);
  transition-duration: .85s, 1s;
}

.rzg-about-live .rzg-reveal.rzg-about-live-reveal-zoom.is-visible {
  transform: translateY(0) scale(1);
}

.rzg-about-live-brand-grid[data-reveal-group] article img {
  opacity: 0;
  transform: translateY(16px) scale(.9) rotate(-3deg);
  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.2,.75,.25,1);
  transition-delay: calc(.2s + var(--reveal-order, 0) * .12s);
}

.rzg-about-live-brand-grid[data-reveal-group].is-visible article img {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

@media (max-width: 1180px) {
  .rzg-about-live-container {
    width: min(1100px, calc(100% - 48px));
  }

  .rzg-about-live-history-layout {
    grid-template-columns: minmax(430px, .9fr) minmax(400px, 1.1fr);
    gap: 55px;
  }

  .rzg-about-live-timeline::before {
    left: 126px;
  }

  .rzg-about-live-timeline li {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 45px;
  }

  .rzg-about-live-timeline li::before {
    left: 121px;
  }
}

@media (max-width: 900px) {
  .rzg-about-live-container {
    width: calc(100% - 36px);
  }

  .rzg-about-live-company,
  .rzg-about-live-history,
  .rzg-about-live-brand {
    min-height: 0;
  }

  .rzg-about-live-company-lead {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rzg-about-live-company-lead img {
    width: 210px;
  }

  .rzg-about-live-history-layout {
    grid-template-columns: 1fr;
  }

  .rzg-about-live-history-photo {
    max-width: 760px;
    margin: 0 auto;
  }

  .rzg-about-live-history-photo img {
    height: min(72vw, 560px);
  }

  .rzg-about-live-brand-grid {
    grid-template-columns: 1fr;
  }

  .rzg-about-live-brand-grid article {
    min-height: 320px;
  }

  .rzg-about-live-mission-grid {
    grid-template-columns: 1fr;
  }

  .rzg-about-live-mission-grid article,
  .rzg-about-live-mission-grid article + article {
    min-height: 430px;
    padding: 55px 0;
  }

  .rzg-about-live-mission-grid img,
  .rzg-about-live-mission-grid article + article img {
    right: 0;
  }

}

@media (max-width: 640px) {
  .rzg-about-live-title h1,
  .rzg-about-live-title h2 {
    font-size: 36px;
  }

  .rzg-about-live-title-line::after {
    height: 7px;
  }

  .rzg-about-live-company,
  .rzg-about-live-history,
  .rzg-about-live-brand {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .rzg-about-live-company-lead {
    margin-top: 54px;
  }

  .rzg-about-live-company-gallery {
    grid-template-columns: 1fr;
  }

  .rzg-about-live-company-gallery img {
    height: 64vw;
    min-height: 240px;
    max-height: 390px;
  }

  .rzg-about-live-company-event img {
    height: 58vw;
  }

  .rzg-about-live-timeline::before {
    left: 96px;
  }

  .rzg-about-live-timeline li {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 42px;
    min-height: 150px;
  }

  .rzg-about-live-timeline li::before {
    left: 91px;
  }

  .rzg-about-live-time strong {
    font-size: 20px;
  }

  .rzg-about-live-time span {
    font-size: 12px;
  }

  .rzg-about-live-brand-head {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .rzg-about-live-brand-head > img {
    width: 210px;
  }

  .rzg-about-live-brand-shift {
    min-height: 52px;
    padding: 0 20px;
    font-size: 14px;
  }

  .rzg-about-live-brand-grid article {
    min-height: 310px;
    padding: 30px 26px;
  }

  .rzg-about-live-brand-grid img {
    width: 120px;
    height: 120px;
  }

  .rzg-about-live-mission {
    padding-top: 72px;
  }

  .rzg-about-live-mission-head > p {
    display: block;
    padding: 13px 18px;
    border-radius: 12px;
  }

  .rzg-about-live-mission-grid article,
  .rzg-about-live-mission-grid article + article {
    min-height: 390px;
  }

  .rzg-about-live-mission-ghost {
    font-size: 70px;
  }

  .rzg-about-live-mission-grid img {
    width: 126px;
    height: 126px;
  }

  .rzg-about-live-mission-grid h3 {
    margin-top: 42px;
    font-size: 30px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .rzg-about-live-hero img {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .rzg-about-live [data-reveal-group] .rzg-about-live-reveal-item,
  .rzg-about-live .rzg-reveal.rzg-about-live-reveal-zoom,
  .rzg-about-live-brand-grid[data-reveal-group] article img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}