@charset "utf-8";
.service__10 { 
   position:relative; width:100%; background-color:rgba(0,0,0,.1); width:100%;  background-repeat:no-repeat; background-position:center center; background-size: cover; z-index: 0; 
}


.service__10 .swiper-slide{
  width:33.333%; background-color:rgba(255,255,255,.5); border-radius:25px; border:1px solid #ddd; transition:background-color .3s ease-out; overflow: hidden;
} 

.service__10 .swiper-slide .swipercont{ padding:40px 30px; }
.service__10 .swiper-slide .swipercont .itemtit{ transition:color .2s; }
.service__10 .swiper-slide .itemimg{ width:100%; aspect-ratio: 100 / 64; border-radius:20px; overflow: hidden; }
.service__10 .swiper-slide .itemimg img{ width:100%; height: 100%; object-fit: cover; }

/*hover 효과*/
.service__10 .swiper-slide:hover {background-color:#112c4d; box-shadow:0 2px 6px 0 rgb(0, 0, 0, 0.1); }
.service__10 .swiper-slide:hover .swipercont .itemtit{ color:#fff;  }
.service__10 .swiper-slide:hover .swipercont .summary{ color:#fff;  }


.service__10 .tagWrap {display:flex; flex-wrap:wrap;}
.service__10 .tagWrap .tag {display:inline-block; padding:5px 10px; border:1px solid #f0f6ff; background-color:#f0f6ff; font-size:1.4rem; line-height:1em; border-radius:10px; margin:0 5px 5px 0;}


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

  }
  @media screen and (max-width:768px){ 
    .service__10 .swiper-slide .swipercont{ padding:40px 15px; }
  }
  @media screen and (max-width:420px){ 
    .service__10 .swiper-slide{ width:100%; }
  }


/* bulletBasic02 -- 배너 pagination 기본타입 */
.service__10 .pageArea{}
.service__10 .swiper-pagination.bulletBasic02{ position:relative; bottom:auto; left:50%; transform: translateX(-50%);}
.service__10 .swiper-pagination.bulletBasic02 .swiper-pagination-bullet{background:#000; width:8px; height:8px; border-radius: 8px; margin:0 5px; opacity:1; transition:width .3s; opacity:.7}
.service__10 .swiper-pagination.bulletBasic02 .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:45px; background:#000; opacity:1; }

@media (max-width: 768px){
  .service__10 .swiper-pagination.bulletBasic02 .swiper-pagination-bullet{width:8px; height:8px; margin:0 3px;}
  .service__10 .swiper-pagination.bulletBasic02 .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:25px; }
}