@import "../../../style/CommonStyle.module.less";
.itemBox {
  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
  background-repeat: no-repeat;
  background-size: 486px 858px;
  background-position: center center;
  width: 486px;
  height: 858px;
  margin-right: 18px;
  border: 4px solid transparent;
  border-radius: 12px;
  position: relative;

  img {
    width: 100%;
    object-fit: contain;
  }
  .textBox {
    margin: 268px 36px 0;
    width: 406px;
    height: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: "LGSmartUIBold";
    font-weight: bold;
    font-size: 30px;
    color: #333;
    line-height: 1.27;
  }
  .accBox {
    width: 406px;
    height: 50px;
    margin: 6px 36px 0;
    text-align: center;
    font-size: 42px;
    color: @PRIMARY_COLOR_RED;
    font-weight: bold;
    line-height: 1.14;
    .saleAccBox {
      font-size: 24px;
      color: #767676;
      vertical-align: middle;
      text-decoration: line-through;
    }
  }
  .itemImgBox {
    margin: 29px 62px 60px;
    width: 354px;
    height: 354px;
    > img {
      width: 100%;
    }
  }
  .leftBtn {
    position: absolute;
    left: 18px;
    top: 408px;
    width: 42px;
    height: 42px;
    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
    cursor: pointer;
    &:focus,
    &:focus-within,
    &:hover,
    &:active {
      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
    }
  }
  .rightBtn {
    position: absolute;
    right: 18px;
    top: 408px;
    width: 42px;
    height: 42px;
    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
    cursor: pointer;
    &:focus,
    &:focus-within,
    &:hover,
    &:active {
      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
    }
  }
}

.itemBox.isHorizontal {
  position: relative;
  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
  background-repeat: no-repeat;
  background-size: 744px 420px;
  background-position: center center;
  width: 744px;
  height: 420px;
  border: 4px solid transparent;
  border-radius: 12px;
  display: flex;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
  }
  > div {
    flex: none;
  }
  img {
    width: 100%;
    object-fit: contain;
  }
  .textBox {
    font-family: "LGSmartUIBold";
    margin: 230px 8px 0 46px;
    width: 320px;
    height: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: bold;
    font-size: 30px;
    color: #333;
    line-height: 1.27;
  }
  .accBox {
    width: 320px;
    height: 50px;
    margin: 6px 8px 0 46px;
    text-align: left;
    font-size: 42px;
    color: @PRIMARY_COLOR_RED;
    font-weight: bold;
    line-height: 1.14;
    .saleAccBox {
      font-size: 24px;
      color: #767676;
      vertical-align: middle;
      text-decoration: line-through;
    }
  }
  .itemImgBox {
    margin: 44px 26px 44px 0;
    width: 324px;
    height: 324px;
    > img {
      width: 100%;
    }
  }
  .leftBtn {
    position: absolute;
    left: 18px;
    top: 189px;
    width: 42px;
    height: 42px;
    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
    &:focus,
    &:focus-within,
    &:hover,
    &:active {
      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
    }
  }
  .rightBtn {
    position: absolute;
    right: 18px;
    top: 189px;
    width: 42px;
    height: 42px;
    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
    &:focus,
    &:focus-within,
    &:hover,
    &:active {
      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
    }
  }
}
