@charset "utf-8";

#mainBanner{overflow:hidden;display:flex;align-items:center;position:relative;height:615px;background:var(--pale)}
#mainBanner .deco{position:absolute;right:0;bottom:-45%;animation:linear 15s reverse infinite rotate}
@keyframes rotate{from{transform:rotate(0deg) translateY(50px) scale(0.85)}50%{transform:(0) scale(1)}to{transform:rotate(360deg) translateY(50px) scale(0.85)}}

/* 온라인상담 */
#mainBanner .form{flex-shrink:0;position:relative;padding:70px 0 70px 4%;margin-right:35px}
#mainBanner .form .bg{position:absolute;left:0;top:0;left:0;z-index:0;width:60%;height:100%;background:var(--primary)}
#mainBanner .form .bg:before, #mainBanner .form .bg:after{display:block;content:"";position:absolute;right:-70px;width:140px;height:140px;border-radius:50%;background:var(--primary)}
#mainBanner .form .bg:before{top:-70px}
#mainBanner .form .bg:after{bottom:-70px}
#mainBanner .form .tit{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:28px;color:#111;font-family:var(--font-b)}
#mainBanner .form .tit a{display:none;padding:10px 30px;border-radius:50px;font-size:19px;color:#222;background:var(--gray);transition:all 0.2s;font-family:var(--font-b)}
#mainBanner .form .tit a:hover{color:#fff;background:var(--primary)}
#mainBanner .form form{position:relative;width:580px;height:490px;height:475px;padding:60px 60px 60px;border-radius:16px;background:#fff}
#mainBanner .form .top{display:grid;grid-template-columns:repeat(2, 1fr);column-gap:12px;row-gap:22px}
#mainBanner .form ul li label{display:block;margin-bottom:2px;font-size:15px;color:#111;font-family:var(--font-m)}
#mainBanner .form ul li .sh_input{width:100%;height:52px;padding-left:15px;border:1px solid var(--gray);border-radius:6px;font-size:15px;color:#111;background:var(--gray);transition:all .2s;font-family:var(--font-m)}
#mainBanner .form ul li .sh_input:focus,#mainBanner .form ul li .sh_input:active{border:1px solid #e1e1e1!important;box-shadow:none;outline:none;background:#fff}
#mainBanner .form ul li .sh_input.select{cursor:pointer;width:100%;height:52px;padding-left:15px;border:1px solid var(--gray);border-radius:6px;font-size:15px;appearance:none;background:url('./img/arr.png') calc(100% - 15px) center no-repeat var(--gray);background-size:10px}
#mainBanner .form ul li .sh_input.select:focus, #mainBanner .form ul li .sh_input.select:active{background-color:#fff}
#mainBanner .form ul li.add .sh_input{width:100%;margin-top:10px}
#mainBanner .form ul li.add{width:100%;padding-top:10px}
#mainBanner .form ul li.add button{display:block;margin-bottom:2px;border:none;font-size:15px;color:#111;background:transparent;font-family:var(--font-m)}
#mainBanner .form ul li.add div{display:none}


#mainBanner .form ul li .won{position:relative}
#mainBanner .form ul li .won .sh_input{padding-right:50px}
#mainBanner .form ul li .won span{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#111}
#mainBanner .form .pvc_ck{padding:20px 0;font-size:14px;text-align:right}
#mainBanner .form .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline}
#mainBanner .form .pvc_ck label{cursor:pointer;font-size:14px;color:#111}
#mainBanner .form .pvc_ck .sh_ck{width:16px;height:16px;margin-left:5px;border:none;border-radius:4px;background:var(--gray);cursor:pointer;appearance:none}
#mainBanner .form .pvc_ck .sh_ck:checked{background:url('./img/ck.png') center no-repeat #111;background-size:8px}
#mainBanner .form input[type=submit]{width:100%;height:65px;border:none;border-radius:35px;font-size:17px;color:#fff;background:var(--primary);font-family:var(--font-b);transition:all .2s}
#mainBanner .form input[type=submit]:hover{background:var(--primary-h)}

