@import "../../../../style/CommonStyle.module.less";
.listItem {
  width: 546px;
  height: 438px;
  padding: 18px;
  background-color: @COLOR_WHITE;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  box-sizing: border-box;
  font-weight: bold;
  font-family: "LGSmartUIBold";
  margin-right: 18px;
  border: 4px solid transparent;
  box-sizing: border-box;

  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
  }

  > img {
    width: 510px;
    height: 288px;
    object-fit: contain;
  }
  .horizonItem {
    width: 510px;
    height: 61px;
    margin-top: 38px;
    color: #333;
    font-size: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: flex;
  }
  .logo {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 12px;
    .logoPath {
      width: 100%;
      height: auto;
    }
  }
  .showNm {
    display: inline-block;
    color: #333;
    font-size: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 438px;
    height: 61px;
  }
}
.listItemVertical {
  display: flex;
  width: 546px;
  height: 438px;
  padding: 18px;
  background-color: @COLOR_WHITE;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  box-sizing: border-box;
  margin-right: 18px;
  border: 4px solid transparent;
  box-sizing: border-box;
  font-weight: bold;
  font-family: "LGSmartUIBold";
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
  }
  > img {
    width: 228px;
    height: 402px;
    object-fit: contain;
  }
  .verticalItem {
    margin-left: 11px;
    color: #333;
    font-size: 24px;
    width: 270px;
    height: 402px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
  }
  .logo {
    display: block;
    width: 60px;
    height: 60px;
    margin-right: 12px;
    .logoPath {
      width: 100%;
      height: auto;
    }
  }
  .showNm {
    margin-left: 11px;
    color: #333;
    font-size: 24px;
    width: 270px;
    height: 402px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
  }
}
