@charset "utf-8";
/* CSS Document */

@import url(reset.css);
@import url(font-awesome-4.2.0/css/font-awesome.min.css);

html{
	height:100%;}

body{
	font-family:Verdana, Geneva, sans-serif;
	background:#D75353; /*#FF6B6B*/
	background:url(../images/bg.jpg);
	height:100%;
	overflow:hidden;}

.b-box{
	box-sizing:border-box;}

a{
	cursor:pointer;
	transition:all 0.4s ease;}

.loading{
	background:#FFF;
	font-size:18px;
	color:#333;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	border-radius:5px;
	
	position:fixed;
	top:40%;
	left:50%;
	margin-top:-17px;
	margin-left:-17px;}

h1{
	margin-bottom:10px;}

h1 strong{
	display:inline-block;
	background:url(../images/logo.png) no-repeat;
	width:100px;
	height:42px;
	text-indent:-9999px;}

h1 b{
	display: inline-block;
	margin-left: -5px;
	vertical-align: bottom;
	font-size: 14px;
	font-weight: normal;
	color: #efefef;
	letter-spacing: 2px;
	
	position: relative;
	top: 2px;}

.loginArea{
	width:380px;
	
	position:absolute;
	left:50%;
	top:25%;
	margin-left:-190px;
	opacity:0;
	
	transition:all 0.4s ease;
	transform:perspective(400px) rotate3d(0,1,0,-20deg);}

.loginArea.loaded{
	opacity:1;
	transform:rotate3d(0,1,0,0deg);}

.loginArea .loginBox{
	border-top:3px solid #DA4848;
	background:#FFF;
	padding:40px;
	border-radius:10px;}

.loginArea .loginBox .formRow{
	margin-top:10px;
	position:relative;}

.loginArea .loginBox .formRow:first-child{
	margin:0;}

.inputGroup{
	position:relative;}

.inputGroup i{
	display:block;
	background: #DA4848;
	color: #FFF;
	
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	
	position:absolute;
	left:0;
	top:0;
	
	transition:all 0.4s ease;}

.inputGroup input[type="text"], .inputGroup input[type="password"]{
	border:1px solid #CCC;
	padding:3px;
	padding-left:45px;
	width:100%;
	height:40px;
	box-sizing:border-box;}

.inputGroup input[type="text"]:focus ~ i, .inputGroup input[type="password"]:focus ~ i{
	background:#A00E0E;}

.submitBox{
	margin-top:15px;}

.submitBox .checkArea{
	position:relative;
	float:left;
	width:80%;
	margin-right:5px;}

.submitBox .btn{
	overflow:hidden;}

.submitBox .btn a{
	display:block;
	background:#DA4848;
	font-size:13px;
	color:#FFF;
	text-align:center;
	
	width:100%;
	height:36px;
	line-height:36px;}

.submitBox .btn a:hover{
	background:#A00E0E;}

.loginArea > p{
	margin-top:5px;
	font-family:Verdana, Geneva, sans-serif;
	text-align:right;
	font-size:12px;
	color:#efefef;}

.loginArea > p a{
	color:#efefef;}

/*****************/
/** QapTcha CSS **/
/*****************/


.QapTcha {/*整個驗證碼區*/
		}
		
.QapTcha .clr{
	clear:both;}
	
.QapTcha .bgSlider{/*滑軌*/
	width:100%;
	height:34px;
	float:left;
	border-radius:6px;
	border:1px solid #DADADA;
	
background: #e0e0e0; /* Old browsers */
background: -moz-linear-gradient(top,  #e0e0e0 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e0e0e0 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e0e0e0 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e0e0e0 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e0e0e0 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
	
.QapTcha .Slider{/*按鈕*/
	cursor:pointer;
	width:45px;
	height:30px;
	background:transparent url(../lib/Qaptcha/but-arrow_white.gif) no-repeat;
	position:relative;
	top:2px;
	left:0;
	z-index:99;}

.checkArea p.note{/*向右滑動解鎖*/
	font-size: 13px;
	font-family: 微軟正黑體;
	color: #676767;
	position: absolute;
	left: 55px;
	top: 9px;}

.QapTcha .dropSuccess{/*成功*/
	color:#4e8b37;}
	
.QapTcha .dropError{/*錯誤*/
	display:none;}

@media (max-width: 380px){
	.loginArea{
		width:100%;
		padding:0 20px;
		
		left:0;
		margin:0;}
	
	.loginArea .loginBox{
		padding:20px;}
	
	h1 b{
		font-size:12px;}
}