.select-img-setter {
  width: 100%;
  position: relative;

  .img-box {
    width: 100%;
    height: 65px;
    position: relative;
    background-size: 0;
    background-color: #fcfcfc;
    box-shadow: 0 0 1px 0.25px #ccc inset;
    transition: all 100ms;

    &.select-img-list-item {
      cursor: pointer;

      &:nth-child(even) {
        background-color: rgb(250, 250, 250);
      }

      &:nth-child(odd) {
        background-color: rgb(245, 245, 245);
      }

      &:hover {
        background-color: rgb(240, 240, 240);
        height: 185px;
      }
    }
  }

  .select-img-show {
    position: relative;
    cursor: default;

    .select-img-focus {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      cursor: default;
      z-index: 1;
    }

    &:before {
      position: absolute;
      content: '';
      border-width: 6px;
      border-style: solid;
      border-color: transparent rgba(50, 50, 50, 0.25) rgba(50, 50, 50, 0.25) transparent;
      border-radius: 5px;
      transform: rotate(45deg) skew(16deg, 16deg);
      top: 50%;
      margin-top: -6px;
      right: 10px;
    }
  }

  .select-img-list-item,
  .select-img-show {
    &:after {
      content: '';
      position: absolute;
      background: center/contain no-repeat;
      background-image: inherit;
      top: 10%;
      left: 0;
      width: 100%;
      height: 80%;
    }
  }

  .select-img-list {
    position: absolute;
    width: 100%;
    z-index: 110;
    max-height: 420px;
    overflow-y: auto;
    display: none;

    &.select-img-list-show {
      display: block;
    }
  }
  .select-qr-setter{
    visibility: hidden;
    width: 0;
    height: 0;
  }
}
