* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* user-select: none; */
  -webkit-text-size-adjust: none;
}





/* 圆圈闪烁 */
@keyframes boderM {
  0% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  75% {
    transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes boderM {
  0% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  75% {
    transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* 横向滚动 */
@keyframes scroll-l {
  0% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }

  100% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }
}

@-webkit-keyframes scroll-l {
  0% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }

  100% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }
}

@keyframes scroll-r {
  0% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }

  100% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }
}

@-webkit-keyframes scroll-r {
  0% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }

  100% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }
}

@-webkit-keyframes firstCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(2%) translateY(-14%);
    transform: translateX(2%) translateY(-14%);
  }

  65% {
    -webkit-transform: translateX(5%) translateY(14%);
    transform: translateX(5%) translateY(14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes firstCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(2%) translateY(-14%);
    transform: translateX(2%) translateY(-14%);
  }

  65% {
    -webkit-transform: translateX(5%) translateY(14%);
    transform: translateX(5%) translateY(14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes secondCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-9%) translateY(-1%);
    transform: translateX(-9%) translateY(-1%);
  }

  75% {
    -webkit-transform: translateX(11%) translateY(-14%);
    transform: translateX(11%) translateY(-14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes secondCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-9%) translateY(-1%);
    transform: translateX(-9%) translateY(-1%);
  }

  75% {
    -webkit-transform: translateX(11%) translateY(-14%);
    transform: translateX(11%) translateY(-14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes thirdCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes thirdCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@media only screen and (max-width: 768px) {
  .ho2 .row {
  margin: auto;
}
  .fl-cb {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
  .ho2 .intr {
  width: 100%;
    margin-top: 50px;
}
  .ho2 .circles {
  width: 50vw;
  margin-left: 3.646vw;
  position: relative;
}
  .circles .circle {
  width: 100%;
  height: 50vw;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
  .ho2 .ev.on h5 {
  font-size: 24px;
  opacity: 1;
}
  .ho2 .intr p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
  color: #646464;
  display: none;
}
  .ho2 .intr h5 {
  font-size: 16px;
  font-weight: 600;
  color: #447bbe;
  cursor: pointer;
  opacity: 0.4;
}
}
@media only screen and (min-width: 769px) {
  .ho2 .row {
  margin: 3.125vw 0 0;
  position: relative;
}
  .fl-cb {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
}
  .ho2 .intr {
  width: 35%;
}
  .ho2 .circles {
  width: 29.688vw;
  margin-left: 3.646vw;
  position: relative;
}
  .circles .circle {
  width: 100%;
  height: 29.688vw;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
  .ho2 .ev.on h5 {
  font-size: 1.667vw;
  opacity: 1;
}
  .ho2 .intr p {
  font-size: 0.938vw;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
  color: #646464;
  display: none;
}
  .ho2 .intr h5 {
  font-size: 1.25vw;
  font-weight: 600;
  color: #447bbe;
  cursor: pointer;
  opacity: 0.4;
}
}

.mainBox {
  width: 100%;
}


.ho2 {
  width: 100%;
  padding: 12.729vw 8.333vw 20vw;
  position: relative;
  overflow: hidden;
  background: linear-gradient( 
-180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1)) !important;
  display-radio: 1;
}



.ho2 .col {
  width: 100%;
}

.ho2 .origin {
  position: absolute;
  left: -20.833vw;
  top: 50%;
  transform: translateY(-50%);
  width: 62.5vw;
  height: 62.5vw;
  box-sizing: border-box;
  z-index: 3;
  /* pointer-events: none; */
}

.rotate {
  width: 100%;
  height: 100%;
  transform: rotate(0);
  transition: all ease 0.5s;
}

.rotate .dot {
  opacity: 0;
  visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all ease 0.5s;
}

.rotate .dot.on {
  opacity: 1;
  visibility: visible;
}

.rotate .cir.on {
  display: none;
}



.ho2 .circles::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 46.875vw;
  height: 46.875vw;
  border: 1px dashed #bfc4c7;
  border-radius: 50%;
}

.circles .num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 90%;
  text-align: center;
}

.circles .num span {
  font-size: 6.51vw;
  font-family: "Gotham";
  font-weight: bold;
  color: #ffffff;
}



.circle-main {
  position: relative;
  background: linear-gradient(-45deg, rgba(218, 230, 244, 0.5), rgba(67, 122, 189, 1)) !important;
  z-index: 5;
}

.circle-first,
.circle-second,
.circle-third {
  position: absolute;
  background: #0067a0;
  z-index: 2;
}

.circle-first {
  opacity: 0.15;
  -webkit-animation: firstCircle 10s ease infinite;
  animation: firstCircle 10s ease infinite;
}

.circle-second {
  opacity: 0.15;
  -webkit-animation: secondCircle 10s ease infinite;
  animation: secondCircle 10s ease infinite;
}

.circle-third {
  opacity: 0.15;
  -webkit-animation: thirdCircle 10s ease infinite;
  animation: thirdCircle 10s ease infinite;
}



.ho2 .intr .ev {
  width: 100%;
  margin: 0.781vw 0;
}





.e_html-37.s_list .circles {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-main {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-first {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-second {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-third {
    width: 40vw;
    height: 40vw;
}
.e_html-37.s_list .circle-first {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-37.s_list .circle-second {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-37.s_list .circle-third {
  background: #0067a0;
  opacity: 0.1;
}



.e_html-40.s_list .circles {
    width: 50vw;
    height: 50vw;
}

.e_html-40.s_list .circle.circle-main {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-first {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-second {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-third {
    width: 40vw;
    height: 40vw;
}
.e_html-40.s_list .circle-first {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-40.s_list .circle-second {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-40.s_list .circle-third {
  background: #0067a0;
  opacity: 0.1;
}





.e_html-24.s_list .circles {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-main {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-first {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-second {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-third {
    width: 50vw;
    height: 50vw;
}
.e_html-28.s_list .circle-first {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-24.s_list .circle-second {
  background: #0067a0;
  opacity: 0.1;
}
.e_html-24.s_list .circle-third {
  background: #0067a0;
  opacity: 0.1;
}