@charset "UTF-8";


/* Layout
****************************************/
body#login {
	display:table;
	width:100%;
	height:100%;
	background:#fffceb;
}
#login #container {
	display:table-cell;
	margin:0 auto;
	background:none;
	text-align:center;
	vertical-align:middle;
}
#login main {
	display:block;
	margin:0 auto;
	width:600px;
	background:#ffffff;
	border-radius:8px;
	box-shadow:0px 0px 8px 0px #f1f1f1;
	-moz-box-shadow:0px 0px 8px 0px #f1f1f1;
	-webkit-box-shadow:0px 0px 8px 0px #f1f1f1;
}
#login footer {
	margin:0 auto;
	padding:32px 0;
	width:600px;
	white-space:nowrap;
}
#login #content {padding:40px;}
#login #content img {margin-bottom:48px;}

#login a {color:#3399CC;}

/* Input
****************************************/
#login .inputs {float:right; width:272px;}
#login input[type="text"],
#login input[type="password"] {
	padding:0 8px 0 32px;
	width:100%;
	height:36px;
	font-size:1.3rem;
	line-height:36px;
	border:solid 1px #ccc;
	border-radius:4px;
	background-color:#ffffff;
}
#login .uid,#login .passwd {position:relative;}
#login .icon {
	display:block;
	float:left;
	width:16px;
	height:16px;
	position:absolute;
	left:8px;
	top:10px;
}
#login .uid .icon {background:url(../image/icon_login_id.png) no-repeat 50% 50%;}
#login .passwd .icon {background:url(../image/icon_login_pass.png) no-repeat 50% 50%;}
#login input[type="text"] {margin-bottom:8px;}
#login input[type="password"] {margin-bottom:16px;}

#login input[type="button"] {
	margin-bottom:32px;
	width:100%;
	height:40px;
	font-size:1.3rem;
	font-weight:bold;
	line-height:38px;
	text-align:center;
	cursor:pointer;
	background:linear-gradient(to bottom, #ffffff 0%, #e3e3e3 100%);
}
#login input[type="button"]:active {position:relative; top:1px;}


/* Various
****************************************/
#login .various {
	float:left;
	width:216px;
	text-align:left;
}
#login .various h3 {margin-bottom:8px; font-size:1.4rem;}
#login .various h3:before {
	content:url(../image/icon_warn_login.png);
	margin-right:8px;
	position:relative;
	top:2px;
}
#login .various p {font-size:1.1rem; line-height:1.48em; margin-bottom:16px;}
#login .various span {font-size:1.1rem; line-height:1.48em;}


/* Anchor
****************************************/
#login #content .anchor a {
	display:block;
	width:132px;
	height:32px;
	line-height:32px;
	color:#8c6e2b;
	background:#ffe539;
	border-radius:16px;
}
#login #content .anchor a:first-of-type {float:left;}
#login #content .anchor a:last-of-type {float:right;}
#login #content .anchor a:hover {text-decoration:none; background:#fcd561;}


/* Login Error
****************************************/
body#login #loginError {padding:24px 0 0;}
body#login #loginError h4 {color:#f00;}


/* for Mobile
**************************************************/
@media screen and (max-width:800px) {
	#login main {
		display:block;
		margin:32px auto 0;
		width:70%;
		height:auto;
	}
	#login footer {
		width:auto;
		padding:16px 0;
		font-size:1rem;
		background:none;
	}
	#login #content {
		margin:0  auto;
		padding:32px;
		width:auto;
	}
	#login #content .various,
	#login #content .inputs {float:none; width:auto;}
	#login #content .various {margin-top:24px;}
	#login #content img {margin-bottom:32px; width:284px; height:70px;}
	#login #content .anchor {margin:0 auto; width:272px;}
}

@media screen and (min-width:320px) and (max-width:640px) {
	#login #content .anchor {margin:0 auto; width:132px;}
	#login #content .anchor  a {margin:0 auto 8px; width:132px;}
	#login #content img {width:100%; height:auto;}
}