body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Arial Normal', 'Arial', sans-serif;
}

/* 放置所有元素的大盒子 */
.container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

/* 使用媒体查询根据屏幕尺寸调整样式 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {

  /* 当屏幕宽度小于等于480px时的样式 */
  .content {
    width: 95%;
    /* 或者其他适当的宽度 */
  }
}

/* 封面背景 */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  /* Adjusted to be percentage-based */
  height: 100%;
  background-image: url('../images/封面.png');
  background-size: auto 100%;
  animation: slideRight 40s linear infinite;
}

@keyframes slideRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
    /* Adjusted to be percentage-based */
  }
}

/* 机器人 */
.image-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 77%;
  /* Adjusted to be percentage-based */
  overflow: hidden;
}

.cover-image {
  position: absolute;
  left: 41.95%;
  /* Adjusted to be percentage-based */
  width: 51%;
  /* Adjusted to be percentage-based */
  height: auto;
  object-fit: cover;
}

/* 封面标题 */
.custom-container {
  position: relative;
  width: 100%;
  height: 39%;
  left: -7.5%;
  /* Adjusted to be percentage-based */
  overflow: hidden;
  top: 12.5%;
  /* Adjusted to be percentage-based */
}

.custom-image {
  position: absolute;
  left: 7.9%;
  /* Adjusted to be percentage-based */
  width: 80%;
  /* Adjusted to be percentage-based */
  height: auto;
  object-fit: cover;
}

/* 红十字 */
.red-cross-container {
  position: relative;
  width: 100%;
  height: 10%;
  /* Adjusted to be percentage-based */
  overflow: hidden;
  top: 49%;
  /* Adjusted to be percentage-based */
}

.red-cross-image {
  position: absolute;
  left: 94%;
  /* Adjusted to be percentage-based */
  width: 4.5%;
  /* Adjusted to be percentage-based */
  height: auto;
  object-fit: cover;
}

/* copy-right文字 */
.copyright {
  color: #F2F2F2;
  position: absolute;
  width: 47.5%;
  /* Adjusted to be percentage-based */
  height: 100%;
  font-size: 1vw;
  top: 96%;
  left: 1.2%;
}

/* 点击任意位置进入 */
.click-to-enter {
  position: absolute;
  left: 40.9%;
  /* Adjusted to be percentage-based */
  top: 82.7%;
  /* Adjusted to be percentage-based */
  font-size: 1.4vw;
  /* Adjusted to be responsive */
  color: #d7d7d7;
  cursor: pointer;
}

/* logo */
.logo-container {
  position: absolute;
  left: 2.2%;
  /* Adjusted to be percentage-based */
  width: 6.71%;
  /* Adjusted to be percentage-based */
  top: 12.96%;
  /* Adjusted to be percentage-based */
  height: 12.64%;
  /* Adjusted to be percentage-based */
  overflow: hidden;
}

.logo-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}