@import '../../public/index.css';

.page {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #fafcff00 0%, #fff 100%), url(./assets/bg.jpg) no-repeat center/cover;
  position: relative;

  .main {
    position: absolute;
    top: 18vh;
    left: 16vw;

    .content {
      &+& {
        margin-top: 8vh;
      }

      p:nth-child(1) {
        font-size: calc(24*var(--ratio));
        color: var(--homeRed);
        font-family: 'cabin';
      }

      P:nth-child(2) {
        font-size: calc(40*var(--ratio));
        color: #333;
        margin: 1vh 0 4vh;
        font-family: '方正正黑';
        margin-top: calc(20*var(--ratio));
      }

      .detail {
        display: flex;
        font-size: calc(20*var(--ratio));
        color: #666;
        align-items: center;
        /* font-family: '方正正黑'; */
        /* -webkit-text-stroke: 0.3px #fff; */

        .text {
          *+* {
            margin-top: 2vh;
          }

          &.left {
            width: 25vw;

            img {
              width: 8vw;
            }
          }
        }
      }
    }
  }

  .half {
    position: absolute;
    top: 50%;
    right: -50%;
    transform: translate(-50%, -50%);

    &.earth {
      animation: rotate 100s linear infinite;
    }

    &.dot {
      animation: rotate 100s linear infinite reverse;
    }

    &.line {
      animation: rotate 10s linear infinite;
    }

    img {
      width: 50vw;
    }

  }
}

@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}