오프닝 영역 만들기

<section id="opening">
      <div class="container">
         <div class="row">
            <div class="opening">
               <h2><span class="grand icon ir_pm">Grand Opening</span> </h2>
               <strong class="date icon ir_pm">2019.01 ~ 2019.03</strong>
               <p class="desc">LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요!</p>
               <div class="open_box">
                  <div>
                     <h3>리뉴얼 오픈</h3>
                     <p><em>경기도 </em><strong>안양</strong>12월 8일</p>
                  </div>
                  <div>
                     <h3>리뉴얼 오픈</h3>
                     <p><em>경기도 </em><strong>인덕원 사거리</strong>12월 8일</p>
                  </div>
                  <div>
                     <h3>리뉴얼 오픈</h3>
                     <p><em>경기도 </em><strong>용인 테크노밸리</strong>12월 8일</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   <!--//opening-->

style.css

/* opening */
.opening {padding: 100px 0; text-align: center; color: #bb9b51;}
.opening h2 {}
.opening h2 .grand {background-position: 0 -175px; display: inline-block; width: 330px; height: 50px;}
.opening .date {background-position: 0 -225px;display: inline-block; width: 260px; height: 45px;}
.opening .desc {font-size: 35px; font-weight: 300; padding-bottom: 20px; background: url(../img/bar.png) no-repeat bottom center; background-size: 100%;}
.opening .open_box {overflow: hidden; padding: 20px 3% 0 3%;}
.opening .open_box > div {float: left; width: 27.333%; margin: 4% 3% 0 3%; border: 1px solid #3e4b44; box-sizing: border-box;position: relative;}
.opening .open_box > div h3{color: #fff; border: 1px solid #6e3abb; font-size: 19px; background:#6131a8; text-align: center; margin-top: -24px; display: inline-block; padding: 10px 20px;}
.opening .open_box > div p{color: #fff; display: block; font-size: 23px; background: rgba(0,0,0,.6); padding: 6% 0 10% 0;}
.opening .open_box > div em{display: block;}
.opening .open_box > div strong{display: block;}