@charset "utf-8";

.animationFrame {
	position: relative;
	width:calc( 100% + 100px );
	height:500px;
	margin:0 -50px;
	overflow: hidden;
}

.animationFrame .inner {
	position: absolute;
	width:3180px;
	height:500px;
	left:50%;
	transform:translateX(-50%);
}

.animationFrame .inner .chip {
	position: absolute;
	z-index:100;
	left:calc( 50% - 250px );
	/* top:0; */
	top:-70px;
	animation: chipAnime 12s ease-in-out infinite;
}

.animationFrame .inner .boards {
	position: absolute;
	z-index:99;
	left:-795px;
	top:0;
	/* top:70px; */
	width:3180px;
	height:500px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	white-space:nowrap;
	animation: boxsAnime 12s ease-in-out infinite;
}

.animationFrame .inner .boards .board {
	width:500px;
	margin:0 15px;
}

.animationFrame .inner .boards .board.b4 {
	/* animation: b4Anime 12s ease-in-out infinite; */
}

.animationFrame .inner .boards .board.b3 {
	/* animation: b3Anime 12s ease-in-out infinite; */
}

.animationFrame .inner .boards .board.b2 {
	/* animation: b2Anime 12s ease-in-out infinite; */
}

.animationFrame .inner .boards .board img {
	margin:0;
	padding:0;
	border:0;
	line-height:1;
}


@media screen and (max-width: 1199px) {

}

@media screen and (max-width: 991px) {

}

@media screen and (max-width: 767px) {

}

@media screen and (max-width: 579px) {
	.animationFrame {
		height:350px;
	}
	.animationFrame .inner {
		zoom:0.7;
	}
}

@keyframes boxsAnime {
	0% { left: -795px }
	13.2% { left: -265px }
	33% { left: -265px }
	46.2% { left: 265px }
	66% { left: 265px }
	79.2% { left: 795px }
	100% { left: 795px }
}

@keyframes chipAnime {
	0% { transform:translateY(0) }
	13.2% { transform:translateY(0) }
	16.5% { transform:translateY(70px) }
	29.7% { transform:translateY(70px) }
	33% { transform:translateY(0) }
	46.2% { transform:translateY(0) }
	49.5% { transform:translateY(70px) }
	62.7% { transform:translateY(70px) }
	66% { transform:translateY(0) }
	79.2% { transform:translateY(0) }
	82.5% { transform:translateY(70px) }
	95.7% { transform:translateY(70px) }
	99% { transform:translateY(0) }
	100% { transform:translateY(0) }
}

@keyframes b4Anime {
	0% { transform:translateY(0) }
	13.2% { transform:translateY(0) }
	16.5% { transform:translateY(-70px) }
	29.7% { transform:translateY(-70px) }
	33% { transform:translateY(0) }
	100% { transform:translateY(0) }
}

@keyframes b3Anime {
	0% { transform:translateY(0) }
	46.2% { transform:translateY(0) }
	49.5% { transform:translateY(-70px) }
	62.7% { transform:translateY(-70px) }
	66% { transform:translateY(0) }
	100% { transform:translateY(0) }
}

@keyframes b2Anime {
	0% { transform:translateY(0) }
	79.2% { transform:translateY(0) }
	82.5% { transform:translateY(-70px) }
	95.7% { transform:translateY(-70px) }
	99% { transform:translateY(0) }
	100% { transform:translateY(0) }
}