@charset "utf-8";

#mainBanner{position:relative;padding:300px 0 70px}
#mainBanner .inner{position:relative;display:flex;max-width:var(--main-size);margin:0 auto}
#mainBanner *{word-break:keep-all}

/* 대출상품 슬라이드 */
#mainBanner .slide_wrap{width:540px;height:515px;border-radius:20px}
#mainBanner .slide_wrap li{position:relative}
#mainBanner .slide_wrap li:after{position:absolute;content:'';bottom:0;right:0;width:100%;height:100%;background-position:right bottom;background-repeat:no-repeat}
#mainBanner .slide_wrap .bg01{background:#d7e8f8}
#mainBanner .slide_wrap .bg01:after{background-image:url('./img/bg01.png')}
#mainBanner .slide_wrap .bg02{background:#fef8e8}
#mainBanner .slide_wrap .bg02:after{background-image:url('./img/bg02.png')}
#mainBanner .slide_wrap .bg03{background:#ccbecb}
#mainBanner .slide_wrap .bg03:after{background-image:url('./img/bg03.png')}
#mainBanner .slide_wrap a{position:relative;z-index:10;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 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 .lt_area{overflow:hidden;position:absolute;max-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;width:50px;margin-right:5px;text-align:center;border:1px solid #e1e1e1;border-radius:50px;font-size:14px;font-weight:700;color:#aaa}
#mainBanner .lt_area .ntc a p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;color:#777}

@media(hover:hover){
#mainBanner .left .box02 a:hover span{color:#111;background:#fff}
#mainBanner .right .box01 a:hover{transform:scale(1.1)}
}
/* 반응형 [s] */
@media (max-width:1024px){
#mainBanner{padding:70px 15px;background:#f5f5f5}
#mainBanner .inner{flex-direction:column}
#mainBanner .slide_wrap{width:100%;height:220px;margin-bottom:20px}
#mainBanner .slide_wrap a p{font-size:30px;white-space:normal}
#mainBanner .slide_wrap .pager{top:145px}
#mainBanner .slide_wrap li:after{background-size:35% !important;background-position:center right !important}
#mainBanner .box_wrap{width:49%}
#mainBanner .left{position:unset}
#mainBanner .left dt{font-size:20px}
#mainBanner .right{top:unset;right:0;bottom:0}
#mainBanner .right .box01 a{background-size:cover}
#mainBanner .box01{height:150px}
#mainBanner .lt_area{position:unset;margin-bottom:10px}
}
@media (max-width:768px){
#mainBanner .lt_area>p{font-size:16px}
#mainBanner .lt_area .ntc a p{font-size:14px}
#mainBanner .lt_area .ntc a span{font-size:13px}
#mainBanner .left dt{font-size:18px}
#mainBanner .left dd{font-size:15px}
}
@media (max-width:580px){
#mainBanner{padding:30px 15px 70px}
#mainBanner .slide_wrap{height:350px}
#mainBanner .slide_wrap li:after{background-size:contain !important;opacity:.5}
#mainBanner .box_wrap{position:unset;width:100%}
#mainBanner .box_wrap>div+div{margin-top:10px}
#mainBanner .left .box02 a{position:relative}
#mainBanner .left .box02{height:150px;background-position:center}
#mainBanner .left .box02 span{position:absolute;top:50%;right:30px;transform:translateY(-50%)}
#mainBanner .right{margin-top:10px}
#mainBanner .slide_wrap a{padding:50px 40px}
#mainBanner .slide_wrap a p{white-space:pre-line}
#mainBanner .slide_wrap .pager{top:220px;left:40px}
}
@media (max-width:390px){
#mainBanner .slide_wrap{height:280px}
#mainBanner .slide_wrap a{padding:50px 30px}
#mainBanner .slide_wrap a p{font-size:25px}
#mainBanner .slide_wrap .pager{left:30px}
}
/* 반응형 [e] */