/* 배너 */
.tbbanner{ position:relative; word-break:keep-all }
.tbbanner::after{display:block;visibility:hidden;clear:both;content:""}
.tbbanner .bnn-wrap{ position:relative; width:100%; height:calc(100vh - 100px); max-height:900px; min-height:500px; margin:0 auto; }
.tbbanner .swiper-container{ width:100%; height:100%; }
.tbbanner .swiper-wrapper{ width:100%; height:100%; top:0;left:0; overflow: hidden;}
.tbbanner .swiper-slide{ position:relative; width:100%; height:100%; overflow: hidden; }
.tbbanner .swiper-slide .wideImg{ position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%) scale(1.2); height:100%; background-size: cover; background-repeat: no-repeat;background-position:center center;  transition:transform 3s ease-out; -webkit-transition:transform 3s ease-out;}
.tbbanner .dim{width:100%; height:100%; background: rgba(0, 0, 0, 0.3); position:absolute; top:0; left:0; z-index: 1;}
.tbbanner .swiper-slide .wideImg.loaded{ transform:translate(-50%, -50%) scale(1); }


.tbbanner .swiper-slide .tbinner{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; margin:0 auto;  z-index: 3; }
.tbbanner .swiper-slide .slider-txt-wrap{height:100%; position:relative;}
  .tbbanner .swiper-slide .slider-txt{ position:absolute; width:100%; top:50%; left:0; transform: translateY(-40%); text-align:left; }
  .tbbanner .swiper-slide .slider-txt.left{ text-align: left; }
  .tbbanner .swiper-slide .slider-txt.center{ text-align: center; }
  .tbbanner .swiper-slide .slider-txt.right{ text-align: right; }
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size: 6rem; line-height:1.3em; color:#fff; font-weight: 700; margin-bottom:15px; transition: all .4s .7s; word-break: keep-all;}
  .tbbanner .swiper-slide .slider-txt .bnn-text{ font-size:2.4rem; line-height:1.6em; color:#fff; font-weight: 300; transition: all .4s 1.1s; margin-bottom:40px;}
  .tbbanner .slider-txt .tbbtn{ -webkit-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -moz-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -ms-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -o-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s;  transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; }


  .tbbanner .slider-txt .bnn-title, .tbbanner .slider-txt .bnn-text, .tbbanner .slider-txt .tbbtn{position:relative; opacity:0; bottom:-30px;}
  .tbbanner .slider-txt .bnn-title.sldrun, .tbbanner .slider-txt .bnn-text.sldrun, .tbbanner .slider-txt .tbbtn.sldrun{opacity:1; bottom:0;}

  .tbbanner .swiper-pagination{
    bottom:50px; left:50%; transform: translateX(-50%);
  }
  .tbbanner .swiper-pagination .swiper-pagination-bullet{
    position:relative; width:60px; height:3px; background:transparent; border-radius: 0; transition:.3s; margin:0 5px; opacity:1; background:rgba(255,255,255,.3);
  }
  
  .tbbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    position:absolute; content:""; width:0; height:7px; top:-2px; left:0; background:#fff; 
    animation:bulletMove 4.5s forwards linear;
  }
  @keyframes bulletMove{ 
    0%{width:0;}
    100%{ width:100%; } 
  }
  
@media (max-width: 1640px){
  .tbbanner .swiper-slide .tbinner{ max-width:100%; padding:0 100px;}
}
@media (max-width: 1024px){
  .tbbanner .bnn-wrap{ height:calc(100vh - 100px); max-height:650px; }
  .tbbanner .swiper-slide .tbinner{padding: 0 50px;}
  .tbbanner .swiper-button-next,
  .tbbanner .swiper-button-prev{ display: none; }
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:4.5rem; }
}
@media (max-width: 768px){
  .tbbanner .bnn-wrap{ max-height:600px;}
  .tbbanner .swiper-slide .tbinner{padding: 0 30px;}
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:3.8rem; margin-bottom:25px;}
  .tbbanner .swiper-slide .slider-txt .bnn-text{font-size:2rem; line-height:1.4em; }
  .tbbanner .swiper-pagination{ bottom:25px; }
} 
@media (max-width: 560px){
  .tbbanner .bnn-wrap { max-height:550px; min-height:auto;}
  .tbbanner .swiper-slide .tbinner{padding: 0 15px;}
  .tbbanner .swiper-slide .slider-txt{ top:auto; bottom:100px; transform: translateY(0); }
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:3rem;}
  .tbbanner .swiper-slide .slider-txt .bnn-text{font-size:1.8rem; }
  .tbbanner .swiper-slide .slider-txt.center {text-align: right;}
  
}
@media (max-width: 420px){

}