@charset "UTF-8";

#wrap {
	width:100%;
	max-width:640px;
	margin:auto;
}

#content {
	width:640px;
	padding:40px;
	box-sizing: border-box;
	background:#fff;
	border-radius:20px;
	box-shadow: 0px 0px 15px #cfcfcf;
	text-align: center;
	position:absolute;
	top:calc(50% - 170px);
}

#content #login_frm .logo {
	text-align:center;
	margin-bottom:40px;
}
#content #login_frm .logo img {
	width:80%;
}

#content #login_frm .input_box {
	width:80%;
	margin:auto;
	margin-bottom:20px;	
}

#content #login_frm .input_box input {
	width:100%;
	height:40px;
	line-height:40px;
	border-radius: 8px;
	background: #F7F7F7;
	border: 1px solid #f1f1f1;
}


#content #login_frm .login_button {
	width:80%;
	height:40px;
	line-height:40px;
	border-radius: 8px;
	text-align:center;
	background: linear-gradient(45deg, #008bd1, #0c3274);
	color: #fff;
	background-size: 150% 150%;
	transition: background-position 0.3s ease-in-out;
	font-size: 16px;
	font-weight: bold;
}

#content #login_frm .login_button:hover {
	 background-position: 100% 100%;
}


@media screen and (max-width:960px) {
	#content {
		width:90%;
		left:5%;
	}
}