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

.confirmPanel {
  background-color: @BG_COLOR_01;
  padding-top: 100px !important;

  .title {
    .font(@fontSize: 48px, @fontFamily: @baseFont);
    font-weight: bold;
    line-height: 1.17;
    color: @COLOR_GRAY07;
    text-align: center;
  }

  .contentsBox {
    background: @COLOR_WHITE;
    .size(@w: 1080px, @h: auto);
    margin: 30px auto;
    padding: 40px 0 90px 60px;
    border: 1px solid #dadada;
    border-radius: 12px;
    position: relative;

    .img {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .topContents {
      margin-bottom: 27px;

      .topContentsTitle {
        .font(@fontSize: 30px, @fontFamily: @baseFont);
        font-weight: bold;
        color: @COLOR_GRAY07;
        width: 330px;
        display: inline-block;
      }

      .topContentsDesc {
        .font(@fontSize: 30px, @fontFamily: @baseFont);
        font-weight: bold;
        color: @PRIMARY_COLOR_RED;
        width: 600px;
        display: inline-block;
      }
    }

    .midContents {
      li {
        p {
          display: inline-block;
          width: 330px;
          font-size: 24px;
          color: @COLOR_GRAY03;
          line-height: 1.33;
          margin-bottom: 27px;

          .shippingAddressTitle {
            vertical-align: top;
          }
        }

        span {
          display: inline-block;
          width: 600px;
          font-size: 24px;
          color: @COLOR_GRAY03;
          line-height: 1.33;
          margin-bottom: 27px;
        }
      }
    }

    .bottomContents {
      margin-top: 27px;
      display: flex;
      position: relative;
      z-index: 2;

      .bottomContentsTitle {
        .font(@fontSize: 30px, @fontFamily: @baseFont);
        font-weight: bold;
        color: @COLOR_GRAY07;
        width: 330px;
        display: inline-block;
      }

      .bottomContentsDesc {
        .font(@fontSize: 30px, @fontFamily: @baseFont);
        font-weight: bold;
        color: @PRIMARY_COLOR_RED;
        width: 600px;
        display: inline-block;
        position: relative;
        z-index: 2;
      }

      .noticeBox {
        display: block;
        margin-top: 15px;
        font-size: 24px;
        color: @COLOR_GRAY03;
        font-weight: normal !important;
        position: relative;
        z-index: 2;
      }
    }

    .img {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
  }

  .buttonWrap {
    width: 100%;
    text-align: center;
    margin: 0 auto;

    .firstButton {
      margin-right: 12px;
    }
  }
}
