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

body {
	background-color: #8fb62a;
}

.btn {font-size: 16px;}

.ml10 {
	margin-left: 10px;
}


.wrapper {
	max-width: 640px;
	margin: 0 auto;
	min-height: 450px;
	max-height: 800px;
}

.scene-unauth {
background-image: url(../images/bg_lg.png) !important;
	 background-repeat: no-repeat;
    
    background-position: center bottom; 
	
}

#footer .white {
	background-color: #fff9c7;
}

#footer {
	position: absolute;
	z-index: 300;
	/*bottom: 0%;*/
	width: 100%;
}

.white #btm-link {
	background-color: #fff;
}

#btm-link {
	padding: 20px 0;
}

.center {
	text-align: center !important;
}
/*media width640*/
.name {
	font-size: 35px;
	font-weight:bolder;
	color: #318739;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif", "微軟正黑體";
}

.name-poz {
	position: absolute;
	z-index: 200;
	bottom: 10%;
	left: 10%;
}

@media screen and (min-width: 320px) {
    .name-poz {
	
	top: 0%;
	margin-top: 370px;
		left: 8%;}
		#footer {margin-top: 400px;}
	  #bars {left: 21% !important;}
	
	.name {font-size: 25px;}
	.btn {font-size: 14px;}
}
  @media screen and (min-width: 321px) and (max-width: 375px) {
    .name-poz {
	
	top: 0%;
	margin-top: 420px;
	left: 8%;
}

	  #footer {margin-top: 460px;}
	  #bars {left: 19% !important;}
.name {font-size: 35px;}
	  .btn {font-size: 16px;}
}
  @media screen and (min-width: 376px) and (max-width: 414px) {
    .name-poz {
	
	top: 0%;
	margin-top: 490px;
	left: 10%;
}
	  .name {font-size: 40px;}
#footer {margin-top: 530px;}
	  #bars {left: 19% !important;}
	  .btn {font-size: 16px;}
}
  @media screen and (min-width: 415px) and (max-width: 640px) {
   .name-poz {
	
	top: 0%;
	margin-top: 760px;
	left: 10%;
}
	  .name {font-size: 50px;}
#footer {margin-top: 830px;}
	  #bars {left: 19% !important;}
	  .btn {font-size: 26px;}
}

@media screen and (min-width: 641px) and (max-width: 3000px) {
  .name-poz {
	
	top: 0%;
	margin-top: 760px;
	left: 10%;
}
	  .name {font-size: 50px;}
#footer {margin-top: 830px;}
	  #bars {left: 19% !important;}
	  .btn {font-size: 26px;}
}


#name1, #name2 {
	float: left;
}

#name2 {
	margin-left: 20px;
}


#logo {
	position: absolute;
	z-index: 100;
	top: 10px;
	right: 1%
}


@media screen and (min-width: 320px) {
    #logo {
	width: 100px;
	top: 10px;
	right: 2%
}}
  @media screen and (min-width: 321px) and (max-width: 375px) {
    #logo {
	width: 100px;
	top: 10px;
	right: 2%
}}
  @media screen and (min-width: 376px) and (max-width: 414px) {
    #logo {
	width: 100px;
	top: 10px;
	right: 2%
}}
  @media screen and (min-width: 415px) and (max-width: 640px) {
    #logo {
	width: 100px;
	top: 10px;
	right: 1%
}
}

@media screen and (min-width: 641px) and (max-width: 3000px) {
   #logo {
	
	top: 10px;
	right: 1%
}
}


.airplane {
	position: absolute;
	z-index: 200;
	top: 30%;
	left: 48%;
	
	-webkit-animation: MoveUpDown 2s linear infinite;
	animation: MoveUpDown 2s linear infinite;
}

@keyframes MoveUpDown {
  0% {
    top: 27%;
	
  }
  50% {
    top: 28%;
	
  }
  100% {
    top: 27%;
	
  }
}

@media screen and (min-width: 320px) {
    .airplane {
	width: 100px;
	
	top: 40%;
	left: 48%;
		
}}
  @media screen and (min-width: 321px) and (max-width: 375px) {
    .airplane {
	width: 115px;
	
	top: 40%;
	left: 48%;
}}
  @media screen and (min-width: 376px) and (max-width: 414px) {
    .airplane {
	width: 125px;
	
	top: 40%;
	left: 48%;
}}
  @media screen and (min-width: 415px) and (max-width: 640px) {
    .airplane {
	width: 227px;
	
	top: 40%;
	left: 48%;
}
}

@media screen and (min-width: 641px) and (max-width: 3000px) {
   .airplane {
	width: 227px;
	top: 40%;
	left: 48%;
	
	
}
}