@charset "utf-8";

#mkCs{max-width:var(--mainsize);margin:150px auto}
#mkCs .mb_tit2{margin-bottom:100px;font-size:35px;font-weight:700;color:#111;white-space:pre-line}

#mkCs .cs_bnr>ul{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
#mkCs .link_box{overflow:hidden;border-radius:13px}
#mkCs .link_box ul{display:flex;font-weight:700}
#mkCs .link_box ul li+li{position:relative;margin-left:13px;padding-left:13px}
#mkCs .link_box ul li+li:before{position:absolute;content:'';left:0;top:50%;width:1px;height:65%;background:rgba(0,0,0,20%);transform:translateY(-50%)}
#mkCs .link_box a{display:flex;justify-content:space-between;flex-direction:column;height:100%;padding:50px 11%}
#mkCs .link_box p{font-size:25px;font-weight:300;white-space:pre-line;word-break:keep-all}
#mkCs .link_box p span{font-weight:700}
#mkCs .link_box.pale{position:relative;background:var(--primary10) url(/sh_img/include/mk_cs/img/box_img01.png) no-repeat 85% 85%}
#mkCs .link_box.deep{position:relative;background:var(--primary) url(/sh_img/include/mk_cs/img/box_img02.png) no-repeat 150% 100%}
#mkCs .link_box.deep li+li:before{background:rgba(255,255,255,50%)}
#mkCs .link_box.deep a{color:#fff}
#mkCs .link_box.deep .go{color:var(--primary);background:#fff}
#mkCs .link_box .go{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50px;color:#fff;background:var(--primary);transition:all .3s}
#mkCs .cs{position:relative;padding:30px;border-radius:16px;border:1px solid #e1e1e1;line-height:1.8;text-align:center}
#mkCs .cs .tit{font-size:16px;font-weight:700;color:#111}
#mkCs .cs .tel{margin:10px 0 10px;font-size:27px;font-weight:800;color:var(--primary)}
#mkCs .cs .info li{word-break:keep-all}
#mkCs .cs .info li span{margin-right:8px;font-weight:600;color:#111}
#mkCs .cs .info li i{margin:2px 0 0 5px;font-size:12px;font-style:normal}
#mkCs .cs .account{padding:20px 8%;margin-top:15px;border-radius:12px;text-align:left;background:var(--pale)}
#mkCs .cs .account li{display:flex;align-items:center}
#mkCs .cs .account li span{width:70px;font-weight:700}
#mkCs .cs .account li p{display:flex;align-items:center;width:calc(100% - 70px);font-weight:700;color:#111}
#mkCs .cs .account li .num{font-size:16px} 
#mkCs .cs .account li a{display:flex;align-items:center;height:25px;padding:0 10px 0 12px;margin-left:8px;border-radius:15px;border:1px solid #e1e1e1;font-size:13px;font-weight:600;line-height:23px;color:#999;background:#fff}
#mkCs .cs .account li a svg{width:14px;height:14px;margin-left:3px}

@media(hover:hover){
#mkCs .link_box a:hover .go{background:var(--dark)}
}

@media(max-width:1400px){
#mkCs{margin:100px 15px}
#mkCs .link_box ul{flex-wrap:wrap;font-size:13px}
#mkCs .link_box ul li+li{margin-left:10px;padding-left:10px}
#mkCs .cs .account li p{display:block}
#mkCs .cs .account li p a{width:max-content;margin:0}
}
@media(max-width:1024px){
#mkCs .mb_tit2{margin-bottom:45px;font-size:30px}
#mkCs .cs_bnr>ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0}
#mkCs .link_box{width:49%}
#mkCs .link_box a{padding:30px}
#mkCs .link_box p{padding:20px 0;font-size:20px}
#mkCs .cs{margin-top:20px;flex-grow:3}
#mkCs .cs .info{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
#mkCs .cs .account{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
#mkCs .cs .account li{gap:8px}
#mkCs .cs .account li span{width:auto}
#mkCs .cs .account li p{display:flex;gap:10px; white-space:nowrap}
}
@media(max-width:768px){
#mkCs{margin:60px 15px}
#mkCs .mb_tit2{margin-bottom:30px;font-size:25px;text-align:center}
#mkCs .link_box.pale{background-size:120px !important}
#mkCs .link_box.deep{background-size:230px !important}
#mkCs .cs .info{display:block}
#mkCs .cs .account{display:block;padding:20px}
}
@media(max-width:630px){
#mkCs .link_box{width:100%}
#mkCs .link_box p{white-space:normal}
#mkCs .cs_bnr>ul{flex-direction:column;gap:10px}
#mkCs .cs{margin-top:0}
#mkCs .link_box.pale{background-position:95% 85% !important}
#mkCs .link_box.deep{background-position:110% 100% !important}
}
@media(max-width:480px){
#mkCs{margin:60px 15px}
#mkCs .mb_tit2{margin-bottom:40px;font-size:24px}
#mkCs .mb_tit2{font-size:25px}
#mkCs .link_box a{padding:25px}

}
@media(max-width:380px){
#mkCs .cs{padding:30px 15px}
}