@charset "utf-8";
 * {margin: 0;padding: 0;box-sizing: border-box;}
body {
	font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
	background:linear-gradient(135deg, #1a237e 0%, #0d47a1 30%, #0277bd 70%, #4fc3f7 100%);
	min-height: 100vh;overflow-x: hidden;color: #fff;}
.container {max-width: 1600px;margin: 0 auto;padding: 10px;width: calc(100vW - 20px);height: calc(100vH - 20px);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-image:linear-gradient(rgba(0, 150, 255, 0.15) 1px, transparent 1px),linear-gradient(90deg, rgba(0, 150, 255, 0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
}
.header {text-align: center;padding: 40px 20px;margin-bottom: 30px;}
.logo {font-size: 3.5rem;font-weight: 700;margin-bottom: 15px;background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
	-webkit-background-clip: text;background-clip: text;color: #fafafa;text-shadow: 0.1em 0.1em 0.1em #666666;}
.subtitle {font-size: 1.5rem;font-weight: 300;color: #a0d2ff;margin-bottom: 10px;}
.description {max-width: 800px;margin: 0 auto;font-size: 1.1rem;line-height: 1.6;color: #4fc3f7;}
.gallery-container {position: relative;width: 80%;max-width: 1600px;min-height: 450px;margin: 40px auto;}
.gallery-wall {position: relative;max-width: 1600px;width: 100%;height: 100%;}
.image-item {position: absolute;width: 150px;border-radius: 8px;overflow: hidden;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.6s ease;opacity: 0.9;z-index: 1;border: 3px solid #CCCCCC;}
.image-item:hover {transform: scale(1.1);opacity: 1;z-index: 10;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);}
.control-panel {text-align: center;padding: 30px 0;margin-top: 60px;}
.enter-btn {background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);border: none;
	border-radius: 50px;color: white;font-size: 1.3rem;font-weight: 600;padding: 18px 50px;
	cursor: pointer;transition: all 0.3s ease;box-shadow: 0 5px 20px rgba(79, 172, 254, 0.4);}
.enter-btn:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(79, 172, 254, 0.6);}
.footer {
	text-align: center;
	padding: 30px 20px;
	color: #8bb4e5;
	font-size: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 60px;
}
@media (max-width: 1600px) {
	.gallery-container {
		max-width: 1200px;
	}
}
@media (max-width: 1200px) {
	.logo {font-size: 3rem;font-weight: 700;margin-bottom: 15px;}
	.gallery-container {max-width: 1000px;}
	.image-item:nth-child(n+9) {display: none;}
}
@media (max-width: 768px) {
	.logo {font-size: 2.5rem;}
	.subtitle {font-size: 1.2rem;}
	.description {font-size: 1rem;padding: 0 15px;}
	.image-item {width: 120px;}
	.gallery-container {width: calc(100vW - 20px);height: calc(100vH - 440px);padding: 0px;margin: 0 auto;}
	.control-panel {margin-top: 30px;}
	.footer{margin-top: 10px;padding: 5px 20px;}
	.enter-btn {font-size: 1.1rem;padding: 15px 40px;}
	.image-caption {font-size: 0.6rem;padding: 6px 4px 3px;}
	.image-item:nth-child(n+7) {display: none;}
}
@media (max-width: 480px) {
	.logo { margin: 20px auto ; font-size: 1.8rem;width: 75%;}
	.header{margin-top: 40px;padding-top: 10px;padding-bottom: 10px;margin-bottom: 10px;}
	.image-item:nth-child(n+5) {display: none;}            
	.control-panel {margin-top: 0px;}
	.footer{display: none;}
	.description{display: none;}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-15px) rotate(1deg);
	}
}

.floating {
	animation: float 8s ease-in-out infinite;
}

.delay-1 {
	animation-delay: 0.5s;
}

.delay-2 {
	animation-delay: 1s;
}
.delay-3 {            animation-delay: 1.5s;        }
.delay-4 {            animation-delay: 2s;        }
.delay-5 {            animation-delay: 2.5s;        }
.delay-6 {            animation-delay: 3s;        }
.delay-7 {            animation-delay: 3.5s;        }
.delay-8 {            animation-delay: 4s;        }
.delay-9 {            animation-delay: 4.5s;        }
.delay-10 {            animation-delay: 5s;        }
.delay-11 {            animation-delay: 5.5s;        }
.delay-12 { animation-delay: 6s;        }