/*================================
          carrie 20150813
==================================*/
body.login { height: 100vh; }

/* random background */
body.login {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-image: url('../images/login-bg.jpg');
	background-size: cover;
}

.prependDiv {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}
body.blur .prependDiv {
	-webkit-filter: blur(10px);
	filter: blur(10px);
}



/* background blur */
.bg-blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

/* logo */
.login .logo { text-align: center; padding: 80px 0 30px; position: relative; }
.login .logo img { max-width: 580px; }
.login .logo .slogan {
	font-size: 22px;
	font-size: 2.2rem;
	color: #ffffff;
	padding: 20px 0; 
	letter-spacing: 5px;
}


/* login box */
.login .loginBox {
    width: 370px;
    padding: 50px 40px 30px 40px;
    margin: 0 auto;
    background: rgba(0,0,0,0.45);
    position: absolute;
    margin-top: 0;
    left: 50%;
    margin-left: -225px;
    box-shadow: 0 0 6px #333333 inset;
}
.socialLoginTitle { font-size: 18px; font-size: 1.8rem; color: #454545; }
.left-box { float: left; width: 370px; }
.right-box { float: left; width: 350px; }
.login ul.forms { margin-left:0; margin-bottom: 0; }

/*如果有社群登入*/
.login .loginBox.full { width: 720px; margin-left: -400px; }
.login .loginBox.full .left-box ul.forms  { border-right:1px solid #ffffff; padding-right: 40px; }
.login .loginBox .left-box ul.forms { border-right: none; padding-right: 0;}
/* login box left side */
.left-box ul.forms li { margin-bottom: 10px; }
.left-box ul.forms li:last-child { margin-bottom: 0; }
/* 忘記密碼按鈕 */
a.probation:link { color:#cccccc; font-size: 16px; font-size: 1.6rem; }
a.probation:visited { color:#cccccc; }
a.probation:hover { color:#ffffff; }
a.probation:active { color:#ffffff; }


/*瀏覽器版本*/
.browserVersion {
    width: 80%;
    padding: 10px 0px;
    margin: 0 auto;
    position: absolute;
    left: 10%;
    text-align: center;
    top: 100%;
    color: #ffffff;
    text-shadow: 0 0 10px #333;
}


/* password box */
.login .passwordBox {
	width: 370px;
	padding:50px 40px; 
	margin: 0 auto;
	background: rgba(0,0,0,0.45);
	position: absolute;
	opacity: 0;
	margin-top: 0;
	left:50%;
	margin-left: -225px;
	z-index: -100;
}
.login .passwordBox.reset {
	opacity: 1;
	z-index: 1;
	margin-top:20px;
} 
.passwordBox ul.forms li { margin-bottom: 12px; }
.passwordBox ul.forms li:last-child { margin-bottom: 0; }

/* 20151104 Gabby 新增 */
.passwordBox .boxContent, .loginBox .boxContent { margin-bottom: 20px; font-size: 18px; font-size: 1.8rem; color: #cccccc;}
.passwordBox .forms li, .loginBox .forms li, .registerBox .inlineColumn.half { position: relative;}
.passwordBox .inlineColumn.half, .loginBox .inlineColumn.half { width: 48.5% ;}
.login .captcha { position: absolute; right: 20px; top: 10px; z-index: 2;}
.login .captcha img { width: 100px; margin-right: 5px; }
/* 20151104 新增 END */

/*如果有社群登入*/
.login .passwordBox.full { width: 720px; margin-left: -400px; }

/* input */
.login input.text {
	width: 90% ;
	padding:15px 5%;
	border:none;
	background: rgba(0,0,0,0.55);
	font-size: 16px;
	font-size: 1.6rem;
	color: #cccccc;
}
.login input.text:focus,
.login input.email:focus,
.login input.password:focus,
.login textarea.uniform:focus {
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
	border-color: #666666;
	color: #666666;
	background: #cccccc; 
}


/*checkbox*/
.loginBox label, .agree label { font-size:16px; font-size:1.6rem; margin-right:8px;	color: #cccccc; }
.loginBox label:active div.checker span::after, 
.agree label:active div.checker span::after {
	opacity: 1;
  	
  	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
 	transform: scale(1);

 	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
}
.loginBox div.checker, 
.agree div.checker {
	width: auto;
	height: auto;
	margin-right: 5px;
}
.loginBox div.checker span, 
.agree div.checker span {
	background: rgba(255,255,255,0.5);
    height: 24px;
    width: 24px;
    display: block;
}
.loginBox div.checker span::after, 
.agree div.checker span::after {
	content: '';
	width: 200px;
  	height: 200px;
  	display: block;
  	position: absolute;
  	left:50%;
  	top:50%;
  	margin-left:-100px;
  	margin-top:-100px;
  	opacity: 0;
  	border-radius: 100%;
  	background:rgba(255,255,255,0.3);
  	z-index: -1;

  	-ms-filter: none;
  	filter: none;

  	-webkit-transform: scale(0);
  	-moz-transform: scale(0);
  	-ms-transform: scale(0);
  	-o-transform: scale(0);
  	transform: scale(0);

	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
}
.loginBox div.checker input, .agree div.checker input { width: 24px; height: 24px; }
.loginBox .checker input:focus, .agree .checker input:focus { outline: 0; }
.loginBox .checker, .agree .checker { vertical-align: top; }

/*滑鼠按下瞬間的效果*/
.loginBox div.checker:active span, 
.loginBox div.checker.active span, 
.agree div.checker:active span, 
.agree div.checker.active span {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker:active span::after, 
.loginBox div.checker.active span::after, 
.agree div.checker:active span::after, 
.agree div.checker.active span::after {
	opacity: 1;

	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  	
  	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
 	transform: scale(1);
}

/*滑鼠移動到checkbox框上的效果*/
.loginBox div.checker.focus span,
.loginBox div.checker:hover span, 
.agree div.checker.focus span,
.agree div.checker:hover span {
	border-color:#f5f5f5;
}
.loginBox div.checker.focus:active span, .loginBox div.checker:active:hover span,
.loginBox div.checker.active:hover span, .loginBox div.checker.focus.active span, 
.agree div.checker.focus:active span, .agree div.checker:active:hover span,
.agree div.checker.active:hover span, .agree div.checker.focus.active span {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker span.checked, 
.agree div.checker span.checked {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker span.checked::before, 
.agree div.checker span.checked::before {
	/*font-family: 'MaterialDesignIcons'; 20160328 換成Ionicons Gabby*/
	font-family: 'Ionicons';
	color: #333333;
	content: "\f383";/*f122太粗 改f383 carrie 20160329*/
	position: absolute;
	left: 4px;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 24px;
}
.loginBox div.checker:active span.checked, 
.loginBox div.checker.active span.checked, 
.agree div.checker:active span.checked, 
.agree div.checker.active span.checked {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker.focus span.checked,
.loginBox div.checker:hover span.checked, 
.agree div.checker.focus span.checked,
.agree div.checker:hover span.checked {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker.focus:active span.checked,
.loginBox div.checker:hover:active span.checked,
.loginBox div.checker.active:hover span.checked,
.loginBox div.checker.active.focus span.checked, 
.agree div.checker.focus:active span.checked,
.agree div.checker:hover:active span.checked,
.agree div.checker.active:hover span.checked,
.agree div.checker.active.focus span.checked {
	background: #f5f5f5;
	border-color:#f5f5f5;
}
.loginBox div.checker.disabled span,
.loginBox div.checker.disabled:active span,
.loginBox div.checker.disabled.active span, 
.agree div.checker.disabled span,
.agree div.checker.disabled:active span,
.agree div.checker.disabled.active span {
	background: #dedede;
	border-color:#dedede;
}
.loginBox div.checker.disabled span.checked,
.loginBox div.checker.disabled:active span.checked,
.loginBox div.checker.disabled.active span.checked, 
.agree div.checker.disabled span.checked,
.agree div.checker.disabled:active span.checked,
.agree div.checker.disabled.active span.checked {
	background: #dedede;
	border-color:#dedede;
}


/* login box right side */
.right-box ul.unstyled {
	/*border-left: 1px solid #ffffff;
	padding-left: 40px; 改成left-box加border-right Gabby*/
	margin-left: 40px;
}
.startRegier {
	margin-top: 30px; 
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
}
.startRegier .underLink { margin-top: 5px; }
.right-box .btn-block { margin-top: 20px; }

/* btn */
.login .btn-label.btn-large > i { border-right: 1px solid rgba(221,221,221,0.5); }
.login .btn-fb {
	background-color:#3B5998;
	background-image:-moz-linear-gradient(top,#5A76B1,#3B5998);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#5A76B1),to(#3B5998));
	background-image:-webkit-linear-gradient(top,#5A76B1,#3B5998);
	background-image:-o-linear-gradient(top,#5A76B1,#3B5998);
	background-image:linear-gradient(to bottom,#5A76B1,#3B5998);
	background-repeat:repeat-x;
}
.login .btn-google {
	background-color:#DD4B39;
	background-image:-moz-linear-gradient(top,#E5695A,#DD4B39);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#E5695A),to(#DD4B39));
	background-image:-webkit-linear-gradient(top,#E5695A,#DD4B39);
	background-image:-o-linear-gradient(top,#E5695A,#DD4B39);
	background-image:linear-gradient(to bottom,#E5695A,#DD4B39);
	background-repeat:repeat-x;
}


/* registerBox */
.registerBox .close-toggleBtn {
	position: fixed;
	right:40px;
	top: 25px;
	z-index:999;
}
.registerBox {
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,1); 
	position: fixed;
	right:-50%;
	top: 0;
	box-shadow: -8px 0 25px #444444;
	opacity: 0;
}
.registerBox .blockquote .content { padding:30px 100px; }
.registerBox .blockquote .quotation-up { left: 50px; }
.registerBox .blockquote .quotation-down { right: 50px; }
.registerBox h2 { font-size:27px; font-size:2.7rem; padding:40px 50px 0; }
.registerBox .forms { padding:0px 50px; }
.registerBox .alert { font-size:15px; font-size:1.5rem; }
.registerBox .alert i { font-size:18px; font-size:1.8rem; }

.registerBox .formulaire .alert { font-size:13px; font-size:1.3rem; background-color:#ffffff;border:none; }
.registerBox .formulaire .alert i { font-size:13px; font-size:1.3rem; }

.registerBox ul.forms { padding-bottom: 60px; }
.registerBox .dropzone { /*background-color: transparent;*/ border: 1px dashed #cccccc; }
.registerBox .dropzone .dz-message { font-size:20px; font-size:2rem; }
.agree {
	background-color: #cccccc;
	padding:40px 50px 30px;
}
.registerBox .checkInfo i { vertical-align: inherit; }


/* login-hide */
.login .loginBox.login-hide {
	animation: fadeOut .8s linear forwards;
	-moz-animation: fadeOut .8s linear forwards;
	-webkit-animation: fadeOut .8s linear forwards;
	-o-animation: fadeOut .8s linear forwards;
	z-index: -100;
	height: 0;
	overflow: hidden;
}


/* password-show */
.login .passwordBox.password-show {
	animation: fadeIn .4s linear .6s forwards;
	-moz-animation: fadeIn .4s linear .6s forwards;
	-webkit-animation: fadeIn .4s linear .6s forwards;
	-o-animation: fadeIn .4s linear .6s forwards;
	z-index: 1;
}
.login .passwordBox.password-show.reset {
	animation: none;
	-moz-animation: none;
	-webkit-animation: none;
	-o-animation: fadeIn none;
	z-index: 1
}


/* login-show */
.login .loginBox.login-show {
	animation: fadeIn .6s linear .6s backwards;
	-moz-animation: fadeIn .6s linear .6s backwards;
	-webkit-animation: fadeIn .6s linear .6s backwards;
	-o-animation: fadeIn .6s linear .6s backwards;
	z-index: 1;
	height: auto;
}


/* password-hide */
.login .passwordBox.password-hide {
	animation: fadeOut .8s linear backwards;
	-moz-animation: fadeOut .8s linear backwards;
	-webkit-animation: fadeOut .8s linear backwards;
	-o-animation: fadeOut .8s linear backwards;
	z-index: -100;
}

/* provision */
.provision { padding: 0 50px;}

/*responsive*/
@media screen and (max-height : 700px) {
	.login .logo { padding: 40px 0 10px; }
}
@media screen and (min-width : 1281px) {
}
@media screen and (max-width : 1280px) {
}

@media screen and (max-width : 979px) {
	/* login box */
	.login .loginBox, .login .loginBox.full {
		width: 80%;
		padding:50px 5%;
		left: 5%; 
		margin-left: 0;
	}
	.left-box {
		width: 100%;
	}
	.loginBox.full .left-box {
		width: 50%;
	}
	.right-box {
		width: 50%; 
	}

	/* password box */
	.login .passwordBox, .login .passwordBox.full {
		width: 80%;
		padding:50px 5%;
		left: 5%; 
		margin-left: 0;
	}
}

@media screen and (max-width : 800px) {
	/* registerBox blockquote 原本寫在680，調整到800 20160602 Gabby */
	.registerBox .blockquote .content { padding:30px 50px; }
	.registerBox .blockquote .quotation-up { left: 8px; }
	.registerBox .blockquote .quotation-down { right: 8px; }
}

@media screen and (max-width : 768px) {
}

@media screen and (max-width : 680px) {
	.login .logo { padding: 10px 0 30px 0; }
	.login .logo img { max-width: 80%; }
	.login .logo .slogan { font-size: 20px; font-size: 2rem; }

	/* login box */
	.login .loginBox, .login .loginBox.full {
		padding:5%;
	}
	.login .loginBox::after {
		content: '';
		display: block;
		width: 100%;
		height: 50px;
		position: absolute;
		left: 0;
		bottom: -50px;
		visibility: visible;
		overflow: visible;
	}
	.left-box, .loginBox.full .left-box {
		width: 100%;
	}
	
	.login .loginBox.full .left-box ul.forms {
		padding-right: 0;
		border-right: none;
	}

	.right-box {
		width: 100%; 
		padding-top: 30px;
		border-top: 1px solid #ffffff;
		margin-top: 40px;
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
	.right-box ul.unstyled {
		margin-left: 0;
		/*padding-left: 0;
		border-left: none;*/
	}

	/* password box */
	.login .passwordBox, .login .passwordBox.full {
		padding:5%;
	}

	.registerBox { width: 95%; right: -90%; /*Gabby 會壓到忘記密碼 */ }
	
	/* 忘記密碼btn調整 */	
	.passwordBox .inlineColumn.half, .loginBox .inlineColumn.half { margin-right: 0;}



	.registerBox .agree .btn-blue {
		margin-top: 20px;
		display:block;
		width:100%;
		padding-left:0 !important;
		padding-right:0 !important;
		-webkit-box-sizing:border-box;
	   	-moz-box-sizing:border-box;
	    -o-box-sizing:border-box;
	    box-sizing:border-box;
	}

}

@media screen and (max-width : 600px) {
}

@media screen and (max-width : 540px) {		
}

@media screen and (max-width : 512px) {

}

@media screen and (max-width : 480px) {
	.login .logo .slogan { padding-bottom: 10px; }

	/* login box */
	.login .loginBox, .login .loginBox.full {
		width: 90%;
		padding:5% 5%;
		left: 0;
	}
	.right-box {
		padding-top: 20px;
		margin-top: 30px;
	}
	.startRegier {
		margin-top: 20px;
	}

	/* password box */
	.login .passwordBox, .login .passwordBox.full {
		width: 90%;
		padding:5% 5%;
		left: 0;
	}

	.agree > span { display: block; }/* 在小螢幕底下，讓條款名稱獨立一行 20160602 Gabby */
}

@media screen and (max-width : 320px) {
}

@media screen and (max-width : 240px) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:portrait)  {/*直*/
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:landscape) {/*橫*/
}


/*
==============================================
   Chrome Hack
==============================================
*/
@media screen and (-webkit-min-device-pixel-ratio:0){  }  


/*
==============================================
   IE11 Hack
==============================================
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}