.login-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(3%);
	width: 380px;
	height: 480px;
	background: #35cfbb;
	border-radius: 10px;
	box-shadow: 0 0 16px #333;
	opacity: 0.85;
}

/*密码框输入状态*/
.login-animate,
.password-animate {
	width: 11em;
	height: 11em;
	border-radius: 6em;
	background: #cefefb;
	margin: 20px 0;
	position: relative;
	overflow: hidden;
}

/*div下产生过度动画的时间*/
.login-animate div,
.password-animate div {
	transition: all 0.5s;
	-o-transition: all 0.5s;
	/* Opera */
	-moz-transition: all 0.5s;
	/* Firefox 4 */
	-webkit-transition: all 0.5s;
	/* Safari and Chrome */
}

.login-animate .body {
	background-image: url(./img/body.png);
	background-size: 95%;
	background-repeat: no-repeat;
	background-position: center;
	width: 6.9em;
	height: 5.5em;
	position: absolute;
	bottom: -2em;
	left: calc(50% - 3.4em);
	z-index: 0;
}

.login-animate .head {
	background-image: url(./img/face.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 7.3em;
	height: 6.3em;
	position: absolute;
	bottom: 1em;
	bottom: 1.15em;
	left: calc(50% - 3.6em);
	z-index: 1;
	-webkit-transform: rotate(0deg);
	-ms-transform: skew(30deg);
}

.login-animate .left-ear {
	background-image: url(./img/left-ear.png);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	width: 3em;
	height: 3.5em;
	position: absolute;
	bottom: 4.8em;
	left: calc(50% - 4.4em);
}


.height-eys-doe {
	background-image: url(./img/eye-doe.png) !important;
}

.login-animate .right-ear {
	background-image: url(./img/right-ear.png);
	background-size: 86%;
	background-repeat: no-repeat;
	background-position: center;
	width: 3em;
	height: 3.5em;
	position: absolute;
	bottom: 4.55em;
	left: calc(50% + 1.5em);
}

.login-animate .left-eye {
	background-image: url(./img/eye.png);
	background-size: 86%;
	background-repeat: no-repeat;
	background-position: center;
	width: 1em;
	height: 1em;
	position: absolute;
	bottom: 3.55em;
	left: calc(50% - 2.3em);
}

.login-animate .right-eye {
	background-image: url(./img/eye.png);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	width: 1em;
	height: 1em;
	position: absolute;
	bottom: 3.55em;
	left: calc(50% + 1.25em);
}

.login-animate .face {
	background-image: url(./img/muzzle.png);
	background-size: 78%;
	background-repeat: no-repeat;
	background-position: center;
	width: 5.0em;
	height: 4em;
	position: absolute;
	bottom: 0em;
	left: calc(50% - 2.5em);
}

.login-animate .nose {
	background-image: url(./img/nose.png);
	background-size: 95%;
	background-repeat: no-repeat;
	background-position: center;
	width: 1em;
	height: 1em;
	position: absolute;
	top: 0.6em;
	left: calc(50% - 0.5em);
}

.login-animate .mouth {
	background-image: url(./img/mouth-smile.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 2em;
	height: 1em;
	position: absolute;
	bottom: 1.0em;
	left: calc(50% - 1em);
}

.login-animate .left-arm {
	background-image: url(./img/left-arm.png);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	width: 3em;
	height: 7em;
	position: absolute;
	bottom: -7.5em;
	left: 2em;
	z-index: 2;
	transition: bottom 0.5s;
}

.login-animate .right-arm {
	background-image: url(./img/right-arm.png);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	width: 3em;
	height: 7em;
	position: absolute;
	bottom: -7.5em;
	left: 6em;
	z-index: 2;
	transition: bottom 0.5s;
}

.password-animate .mouth.show {
	width: 1em;
	left: calc(50% - 0.5em);
	background-image: url(./img/mouth-circle.png);
}

.password-animate .left-arm.show,
.password-animate .right-arm.show {
	bottom: -1.3em !important;
}

.password-animate .left-arm,
.password-animate .right-arm {
	bottom: -0.5em;
}

.username-animate .left-ear {
	left: 1.5em;
}

.username-animate .right-ear {
	left: 7em;
	bottom: 3.9em;
}

.username-animate .left-eye {
	left: 0.5em;
	bottom: 3.0em;
}

/*双眼发光*/
.username-animate .left-eye.doe,
.username-animate .right-eye.doe {
	background-image: url(./img/eye-doe.png);
}

/*点击输入的时候各部位移动位置*/
.username-animate .right-eye {
	left: 4em;
	bottom: 3.0em;
}

.username-animate .face {
	left: 1em;
	bottom: -0.4em;
}

.username-animate .nose {
	left: 1.4em;
	top: 0.65em;
}

.username-animate .mouth {
	bottom: 0.75em;
	background-image: url(./img/mouth-half.png);
}

.username-animate .mouth.doe {
	background-image: url(./img/mouth-open.png);
	height: 2em;
	bottom: 0.5em;
}

.login-form {
	width: calc(65%);
	padding: 0 2.5em;

}

.username,
.password {
	position: relative;
	width: 100%;
	margin: 20px 0;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px 0 #333;
}

.username>input,
.password>input {
	/* width: calc(100% - 20px); */
	width: calc(100%);
	padding: 0 10px;
	height: 2.5em;
	border: 0;
	border-radius: 5px;
}

.password>input {
	/* width: calc(100% - 3.3em); */
	width: calc(100%);
	padding: 0 2.3em 0 1em;
}

.pwd-eye {
	width: 1.2em;
	height: 1.2em;
	position: absolute;
	top: calc(50% - 0.6em);
	right: 0.5em;
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('./img/password-show.png');
}

.pwd-eye-show {
	background-image: url('./img/password-show.png');
}


.pwd-eye-hide{
	background-image: url('./img/password-hide.png');
}