@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.popularShow {
  height: 512px;
  > h2 {
    margin: 0 0 0px 60px;
    font-size: 42px;
  }
  .showList {
    overflow: unset;
    height: 481px;
    width: 100%;
    > div {
      > div {
        padding: 20px 0px 30px 60px;
        display: flex;

        .addItem {
          flex: none;
          .size(@w:258px, @h:438px);
          > .displayBox {
            .size(@w: 198px, @h: 438px);
            background-color: @COLOR_WHITE;
            .border-solid(@size:1px, @color:#e4e4e4);
            border-radius: 12px;
            background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
            background-size: 66px 66px;
            background-position: center center;
            background-repeat: no-repeat;
            &:focus {
              border: 4px solid @PRIMARY_COLOR_RED;
              box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
              border-radius: 12px;
              background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
            }
          }
        }
        .theOrderBox {
          .size(@w: 18px, @h: 438px);
        }
        > div {
          flex: none;
          margin-right: 18px;
          &:last-child {
            margin-right: 0px;
          }
        }
      }
    }
  }
}

.listItemVertical {
  display: flex;
  flex: none;
  .size(@w:546px,@h:438px);
  padding: 14px;
  background-color: @COLOR_WHITE;
  border-radius: 12px;
  .border-solid(@size:1px,@color:@COLOR_GRAY02);
  box-sizing: border-box;
  font-weight: bold;
  &:focus {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    box-sizing: border-box;
  }
  > img {
    .size(@w:228px,@h:402px);
    object-fit: contain;
  }
  .verticalItem {
    margin-left: 11px;
    color: #333;
    font-size: 24px;
    .size(@w:270px,@h:402px);
    .elip(@clamp:12);
  }
  .logo {
    display: block;
    .size(@w:60px,@h:60px);
    margin-right: 12px;
    .logoPath {
      width: 100%;
      height: auto;
    }
  }
  .showNm {
    margin-left: 11px;
    color: #333;
    font-size: 24px;
    .size(@w:270px,@h:402px);
    .elip(@clamp:12);
  }
}
