@media screen and (max-width: 991.98px) {
	.ani { display: none; }
}

.shape-1 {
	/* position:absolute; left:20%; top: 10%; */
	position:absolute; left:45%; bottom: 10%;
	/* animation: shape-4 4s linear infinite; */
	animation: shape-4 1s ease-in-out infinite alternate;
	animation-delay:#{$i / -20}s;
	will-change: transform;
}
@keyframes shape-1 { /* 제자리에서 360회전 */
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.shape-2 { 
	position:absolute; right:10%; top: 20%;
	animation: shape-2 1s linear 0s infinite alternate;
}
@keyframes shape-2 {    /* 위아래 바운스 */
	0% {margin-top: 0px;} /* 처음 위치 */
	100% {margin-top: 30px;} /* 마지막 위치 */
}
.shape-3 { 
	position:absolute; right:20%; top: 40%;
	animation: shape-3 6s infinite alternate;
}
@keyframes shape-3 {    /* 제자리에서 360회전하며 나타나고 없어지기 */
	0% {opacity: 0; transform: rotate(0deg);} /* 처음 위치 */
	100% {opacity: 100; transform: rotate(360deg);} /* 마지막 위치 */
}
.shape-4 { 
	position:absolute; left:10%; top: 70%;
	animation: shape-4 1s ease-in-out infinite alternate;
	animation-delay:#{$i / -20}s;
	will-change: transform;
}
@keyframes shape-4{ /* 좌우로 흔들리기 */
	0%{
		transform:rotate(-25deg) translateZ(0);
	}
	100%{
		transform:rotate(25deg) translateZ(0);
	}
}
.shape-5 { 
	position:absolute; left:20%; top: 60%;
	animation: shape-5 2s infinite alternate;
}
@keyframes shape-5 {    /* 제자리에서 바운스 */
	0% { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, 0.75, 1); }
	40% { transform: scale3d(0.75, 1.25, 1); }
	50% { transform: scale3d(1.15, 0.85, 1); }
	65% { transform: scale3d(0.95, 1.05, 1); }
	75% { transform: scale3d(1.05, 0.95, 1); }
	100% { transform: scale3d(1, 1, 1); }
}