/*居中*/
/*过渡效果*/
.transition {
  transition: all 1s ease-in-out;
}
a {
  text-decoration: none;
}
html,
body,
section,
.fix {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p1 {
  background: url(../images/page1_glow.png) no-repeat center 100px, linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
  perspective: 1000px;
  /*核心内容显示区域*/
  /*滚动提示*/
}
.p1 .content {
  width: 580px;
  height: 361px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -290px;
  margin-top: -180.5px;
  transform-style: preserve-3d;
  animation: p1Animation 20s ease-in-out infinite alternate;
}
@keyframes p1Animation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
.p1 .content .text img:last-of-type {
  transform: translateZ(80px);
}
.p1 .content .back img:first-of-type {
  transform: translateZ(80px) rotateY(180deg);
}
.p1 .content .back img:nth-of-type(2) {
  transform: translateZ(0) rotateY(180deg);
}
.p1 .content .back img:last-of-type {
  transform: translateZ(-80px) rotateY(180deg);
}
.p1 .content img {
  position: absolute;
  backface-visibility: hidden;
  /*背面不可见*/
}
.p1 .ring {
  width: 680px;
  height: 680px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -340px;
  margin-top: -340px;
  transform-style: preserve-3d;
  animation: ringRotate 3s linear infinite;
}
@keyframes ringRotate {
  from {
    transform: rotateX(70deg) rotateY(-20deg) rotateZ(0deg) scale(1.3);
  }
  to {
    transform: rotateX(70deg) rotateY(-20deg) rotateZ(360deg) scale(1.3);
  }
}
.p1 .scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -15px;
  animation: scroll 0.5s ease-in-out alternate infinite;
}
@keyframes scroll {
  0% {
    bottom: 20px;
  }
  100% {
    bottom: 30px;
  }
}
.p2 {
  background: linear-gradient(0deg, #41b93e 0%, #3b9e3c 35%, #274535 75%, #190530 100%);
  perspective: 1000px;
}
.p2 .line {
  width: 100%;
  height: 123px;
  position: absolute;
  left: 0;
  top: 50%;
}
.p2 .line img {
  position: absolute;
  left: 70%;
}
.p2 .line .lineglow {
  top: -62px;
  margin-left: -173px;
}
.p2 .line .glow {
  top: -198px;
  margin-left: -342px;
}
.p2 .line .solid {
  display: block;
  height: 1px;
  width: 100%;
  background-color: #c7e00e;
}
.p2 .background {
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -175px;
}
.p2 .background img {
  position: absolute;
  top: 0;
  animation: p2Animation 2s linear infinite;
}
@keyframes p2Animation {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.p2 .background img:nth-of-type(1) {
  left: 200px;
}
.p2 .background img:nth-of-type(2) {
  left: 100px;
}
.p2 .background img:nth-of-type(3) {
  left: 0;
}
.p2 .background img:nth-of-type(4) {
  left: -100px;
}
.p2 .text {
  width: 355px;
  height: 94px;
  position: absolute;
  left: 10%;
  top: 50%;
  margin-top: -47px;
}
.p2 .text p {
  color: #fff;
  line-height: 24px;
  font-size: 16px;
}
.p2.current .background,
.p2.current .text {
  transform: scale(4);
}
.p3 {
  background: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
  perspective: 1000px;
  /*过渡动画*/
}
.p3 .logoglow img:first-of-type {
  width: 1368px;
  height: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -684px;
  margin-top: -600px;
}
.p3 .logoglow img:last-of-type {
  width: 131px;
  height: 130px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -65.5px;
  margin-top: -65px;
}
.p3 .round {
  width: 680px;
  height: 680px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -340px;
  margin-top: -340px;
  transform-style: preserve-3d;
  transform: scale(0.9);
}
.p3 .round li {
  position: absolute;
  border: 2px solid #5ec0ff;
  border-radius: 50%;
  /*自转动画*/
}
.p3 .round li img {
  animation: p3_round infinite linear;
}
@keyframes p3_round {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.p3 .round li:nth-of-type(1) {
  animation: p3_round1 10s infinite linear;
}
@keyframes p3_round1 {
  from {
    transform: rotateX(60deg) rotateY(60deg);
  }
  to {
    transform: rotateX(60deg) rotateY(420deg);
  }
}
.p3 .round li:nth-of-type(1) img {
  animation-duration: 2s;
}
.p3 .round li:nth-of-type(2) {
  animation: p3_round2 10s infinite linear;
}
@keyframes p3_round2 {
  from {
    transform: rotateX(60deg) rotateY(-60deg);
  }
  to {
    transform: rotateX(60deg) rotateY(300deg);
  }
}
.p3 .round li:nth-of-type(2) img {
  animation-duration: 3s;
}
.p3 .round li:nth-of-type(3) {
  animation: p3_round3 10s infinite linear;
}
@keyframes p3_round3 {
  from {
    transform: rotateX(60deg) rotateY(0deg);
  }
  to {
    transform: rotateX(60deg) rotateY(360deg);
  }
}
.p3 .round li:nth-of-type(3) img {
  animation-duration: 4s;
}
.p3 .text {
  position: absolute;
  right: 5%;
  top: 40%;
  transform: rotateX(20deg) rotateY(-10deg);
}
.p3.current .round {
  transform: scale(4);
}
.p3.current .text {
  transform: translateX(2000px);
}
.p4 {
  background: url(../images/page4_glow.png) no-repeat center 200px, linear-gradient(0deg, #ff9f42 0%, #ed923d 35%, #6d3816 75%, #2e0b04 100%);
  perspective: 1000px;
  /*过渡动画*/
}
.p4 .lineglow {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  top: 60%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.p4 .lineglow img {
  position: absolute;
  left: -346px;
  /*光线动画*/
  animation: lineThrough linear infinite;
}
@keyframes lineThrough {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(2000px);
  }
}
.p4 .lineglow img:first-of-type {
  top: -62px;
  animation-duration: 1s;
}
.p4 .lineglow img:last-of-type {
  top: 138px;
  animation-duration: .5s;
}
.p4 .clock {
  width: 414px;
  height: 414px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -207px;
  margin-top: -207px;
  transform: rotateX(45deg);
  transform-style: preserve-3d;
}
.p4 .clock li:nth-of-type(1) img {
  animation-duration: 60s;
}
.p4 .clock li:nth-of-type(2) img {
  animation-duration: 20s;
}
.p4 .clock li:nth-of-type(3) {
  transform: translateZ(-80px);
}
.p4 .clock li:nth-of-type(3) img {
  animation-duration: 10s;
}
.p4 .clock li:nth-of-type(4) {
  transform: translateZ(-40px);
}
.p4 .clock li:nth-of-type(4) img {
  animation-duration: 5s;
}
.p4 .clock li:nth-of-type(5) {
  transform: translateZ(50px);
}
.p4 .clock li:nth-of-type(5) img {
  animation-duration: 3s;
}
.p4 .clock li img {
  position: absolute;
  animation: clockRotate linear infinite;
}
@keyframes clockRotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.p4 .text .text-left {
  position: absolute;
  left: 18%;
  top: 50%;
  margin-top: -20px;
  color: #fff;
}
.p4 .text .text-right {
  position: absolute;
  right: 12%;
  top: 50%;
  margin: -50px;
  transform: rotateX(40deg) scale(1.2);
}
.p4.current .clock {
  transform: rotateX(45deg) scale(4);
}
.p4.current .text-left {
  transform: translateX(-1000px);
}
.p4.current .text-right {
  transform: translateX(1000px);
}
.p5 {
  background: url(../images/page5_glow.png) no-repeat center -300px, linear-gradient(0deg, #d74d53 0%, #c44655 35%, #4c184c 75%, #110145 100%);
  perspective: 1000px;
}
.p5 .bubble {
  width: 100%;
  height: 100%;
  position: relative;
}
.p5 .bubble li {
  background: url("../images/page5_bubble.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p5 .bubble li:nth-of-type(1) {
  background: url("../images/page5_bubble_glow.png") no-repeat right bottom;
  width: 305px;
  height: 305px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -152.5px;
  margin-top: -152.5px;
}
.p5 .bubble li:nth-of-type(2) {
  width: 200px;
  height: 200px;
  left: 30%;
  top: 20%;
}
.p5 .bubble li:nth-of-type(3) {
  width: 250px;
  height: 250px;
  left: 25%;
  top: 60%;
}
.p5 .bubble li:nth-of-type(4) {
  width: 140px;
  height: 140px;
  left: 75%;
  top: 20%;
}
.p5 .bubble li:nth-of-type(5) {
  width: 150px;
  height: 150px;
  left: 60%;
  top: 50%;
}
.p5 .bubble li:nth-of-type(6) {
  width: 80px;
  height: 80px;
  left: 75%;
  top: 65%;
}
.p5 .text {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}
.p5 .text p {
  width: 230px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -500px;
  color: #fff;
}
.p5 .text img {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -70px;
  transform: rotateY(5deg) rotateZ(-5deg);
}
.p5.current .bubble li:nth-of-type(1) {
  transform: translateX(-1000px) translateY(-500px);
}
.p5.current .bubble li:nth-of-type(2) {
  transform: translateX(-1200px) translateY(800px);
}
.p5.current .bubble li:nth-of-type(3) {
  transform: translateX(-1500px) translateY(200px);
}
.p5.current .bubble li:nth-of-type(4) {
  transform: translateX(1000px) translateY(2000px);
}
.p5.current .bubble li:nth-of-type(5) {
  transform: translateX(1100px) translateY(320px);
}
.p5.current .bubble li:nth-of-type(6) {
  transform: translateX(1500px) translateY(-800px);
}
.p5.current .text p {
  transform-origin: 100% 100%;
  transform: rotateY(-90deg);
}
.p5.current .text img {
  transform-origin: 100% 100%;
  transform: rotateY(-90deg);
}
.fix {
  position: fixed;
  left: 0;
  top: 0;
  /*logo以及立即下载*/
  /*首屏显示内容*/
  /*指示器*/
  /*底部信息*/
}
.fix header {
  width: 260px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 20px;
  top: 20px;
}
.fix header a {
  width: 90px;
  height: 20px;
  display: inline-block;
  color: #fff;
  text-align: center;
  line-height: 20px;
  padding: 5px;
  border: 1px solid #fff;
  border-radius: 20px;
}
.fix .title {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fix .title img {
  height: 50px;
}
.fix .title a {
  width: 90px;
  height: 20px;
  display: inline-block;
  color: #fff;
  text-align: center;
  line-height: 20px;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
}
.fix .indicator {
  width: 20px;
  height: 200px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.fix .indicator li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: .4;
  list-style: none;
  cursor: pointer;
}
.fix .indicator .active {
  opacity: 1;
}
.fix footer {
  width: 100%;
  height: 40px;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.fix footer .copy {
  color: #fff;
  font-size: 16px;
}
.fix footer .nav {
  width: 400px;
  display: flex;
  justify-content: space-around;
}
.fix footer .nav li,
.fix footer .nav a {
  color: #fff;
}