@charset "utf-8";

#mainBanner{position:relative;padding:300px 0 70px;border-radius:15px}
#mainBanner .inner{position:relative;display:flex;width:var(--main-size);margin:0 auto}

/* 대출상품 슬라이드 */
#mainBanner .slide_wrap{width:540px;height:515px;border-radius:20px}
#mainBanner .slide_wrap .bg01{background:url('./img/bg01.jpg')}
#mainBanner .slide_wrap .bg02{background:url('./img/bg03.jpg')}
#mainBanner .slide_wrap .bg03{background:url('./img/bg02.jpg')}
#mainBanner .slide_wrap a{display:block;height:100%;padding:50px}
#mainBanner .slide_wrap a span{font-size:15px;font-weight:700;color:var(--primary)}
#mainBanner .slide_wrap a p{margin-top:10px;font-size:35px;font-weight:700;color:#111;line-height:1.2;white-space:pre-line}
#mainBanner .slide_wrap .pager{position:absolute;top:230px;left:50px;bottom:unset;z-index:10}
#mainBanner .slide_wrap .pager span.on{opacity:.7}

#mainBanner .box_wrap{width:27%}
#mainBanner .box_wrap>div+div{margin-top:20px}
#mainBanner .box_wrap>div{overflow:hidden;border-radius:20px}
#mainBanner .box_wrap>div a{display:block;height:100%}
#mainBanner .box01{height:175px}
#mainBanner .box02{height:320px}
#mainBanner .left{position:absolute;top:0;left:0}
#mainBanner .left .box01{background:#e4e5e7 url('./img/l_cont_box01.jpg') no-repeat right center}
#mainBanner .left .box01 a{display:flex;align-items:center;padding-left:30px}
#mainBanner .left .box02{background:#e4e5e7 url('./img/l_cont_box02.jpg') no-repeat;background-size:cover}
#mainBanner .left .box02 a{display:flex;flex-direction:column;justify-content:space-between;padding:30px}
#mainBanner .left .box02 a:hover span{color:#111;background:#fff}
#mainBanner .left .box02 dt{color:#fff}
#mainBanner .left .box02 dd{color:#fff}
#mainBanner .left .box02 span{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px;color:#fff;background:rgba(0,0,0,.5);transition:all .3s}
#mainBanner .left dt{font-size:23px;font-weight:700;color:#111}
#mainBanner .left dd{margin-top:3px;font-size:16px;font-weight:500;color:rgba(0,0,0,.5);line-height:1.2;white-space:pre-line}
#mainBanner .right{position:absolute;top:0;right:0}
#mainBanner .right .box01 a{overflow:hidden;background:#e4e5e7 url('./img/r_cont_box02.jpg') no-repeat center;transition:all .3s}
#mainBanner .right .box01 a:hover{transform:scale(1.1)}

#mainBanner .lt_area{overflow:hidden;position:absolute;width:var(--main-size);z-index:10;top:-50px;display:flex;align-items:center}
#mainBanner .lt_area>p{width:65px;font-size:17px;font-weight:700;color:#111}
#mainBanner .lt_area .ntc{width:90%}
#mainBanner .lt_area .ntc ul{transition-timing-function:linear}
#mainBanner .lt_area .ntc a{display:flex}
#mainBanner .lt_area .ntc a span{display:inline-block;margin-right:5px;padding:0 10px;border:1px solid #e1e1e1;border-radius:50px;font-size:14px;font-weight:700;color:#aaa}
#mainBanner .lt_area .ntc a p{font-size:15px;font-weight:500;color:#777}