body {
    /* background: #fff; */
    background: url(bj.jpg);
}

.wrap {
    margin-top: 100px;
    
    -webkit-animation: bounceIn 600ms linear;
	-moz-animation: bounceIn 600ms linear;
	-o-animation: bounceIn 600ms linear;
	animation: bounceIn 600ms linear;
}

.wraps-1{
    padding-top:100px;
    height:440px;
    background:rgba(255,255,255,0.2);
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}
.wraps-1-1{
    width: 248px;
    margin: 0 auto;
}
.wraps-1-2{
    width: 270px;
    margin: 20px auto;
}
.wraps-1-3{
    line-height: 25px;
    text-align: center;
    width: 270px;
    margin: 100px auto 0;
    font-size: 15px;
    color: #fff;
    opacity: 0.9;
}

.wraps-2{
    padding-top:50px;
    height:440px;
    background:#fff;
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}

.wraps-2-1{
    width: 300px;
    margin: 0 auto;
}

.wraps-2 .user,.wraps-2 .pwd,.wraps-2 .code{
    padding-top:10px;
    padding-bottom:10px;
    margin-top:10px;
    margin-bottom:0;
    border-bottom:1px solid #DFDFDF;
}
.wraps-2 .form-control{
    margin-left:40px;
    padding-left:0;
    width:calc(100% - 40px);
    border:none;
}

.wraps-2 .user{
    background:#fff url(user.jpg) no-repeat 7px center !important;
}
.wraps-2 .pwd{
    background:#fff url(pwd.jpg) no-repeat 7px center !important;
}
.wraps-2 .code{
    background:#fff url(code.jpg) no-repeat 7px center !important;
}

.wraps-2 .btn{
    margin:20px auto;
    width: 248px;
    height: 40px;
    border-radius: 20px;
    background: #FFD350;
    border:none;
    font-size:20px;
}
/*登录框动画*/
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		-moz-transform: scale(1);
	}
}
@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		-o-transform: scale(1);
	}
}
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		opacity: 1;
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		transform: scale(1);
	}
}