배너영역 반응형 만들기

배너영역 글씨html

<div class="swiper-wrapper">
  <div class="swiper-slide ss1">
    <div class="container">
      <div class="row">
        <h2>보스 베이비 <em>The Boss Baby</em></h2>
        <p>귀여운 얼굴 뒤 숨겨진 반전포스 세상에 없던 베이비가 온다!</p>
      </div>
   	</div>
   </div>
   <div class="swiper-slide ss2">
     <div class="container">
       <div class="row">
         <h2>레옹 <em>Leon</em></h2>
         <p>I think we'll be okay here, Leon.</p>
       </div>
     </div>
   </div>
   <div class="swiper-slide ss3">
     <div class="container">
       <div class="row">
         <h2>007 스펙터 <em>Spectre</em></h2>
         <p>최악의 적 스펙터와 제임스 본드의 과거<br>
         그리고 그 속에 숨겨진 거대한 비밀!</p>
     </div>
   </div>
  </div>
</div>

style.css

@media(max-width:960px){
    .slider {height: 500px;}
    .slider .swiper-slide h2 {margin-top: 170px; font-size: 37px; line-height: 45px;}
    .slider .swiper-slide h2 em {font-size: 34px;}
    .slider .swiper-slide h2:after {bottom: -20px;}
    .slider .swiper-slide p {font-size:16px; padding-top: 35px;}
}
@media(max-width:600px){
    .slider {height: 400px; }
    .banner_menu {top: 16px;}    
    .banner_menu .bm_right ul li.purple a {font-size: 14px; padding: 3px 5px 5px 5px; background: rgba(0,0,0,.6); border-color: #fff; color: #fff;}   
    .banner_menu .bm_right ul li.white a {font-size: 14px; padding: 3px 5px 5px 5px; background: rgba(0,0,0,.6); border-color: #fff; color: #fff;}   
    .slider .swiper-slide h2 {margin-top: 120px; font-size: 24px; line-height: 35px;}
    .slider .swiper-slide h2 em {font-size: 22px;}
    .slider .swiper-slide h2:after {bottom: -5px;}
    .slider .swiper-slide p {font-size:14px; padding-top: 25px;}
    .swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
}