@charset "utf-8";

/* banner__01.css */
.banner__01{ position:relative; height:100vh; max-height:1000px; min-height:620px; margin:0 auto;}
.banner__01 .swiper-container{ height:100%; overflow: hidden; }
.banner__01 .swiper-wrapper{ height:100%; }
.banner__01 .swiper-slide{ position:relative; height:100%; overflow: hidden; }
@media (max-width: 768px){
  .banner__01{ height:620px;}
}
/* .bnnBgImg기본 */
.banner__01 .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__01 .bnnBgImg{transform:translate(-50%, -50%);}

/* .bnnBgImg.scale -- 슬라이드 배경이미지 컸다가 작아지는  */
.banner__01 .bnnBgImg.scale {transform:translate(-50%, -50%) scale(1.2);}
.banner__01 .swiper-slide.swiper-slide-active .bnnBgImg.scale{ transform:translate(-50%, -50%) scale(1); }

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

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

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


/* bulletBasic01 -- 배너 pagination 기본타입 */
.swiper-pagination.bulletBasic01{bottom:50px; left:50%; transform: translateX(-50%);}
.swiper-pagination.bulletBasic01 .swiper-pagination-bullet{background:transparent; width:14px; height:14px; border-radius: 14px; margin:0 7px; border:2px solid #fff; opacity:.4;}
.swiper-pagination.bulletBasic01 .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#fff; opacity:1; }
  @media (max-width: 768px){
    .swiper-pagination.bulletBasic01{ bottom:25px; }
    .swiper-pagination.bulletBasic01 .swiper-pagination-bullet{width:12px; height:12px; margin:0 5px;}
  }


/* < > */
.banner__01 .swiper-button-next,
.banner__01 .swiper-button-prev{ color:#fff; font-size:60px; }
.banner__01:hover .swiper-button-next,
.banner__01:hover .swiper-button-prev{ opacity:.6; }
.banner__01 .swiper-button-next{right:50px;}
.banner__01 .swiper-button-prev{left:50px;}
  @media screen and (max-width: 1630px){
    .banner__01 .swiper-button-next,
    .banner__01 .swiper-button-prev{display:none;}
    .banner__01 .swiper-button-next,
    .banner__01 .swiper-button-prev{ font-size:50px; }
  }

/* 배너 폰트 기본 */
.banner__01 .sliderCont .left{text-align: left;}  
.banner__01 .sliderCont .right{text-align: right;}  
.banner__01 .sliderCont .center{text-align: center;}
.banner__01 .sliderCont{width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -40%); color:#fff;}
  @media (max-width: 768px){
    .banner__01 .sliderCont h1{ font-size: 4rem;}
    .banner__01 .sliderCont h5{ font-size:2rem; }
  } 
  @media (max-width: 560px){
    .banner__01 .sliderCont .left,
    .banner__01 .sliderCont .right{text-align: center;} 
  }




/*sec01*/
.sec01 {}
.sec01 .halfWrap {display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center;}
.sec01 .halfWrap .half {}
.sec01 .halfWrap .half.txt {width:45%;}
.sec01 .halfWrap .half.img {width:50%; position:relative; border-radius:20px; overflow: hidden;} 
.sec01 .halfWrap .half.img img {width:100%;}

@media screen and (max-width:768px){
  .sec01 .halfWrap .half.txt,
  .sec01 .halfWrap .half.img {width:100%;}

  .sec01 .halfWrap .half.txt {margin-bottom:40px;}
}

/*버튼*/
.tbsec .tbbtn.btn2{ border:1px solid #000; height:60px; line-height:58px; padding:0 3em; border-radius: 60px; }
.tbsec .tbbtn.btn2 span.dot{display: inline-block; width:13px; height:10px; position:relative; transition:.5s;}
.tbsec .tbbtn.btn2 span.dot::after{ position:absolute; width:7px; height:7px; border-radius:50%; background:#000; top:calc(50% - 1px); left:0; transform:translate(-50%,-50%); content: ""; transition:width .5s;}
.tbsec .tbbtn.btn2:hover span.dot {width:23px;}
.tbsec .tbbtn.btn2:hover span.dot::after{ width:20px; height:2px; border-radius:0; }

@media screen and (max-width:768px){
  .tbsec .tbbtn.btn2{ height:46px; line-height:43px; padding:0 3em; border-radius: 46px; }
}




/*sec02*/
.fullBg {position:relative; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.fullBg::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,.7); }
.fullBg .bgtxt {position: relative; z-index: 1;}

.sec02 .iconBox {}
.sec02 .iconBox li.box {padding:55px 20px 55px; border:1px solid #fff; border-radius: 20px;}
.sec02 .iconBox li.box img {height:75px; margin:0 auto 25px;}
.sec02 .iconBox li.box p {color:#fff;}
.sec02 .iconBox li.box img.block {display:block; }
.sec02 .iconBox li.box img.hover {display:none;}
.sec02 .iconBox li.box:hover img.block {display:none;}
.sec02 .iconBox li.box:hover img.hover {display:block;}

.sec02 .iconBox li.box:hover { background-color:#fff;
}
.sec02 .iconBox li.box:hover p {color:#222;}

@media screen and (max-width:1024px){
  .sec02 .iconBox {width:90%; margin:0 auto;}
  .sec02 .nbgall.grid4{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:768px){
  .sec02 .iconBox {width:100%;}
  .sec02 .iconBox li.box {padding:45px 10px 50px; border-radius: 15px;}
}
@media(max-width: 480px){
  .sec02 .nbgall.grid4{grid-template-columns: repeat(1, 1fr); }
}



/*sec03*/
.sec03 {}

@media screen and (max-width:768px){
}




/*sec04*/
.sec04 {}
.sec04 .tbbtn.btn2{ border:1px solid #fff; color:#fff; }
.sec04 .tbbtn.btn2 span.dot::after{ background:#fff; }

.sec04.fullBg::before {content:""; background-color: rgba(0,0,0,.6); }
.sec04 .txt {padding-bottom:100px;}
/* scroll-down */
.sec04 .scroll-down{ z-index:1; position:absolute; top:50%; left:50%; transform:translate(-50%, 35%); text-align: center; display: flex; flex-wrap: wrap;}
.sec04 .scroll-down .scroll-line{ display:inline-block; width:100%;}
.sec04 .scroll-down .scroll-line{ position:relative; }
  .sec04 .scroll-down .scroll-line .standard{ width:1px; height:60px; display:inline-block; position:relative; background-color:rgba(255,255,255,.3)}
  .sec04 .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:''; }

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

@media screen and (max-width:1024px){
  .sec04 .scroll-down{ transform:translate(-50%, 10%);}
}
@media screen and (max-width:768px){
  .sec04 .scroll-down{ transform:translate(-50%, -10%);}
}
@media screen and (max-width:560px){
  .sec04 .scroll-down{ transform:translate(-50%, -35%);}
}




/*sec05*/
.sec05 {}
.sec05 .tit_half { display: flex; flex-wrap: wrap; justify-content: space-between; }

.sec05 .tit_half .tit {width:500px;}
.sec05 .tit_half .cont {width:calc(100% - 500px);}

@media screen and (max-width:1200px){
  .sec05 .tit_half .tit {width:400px;}
  .sec05 .tit_half .cont {width:calc(100% - 400px);}
}
@media screen and (max-width:1024px){
  .sec05 .tit_half {justify-content: center;}
  .sec05 .tit_half .tit {width:90%; margin-bottom:70px; text-align:center;}
  .sec05 .tit_half .cont {width:90%;}
}
@media screen and (max-width:560px){
  .sec05 .tit_half .tit {width:100%; margin-bottom:50px;}
  .sec05 .tit_half .cont {width:100%;}
}