@-webkit-keyframes roundIn {
  0% {
    left: 0%; }
  100% {
    left: 50%; } }
@keyframes roundIn {
  0% {
    left: 0%; }
  100% {
    left: 50%; } }
.services-index-wapper {
  width: 100%;
  padding-bottom: 100%;
  position: relative; }
  .services-index-wapper .services-index-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%; }
    .services-index-wapper .services-index-circle .services-index-sub-circle {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-animation: roundIn 3s ease-in-out 0s 1 alternate forwards;
      animation: roundIn 2s ease-in-out 0s 1 alternate forwards;
      -webkit-animation-delay: 0s;
      animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
      position: absolute;
      top: 0;
      left: 50%;
      width: 40%;
      height: 40%;
      border-radius: 50%;
      /* background-color: #6ca9d5; */
      transform: translate3d(-50%, -50%, 0);
      background-image: radial-gradient(circle, #6ca9d5 20%, #fff0 60%); }
      .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-fa {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 2vw;
        color: #fff; }
      .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content {
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 300%;
        height: 50%;
        max-width: 25vw;
        transform: translate3d(-50%, -50%, 0);
        text-align: center; }
        .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content h3 {
          margin-top: 0;
          font-size: 4vw;
          white-space: nowrap;
          line-height: 1.2;
          margin-bottom: .5vw; }
        .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content p {
          font-size: 2vw;
          line-height: 1.2; }
        @media (max-width: 600px) {
          .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content h3 {
            font-size: 24px;
            margin-bottom: 3px; }
          .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content p {
            font-size: 12px;
            line-height: 1.2; } }
        @media (min-width: 768px) {
          .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content h3 {
            font-size: 32px;
            margin-bottom: 8px; }
          .services-index-wapper .services-index-circle .services-index-sub-circle .services-index-content p {
            font-size: 16px;
            line-height: 1.2; } }
    .services-index-wapper .services-index-circle:nth-child(1) {
      border: 3px solid #6ca9d533;
      background-image: radial-gradient(circle, #6ca9d5, #fff0 70%);
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 0)); }
      .services-index-wapper .services-index-circle:nth-child(1) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 0)); }
      .services-index-wapper .services-index-circle:nth-child(1) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 0));
        max-width: 50vw; }
    .services-index-wapper .services-index-circle:nth-child(2) {
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 1)); }
      .services-index-wapper .services-index-circle:nth-child(2) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 5)); }
      .services-index-wapper .services-index-circle:nth-child(2) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 5));
        text-align: right; }
        @media (min-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(2) .services-index-content p {
            padding-left: 40%; } }
        @media (max-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(2) .services-index-content p {
            position: relative;
            width: 120%;
            left: -20%; } }
    .services-index-wapper .services-index-circle:nth-child(3) {
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 2)); }
      .services-index-wapper .services-index-circle:nth-child(3) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 4)); }
      .services-index-wapper .services-index-circle:nth-child(3) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 4));
        text-align: right; }
        @media (min-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(3) .services-index-content p {
            padding-left: 40%; } }
        @media (max-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(3) .services-index-content p {
            position: relative;
            width: 120%;
            left: -20%; } }
    .services-index-wapper .services-index-circle:nth-child(4) {
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 3)); }
      .services-index-wapper .services-index-circle:nth-child(4) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 3)); }
      .services-index-wapper .services-index-circle:nth-child(4) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 3));
        max-width: 50vw; }
        @media (max-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(4) .services-index-content {
            top: -20%; } }
    .services-index-wapper .services-index-circle:nth-child(5) {
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 4)); }
      .services-index-wapper .services-index-circle:nth-child(5) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 2)); }
      .services-index-wapper .services-index-circle:nth-child(5) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 2));
        text-align: left; }
        @media (min-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(5) .services-index-content p {
            padding-right: 40%; } }
        @media (max-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(5) .services-index-content p {
            position: relative;
            width: 120%; } }
    .services-index-wapper .services-index-circle:nth-child(6) {
      transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 5)); }
      .services-index-wapper .services-index-circle:nth-child(6) .services-index-fa {
        transform: translate3d(-50%, -50%, 0) rotateZ(calc(360deg / 6 * 1)); }
      .services-index-wapper .services-index-circle:nth-child(6) .services-index-content {
        transform: translate3d(-50%, 0%, 0) rotateZ(calc(360deg / 6 * 1));
        text-align: left; }
        @media (min-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(6) .services-index-content p {
            padding-right: 40%; } }
        @media (max-width: 900px) {
          .services-index-wapper .services-index-circle:nth-child(6) .services-index-content p {
            position: relative;
            width: 120%; } }

.services-index-wapper:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  background-image: url(/upload/image/10000/1/20211202/diamond400x400.png);
  background-size: contain; }

@media (max-width: 900px) {
  .services-container {
    overflow-x: hidden;
    width: 100%;
    padding: 0;
    min-height: 110vw; }

  .services-index-sub-circle {
    background-image: radial-gradient(circle, #6ca9d555, #fff0 60%) !important; }
    .services-index-sub-circle .services-index-fa {
      display: none; } }
.services-container {
  max-width: 700px; }

/*# sourceMappingURL=services.css.map */