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

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
  padding: 0;
  margin: 0;
}
fieldset {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, table {
  display: block;
}
a {
  text-decoration: none;
  outline: none; /* for Firefox */
  cursor: pointer;
}
.clear {
  clear : both;
}
a:link, a:visited {
  text-decoration: none;
  color: #372021;
}
a:hover {
	text-decoration: none;
	color: #ed042a;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}
img, fieldset {
  border: 0 none;
}
ul, ol, li {
  list-style: none;
}
em, address {
  font-style: normal;
}
table {
  border-collapse: collapse;
}
em, i {
  font-style: normal;
}
strong, b {
  font-weight: normal;
}
img {
  border: none;
}
input, img {
  vertical-align: middle;
}
input {
  outline: none;
  border: 0 none;
  background: none;
}
textarea:focus {
  outline: 0;
}
.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  content: " ";
  font-size: 0;
}
.clearfix {
*zoom:1;
}
* {
	box-sizing: border-box;
  font-family: 'PingFang SC', '思源黑体 CN', 'Helvetica Neue', 'Helvetica', 'STHeitiTC-Light', 'Microsoft JhengHei', 'Arial', 'sans-serif', 'sans-serif', '微軟正黑體';
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/

body {
  width: 100%;
  background-color: #fff;
  margin: 0;
}
.warp {
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("../images/bg.jpg");
	height: 930px;
  margin: auto;
  overflow: hidden;
  position: relative;
}
img, iframe {
  display: block;
  width: 100%;
  height: auto
}
.conter {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.a1 {
  height: 550px;
  position: relative;
  display: block;
}

.a2{
  position: relative;
  display: block;
  z-index: 99999;
}

.a2 ul li ,.a2-firefox ul li, .a2-ie ul li {
  width: 50%;
  float: left;
  z-index: 99;
  text-align: center;
  box-sizing: border-box;
	margin: 0 0 0 28%;
}

.a2 ul.google li:nth-child(1) {
  width: 35%;
}
.a2 ul.google li:nth-child(2) {
  width: 35%;
}



.movie-ie {
  width: 40%;
  position: absolute;
  z-index: 20;
  height: 0px;
  padding-bottom: 25%;
  margin: auto;
  left: -5%;
}
#movie-ie {
  width: 88%;
  height: 79%;
  position: absolute;
  left: 5%;
  top: 18%;
  z-index: 40;
}

.movie {
  width: 100%;
  position: relative;
  z-index: 20;
  height: 0px;
  padding-bottom: 56.25%;
}
#movie {
  width: 90%;
  height: 90%;
  position: absolute;
  left: 5%;
  top: 20%;
  z-index: 40;
}
.movie_bg {
  position: relative;
  z-index: 1;
}
.arrow {
  margin-top: 150%;
}

.bg {
  position: absolute;
  z-index: 0;
  width: 1920px;
  height: 930px;
  overflow: hidden;
  display: block;
  top: 0;
  left: 50%;
  margin-left: -960px;
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
.ApesGame {
	position: absolute;
	z-index: 99;
	width: 20%;
	margin-top: 22%;
  left: 10%;
}


/*註冊*/
.register {
  display: block;
  width: 510px;
  height: 330px;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  background-image: url(../images/regist-bg.png);
  background-repeat: no-repeat;
	overflow: hidden;
}

.register h1 {
  color: #17447b;
  font-size: 30px;
  display: block;
	text-align: center;
}
.register h1 p {
  color: #17447b;
  font-size: 12px;
  display: block;
}

/*---------------------------------*/
.register .RegisterBox_A{
	height: 330px;
  overflow: hidden;
  padding: 3%;
  position: relative;
	display: block;
}
.register .RegisterBox_B{
	height: 330px;
  overflow: hidden;
  padding: 3%;
  position: relative;
	display: none;
}


.RegisterBox_B:target {
	display: block;
}
.RegisterBox_A:target {
	display: none;
}






/*協議*/
.agreement{
  width: 100%;
  font-size: 14px;
}

.register .RegisterBox_A ul.Register_Recommend {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2%;
}

.register .RegisterBox_A ul.Register_Recommend li{
	width: 46%;
  margin: 2%;
}
.register .RegisterBox_A ul.Register_Recommend li a{
	width: 100%;
	height: 40px;
  display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	line-height: 40px;
	color: #000;
	border-radius: 3px;
}
.register .RegisterBox_A ul.Register_Recommend li a:hover{
	font-size: 16px;
	-webkit-box-shadow: 0px 3px rgb(0 0 0);
	box-shadow:0px 3px rgb(0 0 0);	
}


.register .RegisterBox_A ul.Register_Recommend li a i{
	width: 40px;
	height: 40px;
  display: block;
	background-repeat: no-repeat;
}


#Link_Npay{
	color: #fff;
	background-color: #02c659;
}

#Link_Npay i{
	background-image: url("../images/login-other-npay.png");
	background-position: center;
	background-size: 60%;
}

