.product[data-v-051913fc] {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.bg_square[data-v-051913fc] {
  position: absolute;
  top: -55%;
  right: -50%;
  width: 109%;
}
.square_white[data-v-051913fc] {
  top: -65%;
}
.computer[data-v-051913fc] {
  width: 24%;
  position: absolute;
  top: 16%;
  right: 12%;
}
.computer-desktop[data-v-051913fc] {
  width: 9.18%;
  position: absolute;
  top: 0%;
  right: 8%;
}
.computer-desktop-inverte[data-v-051913fc] {
  width: 4.59%;
  position: absolute;
  top: 2%;
  right: 5%;
  opacity: 0.4;
}
.inverte-two[data-v-051913fc] {
  top: -5%;
  right: 10%;
}
.bar[data-v-051913fc] {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 150px;
  height: 20px;
  background: linear-gradient(to right, #58b9fd, #4186ff);
  border-radius: 10px;
  transform: rotate(35deg);
}
.login[data-v-051913fc] {
  position: absolute;
  top: 5%;
  left: 10%;
}
.login[data-v-051913fc]  .el-button--primary {
  background: linear-gradient(#1adef6, #1f68e9);
  border-color: #1adef6;
}
.login[data-v-051913fc]  .el-button--primary:focus,
.login[data-v-051913fc]  .el-button--primary:hover {
  background: linear-gradient(#39dff4, #3679f0);
}
.info[data-v-051913fc] {
  position: absolute;
  top: 25%;
  left: 10%;
}
.info-title[data-v-051913fc] {
  color: #000;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 5px;
}
.info-title-blue[data-v-051913fc] {
  color: #195ff5;
}
.info-txt[data-v-051913fc] {
  color: #323941;
  font-size: 20px;
  margin: 20px 0;
  font-weight: normal;
  line-height: 30px;
}
.down[data-v-051913fc] {
  position: absolute;
  bottom: 12%;
  margin: auto;
  width: 100%;
  height: 120px;
  z-index: 99;
}
.down .txt[data-v-051913fc] {
  width: 200px;
  margin: auto;
  color: #288bf0;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 3px;
}
.down .arrow[data-v-051913fc] {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(#1adef6, #1f68e9);
  margin: auto;
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
  margin-top: 10px;
  cursor: pointer;
  text-align: center;
}
.down-icon[data-v-051913fc] {
  width: 30px;
  margin: 5px auto 0 auto;
  text-align: center;
  color: #ddd;
  line-height: 10px;
  overflow: hidden;
  animation: down-data-v-051913fc 4s infinite linear;
}
@keyframes down-data-v-051913fc {
0% {
    height: 0px;
}
24% {
    height: 0px;
}
25% {
    height: 15px;
}
49% {
    height: 15px;
}
50% {
    height: 30px;
}
74% {
    height: 30px;
}
75% {
    height: 45px;
}
99% {
    height: 45px;
}
100% {
    height: 0px;
}
}
.bg-waves[data-v-051913fc],
.bg-waves2[data-v-051913fc] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-image: url(../img/waves.7dcca87d.png);
  background-repeat: repeat-x;
  background-position: 0% 100%;
  animation: waves-data-v-051913fc 100s infinite linear;
  background-size: 1700px;
}
.bg-waves2[data-v-051913fc] {
  width: 120%;
  right: -20%;
  opacity: 0.6;
  animation: waves-data-v-051913fc 80s infinite linear;
}
@keyframes waves-data-v-051913fc {
0% {
    background-position: 0% 100%;
}
50% {
    background-position: 5000% 100%;
}
100% {
    background-position: 10000% 100%;
}
}
.bg1-leave-active[data-v-051913fc],
.bg2-leave-active[data-v-051913fc],
.bg3-leave-active[data-v-051913fc],
.bg4-leave-active[data-v-051913fc],
.bar-leave-active[data-v-051913fc],
.info-leave-active[data-v-051913fc],
.down-leave-active[data-v-051913fc],
.login-leave-active[data-v-051913fc] {
  transition: all 0.1s ease 0.5s;
}
.bg1-enter-active[data-v-051913fc] {
  transition: all 1s;
}
.bg1-enter[data-v-051913fc],
.bg1-leave-to[data-v-051913fc] {
  transform: translate(100%, 100%);
}
.bg2-enter-active[data-v-051913fc] {
  transition: all 2s ease 0.2s;
}
.bg2-enter[data-v-051913fc],
.bg2-leave-to[data-v-051913fc] {
  transform: translate(100%, 100%);
}
.bg3-enter-active[data-v-051913fc] {
  transition: all 2s ease 1s;
}
.bg3-enter[data-v-051913fc],
.bg3-leave-to[data-v-051913fc] {
  transform: translate(1000px, 1000px);
  opacity: 0;
}
.bg4-enter-active[data-v-051913fc] {
  transition: all 2.3s ease 1.2s;
}
.bg4-enter[data-v-051913fc],
.bg4-leave-to[data-v-051913fc] {
  transform: translate(1000px, 1000px);
  opacity: 0;
}
.bar-enter-active[data-v-051913fc] {
  transition: all 1s ease 1.2s;
}
.bar-enter[data-v-051913fc],
.bar-leave-to[data-v-051913fc] {
  transform: translate(-2000px, -1000px);
  opacity: 0;
}
.info-enter-active[data-v-051913fc] {
  transition: all 1s ease 2s;
}
.info-enter[data-v-051913fc],
.info-leave-to[data-v-051913fc] {
  transform: rotateX(180deg) scale(1.2);
  transform-origin: center center;
  opacity: 0;
}
.down-enter-active[data-v-051913fc] {
  transition: all 1s ease 2s;
}
.down-enter[data-v-051913fc],
.down-leave-to[data-v-051913fc] {
  transform: translateY(40px);
  opacity: 0;
}
.login-enter-active[data-v-051913fc] {
  transition: all 1s ease 2s;
}
.login-enter[data-v-051913fc],
.login-leave-to[data-v-051913fc] {
  transform: translateY(-40px);
  opacity: 0;
}
.bubble[data-v-16662f57] {
  display: inline-block;
  position: absolute;
  animation-name: bubbles-data-v-16662f57;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 12s;
  transform: scale(0.8);
  animation-delay: 1000s;
  opacity: 0;
}
.bubble[data-v-16662f57]:nth-of-type(1) {
  left: 25%;
  animation-delay: 6s;
}
.bubble[data-v-16662f57]:nth-of-type(2) {
  left: 21%;
  animation-delay: 3s;
}
.bubble[data-v-16662f57]:nth-of-type(3) {
  left: 15%;
  animation-delay: 1s;
}
.bubble[data-v-16662f57]:nth-of-type(4) {
  left: 60%;
  animation-delay: 9s;
}
.bubble[data-v-16662f57]:nth-of-type(4) {
  left: 50%;
  animation-delay: 1.5s;
}
.bubble[data-v-16662f57]:nth-of-type(5) {
  left: 40%;
  animation-delay: 3s;
}
.bubble[data-v-16662f57]:nth-of-type(6) {
  left: 60%;
  animation-delay: 5s;
}
.bubble[data-v-16662f57]:nth-of-type(7) {
  left: 23%;
  animation-delay: 0s;
}
.bubble:nth-of-type(7) .img-icon[data-v-16662f57] {
  transform: rotate(-25deg);
}
.bubble[data-v-16662f57]:nth-of-type(8) {
  left: 34%;
  animation-delay: 3s;
}
.bubble:nth-of-type(8) .img-icon[data-v-16662f57] {
  transform: rotate(25deg);
}
.bubble[data-v-16662f57]:nth-of-type(9) {
  left: 80%;
  animation-delay: 3s;
}
.bubble[data-v-16662f57]:nth-of-type(10) {
  left: 80%;
  animation-delay: 0s;
}
.bubble[data-v-16662f57]:nth-of-type(11) {
  left: 50%;
  animation-delay: 9s;
}
.bubble:nth-of-type(11) .img-icon[data-v-16662f57] {
  transform: rotate(25deg);
}
.bubble[data-v-16662f57]:nth-of-type(12) {
  left: 45%;
  animation-delay: 9s;
}
.bubble[data-v-16662f57]:nth-of-type(13) {
  left: 80%;
  animation-delay: 6s;
}
.bubble[data-v-16662f57]:nth-of-type(14) {
  left: 10%;
  animation-delay: 9s;
}
.bubble[data-v-16662f57]:nth-of-type(15) {
  left: 20%;
  animation-delay: 11s;
}
.bubble[data-v-16662f57]:nth-of-type(16) {
  left: 30%;
  animation-delay: 9s;
}
.bubble[data-v-16662f57]:nth-of-type(17) {
  left: 50%;
  animation-delay: 7s;
}
.bubble[data-v-16662f57]:nth-of-type(18) {
  left: 75%;
  animation-delay: 7s;
}
.bubble[data-v-16662f57]:nth-of-type(19) {
  left: 75%;
  animation-delay: 10s;
}
.bubble[data-v-16662f57]:nth-of-type(20) {
  left: 63%;
  animation-delay: 0s;
}
.bubble[data-v-16662f57]:nth-of-type(22) {
  left: 70%;
  animation-delay: 3s;
}
.bubble[data-v-16662f57]:nth-of-type(22) {
  left: 45%;
  animation-delay: 11s;
}
@keyframes bubbles-data-v-16662f57 {
0% {
    transform: scale(0.8);
    top: 70%;
    opacity: 0;
}
10% {
    opacity: 1;
}
60% {
    opacity: 1;
    transform: scale(1);
}
100% {
    transform: scale(1);
    top: 0%;
    opacity: 0;
}
}
.copyright[data-v-9320e22a] {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 12px;
}
.copyright .gs[data-v-9320e22a] {
  display: inline-block;
  margin-left: 40px;
}
.copyright .link[data-v-9320e22a] {
  margin-left: 5px;
  color: #fff;
}
.product[data-v-9320e22a] {
  width: 100%;
  height: 100vh;
  background: #0141af;
  position: relative;
  overflow: hidden;
  background-image: url(../img/bg_star.63e6f439.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.center[data-v-9320e22a] {
  width: 36.6%;
  position: absolute;
  bottom: 2%;
  left: 31.7%;
  background-image: url(../img/halo.26c50c29.png);
  background-size: 100% 100%;
  padding-bottom: 27.3%;
}
.heade[data-v-9320e22a] {
  width: 100%;
  text-align: center;
  margin-top: 120px;
}
.heade .title[data-v-9320e22a] {
  color: #fff;
  font-size: 40px;
  text-align: 2px;
  letter-spacing: 5px;
  font-weight: 600;
}
.heade .english[data-v-9320e22a] {
  color: #fff;
  font-size: 18px;
}
.heade .side-left[data-v-9320e22a],
.heade .side-right[data-v-9320e22a] {
  width: 44px;
  height: 1px;
  vertical-align: middle;
}
.heade .side-left[data-v-9320e22a] {
  transform: rotate(180deg);
}
.heade-enter-active[data-v-9320e22a] {
  animation: heade-in-data-v-9320e22a 1s ease 1.3s;
  transform: translateY(-200px);
}
@keyframes heade-in-data-v-9320e22a {
0% {
    transform: translateY(-200px);
}
5% {
    transform: translateY(-100%);
}
15% {
    transform: translateY(0);
}
30% {
    transform: translateY(-50%);
}
40% {
    transform: translateY(0%);
}
50% {
    transform: translateY(-30%);
}
70% {
    transform: translateY(0%);
}
80% {
    transform: translateY(-15%);
}
90% {
    transform: translateY(0%);
}
95% {
    transform: translateY(-7%);
}
97% {
    transform: translateY(0%);
}
99% {
    transform: translateY(-3%);
}
100% {
    transform: translateY(0);
}
}
.caption[data-v-9320e22a] {
  text-align: center;
  margin: auto;
  width: 80%;
}
.caption-title[data-v-9320e22a] {
  color: #fff;
  font-size: 20px;
  margin-top: 80px;
}
.caption-txt[data-v-9320e22a] {
  color: #bab9b9;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}
.caption-box[data-v-9320e22a] {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}
.txt1-enter-active[data-v-9320e22a] {
  transition: all 1s ease 1s;
}
.txt2-enter-active[data-v-9320e22a] {
  transition: all 1s ease 1.1s;
}
.txt3-enter-active[data-v-9320e22a] {
  transition: all 1s ease 1.2s;
}
.txt1-enter[data-v-9320e22a],
.txt1-leave-to[data-v-9320e22a],
.txt2-enter[data-v-9320e22a],
.txt2-leave-to[data-v-9320e22a],
.txt3-enter[data-v-9320e22a],
.txt3-leave-to[data-v-9320e22a] {
  opacity: 0;
  transform: rotateX(180deg) translateY(20px) scale(1.2);
}
.page-left1[data-v-9320e22a] {
  position: absolute;
  bottom: 35%;
  left: -22%;
  width: 40%;
}
.page-left2[data-v-9320e22a] {
  position: absolute;
  bottom: 10%;
  left: -18%;
  width: 40%;
}
.page-right1[data-v-9320e22a] {
  position: absolute;
  bottom: 35%;
  right: -22%;
  width: 40%;
}
.page-right2[data-v-9320e22a] {
  position: absolute;
  bottom: 10%;
  right: -18%;
  width: 40%;
}
.left1-enter-active[data-v-9320e22a] {
  transition: all 1s ease 0s;
}
.left2-enter-active[data-v-9320e22a] {
  transition: all 1s ease 0.2s;
}
.left1-enter[data-v-9320e22a],
.left1-leave-to[data-v-9320e22a],
.left2-enter[data-v-9320e22a],
.left2-leave-to[data-v-9320e22a] {
  transform: translateX(-1000px);
}
.right1-enter-active[data-v-9320e22a] {
  transition: all 1s ease 0s;
}
.right2-enter-active[data-v-9320e22a] {
  transition: all 1s ease 0.2s;
}
.right1-enter[data-v-9320e22a],
.right1-leave-to[data-v-9320e22a],
.right2-enter[data-v-9320e22a],
.right2-leave-to[data-v-9320e22a] {
  transform: translateX(1000px);
}
.bubble-enter-active[data-v-9320e22a] {
  transition: all 2s ease 0.2s;
}
.bubble-enter[data-v-9320e22a],
.bubble-leave-to[data-v-9320e22a] {
  transform: translateY(1000px);
}
.heade-leave-active[data-v-9320e22a],
.txt1-leave-active[data-v-9320e22a],
.txt2-leave-active[data-v-9320e22a],
.txt3-leave-active[data-v-9320e22a],
.left1-leave-active[data-v-9320e22a],
.left2-leave-active[data-v-9320e22a],
.right1-leave-active[data-v-9320e22a],
.right2-leave-active[data-v-9320e22a],
.bubble-leave-active[data-v-9320e22a] {
  transition: all 0.1s ease 1.2s;
}
.web[data-v-52b17e8b] {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.container[data-v-52b17e8b] {
  transition: all 1s cubic-bezier(0.51, 0.13, 0.01, 1.01);
}