@charset "utf-8";

/* 무료서비스 */
#wpFreeService{overflow:hidden;padding:100px 0;line-height:1.8;background:#eff1f4}
#wpFreeService .tit{margin-bottom:60px;text-align:center;font-weight:700}
#wpFreeService .tit span{font-size:20px;color:var(--primary)}
#wpFreeService .tit p{font-size:32px;line-height:1.4;color:#111;white-space:pre-line;word-break:keep-all}
#wpFreeService .benefit {overflow:hidden;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:50px;max-width:var(--mainsize);height:auto;margin:0 auto}
#wpFreeService .benefit li{overflow:hidden;position:relative;width:100%;height:auto;border-radius:16px;background:#fff}
#wpFreeService .benefit li img{width:100%}
#wpFreeService .benefit li img:not(.empt){transform:translateY(-30px)}
#wpFreeService .benefit li video{width:100%;height:100%}
#wpFreeService .benefit li .txt{position:absolute;z-index:1;bottom:0;left:0;width:100%;padding:40px 0;font-weight:700;line-height:1.65;color:#111;text-align:center}
#wpFreeService .benefit li .txt p{font-size:20px}
#wpFreeService .benefit li .icon{transform:translateY(-30px)}
#wpFreeService .benefit li a{opacity:0;display:flex;flex-flow:column;justify-content:center;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;padding:35px;color:rgba(255,255,255,.6);line-height:1.65; text-align:center;word-break:keep-all;background:var(--primary);transition:all .25s}
#wpFreeService .benefit li a span{margin-top:auto;font-size:15px;font-weight:700;color:#fff}
#wpFreeService .benefit li a h3, #wpFreeService .benefit li a p{margin-bottom:15px;font-size:20px;font-weight:700;color:#fff}
#wpFreeService .benefit li a div{white-space:pre-line}
#wpFreeService .benefit li a svg{position:absolute;right:35px;top:35px;color:#fff}

@media(hover:hover){
#wpFreeService .benefit li:hover a{opacity:1}
}
@media(max-width:1024px){
#wpFreeService .benefit{padding:0 50px;gap:20px}
#wpFreeService .benefit li .txt p{padding:0 15px;font-size:16px}
}
@media(max-width:768px){
#wpFreeService{padding:60px 15px}
#wpFreeService .tit{margin-bottom:30px;padding-right:15px}
#wpFreeService .tit span{font-size:16px}
#wpFreeService .tit p{font-size:24px;letter-spacing:-.5px}
#wpFreeService .benefit{grid-template-columns:repeat(3,1fr);padding:0}
}
@media(max-width:480px){
#wpFreeService .tit p{font-size:19px;white-space:normal}
#wpFreeService .benefit{grid-template-columns:repeat(2,1fr);gap:10px}
#wpFreeService .benefit li .txt{padding:15px 0}
#wpFreeService .benefit li .txt p{font-size:14px}
#wpFreeService .benefit li img:not(.empt){transform:translateY(-20px)}
}