$fontSize: .16rem;
$modal: 'ui-modal';

.#{$modal} {
  .posi-top{
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .posi-center{
    top: 55rem;
    transform: translate(-50%,0);
  }
  width: 2.71rem;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: .16rem .16rem .15rem .17rem;
  border-radius: .04rem; 
  background: #fff;
  font-size: $fontSize;
  .#{$modal}-inner {
    position: relative;
    .#{$modal}-title {
      font-size: $fontSize;
      font-weight: 500;
      line-height: 1.2;
      text-align: center;
      color: #36434d;
    }

    .#{$modal}-title-align{
      text-align: justify;
    }

    .#{$modal}-content {
      font-size: .14rem;
      line-height: 1.4;
      text-align: center;
      margin-top: .08rem;
      color: #667580;
      max-height: 70vh;
      overflow-y: auto;
    }
  }
  .#{$modal}-buttons {
    margin-top: .31rem;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    font-size: $fontSize;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #007ed9;
    .#{$modal}-button {
      flex: 1;
    }
  }
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}