.platform-wrapper{
	background: url(../images/platform-bg1.png) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
	padding: 60px 20px;
}
.plat-nav {
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 999;
}
.plat-nav .container {
  height: 100%;
  z-index: 999;
  width: 1300px !important;
}
.logo-content {
  margin-left: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 999;
}
.logo-content .logo-img {
  width: 40px;
  height: 40px;
  z-index: 999;
}
.logo-content .logo-img img {
  height: auto;
  width: 100%;
  z-index: 999;
}
.logo-content h4 {
  margin-left: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 999;
}
.plat-content {
  margin-top: 181px;
  z-index: 999;
  min-height: calc(100vh - 287px);
}
.plat-content .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 1300px !important;
}

.plat-title {
  text-align: center;
  color: #fff;
  z-index: 999;
}
.plat-title h4 {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.plat-title p {
  padding-top: 20px;
  font-size: 32px;
}
.plat-foot {
  height: 80px;
  text-align: center;
}

.plat-foot p {
  font-size: 12px;
  color: #fff;
  line-height: 80px;
}
.plat-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 450px;
}

.plat-animation .plat-left,
.plat-animation .plat-right {
  height: 250px;
  width: 250px;
  position: relative;
}

.plat-animation .plat-left .plat-outer {
  animation: outermove 7s 1;
  -webkit-animation: outermove 7s 1;
  position: absolute;
  height: 250px;
  width: 250px;
  top: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
  opacity: 0;
  animation-fill-mode: forwards;
  background-size: cover;
}
@keyframes outermove {
  0% {
    opacity: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
  }
  100% {
    opacity: 1;
    background: url(../images/left-outer.png) no-repeat center center;
    border: none;
  }
}

@-webkit-keyframes outermove {
  10% {
    opacity: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
  }
  100% {
    opacity: 1;
    background: url(../images/left-outer.png) no-repeat center center;
    border: none;
  }
}

.plat-animation .plat-left .left-center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -109px;
  margin-top: -109px;
  height: 218px;
  width: 218px;
  border-radius: 50%;
  background: rgba(243, 247, 255, 0.9);
  border: 6px solid #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.plat-animation .plat-left .left-center .left-img {
  width: 80px;
  padding-bottom:10px;
}
.plat-animation .plat-left .left-center h4 {
  margin-top: 0;
  font-size: 28px;
  color: #2c2e34;
}
.plat-animation .plat-left .left-center .left-img img {
  width: 100%;
  height: auto;
}
.plat-animation .plat-left .left-round {
  position: absolute;
  right: -10px;
  margin-top: -10px;
  top: 50%;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  -o-animation-delay: 1.25;
  animation-delay: 1.25s;
}

.plat-animation .plat-left .roud {
  position: absolute;
  top: 65px;
  left: 65px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  text-align: center;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303133;
  background: url(../images/round.png) no-repeat center top;
  background-size: cover;
}
.plat-animation .plat-left .roud a {
  margin-top: 30px;
  font-size: 22px;
  line-height: 1.2;
  color: #282e41;
}