#Link_Talk{
	color: #000;
	background-color: #ffeb00;
}

#Link_Talk i{
	background-image: url("../images/login-other-talk.png");
	background-position: center;
	background-size: 70%;
}

#Link_Facebook{
	color: #fff;
	background-color: #0866ff;
}

#Link_Facebook i{
	background-image: url("../images/login-other-facebook.png");
	background-position: center;
	background-size: 60%;
}

#Link_Google{
	color: #000;
	background-color: #fff;
	border: 1px solid #000;
}

#Link_Google i{
	background-image: url("../images/login-other-google.png");
	background-position: center;
	background-size: 50%;
}

.Register_line {
  height: 15px;
  width: 100%;
  font-size: 13px;
  color: #757575;
  text-align: center;
  border-bottom: thin solid #acacac;
  position: relative;
  margin: 0% 0 5% 0;
	display: inline-block;
}
.Register_line p{
  height: 30px;
  font-size: 13px;
  line-height: 30px;
  font-weight: bold;
  color: #303030;
  text-align: center;
  display: inline-block;
}

a.ApesgameBtn {
  color: #fff;
  margin: 0% auto;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  border: 0px none;
  border-radius: 5px;
	padding: 0 5%;
}



input[type="button"].ApesgameBtn {
  margin: 0% auto;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: 0px none;
  border-radius: 5px;
	padding: 0 5%;
}

