*{
    margin:0;
    padding:0;
}
body{
    background-color: #FF6A6A;
    max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.wrapper{
    overflow: hidden;
    width:80%;
    margin:20px auto;
}
.imgBox{
    width: 600px;
    height: 500px;
    margin: 20px auto;
    perspective: 700px;
}
.wrapper img{
    width:100px;
    height:100px;
    float: left;
}
/* .wrapper .btn{
    width: 158px;
    height: 63px;
    background-image: url("../img/btnImg.png");
    background-size: 100% 100%;
    margin: 10px auto;
    cursor: pointer;
} */
.heartBox{
	left: 40%;
	position: absolute;
	width: 200px;
	height: 200px;
}
/* 动态心 */
.textCon{
	left: 10%;
	position: absolute;
	width:170px;
	height:60px;
 }
 .textCon .item{
	position: absolute;
	opacity: 0;
	background-color:#EE0000;
	transform: rotate(45deg);
	animation: hearts 3s ease-in infinite;
 }
 .textCon .item::before,
 .textCon .item::after{
	content:'';
	width:100%;
	height:100%;
	background-color:#EE0000;
	position: absolute;
	top:0;
	left:0;
	border-radius: 50%; 
 }
 .textCon .item::before{
	transform: translateX(-50%);
 }
 .textCon .item::after{
	transform: translateY(-50%);
 }
  /* 中间大的heart */
 .bigheart{
	 left: 40%;
	 top: 65px;
	position: absolute;
	width:50px;
	height:50px;
	background-color:#cc0000;
	cursor: pointer;
	transform: rotate(45deg);
	animation: heart 1s ease-in infinite;
 
 }
 .bigheart::before,
 .bigheart::after{
	content:'';
	width:100%;
	height:100%;
	background-color:#cc0000;
	position: absolute;
	top:0;
	left:0;
	border-radius: 50%;
 }
 .bigheart::before{
	transform: translateX(-50%);
 }
 .bigheart::after{
	transform: translateY(-50%);
 }
 @keyframes heart{
	0%{
		transform: scale(0.8) rotate(45deg);
		opacity: 0.8;
	}
	50%{
		transform: scale(1) rotate(45deg);
		opacity: 1;
	}
	100%{
		transform: scale(0.8) rotate(45deg);
		opacity: 0.8; 
	}
 }
 @keyframes hearts{
	0%{
		opacity: 0;
		transform: translateY(0%) rotate(45deg);
	}
	20%{
		opacity: 0.8;
		transform: translateY(-20%) rotate(45deg);
	}
	100%{
		opacity: 0;
		transform: translateY(-1000%) rotate(45deg);
	}
 }


@keyframes small{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    20%{
        transform: scale(0);
        opacity: 1;
    }
    50%{
        transform: scale(0);
        opacity: 1;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes displayImg{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(0);
        opacity: 0;
    }
}
/* 下面是魔方 */
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transform-style:preserve-3d;
	transform:rotateX(13deg);
	animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:25px;
	top:25px;
	transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	transform:rotateX(180deg) rotate(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	transform:rotateY(-90deg) translateZ(50px);
	
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	transform:rotateY(90deg) translateZ(50px);
}
/* pc端 */
@media (min-width: 450px){
	.minbox{
		left:50px;
		top:30px;
	}
	.maxbox{
		width: 800px;
		height: 400px;
		position: absolute;
		left: 0;
		top: -20px;
		transform-style: preserve-3d;
	}
	.maxbox li{
		width: 200px;
		height: 200px;
		background: #fff;
		border:1px solid #ccc;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.2;
		transition:all 1s ease;
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(1){
		background: url(../img/1.png) no-repeat;
		transform:translateZ(100px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(2){
		background: url(../img/2.png) no-repeat;
		transform:rotateX(180deg) rotate(180deg) translateZ(100px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(3){
		background: url(../img/3.png) no-repeat;
		transform:rotateX(-90deg) translateZ(100px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(4){
		background: url(../img/4.png) no-repeat;
		transform:rotateX(90deg) translateZ(100px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(5){
		background: url(../img/5.png) no-repeat;
		transform:rotateY(-90deg) translateZ(100px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(6){
		background: url(../img/6.png) no-repeat;
		transform:rotateY(90deg) translateZ(100px);
		background-size: 100% 100%;
	}
	.box:hover ol li{
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(1){
		transform:translateZ(300px);
	}
	.box:hover ol li:nth-child(2){
		transform:rotateX(180deg) rotate(180deg) translateZ(300px);
	}
	.box:hover ol li:nth-child(3){
		transform:rotateX(-90deg) translateZ(300px);
	}
	.box:hover ol li:nth-child(4){
		transform:rotateX(90deg) translateZ(300px);
	}
	.box:hover ol li:nth-child(5){
		transform:rotateY(-90deg) translateZ(300px);
	}
	.box:hover ol li:nth-child(6){
		transform:rotateY(90deg) translateZ(300px);
	}
} 
/* 浏览器兼容手机端 */
@media (max-width:450px){
	.imgBox{
		width: 300px;
		height: 500px;
		margin: 20px auto;
		perspective: 700px;
	}
	.minbox{
		left:50px;
		top:50px;
	}
	.maxbox{
		width: 400px;
		height: 400px;
		position: absolute;
		transform-style: preserve-3d;
	}
	.maxbox li{
		width: 150px;
		height: 150px;
		background: #fff;
		border:1px solid #ccc;
		position: absolute;
		left: 25px;
		top: 25px;
		opacity: 0.2;
		transition:all 1s ease;
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(1){
		background: url(../img/1.png) no-repeat;
		transform:translateZ(75px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(2){
		background: url(../img/2.png) no-repeat;
		transform:rotateX(180deg) rotate(180deg) translateZ(75px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(3){
		background: url(../img/3.png) no-repeat;
		transform:rotateX(-90deg) translateZ(75px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(4){
		background: url(../img/4.png) no-repeat;
		transform:rotateX(90deg) translateZ(75px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(5){
		background: url(../img/5.png) no-repeat;
		transform:rotateY(-90deg) translateZ(75px);
		background-size: 100% 100%;
	}
	.maxbox li:nth-child(6){
		background: url(../img/6.png) no-repeat;
		transform:rotateY(90deg) translateZ(75px);
		background-size: 100% 100%;
	}
}


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


@keyframes display{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

/* 背景音乐开关 */
#musicBtn{
    position:fixed;
    top:24px;
    right:28px;
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(178,34,34,.72);
    color:#fff;
    font-size:27px;
    line-height:46px;
    text-align:center;
    cursor:pointer;
    z-index:99999;
    box-shadow:0 3px 15px rgba(0,0,0,.35);
    transition:transform .25s ease, background .25s ease;
}
#musicBtn:hover{background:rgba(178,34,34,.95);transform:scale(1.08)}
#musicBtn.playing{animation:musicRotate 4s linear infinite}
@keyframes musicRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:600px){#musicBtn{top:15px;right:15px;width:42px;height:42px;line-height:40px;font-size:24px}}