.circle1 {
  animation: mymove 2s 1;
  -webkit-animation: mymove 2s 1;
  -ms-animation: mymove 2s 1;
  transform: rotateZ(-90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
@keyframes mymove {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(0deg) translateY(140px);
  }
}

@-webkit-keyframes mymove

/*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(0deg) translateY(140px);
  }
}
@-ms-keyframes mymove {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(0deg) translateY(140px);
  }
}
.circle2 {
  animation: mymove1 2s 1;
  -webkit-animation: mymove1 2s 1;
  transform: rotateZ(-90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle2 a {
  transform: rotate(-60deg);
}

@keyframes mymove1 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(60deg) translateY(140px);
  }
}

@-webkit-keyframes mymove1

  /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(60deg) translateY(140px);
  }
}
.circle3 {
  animation: mymove2 2s 1;
  -webkit-animation: mymove2 2s 1;
  transform: rotateZ(-90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle3 a {
  transform: rotate(-120deg);
}
@keyframes mymove2 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(120deg) translateY(140px);
  }
}

@-webkit-keyframes mymove2

    /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(120deg) translateY(140px);
  }
}
.circle4 {
  animation: mymove3 2s 1;
  -webkit-animation: mymove3 2s 1;
  transform: rotateZ(-90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle4 a {
  transform: rotate(-180deg);
}
@keyframes mymove3 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(180deg) translateY(140px);
  }
}

@-webkit-keyframes mymove3

      /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(180deg) translateY(140px);
  }
}
.plat-animation .plat-center {
  width: 434px;
}
.plat-animation .plat-center .plat-center-top {
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
  height: 30px;
  font-family: 'harmony';
}
.plat-animation .plat-center .plat-center-center {
  height: 2px;
  background: #fff;
  width: 100%;
}
.plat-animation .plat-center .plat-center-bottom {
  margin-top: 10px;
  height: 30px;
}
.plat-animation .plat-right .plat-outer {
  animation: outermove1 7s 1;
  -webkit-animation: outermove1 7s 1;
  position: absolute;
  height: 250px;
  width: 250px;
  top: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
  opacity: 0;
  animation-fill-mode: forwards;
  background-size: cover;
}

@keyframes outermove1 {
  0% {
    opacity: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 1;
    background: url(../images/right-outer.png) no-repeat center center;
    border: none;
  }
}

@-webkit-keyframes outermove1 {
  0% {
    opacity: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
  }
  100% {
    opacity: 1;
    background: url(../images/right-outer.png) no-repeat center center;
    border: none;
  }
}
.plat-animation .plat-right .right-center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -109px;
  margin-top: -109px;
  height: 218px;
  width: 218px;
  border-radius: 50%;
  background: rgba(243, 247, 255, 0.9);
  border: 6px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.plat-animation .plat-right .right-center .right-img {
  width: 80px;
  padding-bottom:10px;
}
.plat-animation .plat-right .right-center h4 {
  margin-top: 0;
  font-size: 28px;
  color: #2c2e34;
}
.plat-animation .plat-right .right-center .right-img img {
  width: 100%;
  height: auto;
}
.plat-animation .plat-right .right-round {
  position: absolute;
  left: -10px;
  margin-top: -10px;
  top: 50%;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  -webkit-animation-delay: 0.95s;
  -moz-animation-delay: 0.95s;
  -o-animation-delay: 0.95s;
  animation-delay: 0.95s;
}
.plat-animation .plat-right .roud {
  position: absolute;
  top: 65px;
  left: 65px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  text-align: center;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #303133;
  background: url(../images/round.png) no-repeat center top;
  background-size: cover;
}

.plat-animation .plat-right .roud a {
  margin-top: 30px;
  font-size: 22px;
  line-height: 1.2;
  color: #282e41;
}
.roud:hover{
  transition:0.5s;
  box-shadow: 0px 5px 10px 5px #d2dcf0;
}
.circle5 {
  animation: mymove4 2s 1;
  -webkit-animation: mymove4 2s 1;
  transform: rotateZ(90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}

@keyframes mymove4 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(0deg) translateY(140px);
  }
}

@-webkit-keyframes mymove4

        /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(0deg) translateY(140px);
  }
}
.circle6 {
  animation: mymove5 2s 1;
  -webkit-animation: mymove5 2s 1;
  transform: rotateZ(90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle6 a {
  transform: rotate(60deg);
}
@keyframes mymove5 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-60deg) translateY(140px);
  }
}

@-webkit-keyframes mymove5

          /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-60deg) translateY(140px);
  }
}
.circle7 {
  animation: mymove6 2s 1;
  -webkit-animation: mymove6 2s 1;
  transform: rotateZ(90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle7 a {
  transform: rotate(120deg);
}

@keyframes mymove6 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-120deg) translateY(140px);
  }
}

@-webkit-keyframes mymove6

            /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-120deg) translateY(140px);
  }
}

.circle8 {
  animation: mymove7 2s 1;
  -webkit-animation: mymove7 2s 1;
  transform: rotateZ(90deg) translateY(140px);
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 9999;
}
.circle8 a {
  transform: rotate(180deg);
}
@keyframes mymove7 {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-180deg) translateY(140px);
  }
}

@-webkit-keyframes mymove7

              /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotateZ(-180deg) translateY(140px);
  }
}