@import "../../global.less";

.main {
  background-color: @mainBgColor;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .LOGO {
    position: absolute;
    left: 5%;
    top: 5%;

    img {
      width: 2rem;
    }
  }

  .content {
    color: #969696 !important;
    background: white;
    padding: 2em;
    @media screen {
      width: 98%;
      @media (min-width: 768px) {
        width: 500px;
      }

      @media (max-width: 768px) {
        width: 100%;
      }
    }

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.7em;

      .dot {
        width: 0.2em;
        height: 0.2em;
        margin: 0 1em;
        border-radius: 50%;
        background: #969696;
      }

      .item {
        cursor: pointer;
        color: #969696 !important;
        padding-bottom: 2px;
      }

      .item.active {
        border-bottom: 2px solid #1890ff;
        padding-bottom: 0;
        color: #1890ff !important;
      }

      .item:hover {
        border-bottom: 2px solid #1890ff;
        padding-bottom: 0;
      }
    }
  }
}
