@charset "utf-8";

/* 특화기능 */
#wpSpecial{padding:100px 0;line-height:1.8;background:#eff1f4}
#wpSpecial .flex{display:flex;max-width:var(--mainsize);margin:0 auto;}
#wpSpecial .tit{padding-right:15px}
#wpSpecial .tit span{font-size:20px;font-weight:700;color:#888}
#wpSpecial .tit h2{margin-top:25px;font-size:30px;font-weight:700;color:#111;line-height:1.4;white-space:pre-line}
#wpSpecial ul{flex-shrink:0;width:50%;margin-left:auto}
#wpSpecial ul li+li{margin-top:50px;padding-top:50px;border-top:1px solid #e1e1e1}
#wpSpecial ul li a{display:flex;align-items:center;font-size:16px;line-height:1.65;color:#777}
#wpSpecial ul li a .icon{overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;width:78px;height:78px;border:1px solid var(--primary);border-radius:16px;background:var(--primary);transition:all .25s}
#wpSpecial ul li a .icon img{width:53%;transition:all .25s}
#wpSpecial ul li a .icon .on{position:absolute;opacity:0;transform:translateY(30px)}
#wpSpecial ul li a .txt{margin-left:50px}
#wpSpecial ul li a .txt h3{margin-bottom:12px;font-size:20px;font-weight:700;color:#111}
#wpSpecial ul li a svg{margin:0 35px 0 auto;color:#aaa;transition:all .25s}
@media(hover:hover){
#wpSpecial ul li a:hover svg{color:#111}
#wpSpecial ul li a:hover .icon{border:1px solid var(--primary);background:#fff}
#wpSpecial ul li a:hover .off{opacity:0;transform:translateY(-40px)}
#wpSpecial ul li a:hover .on{opacity:1;transform:translateY(0)}
}
@media(max-width:1340px){
#wpSpecial{padding:100px 15px}	
}
@media(max-width:1024px){
#wpSpecial .tit h2 { white-space:normal;word-break:keep-all}
#wpSpecial ul li a .txt{margin-left:9%}
#wpSpecial ul li a svg{margin-right:10px}
}
@media(max-width:768px){
#wpSpecial{padding:60px 15px}	
#wpSpecial .flex{display:block}
#wpSpecial .tit span{font-size:17px;font-weight:600}
#wpSpecial .tit h2{margin-top:15px;font-size:24px;line-height:1.3}
#wpSpecial ul{width:100%;margin-top:35px}
#wpSpecial ul li+li{margin-top:30px;padding-top:30px}
#wpSpecial ul li a{font-size:14px;line-height:1.6}
#wpSpecial ul li a .txt h3{margin-bottom:6px;font-size:18px}
}
@media(max-width:480px){
#wpSpecial ul li a .txt{margin-left:20px;word-break:keep-all}
#wpSpecial ul li a svg{margin:0 0 0 auto}
}