/* 原有全局样式保留不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --number-height: 150px;
  --number-half-height: 75px;
  --number-width: 130px;
  --number-radius: 23px;
  --min-width: 1200px;
  --width: 1200px;
}

body {
  font-family: "Microsoft Yahei", sans-serif;
  /* background-color: #f7f8fa; */
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;

}

.min {
  min-width: var(--min-width);
}

#ghostHeader {
  height: 64px;
}




#app {
  display: flex;
  gap: 16px;
}

.box {
  position: relative;
  width: var(--number-width);
  height: var(--number-height);
  border-radius: var(--number-radius);
  overflow: hidden;
  will-change: transform;
}

/* 内部左右方块 + 中间分割横线 提升层级固定不动 */
.box .divider-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #D3D9E4;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  pointer-events: none;
}

.box .block-left,
.box .block-right {
  position: absolute;
  width: 16px;
  height: 28px;
  background-color: #dee8f7;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  pointer-events: none;
  border: 2px solid #D3D9E4;
}

.box .block-left {
  left: 0;
  border-left: none;
}

.box .block-right {
  right: 0;
  border-right: none;
}

.box .child {
  width: var(--number-width);
  height: var(--number-half-height);
  overflow: hidden;
}

.box>.top {
  background-color: rgb(255, 255, 255);
  line-height: var(--number-height);
  /* border-bottom: 1px solid #D3D9E4; */
  border-radius: var(--number-radius) var(--number-radius) 0 0;
}

.box .flip {
  position: absolute;
  top: 0px;
  z-index: 1;
  transform-origin: bottom;
  border-radius: var(--number-radius) var(--number-radius) 0 0;
}

.box .flip .flip_face {
  position: absolute;
  background-color: rgb(255, 255, 255);
  line-height: var(--number-height);
  z-index: 1;
  /* border-bottom: 1px solid #D3D9E4; */
}

.box .flip .flip_back {
  position: absolute;
  background-color: rgb(255, 255, 255);
  line-height: 0px;
  transform: perspective(0px) rotateX(0deg) rotateY(-180deg) rotate(180deg);
  /* border-top: 1px solid #D3D9E4; */
}

.box .bottom {
  background-color: rgb(255, 255, 255);
  line-height: 0px;
  /* border-top: 1px solid #D3D9E4; */
  border-radius: 0 0 23px 23px;
}

.text {
  text-align: center;
  font-size: 100px;
  font-weight: 900;
  color: #191818;
}

.cloud-box {
  width: var(--width);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cloud-left {
  position: relative;
  width: 200px;

  height: 70px;
  background-image: url('../image/cloud-left.png');
  background-size: cover;
}



.cloud-right {
  position: relative;
  width: 200px;

  height: 70px;
  background-image: url('../image/cloud-right.png');
  background-size: cover;


}



.cloud-content {
  max-width: 670px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 25px;
}

.cloud-title {
  font-weight: 600;
  font-size: 40px;
  color: #292F45;

}

.cloud-desc {
  font-weight: 400;
  font-size: 16px;
  color: #292F45;
  margin-top: 10px;
  text-align: center;
}

.wow {
  opacity: 0; /* 初始状态为透明 */
  transform: translateY(50px); /* 向下移动50px */
  transition: opacity 0.5s, transform 0.5s; /* 动画效果 */
}
.active {
  opacity: 1; /* 进入视口时不透明 */
  transform: translateY(0); /* 动画结束时恢复原位 */
}