@charset "utf-8";
/* banner__05a.css */
.banner__05a{ position:relative; height:100vh; max-height:1000px; min-height:620px; margin:0 auto;}

.banner__05a .winload{ position:absolute; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; z-index:2; transition:opacity 1s;}
.banner__05a .winload.loaded{ opacity: 0;}

.banner__05a .swiper-container{ height:100%; overflow: hidden; }
.banner__05a .swiper-wrapper{ height:100%; }
.banner__05a .swiper-slide{ position:relative; height:100%; overflow: hidden; }
@media (max-width: 768px){
  .banner__05a{ height:620px;}
}

.banner__05a .bnnBgImg{ position:absolute; top:50%; left:50%; height:100%; width:100%; transform:translate(-50%, -50%); background-size: cover; background-repeat: no-repeat;background-position:center center; }

.coverDim{ background:rgba(0,0,0,.4); } /* 나머지 사항은 newbiibasic.css에 */


/* 슬라이드되고 배너 글씨들 애니메이션 */ 
.banner__05a .sliderCont .line1{transition-delay:.7s;}
.banner__05a .sliderCont .line2{transition-delay:1.1s;}
.banner__05a .sliderCont .line3{transition-delay:1.5s;}

.banner__05a .left-right{
  opacity:0; transform:translateX(-40px); transition-property: opacity, transform; transition-duration: .9s, .7s; transition-timing-function:linear;  will-change: transform; will-change: opacity;
}
.banner__05a .swiper-slide.swiper-slide-active .left-right{opacity:1; transform:translateX(0);}

.banner__05a .down-up{  opacity:0; transform:translateY(40px); transition-property: opacity, transform; transition-duration: .9s, .7s; transition-timing-function:linear;  will-change: transform; will-change: opacity;}
.banner__05a .swiper-slide.swiper-slide-active .down-up{opacity:1; transform:translateY(0);}



/* 배너 폰트 기본 */
.banner__05a .sliderCont .left{text-align: left;}  
.banner__05a .sliderCont .right{text-align: right;}  
.banner__05a .sliderCont .center{text-align: center;}
.banner__05a .sliderCont {width:100%; position:absolute; bottom:18%; left:0; }
.banner__05a .sliderCont p {word-break: keep-all;}

@media (max-width: 768px){
  .banner__05a .bnnBtnWrap{ margin-top:30px; }
} 
@media (max-width: 560px){
  .banner__05a .sliderCont .left,
  .banner__05a .sliderCont .right{text-align: center;} 
  .banner__05a .bnnBtnWrap{ margin-top:20px; }
}

/* bulletBasic01 -- 배너 pagination 기본타입 */
.banner__05a .pagination.tbinner{position:absolute; bottom:10%; height:50px; left:50%; transform: translateX(-50%); z-index: 1;}
.banner__05a .pagination .bulletWrap{position:relative;}

.banner__05a .swiper-pagination.bulletBasic01{ left:5px; text-align: left;}
.banner__05a .swiper-pagination.bulletBasic01 .swiper-pagination-bullet{background:transparent; width:8px; height:8px; border-radius: 14px; margin:0 7px; border:2px solid #fff; opacity:.2; transition:width .5s}
.banner__05a .swiper-pagination.bulletBasic01 .swiper-pagination-bullet:first-child{margin-left:0;}

.banner__05a .swiper-pagination.bulletBasic01 .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#fff; width:16px; height:6px; opacity:1; margin-bottom:1px; }

  @media (max-width: 768px){
    .banner__05a .swiper-pagination.bulletBasic01{ bottom:25px; }
    .banner__05a .swiper-pagination.bulletBasic01 .swiper-pagination-bullet{width:8px; height:8px; margin:0 5px;}
    .banner__05a .pagination.tbinner{bottom:2em;}
  }

  @media (max-width: 560px) {
    .banner__05a .swiper-pagination.bulletBasic01 {left: 0; bottom:0; text-align: center;}
    .banner__05a .pagination.tbinner {bottom: 0em; }
    .banner__05a .sliderCont {bottom:11%;}
  }

.banner__05a .pagination{ transition:opacity 1s 1.8s; opacity: 0;}
.banner__05a .pagination.loaded{opacity: 1; }


.banner__05a .banner-progressbar{ position:absolute; bottom:0; left:0; width:100%; height:7px; background:rgba(255,255,255,.2); z-index: 1;}
.banner__05a .progress{position:absolute; bottom:0; left:0; width:0; height:100%; background:#3a8afd; transition:width 4.5s; will-change: width;}

.banner__05a .progress.active {
  animation: progressGrow 4.5s linear forwards;
}

@keyframes progressGrow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}


/* scroll-down */
.scroll-down{ z-index:1; position:absolute; bottom:0; left:calc(50% + 780px); transform:translateX(-50%); text-align: center; display: flex; flex-wrap: wrap;}
.scroll-down .scroll-line{ display:inline-block; width:100%;}
.scroll-down .scroll-line{ position:relative; }
  .scroll-down .scroll-line .standard{ width:1px; height:100px; display:inline-block; position:relative; background-color:rgba(255,255,255,.3)}
  .scroll-down .scroll-line .standard::after{ position:absolute; top:0; left:0; width:100%; height:0%; animation:progress-scrollLine 2.5s infinite linear; background-color:#fff; content:''; }

  @media (max-width: 768px){
    .scroll-down{display:none}
  }

  @keyframes progress-scrollLine{
    0%{
      height:0%;
    }
    100%{
      height:100%;
    }
  }



  @media screen and (max-width: 1024px),(max-height: 800px){
    .banner__05a.fp-auto-height.fp-section {width: 100%; aspect-ratio: 16 / 9; min-height:650px !important; height:min-content !important; }
  }