html, body, #mainDiv{
	width: 100%;
	height: 100%;
	font-family: 微軟正黑體;
}
body {
	background-image:url('../Images/LoginBG.png');
	background-repeat:no-repeat;
	background-size: 100% 100%;
}

.footer{
	padding-right: 30px;
}

.footer, .footerR{
	display: block;
	float: right;
	color: #ffffff;
	font-family: 微軟正黑體;
}

 .footerL{
	display: block;
	float: left;
	color: #ffffff;
	font-family: 微軟正黑體;
}

#topGapDiv{
	height: 10px;
}

#loginDiv {
	height: 100%;
}

#FooterDiv{
	height: 50px;
}

#ifrLoginKeyCon{
	background-image:url('../Images/LoginPanelBG.png');
	background-repeat:no-repeat;
	background-size: 100% auto;	
	width: 454px;
	height: 340px;
	margin: auto;
	padding-top: 130px;
	padding-left: 80px;
}
#carDiv{
	position:absolute;
	bottom: 120px;
	left:30px;
	-webkit-animation: CarDivAmine 5s;
	-moz-animation: CarDivAmine 5s;
	-o-animation: CarDivAmine 5s;
	-ms-animation: CarDivAmine 5s;
}

@-webkit-keyframes CarDivAmine {  from { left:-100px;bottom:30px;-webkit-transform: scale(0.5,0.5); }  to { left:30px;bottom:120px;-webkit-transform: scale(1,1); }}
@-moz-keyframes CarDivAmine {  from { left:-100px;bottom:30px;-moz-transform: scale(0.5,0.5); }  to { left:30px;bottom:120px; -moz-transform: scale(1,1); }}
@-o-keyframes CarDivAmine {  from { left:-100px;bottom:30px;-o-transform: scale(0.5,0.5); }  to { left:30px;bottom:120px;-o-transform: scale(1,1);  }}
@-ms-keyframes CarDivAmine {  from { left:-100px;bottom:30px;-ms-transform: scale(0.5,0.5); }  to { left:30px;bottom:120px;-ms-transform: scale(1,1);  }}
#smartcar{
	-webkit-animation: CarAmine 1s infinite alternate;
	-moz-animation: CarAmine 1s infinite alternate;
	-o-animation: CarAmine 1s infinite alternate;
	-ms-animation: CarAmine 1s infinite alternate;	
}
/* swing 5 degree for horizontal label*/
@-webkit-keyframes CarAmine {
  0% { -webkit-transform: rotate(-2deg); -webkit-transform-origin:120px 220px;}
  100% { -webkit-transform: rotate(2deg); -webkit-transform-origin:120px 220px;}
}
@-moz-keyframes CarAmine {
  0% { -moz-transform: rotate(-2deg); -webkit-transform-origin:120px 220px;}
  100% { -moz-transform: rotate(2deg); -webkit-transform-origin:120px 220px;}
}
@-o-keyframes CarAmine {
  0% { -o-transform: rotate(-2deg); -webkit-transform-origin:120px 220px;}
  100% { -o-transform: rotate(2deg); -webkit-transform-origin:120px 220px;}
}
@-ms-keyframes CarAmine {
  0% { -0-transform: rotate(-2deg); -webkit-transform-origin:120px 220px ;}
  100% { -o-transform: rotate(2deg); -webkit-transform-origin:120px 220px ;}
}
#carcloud{
	position: absolute;
	left: -30px;
	bottom: -5px;	
	-webkit-animation: CarCloudAmine  0.8s infinite alternate;
	-moz-animation: CarCloudAmine  0.8s infinite alternate;
	-o-animation: CarCloudAmine  0.8s infinite alternate;
	-ms-animation: CarCloudAmine  0.8s infinite alternate;
}
@-webkit-keyframes CarCloudAmine {  from { opacity:0; }  to { opacity:.5; }}
@-moz-keyframes CarCloudAmine {  from { opacity:0; }  to { opacity:.5; }}
@-o-keyframes CarCloudAmine {   from { opacity:0; }  to { opacity:.5; }}
@-ms-keyframes CarCloudAmine {   from { opacity:0; }  to { opacity:.5; }}
#DragonDiv{
	position:absolute;
	bottom: 75%;
	right:20%;
	-webkit-animation: DragonDivAmine 2s;
	-moz-animation: DragonDivAmine 2s;
	-o-animation: DragonDivAmine 2s;
	-ms-animation: DragonDivAmine 2s;
}

