@keyframes cir {
  0% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}
@keyframes cir2 {
  0% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(180deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(-180deg);
  }
}
@keyframes cir_p {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
@-webkit-keyframes cir {
  0% {
    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}
@-webkit-keyframes cir_p {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}

.mainPage {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, #ff9267, #fc4c44);
  background: -webkit-linear-gradient(45deg, #ff9267, #fc4c44);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  img{
    display: inline-block;
  }
  .subPage{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    >div{
      width: 100%;
      height: 0;
      position: relative;
      overflow: hidden;
      z-index: 10;
      text-align: center;
      &.show{
        height: 100%;
      }
      &.page1{
        .circle{
          width: 80vw;
          height: 80vw;
          border-radius: 80vw;
          // border: 2px solid #fff;
          transition: opacity .1s ease-out 2s;
          -webkit-transition: opacity .1s ease-out 2s;
          opacity: 0;
          position: absolute;
          top: -0.35rem;
          left: -0.2rem;
          background-image: url("../../assets/c.png");
          background-size: 100% 100%;
          -webkit-animation: cir_p 5s linear 0s infinite;
          animation: cir_p 5s linear 0s infinite;
          &.active{
            opacity: 1;
          }
        }
        .circle1{
          -webkit-transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg);
          transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg);
          animation: cir 3s linear 0s infinite;
        }
        .circle2{
          -webkit-transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
          transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
          animation: cir2 3s linear 0s infinite;
        }
        span{
          width: 100%;
          display: block;
          text-align: center;
          color: #fff;
          margin: .3rem auto 0;
          font-size: .18rem;
          &+span{
            margin: .05rem auto 0;
            font-size: .1rem;
          }
        }
      }
      &.page2{
        .nextStep{
          padding: .02rem;
          border: 2px solid #fff;
          position: absolute;
          right: 12vw;
          bottom: 4.5vh;
          z-index: 200;
          display: inline-block;
          span{
            background: #de7ba2;
            color: #fff;
            font-size: .18rem;
            display: inline-block;
            line-height: .3rem;
            padding: 0 .1rem;
          }
        }
        >.centerLabel{
          width: 100%;
          z-index: 11;
          h1{
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: .24rem;
            font-weight: normal;
          }
          .content{
            width: 82vw;
            height: 65vh;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            z-index: 11;
            .flagItem{
              display: inline-block;
              position: absolute;
              padding: 0 .1rem;
              white-space: nowrap;
              z-index: 11;
              &:nth-child(2n){
                transform: translateX(-1rem);
                -webkit-transform: translateX(-1rem);
                transition: all 1.4s ease 1.5s;
                -webkit-transition: all 1.4s ease 1.5s;
              }
              &:nth-child(2n-1){
                transform: translateX(1rem);
                -webkit-transform: translateX(1rem);
                transition: all .8s ease 1.6s;
                -webkit-transition: all .8s ease 1.6s;
              }
              opacity: 0;
              &.active{
                opacity: 1;
                transform: translateX(0);
                -webkit-transform: translateX(0);
              }
              &::after{
                content: '';
                width: 0;
                height: 0;
                border-style: solid dashed dashed dashed;
                display: block;
                position: absolute;
              }
            }
            .flagItem1{
              left: 0;
              top: .1rem;
              font-size: .16rem;
              color: #fff;
              line-height: .32rem;
              background: #5bcff1;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #5bcff1 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                right: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem2{
              right: 10%;
              top: .3rem;
              font-size: .22rem;
              color: #fff;
              line-height: .52rem;
              background: #f8b551;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #f8b551 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(20deg);
                transform: rotateY(60deg) rotateZ(20deg);
              }
            }
            .flagItem3{
              left: 5%;
              top: .7rem;
              font-size: .18rem;
              color: #fff;
              line-height: .34rem;
              background: #de7ba2;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #de7ba2 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem4{
              right: 0;
              top: 1rem;
              font-size: .18rem;
              color: #fff;
              line-height: .32rem;
              background: #fdc17a;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #fdc17a transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                right: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(20deg);
                transform: rotateY(60deg) rotateZ(20deg);
              }
            }
            .flagItem5{
              left: 3%;
              top: 1.3rem;
              font-size: .18rem;
              color: #fff;
              line-height: .34rem;
              background: #f8b551;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #f8b551 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem6{
              right: 5%;
              top: 1.5rem;
              font-size: .16rem;
              color: #fff;
              line-height: .32rem;
              background: #f8b551;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #f8b551 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(20deg);
                transform: rotateY(60deg) rotateZ(20deg);
              }
            }
            .flagItem7.active{
              left: 50%;
              top: 1.9rem;
              font-size: .22rem;
              color: #fff;
              line-height: .54rem;
              background: #a57dd1;
              border-radius: .1rem;
              overflow: visible;
              transform: translateX(-50%);
              -webkit-transform: translateX(-50%);
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #a57dd1 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem8{
              left: 5%;
              top: 2.5rem;
              font-size: .18rem;
              color: #fff;
              line-height: .34rem;
              background: #f8b551;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #f8b551 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem9{
              left: 15%;
              top: 3rem;
              font-size: .18rem;
              color: #fff;
              line-height: .28rem;
              background: #fdc17a;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #fdc17a transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                transform: rotateY(60deg) rotateZ(-20deg);
              }
            }
            .flagItem10{
              right: 5%;
              top: 2.4rem;
              font-size: .16rem;
              color: #fff;
              line-height: .32rem;
              background: #f8b551;
              border-radius: .1rem;
              overflow: visible;
              &.selected{
                opacity: 0;
              }
              &::after{
                content: '';
                border-color: #f8b551 transparent transparent transparent;
                border-width: .15rem;
                bottom: -.24rem;
                left: 30%;
                -webkit-transform: rotateY(60deg) rotateZ(20deg);
                transform: rotateY(60deg) rotateZ(20deg);
              }
            }
          }
        }
      }
      &.page3,
      &.page4,
      &.page5{
        >div.centerLabel{
          width: 66vw;
          margin-top: -.5rem;
          span{
            width: 100%;
            display: block;
            color: #fff;
            text-align: left;
            line-height: .22rem;
            font-size: .14rem;
            min-height: .22rem;
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3){
              font-size: .16rem;
            }
          }
        }
        .userIcon{
          width: 12.8vw;
          position: absolute;
          overflow: hidden;
          left: 18vw;
          top: 12.8vh;
          a{
            width: 100%;
            display: block;
            padding-bottom: 100%;
            height: 0;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, .6);
          }
        }
        .bottomText{
          width: .7rem;
          left: 9vw;
          position: absolute;
          bottom: 1.5vh;
          overflow: hidden;
          z-index: 100;
          a{
            width: 100%;
            display: block;
            padding-bottom: 100%;
            height: 0;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, .6);
            margin-bottom: .05rem;
          }
          span{
            width: 100%;
            display: block;
            font-size: .1rem;
            color: #fff;
            text-align: left;
            line-height: .14rem;
          }
        }
      }
    }
  }
  .icon3{
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    opacity: 0;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    &.active{
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
  }
  .icon4{
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    opacity: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    &.active{
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
  }
  .icon10{
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    opacity: 0;
    transform: translateX(.3rem);
    -webkit-transform: translateX(.3rem);
    &.active{
      opacity: 1;
      transform: translateX(0);
      -webkit-transform: translateX(0);
    }
  }
  .icon11{
    transition: all .5s ease-in .8s;
    -webkit-transition: all .5s ease-in .8s;
    transform: translateY(-100%) scale(0, 0);
    -webkit-transform: translateY(-100%) scale(0, 0);
    &.active{
      transform: translateY(0) scale(1, 1);
      -webkit-transform: translateY(0) scale(1, 1);
    }
  }
  img.icon2{
    transition: all .3s ease-in 1.5s;
    -webkit-transition: all .3s ease-in 1.5s;
    opacity: 0;
    &.active{
      opacity: 1;
    }
  }
  .icon13{
    transition: all .5s ease-out 2s;
    -webkit-transition: all .5s ease-out 2s;
    opacity: 0;
    transform: translateX(.3rem);
    -webkit-transform: translateX(.3rem);
    &.active{
      opacity: 1;
      transform: translateX(0);
      -webkit-transform: translateX(0);
    }
  }
  .icon1{
    transition: all .3s ease-out 3.2s;
    -webkit-transition: all .3s ease-out 3.2s;
    opacity: 0;
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    &.active{
      opacity: 1;
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
  }
  .icon7{
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    opacity: 0;
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    &.active{
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
  }
  .icon6{
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    opacity: 0;
    transform: translateY(1rem);
    -webkit-transform: translateY(1rem);
    &.active{
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
  }
  .icon5{
    transition: all .5s ease-in .8s;
    -webkit-transition: all .5s ease-in .8s;
    opacity: 0;
    transform: translateY(1rem) scale(0, 0);
    -webkit-transform: translateY(1rem) scale(0, 0);
    &.active{
      opacity: 1;
      transform: translateY(0) scale(1, 1);
      -webkit-transform: translateY(0) scale(1, 1);
    }
  }
}