@charset "utf-8";

#atc01{position:relative;padding-top:45px;margin-bottom:80px}

/* 타이틀 */
#atc01 .tit{position:relative;height:50px;margin-bottom:40px;border-bottom:1px solid #e1e1e1;font-weight:700;color:#080a2e;font-family:'Poppins'}
#atc01 .tit p{font-size:22px}
#atc01 .tit a{display:block;position:absolute;height:100%;padding:0 15px;right:10%;bottom:-1px;font-size:12px;line-height:42px;color:#080a2e}
#atc01 .tit a:before,#atc01 .tit a:after{content:'';display:block;position:absolute;bottom:0;width:100%;height:1px;transition:width .3s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
#atc01 .tit a:before{width:100%;right:0;background:#080a2e;transition-delay:.2s}
#atc01 .tit a:after{width:0;left:0;background:#080a2e;transition-delay:0s}

/* 대출상품 */
#atc01 .pro_wrap{padding-right:10%}
#atc01 .pro_wrap:after{display:block;content:"";visibility:hidden;clear:both}
#atc01 ul.left{float:left;width:305px}
#atc01 ul.right{float:right;width:350px }
#atc01 ul li{opacity:0;display:inline-block}
#atc01 ul li a{display:block;color:#86878c}
#atc01 ul li.pro01{animation-delay:0s}
#atc01 ul li.pro02{margin-top:180px;animation-delay:.2s}
#atc01 ul li.pro03{margin-top:110px;animation-delay:.4s}
#atc01 ul li.pro04{margin:90px 0 0 60px;animation-delay:.6s}
#atc01 ul li.pro02 .img{animation-delay:.2s}
#atc01 ul li.pro04 .img{animation-delay:.4s}
#atc01 ul li.pro05 .img{animation-delay:.6s}
#atc01 ul li .img{position:relative;z-index:0}
#atc01 ul li .txt{position:relative;z-index:1;padding-left:20px;margin-top:-12px;transition:all .3s}
#atc01 ul li .txt:before{opacity:0;display:block;content:"";position:absolute;top:-25px;left:0;z-index:-1;width:75%;height:100%;background-color:#fff;transition:all .3s}
#atc01 ul li .txt p{font-size:19px;color:#080a2e;font-family:'notokr-medium'}
#atc01 ul li .txt span{display:block;padding:10px 0;font-size:12px;font-weight:600;letter-spacing:0;color:#2340c3;font-family:'Poppins'}
#atc01 ul li .txt .wbk{word-break:keep-all}

@media(hover:hover){
#atc01 .tit a:hover:before{width:0;transition-delay:0s}
#atc01 .tit a:hover:after{width:100%;transition-delay:.2s}  
#atc01 ul li:hover .txt{transform:translateY(-10px)}
#atc01 ul li:hover .txt:before{opacity:1}
}
@media(max-width:1700px){
#atc01 .tit a{right:5%}
#atc01 .pro_wrap{padding-right:5%}
}
@media(max-width:1480px){
#atc01 ul.left{width:48%}	
#atc01 ul.right{width:50%}
#atc01 ul .img img{width:100%}
}
@media(max-width:1024px){
#atc01 .tit a{right:0}
#atc01 .pro_wrap{padding:0}
#atc01 ul li.pro02{margin-left:20px}
}
@media(max-width:480px){
#atc01{margin-bottom:60px}	
#atc01 ul li .txt{padding-left:10px}
#atc01 ul li.pro02{margin:100px 0 0 5px}
#atc01 ul li.pro03{margin-top:40px}
#atc01 ul li.pro04{margin-left:5px}
}