@-webkit-keyframes DragonDivAmine {  
	0% { right:0%;bottom:40%;-webkit-transform: scale(0.1,0.1); }
	20% { right:10%;bottom:80%;-webkit-transform: }
	60% { right:5%;bottom:60%;-webkit-transform: }
	100% { right:20%;bottom:75%;-webkit-transform: scale(1,1); }
}
@-moz-keyframes DragonDivAmine {  
	0% { right:0%;bottom:40%;-moz-transform: scale(0.1,0.1); }
	20% { right:10%;bottom:80%;-moz-transform: }
	60% { right:5%;bottom:60%;-moz-transform: }
	100% { right:20%;bottom:75%;-moz-transform: scale(1,1); }
}
@-o-keyframes DragonDivAmine {  
	0% { right:0%;bottom:40%;-o-transform: scale(0.1,0.1); }
	20% { right:10%;bottom:80%;-o-transform: }
	60% { right:5%;bottom:60%;-o-transform: }
	100% { right:20%;bottom:75%;-o-transform: scale(1,1); }
}
@-ms-keyframes DragonDivAmine {
	0% { right:0%;bottom:40%;-ms-transform: scale(0.1,0.1); }
	20% { right:10%;bottom:80%;-ms-transform: }
	60% { right:5%;bottom:60%;-ms-transform: }
	100% { right:20%;bottom:75%;-ms-transform: scale(1,1); }
}
#smartDragonOuter{
	-webkit-animation: DragonOuterAmine 2s alternate;
	-moz-animation: DragonOuterAmine 1s alternate;
	-o-animation: DragonOuterAmine 1s alternate;
	-ms-animation: DragonOuterAmine 1s alternate;	
}
/* swing 5 degree for horizontal label*/
@-webkit-keyframes DragonOuterAmine {
  0% { -webkit-transform: rotate(-20deg);}
  40% { -webkit-transform: rotate(300deg);}
  85% { -webkit-transform: rotate(-100deg);}
  100% { -webkit-transform: rotate(2deg);}
}
@-moz-keyframes DragonOuterAmine {
  0% { -moz-transform: rotate(-20deg);}
  40% { -moz-transform: rotate(300deg);}
  85% { -moz-transform: rotate(-100deg);}
  100% { -moz-transform: rotate(2deg);}
}
@-o-keyframes DragonOuterAmine {
  0% { -o-transform: rotate(-20deg);}
  40% { -o-transform: rotate(300deg);}
  85% { -o-transform: rotate(-100deg);}
  100% { -o-transform: rotate(2deg);}
}
@-ms-keyframes DragonOuterAmine {
  0% { -ms-transform: rotate(-20deg);}
  40% { -ms-transform: rotate(300deg);}
  85% { -ms-transform: rotate(-100deg);}
  100% { -ms-transform: rotate(2deg);}
}
#smartDragon{
	position: absolute;
	-webkit-animation: DragonAmine 1s infinite alternate;
	-moz-animation: DragonAmine 1s infinite alternate;
	-o-animation: DragonAmine 1s infinite alternate;
	-ms-animation: DragonAmine 1s infinite alternate;	
}
/* swing 5 degree for horizontal label*/
@-webkit-keyframes DragonAmine {
  0% { -webkit-transform: rotate(-2deg); top: -10px;}
  100% { -webkit-transform: rotate(2deg); top: 10px;}
}
@-moz-keyframes DragonAmine {
  0% { -moz-transform: rotate(-2deg); top: -10px;}
  100% { -moz-transform: rotate(2deg);top: 10px;}
}
@-o-keyframes DragonAmine {
  0% { -o-transform: rotate(-2deg); top: -10px;}
  100% { -o-transform: rotate(2deg);top: 10px; }
}
@-ms-keyframes DragonAmine {
  0% { -0-transform: rotate(-2deg); top: -10px;}
  100% { -o-transform: rotate(2deg);top: 10px; }
}