.gift-animation {
	position: absolute;
	width: 89px;
	height: 122px;

	.dot {
		position: absolute;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		transform-origin: center;
		z-index: 5;
		.img {
			width: 100%;
			height: 100%;
			background: url('../img/layout/dot.svg') no-repeat left top;
			background-size: contain;
			animation-duration: 2s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
		}

		&:nth-child(1) {
			width: 10px;
			height: 10px;
			left: 60px;
			top: 40px;
		}

		&:nth-child(2) {
			width: 5px;
			height: 5px;
			left: 67px;
			top: 40px;
			animation-duration: 9s;

			.img {
				animation-duration: 9s;
			}
		}

		&:nth-child(3) {
			width: 18px;
			height: 18px;
			left: 67px;
			top: 40px;
			animation-duration: 4s;

			.img {
				animation-duration: 4s;
			}
		}

		&:nth-child(4) {
			width: 15px;
			height: 15px;
			left: 30px;
			top: 40px;
		}

		&:nth-child(5) {
			width: 8px;
			height: 8px;
			left: 40px;
			top: 40px;
		}

		&:nth-child(6) {
			width: 12px;
			height: 12px;
			left: 50px;
			top: 40px;
		}
	}
	.gift {
		width: 89px;
		height: 122px;
		background: url('../img/layout/gift.svg') no-repeat left top;
		background-size: contain;
		z-index: 10;
	}
	&.two {
		opacity: 0;
	}
	&.closed {
		z-index: 50;
		opacity: 1;
		.dot {
			opacity: 0;
			animation-iteration-count: 3;
			animation-duration: 0.5s;
			.img {
				animation-duration: 0.5s;
			}
			&:nth-child(2) {
				animation-duration: 3s;
				.img {
					animation-duration: 3s;
				}
			}
			&:nth-child(3) {
				animation-duration: 1.5s;
				.img {
					animation-duration: 1.5s;
				}
			}
			&:nth-child(4) {
				animation-duration: 1s;
				.img {
					animation-duration: 1s;
				}
			}
			&:nth-child(5) {
				animation-duration: 2s;
				.img {
					animation-duration: 2s;
				}
			}
			&:nth-child(6) {
				animation-duration: 1s;
				.img {
					animation-duration: 1s;
				}
			}
		}
		.stars {
			position: absolute;
			opacity: 0;
			animation-duration: 2s;
			animation-iteration-count: initial;
			animation-timing-function: linear;
			transform-origin: center;
			animation-iteration-count: 2;
			z-index: 5;
			top: 40px;
			.img {
				animation-duration: 2s;
				animation-timing-function: ease-in-out;
				animation-iteration-count: initial;
				animation-iteration-count: infinite;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: left top;
				background-size: contain;
			}
			&.star-one {
				width: 19px;
				height: 19px;
				.img {
					background-image: url('../img/layout/star-one.svg');
				}
			}
			&.star-two {
				width: 30px;
				height: 30px;
				.img {
					background-image: url('../img/layout/star-two.svg');
				}
			}
			&.star-three {
				width: 20px;
				height: 20px;
				.img {
					background-image: url('../img/layout/star-three.svg');
				}
			}
			&.two {
				animation-duration: 3s;
				.img {
					animation-duration: 3s;
				}
			}
			&.three {
				animation-duration: 2s;
				.img {
					animation-duration: 2s;
				}
			}
			&.four {
				animation-duration: 0.5s;
				.img {
					animation-duration: 0.5s;
				}
			}
			&.five {
				animation-duration: 1.5s;
				.img {
					animation-duration: 1.5s;
				}
			}
			&.six {
				animation-duration: 1s;
				.img {
					animation-duration: 1s;
				}
			}
		}
		.star-one {
			left: 70px;
		}
		.star-two {
			left: 50px;
		}
		.star-three {
			left: 30px;
		}
		.gift {
			width: 89px;
			height: 122px;
			position: relative;
			background: none;
			.item {
				position: absolute;
				background-repeat: no-repeat;
				background-position: left top;
				background-size: contain;
			}
			&-box {
				width: 77.75px;
				height: 75.61px;
				background-image: url('../img/layout/gift-box.svg');
				top: 46px;
				left: 11px;
			}
			&-shadow {
				width: 32.23px;
				height: 24.39px;
				background: url('../img/layout/gift-shadow.svg');
				top: 46px;
				left: 10px;
				opacity: 0;
			}
			&-cover {
				width: 82.09px;
				height: 24.09px;
				background: url('../img/layout/gift-cover.svg');
				top: 31px;
				left: 8px;
				transform: rotate(0);
			}
		}
	}
	&.normal {
		.dot {
			animation-name: gift-dot-y;
			.img {
				animation-name: gift-dot-x;
			}
		}
	}
}
.start {
	.gift-animation {
		&.closed {
			.dot,
			.stars {
				animation-name: gift-dot-y2;
				.img {
					animation-name: gift-dot-x;
				}
			}
			.gift {
				&-shadow {
					animation: shadowbox 5.6s linear forwards;
				}
				&-cover {
					animation: openbox 5.6s linear forwards;
				}
			}
		}
	}
}

@keyframes openbox {
	// 0% {
	// 	top: 31px;
	// 	left: 8px;
	// 	transform: rotate(0);
	// }
	// 5% {
	// 	top: 13px;
	// 	left: -8px;
	// 	transform: rotate(-37deg);
	// }
	// 95% {
	// 	top: 13px;
	// 	left: -8px;
	// 	transform: rotate(-37deg);
	// }
	// 100% {
	// 	top: 31px;
	// 	left: 8px;
	// 	transform: rotate(0);
	// }

	0% {
		top: 31px;
		left: 8px;
		transform: rotate(0);
	}
	5% {
		top: 31px;
		left: 8px;
		transform: translateY(-105px) rotate(-180deg);
	}
	30% {
		top: 13px;
		left: -8px;
		transform: translateY(-210px) rotate(-1440deg);
	}
	70% {
		top: 13px;
		left: -8px;
		transform: translateY(0) rotate(-2557deg);
	}
	80% {
		top: 31px;
		left: 8px;
		transform: translateY(0) rotate(-2520deg);
	}
	100% {
		top: 31px;
		left: 8px;
		transform: translateY(0) rotate(-2520deg);
	}
}

@keyframes shadowbox {
	// 0% {
	// 	opacity: 0;
	// }
	// 5% {
	// 	opacity: 1;
	// }
	// 95% {
	// 	opacity: 1;
	// }
	// 100% {
	// 	opacity: 0;
	// }
	0% {
		opacity: 0;
	}

	69% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
