.loading{
	text-align: center;
	margin-top:100px;
	margin-top: 20%;
}
.loading span{
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 5px;
	border-radius: 50%;
	background: #4cbf3e;
	animation: load 0.8s ease infinite;
}
.loading span:nth-child(1){
	background: #00CCFE;
}
.loading span:nth-child(2){
	background: #05C8C8;
}
.loading span:nth-child(3){
	background: #A06EFF;
}
.loading span:nth-child(4){
	background: #4cbf3e;
}
.loading span:nth-child(5){
	background: #fe005e;
}
.loading span:last-child{
	margin-right: 0px; 
}
@-webkit-keyframes load{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.loading span:nth-child(1){
	-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
	-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
	-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
	-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
	-webkit-animation-delay:0.65s;
}

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      line-height: 1.6;
    }

    /* 加载动画容器：全屏覆盖，背景与主内容协调 */
    .loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑淡出过渡 */
    }

    /* 加载动画：跳动的圆点组合 */
    .loader {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }

    .loader-dot {
      width: 18px;
      height:18px;
      background: #3498db;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out both;
    }

    /* 三个圆点依次延迟动画，形成错落感 */
    .loader-dot:nth-child(1) { animation-delay: -0.32s; 
      background: #05C8C8;
    }
    .loader-dot:nth-child(2) { animation-delay: -0.16s;
      background: #A06EFF;
    }
    .loader-dot:nth-child(3) { animation-delay: -0.16s; 
      background: #4cbf3e;
    }
    .loader-dot:nth-child(4) { animation-delay: -0.16s;
      background: #fe005e;
     }

    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1); }
    }

    /* 加载文本 */
    .loader-text {
      color: #666;
      font-size: 14px;
      letter-spacing: 0.5px;
    }

    /* 主内容区域：初始隐藏 */
    .content {
      display: none;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
    }