/* 大嘴鸟*/
.dong {
	z-index:9999;
	position:fixed;
	top:-40px;
	right:-80px;
	transform:scale(0.24);
	-webkit-transform:scale(0.24);
	-moz-transform:scale(0.24);
}
.monster {
	transform:rotate(-50deg);
	-ms-transform:rotate(-50deg);
	/* IE 9 */
  	-moz-transform:rotate(-50deg);
	/* Firefox */
  	-webkit-transform:rotate(-50deg);
	/* Safari 和 Chrome */
  	-o-transform:rotate(-50deg);
	/* Opera */
  	display:flex;
	justify-content:center;
	position:relative;
	width:170px;
	height:400px;
	border-top-left-radius:200px;
	border-top-right-radius:200px;
	background-color:#3C47D7;
	box-shadow:20px 20px 60px #4650E5;
}
.monster__face {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position:absolute;
	top:14%;
	width:75%;
	height:160px;
}
.monster__noses {
	top:50%;
	display:flex;
	justify-content:space-between;
	width:28%;
	height:auto;
	margin-bottom:10px;
}
.monster__nose {
	width:8px;
	height:12px;
	border-radius:20px;
	background:rgba(0,0,0,0.5);
	box-shadow:4px 8px 5px rgba(0,0,0,0.1);
}
.monster__mouth {
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:0%;
	overflow:hidden;
	border:25px solid #FFC333;
	border-radius:100px;
	background-color:#810332;
	animation:mouth 1.75s infinite;
	box-shadow:4px 8px 5px rgba(0,0,0,0.2);
	box-sizing:border-box;
}
.monster__mouth::before {
	content:'';
	position:absolute;
	width:150px;
	height:80px;
	border-radius:100px;
	background-color:#400018;
}
.monster__mouth::after {
	content:'';
	position:absolute;
	bottom:-80px;
	width:160px;
	height:80px;
	border-top-left-radius:50%;
	border-top-right-radius:50%;
	background-color:#DC1B50;
	animation:tongue 1.75s infinite;
}
.monster__top {
	position:absolute;
	top:-30px;
	width:170px;
	height:30px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:#ffffff;
	z-index:100;
	animation:t 1.75s infinite;
}
.monster__bottom {
	position:absolute;
	bottom:0;
	width:100px;
	height:30px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	background-color:#ffffff;
	z-index:100;
	animation:b 1.75s infinite;
}
.avatar-eye {
	position:absolute;
	top:-10%;
	width:65px;
	height:65px;
	background:linear-gradient(105deg,white,#cb87f4);
	border-radius:100%;
	box-shadow:4px 8px 5px rgba(0,0,0,0.2);
	margin:3px;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
.avatar-eye--green {
	background:linear-gradient(to bottom,#fdfdfd,#c3efea);
}
.avatar-eye--violet {
	background:linear-gradient(to bottom,#fdfdfd,#e6d6f6);
}
.eye--left {
	left:10%;
}
.eye--right {
	left:85%;
}
.eye--center {
	left:45%;
	top:10%;
}
.avatar-eye-pupil {
	position:absolute;
	width:55%;
	height:55%;
	left:50%;
	top:25%;
	-webkit-transform:translate(-50%);
	transform:translate(-50%);
	z-index:100;
	border-radius:100%;
}
.pupil--green {
	background:linear-gradient(135deg,rgba(188,248,177,0.7),#2fa38c 75%);
}
.pupil--pink {
	background:linear-gradient(135deg,#f1a183,#8535cd);
}
.avatar-eye-pupil-blackThing {
	position:absolute;
	width:55%;
	height:55%;
	left:50%;
	top:25%;
	background:#2c2f32;
	-webkit-transform:translate(-50%);
	transform:translate(-50%);
	border-radius:100%;
	box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
.avatar-eye-pupil-lightReflection {
	position:absolute;
	width:7px;
	height:7px;
	left:25%;
	top:10%;
	background:#ebebeb;
	-webkit-transform:translate(-50%);
	transform:translate(-50%);
	border-radius:100%;
	box-shadow:10px 10px 10px rgba(255,255,255,0.2);
}
/*大嘴动起来*/
@keyframes t {
	0%,10%,80%,100% {
	top:-30px;
}
20% {
	top:0px;
}
30% {
	top:-20px;
}
40% {
	top:-0px;
}
50% {
	top:-25px;
}
70% {
	top:0px;
}
}@keyframes b {
	0%,10%,80%,100% {
	bottom:-30px;
}
20% {
	bottom:0px;
}
30% {
	bottom:-20px;
}
40% {
	bottom:-0px;
}
50% {
	bottom:-25px;
}
70% {
	bottom:0px;
}
}@keyframes mouth {
	0%,10%,100% {
	width:100%;
	height:0%;
}
15% {
	width:90%;
	height:30%;
}
20% {
	width:50%;
	height:70%;
}
25% {
	width:70%;
	height:70%;
}
30% {
	width:80%;
	height:60%;
}
35% {
	width:60%;
	height:70%;
}
40% {
	width:55%;
	height:75%;
}
45% {
	width:50%;
	height:90%;
}
50% {
	width:40%;
	height:70%;
}
55% {
	width:70%;
	height:95%;
}
60% {
	width:40%;
	height:50%;
}
65% {
	width:100%;
	height:60%;
}
70% {
	width:100%;
	height:70%;
}
75% {
	width:90%;
	height:70%;
}
80% {
	width:50%;
	height:70%;
}
85% {
	width:90%;
	height:50%;
}
85% {
	width:40%;
	height:70%;
}
90% {
	width:90%;
	height:30%;
}
95% {
	width:100%;
	height:10%;
}
}@keyframes tongue {
	0%,20%,100% {
	bottom:-80px;
}
30%,90% {
	bottom:-40px;
}
40% {
	bottom:-45px;
}
50% {
	bottom:-50px;
}
70% {
	bottom:-80px;
}
90% {
	bottom:-40px;
}
}