@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	font-family: Arial, "微軟正黑體", "新細明體";
	background-color: #232323;
	background-attachment: fixed;
	background-size: cover;
	background-image: url("images/login_bg_01.jpg"),url("images/login_bg_02.jpg"),url("images/login_bg_03.jpg"),url("images/login_bg_04.jpg"),url("images/login_bg_05.jpg");
	background-position: top center; 
} 
 
 
.bodyanimatag{
	animation-duration: 25s;
	animation-iteration-count: infinite;  
	animation-delay:5s;
	animation-name: BGanimatrun; 
}


@keyframes BGanimatrun {
    0% {background-image: url("images/login_bg_01.jpg");}
	20% { background-image: url("images/login_bg_02.jpg");}  
    40%{background-image: url("images/login_bg_03.jpg");}
	60%{background-image: url("images/login_bg_04.jpg");}
	80%{background-image: url("images/login_bg_05.jpg");}
	 100% {background-image: url("images/login_bg_01.jpg");}
  }


 .colorYellow{color: #f7e901;} 
 .colorRed{color:#F4393C;} 

ul{
	margin: 0px;
	padding: 0px;
	list-style: none; 
}
input[type="text"] , input[type="password"] , select{
	border: 1px solid #fff;
	line-height: 40px;
	height: 40px;
	padding:0px 5px;
	font-size: 15px;
	width:100%;box-sizing: border-box; border-radius: 3px;
}
input:focus{outline: none;} 
body ,html , form{height: 100%;}

.loginArea{position: absolute;width: 90%;max-width:480px;top:20%;left: 70px; min-height: 450px;font-size: 0.8em;}

.loginArea.creatNew{position: relative;top:auto;left: auto;padding: 30px;}

 .loginlogo{ width: 100%;margin: 0px auto;}
.loginlogo img{
	width: 100%;
} 
.loginBox{width:90%; border-radius: 10px;background-color:rgba(255,255,255,0.7);padding: 20px;margin: 0px auto;} 
 
ul.signarea{ 
	position: relative; 
	margin:0px auto; 
}
ul.signarea .tt{
	width:80px;
	height: 35px;
	line-height: 35px; 
	box-sizing: border-box;  
	position: absolute;
	color: #333;font-size: 1.4em;
	font-weight: 600;
	left: 0px;
	text-align: center;  
}
ul.signarea > li{
	padding: 5px;
	padding-left:100px;
	position: relative; 
 	
}
.verifybox{height:40px;position: relative;}
.verifybox input[type="text"]{height: 100%; width: calc(100% - 150px);padding-left:10px; display: inline-block;}
.verifybox img{height: 100%;width: 100px;vertical-align: top;}
.verifybox a{display: inline-block;transition: all 0.5s;width:40px;height: 100%; background-color:#05B1DC;vertical-align: top;border-radius: 3px;color: #fff;line-height:40px;text-align: center;}
.verifybox a:hover{background-color: #E8D801;color: #333;}
.verifybox a i{font-size: 1.2em;}  

ul.signarea > li ul{margin: 0px;}
ul.signarea > li ul li{padding: 5px;}   

.btnlogArea {text-align: center;padding: 5px;position: relative;} 
.btnlogArea .btn_log {display: inline-block;border-style: none;border-radius: 5px;padding: 5px 15px;font-size: 1.4em;font-weight: 600; background-color: #05B1DC;color: #fff;transition: all 0.5s;}
.btnlogArea .btn_log:hover{background-color: #E8D801;color: #333;text-decoration: none;}
.btnlogArea ul.otherbox{display: inline-block;position: absolute;right: 0px;top:5px;}
.btnlogArea ul.otherbox li{display: inline-block;font-size: 1.4em;font-weight: 600;padding: 5px;}
.btnlogArea ul.otherbox li a{color: #333;} 
.btnlogArea ul.otherbox li a:hover{color: #05B1DC;} 
 

 .footerArea{text-align: center;border-bottom: solid 1px #666;margin-top: 10px;padding-bottom:8px;margin-bottom:8px;}
.footerArea img{width: 200px;}
.footerArea ul li{font-size: 0.8em;padding-left:25px;}
@media only screen and (max-width:768px){
	
.loginArea{margin: 20px auto;position: relative;top:auto;left: auto;}
    
	ul.signarea .tt{
	width:100%;  
	text-align: left;
	position: relative;
	 display: block; 
}
ul.signarea > li{
	padding-left:0px;
 	
}
	
 .verifybox{height: auto;text-align: left;}	
.verifybox input[type="text"]{display:block; width:100%;height: auto;}
.verifybox img{height:40px;width: 150px;margin-top:5px;position: relative;}
.verifybox a{margin-top:5px; }
	
.btnlogArea ul.otherbox{display: block;position: relative;padding: 10px;}

.footerArea{position: relative;bottom: auto;left:auto;text-align: center;margin: 20px auto;}
.footerArea ul li{text-align: center;padding-right:0px;}
	 }