@charset "utf-8";

/* =========================== MAIN */
#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/main/bg01.jpg')}
#mainBanner .slide_wrap .bg02{background:url('../img/main/bg03.jpg')}
#mainBanner .slide_wrap .bg03{background:url('../img/main/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/main/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/main/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/main/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}

#quick_Form{padding:30px;background:#283d88}
#quick_Form .flex{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
#quick_Form .flex h3{font-size:18px;font-weight:700;color:#fff;font-family:var(--font)}
#quick_Form .flex span{font-size:13px;font-weight:700;color:rgba(255,255,255,.5)}
#quick_Form ul li+li{margin-top:5px}
#quick_Form input[type=text]{width:100%;height:40px;padding-left:15px;border:none;border-radius:6px;font-size:14px;color:#fff;background:rgba(0,0,0,.2);font-family:var(--font)}
#quick_Form input[type=text]:focus{border:none!important;box-shadow:none}
#quick_Form .pvc_ck{display:flex;justify-content:flex-end;padding:10px 0;font-size:12px}
#quick_Form .pvc_ck a{vertical-align:middle;color:rgba(255,255,255,.5);text-decoration:underline}
#quick_Form .pvc_ck label{margin:0 3px 0 5px;color:rgba(255,255,255,.5)}
#quick_Form input[type=submit]{width:100%;height:45px;border:none;border-radius:3px;font-size:15px;font-weight:500;color:#fff;background:rgba(0,0,0,.6);font-family:var(--font)}

/* =========================== inc01 */
#atc01{padding-bottom:150px}
#atc01 .tit{width:var(--main-size);margin:0 auto}
#atc01 h3{font-size:24px;font-weight:600;font-family:var(--font)}
#atc01 .prd_slider a{position:relative;overflow:hidden;display:block;height:470px;padding:40px 15px;
border-radius:20px;color:#fff;background-size:cover}
#atc01 .prd_slider a:after{position:absolute;content:'';bottom:0;left:0;width:100%;height:0;transition:all .5s}
#atc01 .prd_slider a:hover:after{height:100%}
#atc01 .prd_slider a .txt{position:relative;z-index:10;height:100%;line-height:25px}
#atc01 .prd_slider a .txt ul{opacity:0;transition:all .5s}
#atc01 .prd_slider a:hover .txt ul{opacity:1}
#atc01 .prd_slider a:hover .row2{opacity:1}
#atc01 .prd_slider a ul{margin-top:30px;font-size:15px;font-weight:500}
#atc01 .prd_slider a ul li:before{display:inline-block;content:'';width:3px;height:3px;margin-right:7px;border-radius:50px;vertical-align:5px;background:rgba(255,255,255,.5)}
#atc01 .prd_slider a .row2{opacity:0;position:absolute;bottom:0;left:0;display:grid;grid-template-columns:repeat(2,1fr);width:100%;transition:all .5s}
#atc01 .prd_slider a .row2 dt{display:inline-block;padding:3px 10px;border-radius:3px;font-size:13px;font-weight:600;color:#fff;background:rgba(0,0,0,.5)}
#atc01 .prd_slider a .row2 dd p{margin:7px 0 2px;font-size:25px;font-weight:600}
#atc01 .prd_slider a .row2 dd span{font-size:14px;font-weight:500;color:rgba(255,255,255,.5)}
#atc01 .bg01{background-image:url('../img/main/inc01/bg01.jpg')}
#atc01 .bg01:after{background:#6F51EA}
#atc01 .bg02{background-image:url('../img/main/inc01/bg02.jpg')}
#atc01 .bg02:after{background:#B89B8E}
#atc01 .bg03{background-image:url('../img/main/inc01/bg03.jpg')}
#atc01 .bg03:after{background:#CCAFB4}
#atc01 .bg04{background-image:url('../img/main/inc01/bg04.jpg')}
#atc01 .bg04:after{background:#3576AE}
#atc01 .bg05{background-image:url('../img/main/inc01/bg05.jpg')}
#atc01 .bg05:after{background:#705978}
#atc01 .bg06{background-image:url('../img/main/inc01/bg06.jpg')}
#atc01 .bg06:after{background:#355687}

/* =========================== inc02 */
#atc02{width:var(--main-size);margin:0 auto;padding-bottom:80px}
#atc02 .cont_area ul{display:flex;gap:30px}
#atc02 .cont_area .img_wrap{overflow:hidden;border-radius:20px}
#atc02 .cont_area .img{height:215px;background-size:cover;background-position:center;transition:all .3s}
#atc02 .cont_area .cont{padding:25px}
#atc02 .cont_area .cont p{margin-bottom:10px;font-size:16px;font-weight:700;transition:all .3s}
#atc02 .cont_area .cont div{margin-bottom:20px;color:#777;line-height:1.5}
#atc02 .cont_area .cont span{font-size:13px;font-weight:700;color:#aaa}
#atc02 .cont_area a:hover .img{transform:scale(1.1)}


 #popInc04 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    ;background: rgba(0,0,0,0.7)
}

#popInc04 .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    padding: 45px 50px;
    border-radius: 8px;
    font-size: 14px;
    color: #777;
    background: #fff;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-family: 'notokr-regular'
}

#popInc04 .pop_close {
    position: absolute;
    right: 25px;
    top: 25px;
    background: url(../img/close.png) 0 0 no-repeat;
    width: 17px;
    height: 17px;
    text-indent: -9999px;
    cursor: pointer
}

#popInc04 .tit {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: normal;
    color: #222;
    letter-spacing: -.5px;
    text-align: center;
    font-family: 'notokr-bold'
}

#popInc04 ul li {
    position: relative;
    padding-left: 100px;
    border-bottom: 1px solid #e1e1e1
}

#popInc04 ul li label {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100px;
    font-size: 14px;
    color: #222;
    font-family: 'notokr-bold'
}

#popInc04 ul li input[type=text] {
    width: 100%;
    height: 45px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    font-family: 'notokr-regular'
}

#popInc04 ul li select {
    width: 100%;
    height: 45px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    background: url(../../../img/sh_arr_down.png) 98% center no-repeat;
    font-family: 'notokr-regular'
}

#popInc04 ul li .won {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

#popInc04 ul li textarea {
    width: 100%;
    height: 90px;
    margin: 15px 0 12px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    background-color: #f5f5f5
}

#popInc04 .agree_zone {
    padding: 15px;
    margin: 15px 0 20px;
    border-radius: 3px;
    font-size: 13px;
    color: #222;
    background: #f5f5f5
}

#popInc04 .agree_zone .gainagree2 {
    padding: 3px 5px;
    margin-left: 5px;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    color: #555;
    background: #fff
}

#popInc04 .agree_zone label {
    float: right;
    margin-left: 10px
}

#popInc04 .btn_ok {
    text-align: center
}

#popInc04 input[type=submit] {
    width: 150px;
    height: 45px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    background-color: #353646;
    font-family: 'notokr-medium'
}


#sh_ft {
    clear: both;
    padding: 0 0 40px;
    min-width: 1200px;
    border-top: 1px solid #e9e9e9;
    background: #303136;
}

#sh_ft .ft_wr {
    margin: 0 auto;
    width: 1200px;
    color: #fff;
	background: #303136;
	text-align: center;
    padding: 40px 0 20px 0;
}