@charset "utf-8";
/* banner__03.css */
.banner__03{ position:relative; height:100vh; max-height:1000px; min-height:620px; margin:0 auto;}
.banner__03 .swiper-container{ height:100%; overflow: hidden; }
.banner__03 .swiper-wrapper{ height:100%; }
.banner__03 .swiper-slide{ position:relative; height:100%; overflow: hidden; }
@media (max-width: 768px){
  .banner__03{ height:620px;}
}
/* bnnBgImg.scale -- 슬라이드 배경이미지 컸다가 작아지는  */
.banner__03 .bnnBgImg{ position:absolute; top:50%; left:50%; height:100%; width:100%; background-size: cover; background-repeat: no-repeat;background-position:center center;  transition:transform 3s ease-out; -webkit-transition:transform 3s ease-out;}
.banner__03 .bnnBgImg.scale {transform:translate(-50%, -50%) scale(1.2);}
.banner__03 .swiper-slide.swiper-slide-active .bnnBgImg.scale{ transform:translate(-50%, -50%) scale(1); }

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

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

.banner__03 .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__03 .swiper-slide.swiper-slide-active .down-up{opacity:1; transform:translateY(0);}

/* 배너 폰트 기본 */
.banner__03 .sliderCont .left{text-align: left;}  
.banner__03 .sliderCont .right{text-align: right;}  
.banner__03 .sliderCont .center{text-align: center;}
.banner__03 .sliderCont{width:100%; position:absolute; top:47%; left:50%; transform:translate(-50%, -40%); color:#fff;}

.banner__03 .sliderCont h1{font-size: 8rem; line-height:1.3em;  font-weight: 700; margin-bottom:25px; word-break: keep-all;}
.banner__03 .sliderCont .smallpoint{ padding-left:5px; font-size :1.8em; line-height:1.6em; font-weight: 600; color:#F57D3D; }
.banner__03 .sliderCont h5{font-size:2.4rem; line-height:1.6em; font-weight: 300;  }
.banner__03 .bnnBtnWrap{margin-top:40px;}

@media (max-width: 768px){
  .banner__03 .sliderCont h1{ font-size: 5rem;}
  .banner__03 .sliderCont h5{ font-size:2rem; }
  .banner__03 .bnnBtnWrap{ margin-top:30px; }
} 
@media (max-width: 560px){
  .banner__03 .sliderCont .left,
  .banner__03 .sliderCont .right{text-align: center;} 
  .banner__03 .sliderCont h1{ font-size: 3.6rem;}
  .banner__03 .sliderCont h5{ font-size:1.6rem; }
  .banner__03 .bnnBtnWrap{ margin-top:20px; }
}

/* swiper-controler02 */
.swiper-controler02{ z-index:100; color:#fff; position:absolute; width:100%; bottom:50px;left:50%; transform:translateX(-50%); text-align:left;}
.swiper-controler02 .paginate_wrap{display:flex; align-items: center;}
.swiper-controler02 .paginate{display:inline-block; width:auto;}
.swiper-controler02 .swiper-pagination-clickable .swiper-pagination-bullet{margin:13px; width:10px; height:10px; background-color:#fff; opacity:.3}
.swiper-controler02 .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1}

.swiper-controler02 .circleArea{ position:relative; display:inline-block; width: 80px; height:80px; margin-right:25px; cursor: pointer;}
.swiper-controler02 .circleArea::after,
.swiper-controler02 .circleArea::before{ width:30px; height:30px; top:50%; left:50%; transform:translate(-50%,-50%); position:absolute; background-repeat: no-repeat; background-position:center; content:"";}
.swiper-controler02 .circleArea::after{ background-image:url('./play_white.svg'); }
.swiper-controler02 .circleArea::before{ background-image:url('./pause_white.svg'); }
.swiper-controler02 .circleArea.pause::after{display:none;}
.swiper-controler02 .circleArea.play::before{display:none;}

.swiper-controler02 .circleWrap{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; }
.swiper-controler02 .circle {opacity: 1; stroke: rgba(255,255,255,0.5); fill: none; stroke-width: 1; stroke-dasharray: 100; }

.swiper-controler02 .circle_anime{ opacity: 0; fill: none; }
  .swiper-controler02 .circleArea.play .circle_anime,
  .swiper-controler02 .circleArea.play .circle_anime.on{opacity: 0;}
.swiper-controler02 .circleArea .circle_anime.on{ opacity: 1; stroke: rgba(255,255,255,.9); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 0; animation: dash 4.5s linear forwards; }

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}


@media (max-width: 768px){
  .swiper-controler02{ bottom:40px; }
  .swiper-controler02 .swiper-pagination-clickable .swiper-pagination-bullet{margin:8px; }
  .swiper-controler02 .circleArea{ width: 55px; height:55px; margin-right:15px;}

}



/* scroll-down */
.scroll-down{ z-index:1; position:absolute; bottom:0; left:50%; 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%;
    }
  }