html, body {
  margin: 0;
  padding: 0;
  background-color: #C30000; /* 鲜红色 */
}

/* 顶部固定容器（保持不动） */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
}

/* 顶部主图：宽 100%，高按比例自适应 */
.toplogo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 右侧按钮：直接在元素本体上设置尺寸、背景与动画 */
.topdown {
  position: absolute;
  top: 30%;             /* 保持你的原位置 */
  right: 8%;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;

  /* === TopDown.png 按 210×77 比例缩放（随视口）=== */
  width: 15vw;
  height: calc(15vw * (77 / 210));
  background: url("../img/TopDown.png") no-repeat center / contain;

  /* 呼吸动画（放大缩小循环） */
  transform-origin: center center;
  animation: topdown-breathe 1.8s ease-in-out infinite;

  /* 优化合成，避免偶发卡顿或不渲染 */
  will-change: transform;
  backface-visibility: hidden;
}

/* 呼吸关键帧 */
@keyframes topdown-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 背景大图：宽 100%，高自适应 */
.bg-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 背景容器：让财神可以相对它定位 */
.bg-wrap {
      position: relative;
    overflow: hidden;

}

/* logo：居中靠上显示，宽度最大化，高度按比例自动 */
.logo {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  z-index: 1;
  width: 50%;
  height: calc(100vw * (400 / 90)); /* 原图比例 */
  background: url("../img/dlogo.png") no-repeat center top / contain;
  pointer-events: none;
}

/* 财神：居中靠上显示，宽度最大化，高度按比例自动 */
.caishen {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
  width: 100%;
  height: calc(100vw * (651 / 688)); /* 原图比例 */
  background: url("../img/caishen.png") no-repeat center top / contain;
  pointer-events: none;
}

/* 财神下方按钮容器：自动包裹3个按钮 */
.caishen-buttons {
  position: absolute;
  top: 80%; /* 紧贴财神底部 */
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr; /* 上排两列 */
  grid-template-rows: auto auto;  /* 自动包裹两行 */
  column-gap: 8%;                 /* 左右间距 */
  row-gap: 8%;                    /* 上下间距 */
  align-items: center;
  justify-items: center;

  width: 80%;        /* 宽度与财神接近 */
  height: auto;      /* 自动根据按钮高度自适应 */
  z-index: 1;
}

/* 通用按钮样式 */
.caishen-buttons .btn {
  display: block;
  width: 100%;                    /* 宽度充满当前列 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

/* 左上按钮：Google Play */
.caishen-buttons .chplay {
  grid-column: 1;
  grid-row: 1;
  background-image: url("../img/chplay.png");
  aspect-ratio: 209 / 67;         /* 按图片比例 */
}

/* 右上按钮：App Store */
.caishen-buttons .appstore {
  grid-column: 2;
  grid-row: 1;
  background-image: url("../img/appstore.png");
  aspect-ratio: 209 / 67;
}

/* 下方按钮：Open H5 */
.caishen-buttons .openh5 {
  grid-column: 1 / -1;            /* 跨两列 */
  grid-row: 2;
  background-image: url("../img/openh5.png");
  aspect-ratio: 286 / 65;
  width: 70%;
}

/* ===== banner1：淡入 + 浮动 + PNG 光效扫光 ===== */
.banner1 {
  position: absolute;
  /*left: 50%;*/
  top: 48%;
  transform: scale(0.8);
  width: 100%;
  background: url("../img/center.png") no-repeat center / contain;
  aspect-ratio: 720 / 343;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;      /* 必须裁剪扫光 */

  /* 初始透明，然后淡入 */
  opacity: 1;
  animation:
    /*banner1Fade 1s ease-out forwards,*/
    banner1Float 3s ease-in-out infinite;
}

/* --- 淡入动画 --- */
@keyframes banner1Fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- 上下轻浮动 --- */
/*@keyframes banner1Float {
  0%   { transform: translate(-50%, 20px); }
  50%  { transform: translate(-50%, -12px); }
  100% { transform: translate(-50%, 20px); }
}*/

@keyframes banner1Float { 
    0%{
        transform: scale(0.8);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1); /*放大1.1倍*/
    }
	30%{
	    transform: scale(1); /*放大1.1倍*/
	}
    50%{
        transform: scale(0.8);
    }
    75%{
        transform: scale(1);
    }
	80%{
	    transform: scale(1);
	}
}

.banner2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 46%; /* 按财神高度 + 按钮区域大致高度调整 */

  width: 100%;
  background: url("../img/banner2.png") no-repeat center / contain;
  aspect-ratio: 689 / 340;
  z-index: 1; /* 在 bg 上方、TopDown 下方 */
  pointer-events: none;
}

.banner3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 61%; /* 按财神高度 + 按钮区域大致高度调整 */

  width: 100%;
  background: url("../img/banner3.png") no-repeat center / contain;
  aspect-ratio: 689 / 340;
  z-index: 1; /* 在 bg 上方、TopDown 下方 */
  pointer-events: none;
}

.banner4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0%; /* 按财神高度 + 按钮区域大致高度调整 */

  width: 100%;
  background: url("../img/co.png") no-repeat center / contain;
  aspect-ratio: 720 / 92;
  z-index: 1; /* 在 bg 上方、TopDown 下方 */
  pointer-events: none;
}