@charset "UTF-8";

.wrap_service{background:url(/sites/kr/images/main/bg_1.jpg) no-repeat center;background-size:cover;padding:60px 0;}
.wrap_service .container{max-width:1550px;margin: 0 auto;position:relative;}

/*슬라이드*/
.wrap_service ul{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.wrap_service li{text-align:center;border:1px solid rgba(255,255,255,0.3);margin-left:-1px;margin-top:-1px;}
.wrap_service li a{display:block;}
.wrap_service li span.wrap_img{display:inline-block;padding:30px 5px 20px 5px;}
.wrap_service li img{display:inline-block;}
.wrap_service li p{font-family:'Noto Regular';font-size:22px;color:rgba(255,255,255,1);line-height:1;text-align:center;padding:0 5px 30px 5px;}
.wrap_service li p.text_1{}
.wrap_service li p.text_2{display:none;}

/*공통*/
.wrap_service .numbering,
.wrap_service .numbering span,
.wrap_service .control,
.wrap_service .control .container,
.wrap_service .playstop,
.wrap_service .paging,
.wrap_service .paging ul,
.wrap_service .paging li,
.wrap_service .paging button,
.wrap_service .prevnext .container,
.wrap_service .prevnext button{display:inline-block;}
.wrap_service .paging button,
.wrap_service .playstop button,
.wrap_service .prevnext button{text-indent:-9999px;}

/*넘버링*/
.wrap_service .numbering{display:none;}
.wrap_service .numbering span{}
.wrap_service .numbering .now{}
.wrap_service .numbering .total{}

/*컨트롤*/
.wrap_service .control{display:none;}
.wrap_service .control .container{}
	/*페이징*/
	.wrap_service .paging{}
	.wrap_service .paging ul{}
	.wrap_service .paging li{}
	.wrap_service .paging button{}
	/*재생정지*/
	.wrap_service .playstop{}
	.wrap_service .playstop button{}
	.wrap_service .playstop button.play{}
	.wrap_service .playstop button.stop{}
	.wrap_service .playstop button.on{}

/*이전다음*/
.wrap_service .prevnext{display:none;}
.wrap_service .prevnext .container{}
.wrap_service .prevnext button{}
.wrap_service .prevnext button.prev{}
.wrap_service .prevnext button.next{}

/*펼쳐보기버튼*/
.wrap_service .btn{text-align:center;}
.wrap_service .btn a{display:inline-block;text-align:center;color:#FFF;font-size:18px;font-family:'Noto Regular';width:183px;height:42px;padding-top:8px;}
.wrap_service .btn a:after{content:"";display:inline-block;width:8px;height:13px;margin-left:10px;vertical-align:0;background:url(/sites/style_guide/images/common/arrow_2_w.png) no-repeat center;transform:rotate(90deg);}
.wrap_service .btn a.active:after{transform:rotate(-90deg);transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);}

/*타이틀*/
.wrap_service h3{text-align:center;color:#FFF;font-size:42px;font-family:'Noto Bold';padding-bottom:35px;line-height:1;}

@media all and (max-width:1024px) {
	.wrap_service{padding:30px 0;}
	.wrap_service .container{max-width:96%;}
}
@media all and (max-width:1024px) {
	.wrap_service h3{font-size:30px;padding-bottom:30px;}
	.wrap_service li span.wrap_img{max-width:55px;}
	.wrap_service li p{font-size:17px;}
}
@media all and (max-width:768px) {
	.wrap_service h3{font-size:25px;}
	.wrap_service li span.wrap_img{max-width:45px;padding-top:15px;padding-bottom:10px;}
	.wrap_service li p{font-size:16px;padding-bottom:15px;}
}
@media all and (max-width:420px) {
	.wrap_service li span.wrap_img{display:none;}
	.wrap_service li p{padding:12px 5px;}
}


/*노출조절************************************************************/
@media all and (min-width:769px) {
	.wrap_service li{width:16.66666%;}
	.wrap_service li:nth-child(n+13){display:none;}
	.wrap_service.active li:nth-child(n+13){display:block;}
}
@media all and (max-width:768px) {
	.wrap_service li{width:25%;}
	.wrap_service li:nth-child(n+13){display:none;}
	.wrap_service.active li:nth-child(n+13){display:block;}
}
@media all and (max-width:420px) {
	.wrap_service li{width:33.33333%;}
	.wrap_service li:nth-child(n+10){display:block;}
	.wrap_service .btn{display:none;}
}

/*HOVER효과************************************************************/
@media all and (min-width:1025px) {
	.wrap_service li a:hover{background-color:rgba(0,0,0,0.3);}
	.wrap_service li a:hover span.wrap_img{transform: rotatey(360deg);transition: all 0.7s cubic-bezier(0.2, 0, 0.3, 1);}
}