*{
	margin: 0;
	padding: 0;
	cursor: url(https://i.ibb.co/mz9rDX4/star.png), auto;
}

body {
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}

.let-it-snow {
   background: linear-gradient(-45deg, #E4AA99, #E594B3, #53B3D6, #67DABF, #E594B3, #E4AA99, #67DABF, #53B3D6);
	animation: gradientBG 8s ease infinite;
	width: 400%;
	height: 400%;
   background-size: cover;
	background-repeat: repeat;
	background-attachment: fixed;
	background-size: 300% 300%;
	margin-left: auto;
	margin-right: auto;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

li {
	list-style: none;
}

.box {
   top: 280px;
	width: 200px;
	height: 200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: absolute;
	margin-left: 11%;
	margin-right: 30%;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateX(13deg);
	-webkit-animation: move 5s linear infinite;
}

.minbox {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 30px;
	-webkit-transform-style: preserve-3d;
}

.minbox li {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
}

.minbox li:nth-child(1){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: translateZ(50px);
}

.minbox li:nth-child(2){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: rotateX(180deg) translateZ(50px) scaleY(-1) scaleX(-1);
}

.minbox li:nth-child(3){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: rotateX(-90deg) translateZ(50px);
}

.minbox li:nth-child(4){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: rotateX(90deg) translateZ(50px);
}

.minbox li:nth-child(5){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: rotateY(-90deg) translateZ(50px);
}

.minbox li:nth-child(6){
	background: url(../imgs/01_100x100.jpg) no-repeat 0 0;
	-webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox li:nth-child(1){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(2){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: rotateX(180deg) translateZ(50px);
}

.maxbox li:nth-child(3){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: rotateX(-90deg) translateZ(50px);
}

.maxbox li:nth-child(4){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: rotateX(90deg) translateZ(50px);
}

.maxbox li:nth-child(5){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: rotateX(-90deg) translateZ(50px);
}

.maxbox li:nth-child(6){
	background: url(../imgs/02_400x400.png) no-repeat 0 0;
	-webkit-transform: rotateX(90deg) translateZ(50px);
}

.maxbox {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform-style: preserve-3d;
}

.maxbox li {
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.3;
    -webkit-transition: all 1.2s ease;
}

.maxbox li:nth-child(1){
	-webkit-transform: translateZ(100px);
}

.maxbox li:nth-child(2){
	-webkit-transform: rotateX(180deg) translateZ(100px);
}

.maxbox li:nth-child(3){
	-webkit-transform: rotateX(-90deg) translateZ(100px);
}

.maxbox li:nth-child(4){
	-webkit-transform: rotateX(90deg) translateZ(100px);
}

.maxbox li:nth-child(5){
	-webkit-transform: rotateY(-90deg) translateZ(100px);
}

.maxbox li:nth-child(6){
	-webkit-transform: rotateY(90deg) translateZ(100px)
}

.box:hover ol li:nth-child(1){
	-webkit-transform: translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

.box:hover ol li:nth-child(2){
	-webkit-transform: rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

.box:hover ol li:nth-child(3){
	-webkit-transform: rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

.box:hover ol li:nth-child(4){
	-webkit-transform: rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

.box:hover ol li:nth-child(5){
	-webkit-transform: rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

.box:hover ol li:nth-child(6){
	-webkit-transform: rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform: rotateX(13deg) rotateY(360deg);
	}
}

/* 导航按钮 */
.nav-buttons {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 50px;
    z-index: 100;
}