.modal-list-wrapper
  .mask
    position fixed;
    top 0px;
    left 0px;
    right 0px;
    bottom 0px;
    background-color rgba(0, 0, 0, 0.6);
    z-index 99;
  .list-wrapper
    position fixed;
    bottom -180px;
    width 100%;
    z-index 100;
    padding 0px 8px;
    box-sizing border-box;
    transition all 0.3s;
    visibility hidden;
    .list-ul
      width 100%;
      max-height 300px;
      overflow auto;
      list-style none;
      border-radius 8px;
      .list-li
        width 100%;
        background #fff;
        height 56px;
        line-height 56px;
        text-align center;
        border-bottom 1px solid #e5e5e5;
        &:last-of-type
          border-bottom none;
    .cancel
      border-radius 8px;
      background #fff;
      margin-top 8px;
      height 56px;
      line-height 56px;
      text-align center;
  .active-entry
    transform translate(0, -115%);
    visibility visible;
  .active-out
    visibility hidden;