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

.page {
  height: 100%;
  width: 100%;
  background: no-repeat center/cover url(./assets/bg.png);
  position: relative;

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

    p {
      &.subtitle {
        font-size: calc(45*var(--ratio));
        color: var(--homeRed);
        font-family: 'goldman';

        &::after {
          content: '.';
          color: var(--homeBlue)
        }
      }

      &:nth-child(2) {
        font-size: calc(50*var(--ratio));
        color: #2E2E2E;
        font-family: '方正正黑';
        margin-top: calc(10*var(--ratio));
      }
    }
  }

  .plan-wrapper {
    width: 80%;
    height: 55vh;
    display: flex;
    position: absolute;
    bottom: 12vh;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: calc(50*var(--ratio));
    overflow: hidden;
    box-shadow: 0 0 calc(10*var(--ratio)) rgba(0, 0, 0, 0.1);

    &:hover .plan:nth-child(1):not(:hover) {
      width: 20%;
      background: no-repeat center/cover url(./assets/01-bg.png);

      p:nth-child(1) {
        color: #fff;

        &::after {
          width: 0;
          content: attr(en-text)
        }
      }

      p:nth-child(2) {
        opacity: 0;
      }

      p:nth-child(3) {
        opacity: 0;
      }
    }

    .plan {
      height: 100%;
      width: 20%;
      transition: all 500ms ease;
      padding: calc(50*var(--ratio));
      color: #fff;
      position: relative;

      &:nth-child(1) {
        width: 40%;
        background: no-repeat center/cover url(./assets/1-bg.png);

        &:hover {
          background: no-repeat center/cover url(./assets/1-bg.png);
        }

        p:nth-child(1) {
          color: var(--homeRed);

          &::after {
            width: 20%;
            content: '';
          }
        }

        p:nth-child(2) {
          opacity: 1;
          color: #666;
        }

        p:nth-child(3) {
          opacity: 1;
        }
      }

      &:nth-child(2) {
        background: no-repeat center/cover url(./assets/02-bg.png);

        &:hover {
          background: no-repeat center/cover url(./assets/2-bg.png);

          p:nth-child(1) {
            color: var(--homeBlue);

            &::after {
              background: linear-gradient(to right, transparent, var(--homeBlue));
            }
          }
        }
      }

      &:nth-child(3) {
        background: no-repeat center/cover url(./assets/03-bg.png);

        &:hover {
          background: no-repeat center/cover url(./assets/3-bg.png);
        }
      }

      &:nth-child(4) {
        background: no-repeat center/cover url(./assets/04-bg.png);

        &:hover {
          background: no-repeat center/cover url(./assets/4-bg.png);

          p:nth-child(1) {
            color: var(--homeBlue);

            &::after {
              background: linear-gradient(to right, transparent, var(--homeBlue));
            }
          }
        }
      }

      &:nth-child(5) {
        background: no-repeat center/cover url(./assets/05-bg.jpg);

        &:hover {
          background: no-repeat center/cover url(./assets/5-bg.jpg);

          p:nth-child(1) {
            font-size: calc(28*var(--ratio));
          }
        }
      }

      p:nth-child(1) {
        font-size: calc(40*var(--ratio));
        font-weight: bold;

        &::after {
          display: block;
          content: attr(en-text);
          font-family: 'goldman';
          font-size: calc(20*var(--ratio));
          width: 0;
          height: calc(3*var(--ratio));
          background: linear-gradient(to right, transparent, var(--homeRed));
          margin-top: calc(20*var(--ratio));
        }
      }

      p:nth-child(2) {
        line-height: 2;
        margin-top: calc(20*var(--ratio));
        font-size: calc(15*var(--ratio));
        color: 333;
        opacity: 0;
      }

      p:nth-child(3) {
        width: calc(100% - calc(100*var(--ratio)));
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(15*var(--ratio));
        opacity: 0;
        position: absolute;
        bottom: calc(50*var(--ratio));

        span {
          font-size: calc(10*var(--ratio));
          height: calc(30*var(--ratio));
          line-height: calc(30*var(--ratio));
          text-align: center;
          color: #666;
          background: linear-gradient(180deg, #f3f5f8, #fff);
          border: 1px solid #fff;
          box-shadow: 8px 8px 20px rgba(55, 99, 170, .1), -8px -8px 20px #fff;
        }
      }

      &:hover {
        width: 40%;
        background: transparent;

        & p:nth-child(1) {
          color: var(--homeRed);

          &::after {
            width: 20%;
            content: ''
          }
        }

        & p:nth-child(2) {
          opacity: 1;
          color: #666;
        }

        & p:nth-child(3) {
          opacity: 1;
        }
      }
    }
  }
}