body .font {
	font-family:'BM JUA','배달의민족 주아',sans-serif;
	font-size: 17rem;
	font-weight: bolder;
	margin-top: 21%;
}

body {
	background: linear-gradient(to bottom, #8e7fed 27%, #786ad7 49%, #786ad7 90%, #5a4fb8 100%) no-repeat;
}

.wrapper{
	margin:0 auto;
	width: 100vw;
	height: 100vh;
}

#poster{
	margin: 15% auto;
	width: 28rem;
	height: 37rem;
	position: relative;
	text-align: center;
	box-shadow: 18px 10px 28px -6px rgba(0,0,0,0.45);
	background: linear-gradient(to bottom, #FFFFFF 40%, #F0F0F0 60%, #F0F0F0 80%, #D4D4D4 100%);
	animation: BB 2s ease-in-out,
			   CC 3s 2s ease-in-out,
			   DD 5s 5s ease,
			   EE 5s 10s ease,
			   FF 5s 15s ease
			   ;
	transform-origin: left top,left top,left top,left top,center center;

}

@keyFrames BB{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(80deg);
	}
	100%{
		transform: rotate(20deg);
	}
}


@keyFrames CC{
	0%{
		transform: rotate(20deg);
	}
	50%{
		transform: rotate(40deg);
	}
	100%{
		transform: rotate(20deg);
	}
}

@keyFrames DD{
	0%{
		transform: rotate(20deg) translateY(0);
	}
	50%{
		transform: rotate(0deg) translateY(10rem);
	}
	100%{
		transform: rotate(0deg) translateY(90rem);
	}
}
@keyFrames EE{
	0%{
		transform: rotate(-180deg) translateY(0);
	}
	50%{
		transform: rotate(0deg) translateY(-10rem);
	}
	100%{
		transform: rotate(0deg) translateY(-90rem);
	}
}
@keyFrames EE{
	0%{
		transform: rotate(-180deg) translateY(0);
	}
	15%{
		transform: rotate(-240deg) translateY(0rem);
	}
	30%{
		transform: rotate(-360deg) translateY(0rem);
	}
	45%{
		transform: rotate(100deg) translateY(0rem);
	}
	60%{
		transform: rotate(200deg) translateY(0rem);
	}
	80%{
		transform: rotate($γ) translateY(0rem);
	}
	100%{
		transform: rotate(0deg) translateY(0rem);
	}




}

.font::after{
	content: '';
	display:block;
	position: absolute;
	top: 4%;
	left: 4%;
	border-radius: 50%;
	border: 10px solid;
	width: 25rem;
	height: 25rem;

}

#poster [class*="fa"]{
	position: relative;
	top: 3.3rem;
	transform: scale(3);
	margin-right: 11%;
	left: 1.7rem;
}



#poster > .star-l1{
	top: 7.4rem;
    left: 2.3rem;
    transform: scale(3) rotate(-52deg);
}

#poster > .star-l5{
    top: 7.4rem;
    left: 1.4rem;
    transform: scale(3) rotate(130deg);
}

#poster > .star-l2{
	top: 4.4rem;
	left: 1.5rem;
	transform: scale(3) rotate(-29deg);
}

#poster > .star-l4{
	top: 4.4rem;
	left: 2.1rem;
	transform: rotate(27deg) scale(3);
}

.after{
	
}
.after::after{
	content: '';
	display: block;
	border: 1px solid;
	margin-top: 5rem;
    margin-left: auto;
    margin-right: auto;
    width: 81%;
}

.clip{
	position: relative;
}

.clip-left, .clip-right{
	position: absolute;
	top: -2.3rem;
}

.clip-left{ left:10%; }
.clip-right{ right:10%; }