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

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #502821;
}

.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	transform-style: preserve-3d;
}
.container .hideLayerBox{
	transition: 1s all;
}
.container .outPutBox{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	animation: 1s outPutBoxAnime linear forwards;
}
@keyframes outPutBoxAnime{
	from{opacity: 0;}
	to{opacity: 1;}
}
.container .outPutBox iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	border: none;
}
.container .logo{
	position: absolute;
	left: 5vw;
	top: 5vh;
	width: 15vw;
	height: auto;
	z-index: 99;
	transition: 1s all;
}
.container .logo>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.container .btn{
	position: fixed;
	right: 10vw;
	bottom: 6vh;
	width: 8vw;
	height: auto;
	z-index: 9999;
	transition: 1s all;
	transform: scale(1) translateY(calc(100% - 5vh));
	animation: 1s btnAnime ease-in-out alternate infinite;
}
.container .btn>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes btnAnime{
	from{transform: scale(1) translateY(calc(100% - 5vh));}
	to{transform: scale(1.1) translateY(calc(100% - 5vh));}
}

.container .bg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1920px;
	height: 1080px;
	z-index: 1;
}

.container .layer1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1920px;
	height: 1080px;
	z-index: 10;
	/* perspective: 800px; */
}

.container .layer2 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1920px;
	height: 1080px;
	z-index: 9;
}

.container .layer3 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1920px;
	height: 1080px;
	z-index: 8;
}

.container .layer4 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1388px;
	height: 1388px;
	z-index: 7;
}

.container .layer5 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1388px;
	height: 1388px;
	z-index: 6;
}

.container .layer6 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1388px;
	height: 1388px;
	z-index: 5;
}

.container .layer7 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1388px;
	height: 1388px;
	z-index: 4;
}

.container .layer8 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1388px;
	height: 1388px;
	z-index: 3;
}

.imgBox {
	width: 100%;
	height: 100%;
}

.imgBox>img {
	width: 100%;
	height: 100%;
}

.container .imgLayer .imgBox1 {
	/* animation: 1s scaleAnime ease-in-out infinite alternate; */
}

.container .imgLayer .imgBox1>img {
	filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 1));
}

.container .imgLayer .imgBox2 {
	animation: 3s scaleAnime linear infinite alternate;
}

.container .imgLayer .imgBox3 {
	animation: 6s scaleAnime ease-in-out infinite alternate;
}

.container .imgLayer .imgBox4 {
	transform-origin: center;
	animation: 20s rotateAnime linear infinite;
}

.container .imgLayer .imgBox5 {
	transform-origin: center;
	animation: 25s rotateAnime linear infinite;
}

.container .imgLayer .imgBox6 {
	transform-origin: center;
	animation: 30s rotateAnime linear infinite;
}

.container .imgLayer .imgBox7 {
	transform-origin: center;
	animation: 40s rotateAnime linear infinite;
}
.container .imgLayer .imgBox8>img {
	filter: drop-shadow(0px 3px 7px rgba(181,134, 51, 1.0));
	animation: 2s imgBox8ImgAnime linear infinite alternate;
}
@keyframes scaleAnime{
	from{transform: scale(1.1);}
	to{transform: scale(1);}
}
@keyframes imgBox8ImgAnime{
	from{filter: drop-shadow(0px 3px 7px rgba(181,134, 51, 0.5));}
	to{filter: drop-shadow(0px 3px 60px rgba(181, 90, 24, 0.8));}
}

@keyframes rotateAnime {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0deg);
	}
}
.container .layerScaleOut1{
	animation: 2s layerOutScaleAnime linear forwards;
}
.container .layerScaleOut2{
	animation: 2s layerOutScaleAnime 0.1s linear forwards;
}
.container .layerScaleOut3{
	animation: 2s layerOutScaleAnime 0.2s linear forwards;
}
.container .layerRotateOut4{
	animation: 2s layerOutRotateAnime linear forwards;
}
.container .layerRotateOut5{
	animation: 2.2s layerOutRotateAnime linear forwards;
}
.container .layerRotateOut6{
	animation: 1.2s layerOutRotateAnime linear forwards;
}
.container .layerRotateOut7{
	animation: 1s layerOutRotateAnime linear forwards;
}
.container .layerRotateOut8{
	animation: 1.5s layerOutRotateAnime8 0.2s  linear forwards;
}
.container .layerRotateBgOut{
	animation: 2s layerOutRotateAnimeBg 0.2s linear forwards;
}
@keyframes layerOutScaleAnime{
	from{transform:translate(-50%,-50%) scale(1);}
	to{transform: translate(-50%,-50%) scale(3);}
}
@keyframes layerOutRotateAnime{
	from{transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1;}
	to{transform: translate(-50%,-50%) scale(3) rotate(120deg); opacity: 0;}
}
@keyframes layerOutRotateAnime8{
	from{transform:translate(-50%,-50%) scale(1); opacity: 1;}
	to{transform: translate(-50%,-50%) scale(2); opacity: 0;}
}
@keyframes layerOutRotateAnimeBg{
	from{transform:translate(-50%, -50%) scale(1); opacity: 1;}
	to{transform: translate(-50%, -50%) scale(10); opacity: 0;}
}