/*按扭*/
.Confirm {
  color: #fff;
  background: -webkit-linear-gradient(0deg, rgb(253, 144, 43), rgb(253, 164, 43));
  background: linear-gradient(0deg, rgb(253, 144, 43), rgb(253, 164, 43));
}
.Confirm:hover {
  color: #ffdcae;
  background: -webkit-linear-gradient(0deg, rgb(255, 168, 14), rgb(255, 185, 61));
  background: linear-gradient(0deg, rgb(255, 168, 14), rgb(255, 185, 61));
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/

/*B 輸入框*/
input.RegisterLoginDate{
	font-size: 12px;
	line-height: 30px;
	color: #000;
	width: 70%;
  padding: 0 2% 0 7%;
	margin: 0.5% auto;
}
/*錯誤*/
.register p.error {
	font-size: 10px;
	line-height: 20px;
	color: #ff3a40;
	height: 20px;
	text-align: center;
}


input[type="text"] {
  background-image: url(../images/m.png);
  background-repeat: no-repeat;
  background-position: 7px 7px;
  border: thin solid #496eff;
  background-color: #fff;  
}
input[type="password"] {
  background-image: url(../images/m.png);
  background-repeat: no-repeat;
  background-position: 7px -22px;
  border: thin solid #496eff;
  background-color: #fff;
}

/*開始遊戲*/
input[type="button"].register_gamestart {
  margin: 0% auto;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: 0px none;
  border-radius: 5px;
	padding: 0 15%;
}

.register .RegisterBox_B ul.Register_Recommend_B {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.register .RegisterBox_B ul.Register_Recommend_B li{
	width: 22%;
  margin: 1%;
}
.register .RegisterBox_B ul.Register_Recommend_B li a{
	width: 100%;
	height: 30px;
  display: flex;
	align-items: center;
	/*justify-content: center;
	padding: 0 6% 0 4%;*/
	font-size: 12px;
	line-height: 30px;
	color: #000;
	border-radius: 3px;
}
.register .RegisterBox_B ul.Register_Recommend_B li a:hover{
	font-size: 14px;
	-webkit-box-shadow: 0px 3px rgb(0 0 0);
	box-shadow:0px 3px rgb(0 0 0);	
}


.register .RegisterBox_B ul.Register_Recommend_B li a i{
	width: 30px;
	height: 30px;
  display: block;
	background-repeat: no-repeat;
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/

/*底圖*/
.move-bg{
	width: 100%;
	height:950px;
  position: absolute;
  z-index: 0;
	left: 50%;
	margin: 0 0 0 -960px;
	bottom: 0;

	}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
.logo{
  position:absolute;
  opacity: 0;
  z-index: 9999;  
  animation: 1s logo 1.5s forwards;
}
@-webkit-keyframes logo {
  from {
    opacity: 0;
  }

 100% {
    opacity: 1;
  }
}

@keyframes logo {
  from {
    opacity: 0;
  }

 100% {
    opacity: 1;
  }
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*slogan*/
.t01 {
  width: 14%;
	position: absolute;
	display: block;
	left: 47.5%;
	margin-top: 0%;
	z-index: 999;
}
.t02 {
  width: 4%;
  position: absolute;
  z-index: 999;
  margin-top: 3.5%;
  left: 44.5%;
}
.t-1 {
  z-index: 99;
}

.zoomIn-a1 {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
	animation: 0.6s bounceOut forwards ease-out;
	animation-delay: 1.2s;
  opacity: 0;
}
.zoomIn-a2 {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
	animation: 0.6s bounceOut forwards ease-out;
	animation-delay: 1.8s;
  opacity: 0;
}


@-webkit-keyframes bounceOut {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5, 5, 5);
  }
  20% {
    opacity: 0.3;
    -webkit-transform: scale3d(0.1, 0.1, 0.1);
    transform: scale3d(0.1, 0.1, 0.1);
  }
  50%, 55% {
    opacity: 0.5;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceOut {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5, 5, 5);
  }
  20% {
    opacity: 0.3;
    -webkit-transform: scale3d(0.1, 0.1, 0.1);
    transform: scale3d(0.1, 0.1, 0.1);
  }

  50%, 55% {
    opacity: 0.5;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*slogan*/
@-webkit-keyframes slong-1 {
 from {
 opacity: 0;
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: scale3d(50, 50, 50);
 transform: scale3d(50, 50, 50);
}
 to {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes slong-1 {
 from {
 opacity: 0;
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: scale3d(50, 50, 50);
 transform: scale3d(50, 50, 50);
}
 to {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*文字光*/
.w-1 {
  position: absolute;
  z-index: 60;
  width: 41%;
  left: 14%;
  margin-top: 3%;
}

.move-w1 {
  animation: 5s w-l infinite ease-in-out;
  -webkit-animation-name: w-l;
  animation-name: w-l;
  animation-delay: 0s;
}

.w-2 {
  position: absolute;
  z-index: 60;
  width: 34%;
  left: 35%;
  margin-top: 26.5%;
}

.move-w2 {
  animation: 7s w-l infinite ease-in-out;
  -webkit-animation-name: w-l;
  animation-name: w-l;
  animation-delay: 0s;
}

 @-webkit-keyframes w-l {
 0% {
 opacity: 1;
}
 10% {
 opacity: 0.5;
}
 20% {
 opacity: 1;
}
 40% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 70% {
 opacity: 0.5;
}
 80% {
 opacity: 1;
}
 90% {
 opacity: 0.4;
}
 100% {
 opacity: 0.8;
}

}
 @keyframes w-l {
 0% {
 opacity: 1;
}
 10% {
 opacity: 0.5;
}
 20% {
 opacity: 1;
}
 40% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 70% {
 opacity: 0.5;
}
 80% {
 opacity: 1;
}
 90% {
 opacity: 0.4;
}
 100% {
 opacity: 0.8;
}
}




/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*角色*/
.b01 {
  width: 83%;
  height: 100vmin;
  position: absolute;
  left: -30%;
  margin-top: 0%;
  z-index: 10;
}


.b01-an {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
	animation: 0.8s fadeInRight forwards;
	animation-delay: 0.1s;
	opacity: 0;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*角色*/
.b02 {
  width: 108%;
  height: 100vmin;
  position: absolute;
  right: -30%;
  margin-top: 0%;
  z-index: 9;
}


.b02-an {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
	animation: 0.8s fadeInLeft forwards;
	animation-delay: 0.3s;
	opacity: 0;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*前景*/
.centerbg01 {
  width: 100%;
	position: absolute;
	display: block;
	left: 0%;
	bottom: 0%;
	z-index: 99;
}

.prospect01{
  -webkit-animation-name: pulse;
  animation-name: pulse;
	animation: 5s pulse infinite;
	animation-delay: 0.1s;
	opacity: 1;
	}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/




/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/

/*眼*/
.move-b01-eye {
  opacity: 0;
  animation: eye-open 3s ease-out 0.3s infinite both;
}

 @-webkit-keyframes eye-open {
 0% {
 opacity: 1;
}
 10% {
 opacity: 0;
}
 12% {
 opacity: 1;
}
 14% {
 opacity: 0;
}
 100% {
 opacity: 0;
}

}
 @keyframes eye-open {
 0% {
 opacity: 1;
}
 10% {
 opacity: 0;
}
 12% {
 opacity: 1;
}
 14% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*呼吸*/
.move-b01-plue{
  animation: 4s pulse 2s infinite;
  transform-origin: center bottom;
}
.move-b02-plue{
  animation: 3s pulse 3s infinite;
  transform-origin: center bottom;
}
.move-b03-plue{
  animation: 4s pulse 3s infinite;
  transform-origin: center bottom;
}
.move-b04-plue{
  animation: 3s pulse 3s infinite;
  transform-origin: center bottom;
}
.move-b05-plue{
  animation: 4s pulse 3s infinite;

  transform-origin: center bottom;
}
.move-b06-plue{
  animation: 4s pulse 2s infinite;
  transform-origin: center bottom;
}

/*放大縮小*/
@-webkit-keyframes pulse {
  from {

    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/