/* 页面整体布局 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #93d2f3;
}

/* 图片容器，使用相对定位 */
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

/* 背景图片 */
.background-image {
  width: 597.3rpx; 
  height: 320rpx;
  opacity: 0;
  animation: fadeIn 200ms ease-in forwards;
  animation-delay: 400ms;
}

/* 文字样式，竖向排列 */
.overlay-text {
  white-space: pre; /* 保留文本中的空格 */
  writing-mode: vertical-lr; /* 让文字竖向排列 */
  text-orientation: upright; /* 保持文字正方向 */
  font-size: 137.4rpx; /* 设定文字大小 */
  line-height: 1.5; /* 调整行高，使文字之间有间距 */
  color: white; /* 文字颜色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让文字垂直水平居中 */
  text-shadow: 3.8rpx 7.6rpx 11.5rpx #1d469d;
  font-weight: bold;
  opacity: 0; /*初始透明读*/
  animation: fadeIn 400ms ease-in forwards;
}


/* 页面整体布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度为视口高度 */
  background-color: #93d2f3; /* 背景颜色 */
}

/* 图片容器，使用相对定位 */
.image-container2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* 为绝对定位的子元素提供相对定位 */
  width: 100%;
}

/* 背景图片 */
.background-image2 {
  width: 597.3rpx; 
  height: 862.6rpx; 
  opacity: 0;
  animation: fadeIn 200ms ease-in forwards;
  animation-delay: 600ms;
}

/* 按钮样式 */
.image-button {
  position: absolute; /* 使按钮相对于父容器绝对定位 */
  top: 50%; /* 使按钮垂直居中 */
  left: 50%; /* 使按钮水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
}

/* 按钮样式 */
.start-button {
  background-color: #4095e5;
  color: white;
  font-size: 76.3rpx;
  border-radius: 40rpx;
  box-shadow: 6rpx 4rpx 6rpx #0f40f5;
  opacity: 0;
  animation: fadeIn 200ms ease-in forwards;
  animation-delay: 600ms;
}

@keyframes fadeIn{
  to{
    opacity: 1; /*最终透明度*/
  }
}