@charset "utf-8";

/* 온라인상담 */
#consult{position:sticky;top:0;height:100vh;max-width:465px;width:100%}

#consult .form-tit .tit{font-size:23px;color:#111;font-family:var(--B-font)}
#consult .form-tit p{margin-top:10px;font-size:16px;font-weight:500;color:#111;word-break:keep-all}
#consult .input-area{margin-top:30px}
#consult .input-area li{display:flex;align-items:center}
#consult .input-area li{border-bottom:1px solid #e1e1e1}
#consult .input-area li label{display:block;width:80px;margin-bottom:2px;font-size:15px;color:#aaa;font-family:var(--k-font)}
#consult .input-area li .sh_input{width:80%;height:60px;padding-left:15px;border:none;font-size:15px;color:#111;font-family:var(--font-m)}
#consult .input-area li .sh_input:focus,#consult .input-area li .sh_input:active{border:none!important;box-shadow:none;outline:none;background:#fff}
#consult .input-area li .sh_input.select{cursor:pointer;width:80%;height:60px;padding-left:15px;font-size:15px;appearance:none;background:url('./img/arr.png') calc(100% - 15px) center no-repeat;background-size:10px}
#consult .input-area li .sh_input.select:focus, #consult .input-area li .sh_input.select:active{background-color:#fff}
#consult .input-area li .won{position:relative}
#consult .input-area li .won .sh_input{padding-right:50px}
#consult .input-area li .won span{position:absolute;right:15px;top:50%;font-size:15px;transform:translateY(-50%);color:#aaa}
#consult .form-area{padding:70px 0 0 74px}
#consult .form-area .pvc_ck{padding:20px 0;font-size:14px;text-align:right}
#consult .form-area .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline}
#consult .form-area .pvc_ck label{cursor:pointer;font-size:14px;color:#111}
#consult .form-area .pvc_ck .sh_ck{width:16px;height:16px;margin-left:5px;border:none;border-radius:4px;background:#f5f5f5;cursor:pointer;appearance:none}
#consult .form-area .pvc_ck .sh_ck:checked{background:url('./img/ck.png') center no-repeat #111;background-size:8px}
#consult .form-area input[type=submit]{width:100%;height:65px;border:none;border-radius:8px;font-size:16px;color:#fff;background:var(--primary);font-family:var(--B-font);transition:all .2s}
#consult .contact-bnr{display:flex;align-items:center;height:140px;padding:0 30px;border-radius:8px;background:url('./img/bg.jpg');background-size:cover}
#consult .contact-bnr h3{font-size:16px;font-weight:500;font-family:var(--M-font)}
#consult .contact-bnr p{margin:5px 0;font-size:25px;font-family:var(--B-font)}
#consult .contact-bnr ul li{display:inline-block;font-size:13px;font-weight:500;color:#777}
#consult .contact-bnr ul li+li:before{display:inline-block;content:'';width:2px;height:2px;margin:0 6px;vertical-align:3px;background:#777}
#consult .btn-bnr{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;margin:10px 0;padding:20px;border-radius:8px;font-size:13px;text-align:center;background:#f5f5f5;font-family:var(--M-font)}
#consult .btn-bnr button{border:none;background:none;font-family:var(--M-font);color:#111}
#consult .btn-bnr img{display:block;margin:0 auto 8px;opacity:.2;transition:all .3s}

@media (hover:hover){
#consult .form-area input[type=submit]:hover{background:#3c4979}
#consult .btn-bnr li:hover img{opacity:1}
}
/* 반응형 [s] */
@media (max-width:1800px){
#consult .form-area{padding:60px 0 60px 40px}
}
@media (max-width:1600px){
#consult .form-tit .tit{font-size:20px}
#consult .form-tit p{font-size:15px}
#consult .input-area li label{width:70px;font-size:14px}
#consult .input-area li .sh_input, #consult .input-area li .sh_input.select{height:56px;padding-left:0;font-size:14px}
#consult .input-area li .won span{font-size:14px}
#consult .form-area{padding-left:30px}
#consult .form-area input[type=submit]{height:56px;font-size:15px}
#consult .contact-bnr p{font-size:23px}
#consult .contact-bnr{position:relative;background-position:right}
#consult .contact-bnr::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(255,255,255,0.4)}
#consult .contact-bnr div{position:relative;z-index:1}
}
@media (max-width:1400px){
#consult{max-width:none;width:25%}
}
@media screen and (max-width:1200px) {
  [data-aos="fade-in"] {transform:translate3d(0, 100px, 0) !important}
  [data-aos="fade-in"].aos-animate {transform:translate3d(0, 0, 0) !important}
}
@media (max-width:1200px){
#consult{position:static;max-width:none;width:100%;height:auto;padding-bottom:60px}
#consult .form-area{padding:0}
#consult .form-area form{display:flex;flex-direction:column;padding-bottom:40px}
#consult .form-area .form-tit{text-align:center}
#consult .form-area input[type=submit]{width:15%;margin:0 auto}
#consult .form-area .bnr-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
#consult .form-tit .tit{font-size:32px}
#consult .form-tit p{font-size:16px}
#consult .input-area{display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;gap:20px}
#consult .input-area li label{flex-shrink:0}
#consult .btn-bnr{align-items:center;margin:0}
#consult .btn-bnr img{margin-bottom:12px}
#consult .contact-bnr{height:auto;padding:40px 30px}
}
@media (max-width:1024px){
#consult .form-tit .tit{font-size:28px}
#consult .form-area input[type=submit]{height:50px}
#consult .input-area{grid-template-columns:repeat(2,1fr)}
#consult .input-area li .won{width:100%}
#consult .input-area li .sh_input, #consult .input-area li .sh_input.select{width:100%}
#consult .input-area li label{width:80px}
}
@media (max-width:768px){
#consult .input-area{gap:8px 20px;margin-top:24px}
#consult .form-tit .tit{font-size:26px}
#consult .form-tit p{font-size:15px}
#consult .form-area form{padding-bottom:14px}
#consult .form-area .bnr-wrap{grid-template-columns:repeat(1,1fr);gap:14px}
#consult .form-area input[type=submit]{width:100%}
#consult .input-area li .sh_input, #consult .input-area li .sh_input.select{height:52px}
#consult .contact-bnr{padding:34px 30px}
#consult .contact-bnr h3{font-size:15px}
#consult .contact-bnr p{margin:6px 0;font-size:22px}
}
@media (max-width:480px){
#consult{padding-bottom:0}
#consult .input-area{margin-top:15px}
#consult .form-tit .tit{font-size:24px}
#consult .form-tit p{font-size:14px}
#consult .input-area{grid-template-columns:repeat(1,1fr)}
#consult .input-area li .sh_input, #consult .input-area li .sh_input.select{height:48px}
#consult .form-area .pvc_ck a, #consult .form-area .pvc_ck label{font-size:13px}
}
/* 반응형 [e] */