*{
    padding:0;
    margin:0;
   
}
html{
     font-size:14px;
     
}
body{
   /* display:none; */
}

.container .top-logo{
    width:60%;
    height:auto;
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    z-index:99;
}
.container .top-logo img{
    width:100%;
}

.container{
    position:relative;
    width:100%;
}
.container >img.bg{
    max-width:100%;
    position:relative;
}


.container > .button-fanhui{
   position: absolute;
   z-index:10;
   width:20%;
   top:4%;
   left:2%;
   /* 透明 */
   opacity: 0.5;
   color:white;
}
.container > .button-fanhui a{
    color:white;
}

.container > .button-fanhui img{
    width:100%;
}


.container > .button-choujiang{
   position: absolute;
   z-index:10;
   /* width:20%; */
   bottom:9%;
   /* left:50%; */
   width:100%;
   text-align:center;
   /* 透明 */
   opacity: 0.8;
   animation: breathe 1.4s ease-in-out infinite;
}


.container > .button-choujiang img{
    width:100%;
    width:20%;
}

/* .container >.top-text{
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    color:#fff;
    font-size:2rem;
} */

/* 你原有的基础样式 */
.container > .top-text {
    position: absolute;
    top: 15%;
    /* left: 50%; */
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    /* 缩放原点 */
    transform-origin: center center;
    /* 新增：动画属性（名称、时长、速度曲线、无限循环） */
    animation: floatScale 3s ease-in-out infinite,expand 2s ease-out forwards, breathe 1.4s ease-in-out infinite;
    /* 开启硬件加速，让动画更流畅 */
    will-change: transform;
}

/* 定义浮动+缩放动画 */
@keyframes floatScale {
    0% {
        transform: translate(-50%, 0) scale(1);
    }
    50% {
        transform: translate(-50%, -10px) scale(1.05); /* 向上移动+轻微放大 */
    }
    100% {
        transform: translate(-50%, 0) scale(1); /* 回到初始位置 */
    }
}



/* 定义从中间展开的动画（从缩放0到1，实现中间展开） */
@keyframes expand {
  0% {
    /* 初始状态：缩放到0（中间点）、透明度0 */
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
  }
  100% {
    /* 结束状态：恢复原大小、透明度1，保留原有居中 */
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}


/* 定义放大缩小的关键帧动画 */
@keyframes breathe {
  /* 动画起始和结束状态：原始大小 */
  0%, 100% {
    transform: scale(1); /* scale(1) 表示原始尺寸，scale(2)就是2倍大小 */
  }
  /* 动画中间状态：放大到1.2倍 */
  50% {
    transform: scale(1.2);
  }
}

/* 给目标元素添加动画 */
.zoom-element {
  /* width: 100px;
  height: 100px; */
  /* background-color: #409eff; 蓝色背景，方便查看效果 */
  /* 动画属性：动画名称 时长 速度曲线 无限循环 */
  animation: breathe 2s ease-in-out infinite;
}