.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 30px;
  .content {
    position: relative;
    width: 48px;
    height: 24px;
    padding: 3px;
    background: #ffe823;
    border-radius: 12px;
    transition: background-color 0.3s;
    &.closeBg {
      background: #c4c4c433;
      transition: background-color 0.3s;
    }
    .point {
      position: absolute;
      top: 0;
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 1px solid #c4c4c4;
      border-radius: 50%;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
      transform: translate(90%, 0%);
      transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
      &.closePt {
        transform: translate(-10%, 0%);
      }
    }
  }
}
