우종완

TBHSHOP

베이직하우스 72시간 쇼핑찬스

<div id="bh-72hour-mo-wrap">

  <div class="bh72mo-visual">

    <img class="bh72mo-bg" src="https://tbhimg.com/images/gw/02/260831/mo.jpg" alt="">

    <div class="bh72mo-copy">

      <div class="bh72mo-brand">BASIC HOUSE</div>

      <h2 class="bh72mo-title">72시간 쇼핑찬스</h2>

      <div class="bh72mo-sub">
        단, 3일간 진행되는 타임특가
      </div>

      <div class="bh72mo-date">(9.4 - 9.6)</div>

    </div>

  </div>

  <style>
    /* ========================================
       BASIC HOUSE 72시간 쇼핑찬스
       MOBILE
    ======================================== */

    #bh-72hour-mo-wrap,
    #bh-72hour-mo-wrap * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #bh-72hour-mo-wrap {
      width: 100%;
      overflow: hidden;
      font-family: 'Pretendard', sans-serif;
    }

    #bh-72hour-mo-wrap .bh72mo-visual {
      position: relative;
      width: 100%;
      line-height: 0;
      font-size: 0;
    }

    #bh-72hour-mo-wrap .bh72mo-bg {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      border: 0;
    }

    /* 텍스트 전체 */
    #bh-72hour-mo-wrap .bh72mo-copy {
      position: absolute;
      top: 5.7%;
      left: 0;
      width: 100%;
      color: #000000;
      text-align: center;
      white-space: nowrap;
      line-height: 1;
    }

    /* BASIC HOUSE */
    #bh-72hour-mo-wrap .bh72mo-brand {
      margin-bottom: 19px;
      font-size: 25px;
      font-weight: 400;
      letter-spacing: -0.04em;
      line-height: 1;
    }

    /* 메인 타이틀 */
    #bh-72hour-mo-wrap .bh72mo-title {
      margin: 0 0 17px;
      color: #000000;
      font-size: 60px;
      font-weight: 700;
      letter-spacing: -0.06em;
      line-height: 1.05;
    }

    /* 서브 타이틀 */
    #bh-72hour-mo-wrap .bh72mo-sub {
      margin-bottom: 5px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 1.15;
    }

    /* 날짜 - 얇은 굵기 */
    #bh-72hour-mo-wrap .bh72mo-date {
      font-size: 27px;
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    /* 720px 기준 비율 유지 */
    @media screen and (max-width: 720px) {

      #bh-72hour-mo-wrap .bh72mo-copy {
        top: 5.7%;
      }

      #bh-72hour-mo-wrap .bh72mo-brand {
        margin-bottom: 2.64vw;
        font-size: 3.47vw;
      }

      #bh-72hour-mo-wrap .bh72mo-title {
        margin-bottom: 2.36vw;
        font-size: 8.33vw;
      }

      #bh-72hour-mo-wrap .bh72mo-sub {
        margin-bottom: 0.69vw;
        font-size: 4.17vw;
      }

      #bh-72hour-mo-wrap .bh72mo-date {
        font-size: 3.75vw;
        font-weight: 400;
      }
    }
  </style>

</div>

<div id="bh-72hour-wrap">

  <div class="bh72-visual">

    <img class="bh72-bg" src="https://tbhimg.com/images/gw/02/260831/pc.jpg" alt="베이직하우스 72시간 타임특가">

    <div class="bh72-copy">

      <div class="bh72-brand">BASIC HOUSE</div>

      <h2 class="bh72-title">72시간 쇼핑찬스</h2>

      <div class="bh72-sub">
        단, 3일간 진행되는 타임특가
      </div>

      <div class="bh72-date">(9.4 - 9.6)</div>

    </div>

  </div>

  <style>
    /* ========================================
       BASIC HOUSE 72시간 쇼핑찬스
       PC 기획전
    ======================================== */

    #bh-72hour-wrap,
    #bh-72hour-wrap * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #bh-72hour-wrap {
      width: 100%;
      overflow: hidden;
      font-family: 'Pretendard', sans-serif;
    }

    #bh-72hour-wrap .bh72-visual {
      position: relative;
      width: 100%;
      line-height: 0;
      font-size: 0;
    }

    #bh-72hour-wrap .bh72-bg {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      border: 0;
    }

    /* 텍스트 전체 영역 */
    #bh-72hour-wrap .bh72-copy {
      position: absolute;
      left: 7.14%;
      top: 30.3%;
      color: #ffffff;
      line-height: 1;
      text-align: left;
      white-space: nowrap;
    }

    /* BASIC HOUSE */
    #bh-72hour-wrap .bh72-brand {
      margin-bottom: 23px;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -0.04em;
      line-height: 1;
    }

    /* 메인 타이틀 */
    #bh-72hour-wrap .bh72-title {
      margin: 0 0 20px;
      font-size: 60px;
      font-weight: 700;
      letter-spacing: -0.055em;
      line-height: 1.05;
      color: #ffffff;
    }

    /* 서브 타이틀 */
    #bh-72hour-wrap .bh72-sub {
      margin-bottom: 8px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -0.055em;
      line-height: 1.15;
    }

    /* 날짜 */
    #bh-72hour-wrap .bh72-date {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    /* 화면이 작아질 때도 이미지와 텍스트 비율 유지 */
    @media screen and (max-width: 1200px) {
      #bh-72hour-wrap .bh72-brand {
        margin-bottom: 1.64vw;
        font-size: 1.29vw;
      }

      #bh-72hour-wrap .bh72-title {
        margin-bottom: 1.43vw;
        font-size: 4.29vw;
      }

      #bh-72hour-wrap .bh72-sub {
        margin-bottom: 0.57vw;
        font-size: 2.14vw;
      }

      #bh-72hour-wrap .bh72-date {
        font-size: 1.57vw;
      }
    }
  </style>

</div>