$am-ms: 200ms;
.drawer_main {
  .drawer {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    z-index: 1000;
    visibility: hidden;
    transition: visibility $am-ms ease-in-out;
    .drawer_mask {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1011;
      opacity: 0;
      transition: opacity $am-ms ease-in;
      .drawer_container {
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: #fff;
        z-index: 1012;
        transition: transform $am-ms ease-in-out;
        .drawer_container_title {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 80px;
          font-size: 29px;
          color: #000000;
          padding-top: 10px;
        }
        .common_close_btn_icon {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 1000;
        }
      }
      .drawer_container_active {
        transform: translate3d(0, 0, 0);
      }
    }
    .drawer_mask_active {
      opacity: 1;
    }
  }
  .drawer_active {
    visibility: visible;
  }

  .drawer_container_bottom {
    bottom: 0;
    left: 0;
    min-height: 200px;
    width: 100vw;
    border-radius: 20px 20px 0px 0px;
    transform: translate3d(0, 100%, 0);
  }

  .drawer_container_top {
    top: 0;
    left: 0;
    min-height: 200px;
    width: 100vw;
    border-radius: 0 0 20px 20px;
    transform: translate3d(0, -100%, 0);
  }

  .drawer_container_right {
    bottom: 0;
    right: 0;
    height: 100vh;
    min-width: 300px;
    border-radius: 20px 0 0 20px;
    transform: translate3d(100%, 0, 0);
  }
}