*{ margin: auto;}
.qinsh-scene { width: 100%; height: 100%; position: fixed;}
/* L轮播 */
.slide {width: 100%; height: 100%;position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%);} 
.slide img { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 5s ease-in-out; }
.slide img.active { opacity: 1; }

/* 季节和时间段的通用样式 */
.sky { position: relative; overflow: hidden; color: white; font-size: 2rem;
    width: 100%; height: 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 0, 0);
}

/*前景通用 动画关键帧 */
.sky .Effects-two, .sky .Effects-three { background-size: 100% 100%; position: absolute; left: 0; top: 0; height: 100%;  width: 200%; }
.sky .Effects-one{
   animation: Effects-one 30s linear infinite; 
   background-size: 100% 100%; position: absolute; left: 0; top: 0; height: 100%;  width: 100%; 
}
.sky .Effects-two{	
  animation: Effects-two 290s linear infinite; 
}
.sky .Effects-three {	
  animation: Effects-three 300s linear infinite;
}
/*前景通用动画定义动画的序列， 也可以单独绑定其他前景 */

@keyframes Effects-one {
  0% {opacity: 0.2;}
  100% {opacity: 0.5;}
}


@keyframes Effects-two {
  0% {left: 0;}
  100% {left: -200%;}
}


/* 季节样式 */
.spring .sky { background-color: #5afbad; /* 春天背景色示例 */
}

.summer .sky { background-color: #60a6dd; /* 夏天背景色示例 */	
}

.autumn .sky {background-color: #6789a3; /* 秋天背景色示例 */
}

.winter .sky {background-color: #fff; /* 冬天背景色示例，这里设为白色以表示雪景 */
}


/* 时间段样式（如果需要额外的样式） */
/* dawn黎明的额外样式 */
.dawn .sky { background: linear-gradient(214deg, #7cbbff, #54a1ff, #7dbbff, #78b4ff); }
.dawn .sky .Effects-one { 
    background: linear-gradient(rgb(85 98 117), rgb(191 171 101), rgb(52 72 86)); 
	animation-name: Tght; animation-duration: 50s;
 }
.dawn .sky .Effects-two { 
    background: linear-gradient(rgb(85 98 117), rgb(191 171 101), rgb(52 72 86)); 
	animation-name: Tght; animation-duration: 50s;
 }
.dawn .sky .Effects-three { 
    background: linear-gradient(rgb(85 98 117), rgb(191 171 101), rgb(52 72 86)); 
	animation-name: Tght; animation-duration: 50s;
 }
 
/* morning早晨背景色 */
.morning .sky { background: linear-gradient(#60a6dd, #6596bc, #6789a3, #717795);}
/* noon 中午背景色 */
.noon .sky { 
    background: linear-gradient(214deg, #7cbbff, #54a1ff, #7dbbff, #78b4ff); 
 }
/* morning 早晨 noon 中午 动画特效 */
.morning .sky { background: linear-gradient(214deg, #7cbbff, #54a1ff, #7dbbff, #78b4ff); }
.morning .sky .Effects-one, .noon .sky .Effects-one { 
    top: 20px;
	opacity: 0.5;
    background-image: url(../shimg/texiao/cloud.webp); 
 }
.morning .sky .Effects-two, .noon .sky .Effects-two  {
	background-image: url(../shimg/texiao/cloud.webp); opacity: 0.4;
 }

/*  evening 傍晚背景色 动画特效 */
.evening .sky { 
  background: linear-gradient(rgb(75 95 124), rgb(222 197 83), rgb(201 91 53), rgb(52 72 86));
  animation: SUmmerEVeninG 180s ease-out infinite;
}
.evening .sky .Effects-one {
	 background-image: url(../shimg/texiao/wx1.webp); opacity: 0.9;
	 animation: Efeone 290s linear infinite; 
  }
.evening .sky .Effects-two { background-image: url(../shimg/texiao/wx2.webp); opacity: 0.9;}
@keyframes Efeone {
  0% {opacity: 0.6;}
  100% { opacity: 0.9;}
}
@keyframes SUmmerEVeninG {
  0% { background: linear-gradient(rgb(85 98 117), rgb(191 171 101), rgb(151 93 54), rgb(52 72 86));  }
  100% { background: linear-gradient(rgb(112 146 170), rgb(190 154 119), rgb(182 145 73), rgb(112 87 74)); }
}

/* 春/夏/秋/冬的天黑、背景色、动画 twilight 特效 */
.twilight .sky { background: linear-gradient(#2b3443, #0a2940, #1d202b); }
.twilight .sky .Effects-one { display: none; }
.twilight .sky .Effects-two { background-image: url(../shimg/texiao/twilight.webp); opacity: 0.2;}

/* night 深夜, 春/夏/秋/冬的夜晚背景色, 繁星动画特效 */
.night .sky { background: #0b0319;
  animation: nightStarry 100s ease-out infinite;
}
@keyframes nightStarry  {
  0% { background-image: url(../shimg/texiao/xk1.webp);  }
  100% { background-image: url(../shimg/texiao/xk2.webp);  }
}
.night .sky .Effects-one {
	 background-image: url(../shimg/texiao/xk3.webp); 
	 left:10%; 
	 width: 500px;
     height: 500px;
	 background-size:cover; animation-name: Mnight; animation-duration: 90s;
	 border-radius: 50%;
 }

.night .sky .Effects-two { 
    background-image: url(../shimg/texiao/xk4.webp);
    left: 65%;
    top: 5%;
    width: 400px;
    height: 400px;
    background-size: cover;
    animation-name: Mnight;
    animation-duration: 150s;
    border-radius: 50%;
 }

@keyframes Mnight {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(50%) rotate(360deg); }
    100% { transform: translateX(100%) rotate(720deg); opacity: 0.4; }
}