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

.container {
  background-color: #f8f8f8;

  .homeTemplateBox {
    margin: 24px 24px 0px;
    .mainBox {
      display: flex;
      img,
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .longBanner {
        width: 486px;
        height: 858px;
        border: 4px solid transparent;
        box-sizing: border-box;
        border-radius: 12px;
        overflow: hidden;
        &:focus,
        &:active,
        &:hover,
        &:focus-within {
          border: 4px solid @PRIMARY_COLOR_RED;
          box-sizing: border-box;
          .focusDropShadow();
          border-radius: 12px;
        }
        &.rollingBox {
          position: relative;
          .rightBtn {
            position: absolute;
            right: 18px;
            top: 408px;
            z-index: 1;
            width: 42px;
            height: 42px;
            background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
            background-size: 42px 42px;
            background-repeat: no-repeat;
            &:focus,
            &:active,
            &:hover,
            &:focus-within {
              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
            }
          }
          .leftBtn {
            position: absolute;
            left: 18px;
            top: 408px;
            z-index: 1;
            width: 42px;
            height: 42px;
            background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
            background-size: 42px 42px;
            background-repeat: no-repeat;
            &:focus,
            &:active,
            &:hover,
            &:focus-within {
              background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
            }
          }
        }
      }
      .dualBox {
        .smallBox {
          width: 744px;
          height: 420px;
          border: 4px solid transparent;
          border-radius: 12px;
          overflow: hidden;
          &:focus,
          &:active,
          &:hover,
          &:focus-within {
            border: 4px solid @PRIMARY_COLOR_RED;
            box-sizing: border-box;
            .focusDropShadow();
            border-radius: 12px;
          }
          &:nth-child(1) {
            margin-bottom: 18px;
          }
          &.rollingBox {
            position: relative;
            .rightBtn {
              position: absolute;
              right: 18px;
              top: 190px;
              z-index: 1;
              width: 42px;
              height: 42px;
              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
              background-size: 42px 42px;
              background-repeat: no-repeat;
              &:focus-within,
              &:focus {
                background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
              }
            }
            .leftBtn {
              position: absolute;
              left: 18px;
              top: 190px;
              z-index: 1;
              width: 42px;
              height: 42px;
              background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
              background-size: 42px 42px;
              background-repeat: no-repeat;
              &:focus-within,
              &:focus {
                background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
              }
            }
          }
        }
      }
    }
  }
  /* margin전용 */
  .mt18 {
    margin-top: 18px;
  }
  .ml18 {
    margin-left: 18px;
  }
  .mr18 {
    margin-right: 18px;
  }
  .mb18 {
    margin-bottom: 18px;
  }
}
