@import "../../../style/CommonStyle.module.less";

.container {
  background-color: #f8f8f8;
  display: flex;
}

.homeTemplateBox {
  margin: 24px 24px 0px;
  display: flex;
  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.leftBannerBox {
  width: 744px;
  height: 858px;
  margin-right: 18px;
  &.dualBox {
    .topBox {
      width: 744px;
      height: 420px;

      margin-bottom: 18px;
      border: 4px solid transparent;
      border-radius: 12px;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
        border: 4px solid @PRIMARY_COLOR_RED;
        box-sizing: border-box;
        .focusDropShadow();
        border-radius: 12px;
      }
    }
    .underBox {
      width: 744px;
      height: 420px;

      border: 4px solid transparent;
      border-radius: 12px;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
        border: 4px solid @PRIMARY_COLOR_RED;
        box-sizing: border-box;
        .focusDropShadow();
        border-radius: 12px;
      }
    }
  }
}
.videoBox {
  width: 744px;
  height: 420px;
  margin: 0 18px 18px 0;
  border: 4px solid transparent;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
    border-radius: 12px;
  }
  .videoPlayer {
    width: 744px;
    height: 420px;
    outline: "teal dashed 1px";
    transform: "scale(1)";
    border-radius: 12px;
  }
}

.banner02 {
  width: 744px;
  height: 420px;
  border-radius: 12px;
  border: 4px solid transparent;
  box-sizing: border-box;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
    border-radius: 12px;
  }
}

.banner03 {
  width: 486px;
  height: 858px;
  border: 4px solid transparent;
  border-radius: 12px;
  box-sizing: border-box;
  margin-right: 18px;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
  }
}

.banner04 {
  width: 486px;
  height: 858px;
  border: 4px solid transparent;
  box-sizing: border-box;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
    border-radius: 12px;
  }
}

.bannerFlexCol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bannerFlexRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mainBox {
  display: flex;
}

.mainBox {
  display: flex;

  .imgBox {
    width: 486px;
    height: 858px;
    margin-right: 18px;
    border: 4px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    &:focus,
    &:hover,
    &:focus-within,
    &:active {
      border: 4px solid @PRIMARY_COLOR_RED;
      box-sizing: border-box;
      .focusDropShadow();
    }
    > img {
      width: 486px;
      height: 858px;
      object-fit: contain;
    }
  }
}
