@charset "utf-8";
.service__05 .top_tit {display:flex; flex-wrap:wrap;}
.service__05 .top_tit .titleArea {flex-grow:1; padding-right:0;}
.service__05 .top_tit .catebtn_wrap {width:120px; position:relative;}
  .service__05 .top_tit .swiper-button { position:absolute; bottom:5px; right:0;}
.service__05 .top_tit .swiper-button-next,
.service__05 .top_tit .swiper-button-prev { opacity:1; position:relative; color:#b3b2b2; display:inline-block; left:auto; right:auto; top:auto; bottom:auto; font-size:40px; }
.service__05 .top_tit .swiper-button-prev{ margin-right:40px; }

.service__05 .swiper-pagination-progressbar{background:#ddd;}

/* < > 슬라이드 꺽쇠(?) 대신 버튼 넣고 싶을때ㅎ .php 파일에도 주석처리해둠
.service__05 .catebtn_wrap a.linkBtn{ padding:0 35px; margin:0 5px; display:inline-block; text-align:center; border-radius:50px; background-color:#ddd; line-height:50px; font-size:2rem; font-weight:400; transition:background .2s ease-out;}
.service__05 .catebtn_wrap a.linkBtn:last-child{ background-color:#2f67c9; color:#fff; }
.service__05 .catebtn_wrap a.linkBtn:hover{ background-color:#159bed; color:#fff; }
*/

@media screen and (max-width:1200px){ 
  .service__05 .top_tit .catebtn_wrap {width:90px;}
  .service__05 .top_tit .swiper-button-prev{ margin-right:15px; }
}
@media screen and (max-width:768px){ 
  .service__05 .top_tit .catebtn_wrap {width:50px;}
  .service__05 .top_tit .swiper-button{bottom:0}
  .service__05 .top_tit .swiper-button-next,
  .service__05 .top_tit .swiper-button-prev { font-size:28px; }
}
@media screen and (max-width:560px){ 
  .service__05 .top_tit .catebtn_wrap {display: none;}
}
/** swiper */
.service__05 .swiper-container{overflow: hidden;}
.service__05 .swiper-container .swiper-wrapper{height: auto;}
.service__05 .swiperWrap{position:relative; }
.service__05 .swiper-slide{width:33.3333%}
.service__05 .swiper-slide .imgLink{width:100%; height:0; padding-bottom:120%; display:block; position:relative;}
.service__05 .swiper-slide .txtWrap{  width:100%; height:100%; position:absolute; bottom:0; left:0; padding:50px 45px;  border-radius: 20px; text-wrap: nowrap; }
.service__05 .swiper-slide .txt_p{ width:100%; height:100%; display:flex; flex-wrap:wrap; align-content: space-between;}

.service__05 .swiper-slide .txt_p .bttm {width:100%; color:#fff;}

.service__05 .swiper-slide .txt_p .top.linebtn { display: inline-block !important;  position: relative;  padding: 3px 20px;  border-radius: 20px; border:1px solid #fff;  color: #fff; transition:background-color .3s, color .3s;}
.service__05 .swiper-slide:hover .txt_p .top.linebtn {  border:1px solid #fff; background-color:#fff; color: #222;}

.service__05 .swiper-slide .thum{width:100%; height:100%; position:absolute;}
.service__05 .swiper-slide .thum img{width:100%; height:100%; object-fit: cover; border-radius:20px;}

.service__05 .pagination_wrap{ position:relative; height:4px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#F57D3D}

@media screen and (max-width:560px){ 
  .service__05 .swiper-slide .txtWrap{  padding:30px 23px;  border-radius: 20px; text-wrap: nowrap; }
}