@charset "utf-8";

#mkService *{word-break:keep-all}
#mkService .wh_bg{max-width:var(--mainsize);margin:0 auto;padding:150px 0;text-align:center}
#mkService .wh_bg h1{margin-bottom:90px;font-size:52px;font-weight:700;color:#111;line-height:1.25}
#mkService .wh_bg h1 span{color:var(--primary)}
#mkService .mb_tit{font-size:34px;font-weight:700;color:#111;white-space:pre-line}
#mkService .mb_tit span{color:var(--primary)}
#mkService .wh_bg ul{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:40px}
#mkService .wh_bg ul li{display:flex;justify-content:center;align-items:center;height:60px;padding:0 30px;border-radius:50px;font-size:20px;font-weight:700;color:var(--primary);background:var(--primary10);transition:all .3s}

#mkService .top_txt{padding:100px 0 375px;font-size:20px;text-align:center;background:var(--primary10)}
#mkService .dot{display:table;margin:0 auto 50px}
#mkService .dot li{width:10px;height:10px;border-radius:50px;background:var(--primary)}
#mkService .dot li+li{margin-top:10px}
#mkService .dot li:nth-child(1){opacity:.3}
#mkService .dot li:nth-child(2){opacity:.6}
#mkService .top_txt div h2{margin-bottom:40px;font-size:42px;font-weight:700;color:#111}
#mkService .top_txt .b_txt{padding-top:70px;font-size:36px;font-weight:700;color:#111}
#mkService .top_txt .b_txt span{display:inline-block;position:relative;font-size:42px;color:var(--primary)}
#mkService .top_txt .b_txt span:before{position:absolute;content:'';top:-25px;left:50%;width:25px;height:21px;transform:translateX(-50%);background:url(/sh_img/include/mk_service/img/check.png) no-repeat}

#mkService .svc_list{position:relative;overflow:hidden;z-index:10}
#mkService .svc_list .pl{white-space:pre-line}
#mkService .svc_slide{margin-top:-310px;padding-top:20px}
#mkService .svc_slide li{border-radius:13px;text-align:center;box-shadow:0px 0px 13px rgba(0,0,0,10%);transition:all .3s}
#mkService .svc_slide li .view{position:relative}
#mkService .svc_slide li .view img{width:100%}
#mkService .svc_slide li .view:before{opacity:0;position:absolute;left:50%;top:55%;z-index:100;content:'';width:80px;height:80px;border-radius:80px;color:#fff;transform:translate(-50%, -50%);background:var(--primary70) url(/sh_img/include/mk_service/img/search.png) no-repeat center;transition:all .3s}
#mkService .svc_slide li .wrap{padding:30px;border-radius:13px 13px 0 0;background:#fff;transition:all .3s}
#mkService .svc_slide li a .txt{padding:30px 15px;border-top:1px solid #e1e1e1;border-radius:0 0 13px 13px;font-size:15px;color:#777;background:#fff}
#mkService .svc_slide li .txt h4{margin-bottom:15px;font-size:20px;font-weight:700;color:#111;transition:all .3s}

#mkService .btm_txt{margin-top:-151px;padding:250px 0 100px;text-align:center;color:#fff;background:var(--primary) url(/sh_img/include/mk_service/img/zero.png) no-repeat;background-size:cover}
#mkService .btm_txt p{margin-bottom:30px;font-size:28px;font-weight:700;white-space:pre-line}
#mkService .btm_txt span{font-size:25px;font-weight:700}
#mkService .btm_txt b{margin-right:5px;font-style:normal;font-size:55px;font-weight:700}

@media(hover:hover){
#mkService .wh_bg ul li:hover{color:#fff;background:var(--primary)}
#mkService .svc_slide li:hover{transform:translateY(-20px)}
#mkService .svc_slide li a:hover .view:before{opacity:1;top:50%}
#mkService .svc_slide li a:hover .wrap{filter:brightness(.5);}
#mkService .svc_slide li a:hover p{color:var(--primary)}
}

@media(max-width:1400px){
#mkService .wh_bg h1{font-size:46px}
#mkService .mb_tit{font-size:32px}
#mkService .wh_bg ul li{font-size:18px}
#mkService .top_txt div p{font-size:30px}
#mkService .top_txt .b_txt{font-size:35px}
}
@media(max-width:1024px){
#mkService .wh_bg{padding:120px 0}
#mkService .wh_bg h1{margin-bottom:100px}
#mkService .mb_tit{font-size:28px}
#mkService .svc_slide li .txt h4{font-size:18px}
#mkService .btm_txt{margin-top:-148px}
#mkService .btm_txt p{font-size:25px}
}
@media(max-width:768px){
#mkService .wh_bg{padding:95px 15px}
#mkService .wh_bg h1{margin-bottom:40px;font-size:28px}
#mkService .wh_bg ul{flex-wrap:wrap;margin-top:30px;gap:5px}
#mkService .wh_bg ul li{height:40px;padding:0 20px;font-size:15px}
#mkService .mb_tit{font-size:22px;white-space:normal}
#mkService .top_txt{padding:75px 0 350px;font-size:18px}
#mkService .top_txt div p{margin-bottom:5px;font-size:22px}
#mkService .top_txt div h2{margin-bottom:20px;font-size:28px}
#mkService .top_txt .b_txt{margin-top:0;padding-top:40px;font-size:28px}
#mkService .top_txt .b_txt span{font-size:32px;line-height:1}
#mkService .top_txt .b_txt span:before{display:none}
#mkService .svc_slide li .wrap{padding:12px}
#mkService .svc_slide li a .txt{padding:20px 0;font-size:14px}
#mkService .svc_slide li .txt h4{margin-bottom:5px;font-size:16px}
#mkService .btm_txt{margin-top:-112px;padding:180px 0 70px}
#mkService .btm_txt p{font-size:22px}
}
@media(max-width:480px){
#mkService .wh_bg{padding:65px 15px}
#mkService .wh_bg h1{margin-bottom:40px;font-size:28px}
#mkService .mb_tit{font-size:18px}
#mkService .dot{margin:0 auto 30px}
#mkService .top_txt{font-size:16px}
#mkService .top_txt div h2{font-size:26px}
#mkService .top_txt .b_txt{padding:30px 15px 0;font-size:22px}
#mkService .top_txt .b_txt span{font-size:24px}
#mkService .btm_txt{padding:160px 0 40px}
#mkService .btm_txt p{padding:0 15px;font-size:20px}
#mkService .btm_txt b{font-size:40px}
}
@media(max-width:380px){
#mkService .svc_slide li a .txt{font-size:13px}
#mkService .btm_txt{margin-top:-110px;padding:155px 0 45px}
#mkService .btm_txt p{font-size:18px}
}