/* 대출상품 */
#mainBanner .pro_slide{display:flex;align-items:center;height:100%;margin:0}
#mainBanner .pro_slide ul{height:auto}
#mainBanner .pro_slide ul li{width:400px;height:475px;border-radius:16px;background:rgba(255,255,255,.9);transition:all .2s}
#mainBanner .pro_slide ul li.on{transform:translateY(-15px);border:1px solid var(--primary);box-shadow:12px 12px 28px var(--primary20)}
#mainBanner .pro_slide ul li a{display:flex;flex-flow:column;align-items:flex-start;position:relative;height:100%;padding:55px;color:#777}
#mainBanner .pro_slide ul li span{display:block;width:84px;height:34px;border-radius:30px;border:1px solid var(--primary);font-size:14px;text-align:center;line-height:32px;color:var(--primary);transition:all .2s}
#mainBanner .pro_slide ul li .name{margin:32px 0 15px;font-size:32px;color:#111;font-family:var(--font-b)}
#mainBanner .pro_slide ul li  div{margin-bottom:32px;white-space:pre-line}
#mainBanner .pro_slide ul li .list{color:#111}
#mainBanner .pro_slide ul li .list:before{display:inline-block;vertical-align:4px;content:"";width:3px;height:3px;margin-right:8px;background:var(--primary)}
#mainBanner .pro_slide ul li i{margin:auto 0 15px;font-style:normal;color:#aaa;font-family:var(--font-m)}
#mainBanner .pro_slide ul li img{position:absolute;right:55px;bottom:45px}

@media(hover:hover){
#mainBanner .pro_slide ul li:hover{box-shadow:12px 12px 28px var(--primary20);background:#fff}
#mainBanner .pro_slide ul li:hover span{color:#fff;background:var(--primary)}
}

/* 반응형 [s] */
@media (max-width:1400px){
#mainBanner .form form{width:400px;padding:60px 35px}
#mainBanner .form .tit{font-size:20px}
#mainBanner .pro_slide ul li div{white-space:normal}
#mainBanner .pro_slide ul li a{padding:35px}
#mainBanner .pro_slide ul li .name{font-size:25px}
#mainBanner .pro_slide ul li div{white-space:normal;word-break:keep-all}
}
@media (max-width:1024px){
#mainBanner{display:block;height:auto;padding:0}
#mainBanner .form{padding:40px 3% 0;margin-right:0}
#mainBanner .form form{width:100%;height:auto;padding:35px}
#mainBanner .form .tit{text-align:center}
#mainBanner .form .pvc_ck{padding:10px 0}
#mainBanner .form ul{grid-template-columns:repeat(4, 1fr)}
#mainBanner .form .bg{display:none}
#mainBanner .form input[type=submit]{height:50px;font-size:15px}
#mainBanner .pro_slide{padding:50px 0}
#mainBanner .pro_slide ul li{height:315px}
#mainBanner .pro_slide ul li .name{margin:15px 0 5px;font-size:20px}
#mainBanner .pro_slide ul li div{margin-bottom:20px}
#mainBanner .form .tit a{display:flex;align-items:center;justify-content:center}
}
@media (max-width:768px){
#mainBanner .form form{padding:30px}
#mainBanner .form ul{grid-template-columns:repeat(2, 1fr)}

}
@media (max-width:525px){
#mainBanner .pro_slide ul li .list{display:none}
}
@media (max-width:480px){
#mainBanner .form ul{column-gap:20px;row-gap:10px}
#mainBanner .pro_slide ul li{height:320px}
#mainBanner .pro_slide ul li .name{font-size:18px}
#mainBanner .form ul li.add .sh_input{font-size:14px}
#mainBanner .form ul li.add div{flex-direction:column;gap:0}
}
@media (max-width:380px){
#atc01 .cs{flex-direction:column}
#mainBanner .form ul{column-gap:10px}
#mainBanner .pro_slide ul li{height:315px}
#mainBanner .pro_slide ul li img{right:35px;bottom:30px}
#mainBanner .form form{padding:30px 20px}
#mainBanner .form .tit{display:flex;flex-direction:column;align-items:center;justify-content:center}
#mainBanner .form .tit a{width:100%;margin-top:15px;border-radius:0;background:#222;color:#fff}
}
/* 반응형 [e] */