배너영역 만들기

<section id="banner">
      <h2 class="ir_so">최신 영화 소식</h2>
      <div class="banner">
         <div class="banner_menu clearfix">
            <div class="container">
               <div class="row">
                  <div class="bm_left">
                     <ul>
                        <li class="total"><a href="#">전체메뉴</a></li>
                        <li class="line"><a href="#">필름 소사이어티</a></li>
                        <li><a href="#">클래식 소사이어티</a></li>
                     </ul>
                  </div>
                  <div class="bm_right">
                     <ul>
                        <li class="line"><a href="#">고객센터</a></li>
                        <li class="line"><a href="#">멤버쉽</a></li>
                        <li><a href="#">VIP</a></li>
                     </ul>
                     <ul>
                        <li class="white"><a href="#">상영시간표</a></li>
                        <li class="purple"><a href="#">빠른 예매</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="slider">
         <img src="assets/img/main_slider01.jpg" alt="베스와 베라">
      </div>
   </section>
   <!--//banner-->

style.css

/* banner */
.banner {position: relative;}
.banner_menu {position: absolute; left: 0;top: 20px; width: 100%; height: 100px;}
.banner_menu a {color: #fff; font: 16px; transition: all 0.3s;}
.banner_menu a:hover {color: #c1c1c1;}
.banner_menu .bm_left {float: left;}
.banner_menu .bm_left ul {padding-top: 7px;}
.banner_menu .bm_left ul li {display: inline; margin-right: 30px;position: relative;}
.banner_menu .bm_left ul li.total {margin-right: 20px;}
.banner_menu .bm_left ul li.total a{font-size: 14px; padding: 3px 10px; display: inline-block; border: 1px solid #fff; transition: all 0.3s;}
.banner_menu .bm_left ul li.total a:hover{background: #fff; border-color: #000; color: #000;}
.banner_menu .bm_right {float: right; overflow: hidden;}
.banner_menu .bm_right ul {float: left;}
.banner_menu .bm_right ul:first-child {padding-top: 7px;}
.banner_menu .bm_right ul li{display: inline; text-align: center; margin-right: 20px; position: relative;}
.banner_menu .bm_right ul li.line{margin-right: 30px;}
.banner_menu .bm_right ul li.white{margin-right: 10px;}
.banner_menu .bm_right ul li.white a {width:80px; background: #fff; color: #3a0e6a; padding: 7px 30px 9px 30px; border: 1px solid #fff; display: inline-block;}
.banner_menu .bm_right ul li.purple{margin-right: 0;}
.banner_menu .bm_right ul li.purple a {width:80px; background: #3a0e6a; color: #fff; padding: 7px 30px 9px 30px; border: 1px solid #6e40c4; display: inline-block;}
.banner_menu .line:after {content: ''; width: 1px; height: 14px; background: #fff; position: absolute; right: -18px; top: 2px;}