@charset "utf-8";
.progress__02 { 
  background-image:url('./bg.jpg');
  position:relative; width:100%; background-repeat: no-repeat; background-position: center; background-size: cover; 
}
.progress__02 .ValignMiddle{ width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.progress__02 .dim_dark {
  width:100%; height:100%; background-color:rgba(0,0,0,.1); 
}
.tinybtn {display:inline-block; position: relative; padding: 3px 20px; border-radius: 20px; background-color:#ff6902; color:#fff;}
.progress__02 .tbinner_narrow{}
.progress__02 .tbinner_wrap{ position:relative;  }
.progress__02 .progressLine{ position:absolute; width:100%; height:1px; top:55%; left:0; transform: translateY(-50%); background-color: rgba(255,255,255,.4); border-radius: 1px}
  .progress__02 .progressLine::after{ width:4%; height:3px; background:#fff; top:-1px; left:10%; transform: translateX(-50%); position:absolute; content:""; border-radius: 2px; transition: left .4s ease-out;}
    .progress__02 .progressLine.slide1::after{ left:10%; }
    .progress__02 .progressLine.slide2::after{ left:30%; }
    .progress__02 .progressLine.slide3::after{ left:50%; }
    .progress__02 .progressLine.slide4::after{ left:70%; }
    .progress__02 .progressLine.slide5::after{ left:90%; }
  @media screen and (max-width:1024px){ 
    .progress__02 .progressLine{top:47%;}
    .progress__02 .progressLine::after{ display:none; }
  }
  @media screen and (max-width:768px){ 
    .progress__02 .progressLine{top:42%;}
  }
  @media screen and (max-width:560px){ 
    .progress__02 .progressLine{top:40%;}
  }
.progress__02 .swiper-slide{ width:20%; padding:50px; cursor:default} 
.progress__02 .swiper-slide i{ position:relative; display:inline-block;  }
  .progress__02 .swiper-slide:hover .content{color:#787878;}
.progress__02 .swiper-slide .iconImg{ width:65px; height:65px; }
.progress__02 .swiper-slide .subtit{position:relative; display: inline-block;}
  .progress__02 .swiper-slide .subtit::after{position:absolute; width:0; height:17px; bottom:-2px; left:50%; transform:translateX(-50%); background:#F57D3D; opacity:.4; z-index: -1; content:""; transition:width .4s ease-out;}
  .progress__02 .swiper-slide.active .subtit::after{width:104%;}
  @media screen and (max-width:1200px){ 
    .progress__02 .swiper-slide{padding:30px;}
  }
  @media screen and (max-width:1024px){ 
  }
  @media screen and (max-width:768px){ 
    .progress__02 .swiper-slide .iconImg{ width:40px; height:40px; }
  }
  @media screen and (max-width:560px){ 
    .progress__02 .swiper-slide{padding:10px;}
  }


/* bulletBasic02 -- 배너 pagination 기본타입 */
.swiper-pagination.bulletBasic02{ padding:30px 0 10px 0; position:relative; bottom:auto; left:50%; transform: translateX(-50%);}
.swiper-pagination.bulletBasic02 .swiper-pagination-bullet{background:#fff; width:12px; height:12px; border-radius: 12px; margin:0 4px; opacity:1; transition:width .3s; opacity:.7}
.swiper-pagination.bulletBasic02 .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:30px; background:#fff; opacity:1; }
@media (max-width: 768px){
  .swiper-pagination.bulletBasic02 .swiper-pagination-bullet{width:10px; height:10px; margin:0 3px;}
}
@media (max-width: 560px){
  .swiper-pagination.bulletBasic02{ padding:40px 0 10px 0;}
}