/* CSS Document */

.top_topics{
  background:#f7fdff;
}

.top_topics .inner{
  max-width:1080px;
  margin:0 auto;
  padding:45px 0 50px; 
}

.top_topics .inner h2{
  text-align:center;
  font-size:32px;
  color:#6e6e6e;
  font-weight:500;
}

.top_topics .inner ul{
  margin-top:0px;
}

.top_topics .inner ul li{
  width:360px;
  text-align:center;
}

.top_topics .inner ul li img{
  width:340px; 
}

.mv_txt{
  top:0; 
}

#bnr_wrapper{
  height:100%;
  position:relative;
  margin-top:20px;
}

#bnr_wrapper .swiper-button-prev,
#bnr_wrapper .swiper-button-next{
  display:block;
  background:url(../images/top/top_slide_l.png) no-repeat left top;
  background-size:100% auto;
  width:15px;
  height:24px;
  position:absolute;
  left:-35px;
  top:calc(50% + 20px);
  transform:translateY(-50%); 
}

#bnr_wrapper .swiper-button-next{
  background:url(../images/top/top_slide_r.png) no-repeat left top;
  background-size:100% auto;
  left:auto;
  right:-35px;
}

@media only screen and (max-width: 1150px) {
  .top_topics .inner{
    max-width:100%;
    margin:0 auto;
    padding:4vw 4vw 5vw;
    box-sizing:border-box; 
  }
  
  .top_topics .inner h2{
    font-size:5.33vw;
  }
  
  .top_topics .inner ul{
    margin-top:0px;
  }
  
  .top_topics .inner ul li{
    width:100%;
    text-align:center;
  }
  
  .top_topics .inner ul li img{
    width:100%; 
  }
  
  #bnr_wrapper{
    height:100%;
    position:relative;
    margin-top:3vw;
  }
  
  #bnr_wrapper .swiper-button-prev,
  #bnr_wrapper .swiper-button-next{
    display:block;
    width:1.5vw;
    height:3vw;
    position:absolute;
    left:-2.5vw;
    top:calc(50% + 2vw);
  }
  
  #bnr_wrapper .swiper-button-next{
    left:auto;
    right:-2.5vw;
  }
}

@media only screen and (max-width: 768px) {
    .top_topics .inner{
      max-width:100%;
      margin:0 auto;
      padding:4vw 6vw 5vw;
      box-sizing:border-box; 
    }
    
    #bnr_wrapper .swiper-button-prev,
    #bnr_wrapper .swiper-button-next{
      display:block;
      width:3vw;
      height:5vw;
      position:absolute;
      left:-4.5vw;
      top:calc(50% + 4vw);
    }
    
    #bnr_wrapper .swiper-button-next{
      left:auto;
      right:-4.5vw;
    }
}