@charset 'utf-8';
*{
	padding: 0;
	border:0;
	margin: 0;
	outline: none;
	text-decoration: none;
}
html,body{
	width: 100%;
	height: 100%;
}
.content{

}
@media (max-width: 1024px){
	body{
		transform: scale(0.6);
	}
}
/*脸*/
.face{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 460px;
	height: 400px;
	margin-left: -230px;
	margin-top: -200px;
	border:2px solid #000;
	border-radius: 60% 60% 40% 40%;
	overflow: hidden;
	background-color: #eee;
	z-index: 1;
}
/*头发*/
.hear{
	position: absolute;
	left: 130px;
	width: 200px;
	height: 160px;
	font-size: 0;
	border-radius: 0 0 50% 50%;
	overflow: hidden;
}
.hear .left,.hear .right{
	display: inline-block;
	width: 50%;
	height: 100%;
}
.hear .left{
	background-color: #f0ac6b;
}
.hear .right{
	background-color: #8d8d8d;
}
/*眼睛*/
.eye{
	position: absolute;
	top: 180px;
	left: 50px;
	width: 360px;
	height: 100px;
	overflow: hidden;
}
.eye .left,.eye .right{
	position: relative;
	display: inline-block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border:2px solid #000;
	overflow: hidden;
}
.eye .right{
	position: absolute;
	right: 0;
}
/*眼球*/
.eye .left:after,.eye .right:after{
	content: '';
	position: absolute;
	left: 35%;
	width: 30%;
	height:60%;
	background-color: #000;
	transition: all 1s;
}
.eye .left_bottom,.eye .right_bottom{
	position: absolute;
	top: 60px;
	display: inline-block;
	width: 200px;
	height: 80px;
	border-radius: 50%;
	border-top:2px solid #000;
	background-color: #eee;
	transition: all 1s;
}
.eye .left_bottom{
	left: -30px;
}
.eye .right_bottom{
	right: -30px;
}
.eye .left_red,.eye .right_red{
	position: absolute;
	top: 50px;
	width: 80px;
	height: 30px;
	background-color: red;
	border-radius:50%;
	opacity: 0;

}
.eye .left_red{
	left: 20px;
}
.eye .right_red{
	right: 20px;
}
/*鼻子*/
.nose{
	position: absolute;
	left: 50%;
	top: 240px;
	width: 30px;
	height: 10px;
	margin-left: -15px;
	border-radius:0 0 50% 50%;
	border-bottom: 8px solid #000;
	background-color: #eee;
}
/*嘴*/
.mouse{
	position: absolute;
	top: 245px;
	left: 175px;
	width: 110px;
	height: 50px;
	font-size: 0;
}
.mouse .left,.mouse .right{
	display: inline-block;
	margin-top: -5px;
	width: 52.5px;
	height: 100%;
	background-color: #eee;
	border-bottom: 5px solid #000;
	border-radius: 0 0 30% 30%;
	transition: all 1s;
}
.mouse .left{
	border-right: 2.5px solid #000;
}
.mouse .right{
	border-left: 2.5px solid #000;
}
/*胡须*/
.mustache .left{
	position: absolute;
	left:0;
	top: 0;
}
.mustache .right{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	transform: rotateY(180deg);
}
.mustache .left div:nth-of-type(1),.mustache .right div:nth-of-type(1){
	position: absolute;
	top: 180px;
	left: 10px;
	width: 40px;
	height: 5px;
	border-top: 8px solid red;
	border-radius: 30% 50% 10% 50%;
	background-color: #eee;
	transform: rotateZ(15deg);
}
.mustache .left div:nth-of-type(2),.mustache .right div:nth-of-type(2){
	position: absolute;
	top: 195px;
	left: 15px;
	width: 20px;
	height: 5px;
	border-bottom: 8px solid red;
	border-radius: 50%;
	background-color: #eee;
	transform: rotateZ(15deg);
}
.mustache .left div:nth-of-type(3),.mustache .right div:nth-of-type(3){
	position: absolute;
	top: 210px;
	left: 10px;
	width: 40px;
	height: 5px;
	border-bottom: 6px solid red;
	border-radius: 50% 20% 30% 50%;
	background-color: #eee;
	transform: rotateZ(15deg);
}
.mustache .left div:nth-of-type(4),.mustache .right div:nth-of-type(4){
	position: absolute;
	top: 250px;
	left: 40px;
	width: 25px;
	height: 10px;
	border-bottom: 6px solid red;
	border-radius: 30% 50% 40% 50%;;
	background-color: transparent;
	transform: rotateZ(20deg);
}
.mustache .left div:nth-of-type(5),.mustache .right div:nth-of-type(5){
	position: absolute;
	top: 260px;
	left: 50px;
	width: 20px;
	height: 10px;
	border-bottom: 6px solid red;
	border-radius: 30% 50% 40% 50%;;
	background-color: transparent;
	transform: rotateZ(-30deg);
}
/*耳朵*/
.ear{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 460px;
	height: 400px;
	margin-left: -230px;
	margin-top: -200px;
} 
.ear .left,.ear .right{
	position: absolute;
	top: -40px;
	width: 150px;
	height: 200px;
	border:3px solid #000;
	border-radius:0 80%;
	transform: rotateZ(-15deg);
	background-color: #eee;
	transition: all 1s;

}
.ear .left{
	left: 10px;
} 
.ear .right{
	right: 10px;
	transform: rotateY(180deg) rotateZ(-15deg);
}
/*动态*/
.content:hover .ear .left{
	transform: rotateZ(-5deg);
}
.content:hover .ear .right{
	transform: rotateY(180deg) rotateZ(-5deg);
}
.content:hover .mouse .left,.content:hover .mouse .right{
	border-radius: 0 0 50% 50%;
}
.content:hover .eye .left_bottom,.content:hover .eye .right_bottom{
	transform: translateY(-20px);
}
.content:hover .eye .left:after,.content:hover .eye .right:after{
	transform: scale(1.2);
}
.content:hover .eye .left_red,.content:hover .eye .right_red{
	opacity: 0.4;
}