@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: #999999;
}
a:hover {
  text-decoration: none;
  color: #00A3FF;
}
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;
}
* {
  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;
  overflow: hidden;
}
.warp {
  width: 100%;
  min-height: 1200px;
  height: 100%;
  position: relative;
}

img, iframe {
  display: block;
  width: 100%;
  height: auto
}
.conter {
  position: relative;
  width: 65%;
  margin: 0 auto;
}

.a1 {
  padding: 15%;
  position: relative;
  display: block;
}

.a2{
  position: relative;
  display: block;
  z-index: 99999;
}
.a2 .google ,.a2 .firefox ,.a2 .edge {
  position: relative;
  margin: 0 0 0 34%;
  width: 35%;
	float: left;
}

.a2 .ie{
  width: 60%;
  position: relative;
  display: block;
  z-index: 99999;
  margin: 2% auto 0 20%;
	float: left;
}

.imgBox{
  position: relative;
  
}


/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*影片*/
.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: 28%;
  position: relative;
  z-index: 20;
  height: 0px;
  padding-bottom: 15.25%;
	float: left;
	margin: 0 0 0 1%;
}
#movie {
  width: 90%;
  height: 90%;
  position: absolute;
  left: 5%;
  top: 19%;
  z-index: 40;
}
.movie_bg {
  position: relative;
  z-index: 1;
}
.arrow {
  margin-top: 150%;
}



.bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: block;
  top: 0;
}



/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
.ApesGame {
	position: absolute;
	z-index: 99;
	width: 50%;
	top: 80%;
	margin: 0 0 0 -52%;
}

/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
.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: 81%;
  height: 100vmin;
  position: absolute;
  left: -27%;
  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: 105%;
  height: 100vmin;
  position: absolute;
  right: -27%;
  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);
  }
}


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