/* 인트로 */
.loading_wrap{display:flex; justify-content:space-between; align-items:center; flex-direction:column; position:fixed; background:linear-gradient(225deg,#f9f8e5,#efe9f7); z-index:1500; width:100%; height:100vh;}
.loading_wrap.fade_out{animation: fade_out 1s 2s both;}
.loading_wrap .txt{display:flex; justify-content:center; flex-direction:column; padding:0 4%; text-align:center; width:100%; height:45vh;}
.loading_wrap .txt i{display:block; padding-top:60rem; margin-bottom:15rem; color:var(--primary); font-size:20rem;}
.loading_wrap .txt h2{color:#111; font-weight:normal; font-size:var(--fs50);}
.loading_wrap .txt h2 em{color:var(--second);}
.loading_wrap .txt h2 .mo_br{display:none;}
.loading_wrap .img{position:relative; height:55vh;}
.loading_wrap .img img.img01{display:block; height:100%;}
.loading_wrap .img img.img02{display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:1060rem; z-index:-1;}
@keyframes fade_out {
    0%{opacity:1; visibility:visible;}
    100%{opacity: 0; visibility:hidden;}
}
@media(max-width:1279px){
    .loading_wrap .txt i{padding-top:0;}
}
@media(max-width:767px){
    .loading_wrap .txt h2 .mo_br{display:block;}
}


/* 픽스메뉴 */
.area_fixed{position:fixed; bottom:40rem; right:4%;  display:flex; justify-content:flex-end; font-size:0; z-index:1000;}
.area_fixed a{display:inline-flex; align-items:center; margin-right:15rem; padding:0 20rem; height:50rem; line-height:50rem; border-radius:25rem; transition:0.2s ease; border:2px solid #fff; cursor:pointer;}
.area_fixed a em{display:block; margin-right:10rem; font-size:20rem;}
.area_fixed a img{display:block; height:20rem;}
.area_fixed a.kakao{color:#381e1f; background:#ffe500;}
.area_fixed a.tel{color:#fff; background:var(--primary);}
.area_fixed a.inquiry{color:#fff; background:var(--second);}
.area_fixed div.top{display:flex; justify-content:center; align-items:center; height:50rem; width:50rem; border-radius:50%; background:rgba(133,133,133,0.5); transition:0.2s ease; cursor:pointer; border:2px solid #fff;}
.area_fixed div.top img{display:block; height:20rem;}
@media(hover:hover){
    .area_fixed a:hover,
    .area_fixed div.top:hover{transform:translateY(-10rem);}
}
@media(max-width:1279px){
    .area_fixed{bottom:20rem;}
}
@media(max-width:1279px){
    .area_fixed a{margin-right:10rem;}
    .area_fixed a.tel{display:none;}
}


/* 온라인문의폼 */
.form_wrap{padding:50rem; width:430rem; background:#fff; border-radius:6rem; box-shadow:20rem 20rem 40rem rgba(0,46,100,0.15);}
.form_wrap h2{text-align:center; font-size:var(--fs25); color:#111;}
.form_wrap ul li{margin-top:20rem;}
.form_wrap ul li input{margin:0; font-size:18rem; border-radius:3rem; height:44rem; background:#f5f5f5;}
.form_wrap ul li input::placeholder{color:#999;}
.form_wrap ul li.name input,
.form_wrap ul li.money input{width:100%;}
.form_wrap ul li.num{display:flex; align-items:center; justify-content:space-between;}
.form_wrap ul li.num input{width:100rem;}
.form_wrap ul li.num span{width:15rem; text-align:center;}
.form_wrap ul li.loan select{margin:0; font-size:18rem; border-radius:3rem; height:44rem; background:#f5f5f5 url(/images/board/select_arrow.svg) no-repeat calc(100% - 10rem) 50%; width:100%; background-size:8rem;}
input[type=checkbox] + label, input[type=radio] + label{margin-right:10rem; font-size:16rem; color:#444;}
.form_wrap input[type=checkbox]{margin:-1rem 3rem 1rem 0;}
.form_wrap #privacyLink{color:#aaa;}
.wrap_checkbox{margin-top:20rem;}
#online_btn{display:block; margin-top:25rem; width:100%; font-size:20rem; color:#fff; text-align:center; border-radius:3rem; height:50rem; line-height:50rem; background:var(--primary);}
@media(max-width:1279px){
    .form_wrap{padding:40rem 30rem; width:350rem;}
    .form_wrap ul li{margin-top:15rem;}
    .form_wrap ul li.num input{width:85rem;}
    #online_btn{margin-top:20rem;}
}
@media(max-width:767px){
    .form_wrap{padding:30rem 20rem; width:100%;}
    .form_wrap h2{font-size:24rem;}
    .form_wrap ul li.num input{width:115rem;}
}


/* 문의폼 팝업 */
.form_popup{display:none; position:fixed; top:0; left:0; width:100%; height:100vh; z-index:1001; background:rgba(0,0,0,0.7);}
.form_popup_wrap{display:flex; justify-content:center; align-items:center; margin:auto; width:92%; height:100%;}
.form_popup_wrap .form_wrap{position:relative;}
.form_popup_wrap .form_wrap .close{position:absolute; width:50rem; height:50rem; right:-10rem; top:-10rem; border-radius:50%; background:#111; border:2px solid #fff; cursor:pointer;}
.form_popup_wrap .form_wrap .close:before,
.form_popup_wrap .form_wrap .close:after{content:''; display:block; position:absolute; top:50%; left:50%; width:2px; height:20rem; background:#fff;}
.form_popup_wrap .form_wrap .close:before{transform:translate(-50%,-50%) rotate(45deg);}
.form_popup_wrap .form_wrap .close:after{transform:translate(-50%,-50%) rotate(135deg);}


/* 메인비주얼 */
.area_visual{position:relative; width:100%; }
.area_visual .visual_wrap{position:relative; padding:calc(100rem + var(--header_height)) 0 100rem; background:url(../images/main/bg_visual.jpg)no-repeat center/cover; overflow:hidden; width:100%;}
.area_visual .obj_wrap{position:absolute; top:50%; left:50%; width:100%; height:100%; animation:scale 5s infinite ease-in-out;}
.area_visual .obj_wrap img{display:block; position:absolute;}
.area_visual .obj01{width:300rem; left:-80rem; top:50%; transform:translateY(-50%);}
.area_visual .obj02{width:300rem; top:-95rem; left:42%; transform:translateX(-50%);}
.area_visual .obj03{width:434rem; right:20rem; bottom:-40rem;}
.area_visual .obj04{width:155rem; top:-50rem; right:100rem;}
.area_visual .obj05{width:137rem; top:68%; left:56%; transform:translate(-50%,-50%); opacity:0.8;}
.area_visual .obj06{width:205rem; bottom:-61rem; left:40%; transform:translateX(-50%);}
.area_visual .obj_wrap img:nth-child(odd){}
.area_visual .obj_wrap img:nth-child(even){}
.area_visual .inr{display:flex; align-items:center;}
.area_visual .swiper{width:calc(100% - 430rem);}
.area_visual .swiper-slide{opacity:0; visibility:hidden;}
.area_visual .swiper-slide-active{opacity:1; visibility:visible;}
.area_visual .swiper-slide .txt{padding-left:40rem; padding-top:32rem;}
.area_visual .swiper-slide .txt h2{position:relative; margin-bottom:10rem; font-size:var(--fs50); color:#111;}
.area_visual .swiper-slide .txt h2 i{display:block; position:absolute; top:45%; left:-40rem; transform:translateY(-50%); font-size:120rem; color:var(--primary); opacity:0.15;}
.area_visual .swiper-slide .txt ul{margin-top:50rem;}
.area_visual .swiper-slide .txt ul li{display:flex; align-items:center;}
.area_visual .swiper-slide .txt ul li+li{margin-top:15rem;}
.area_visual .swiper-slide .txt ul li span{display:block; padding-top:4rem; width:100rem; height:36rem; border-radius:5rem; background:var(--second); color:#fff; font-size:20rem; text-align:center;}
.area_visual .swiper-slide .txt ul li em{display:block; padding-top:4rem; padding-left:20rem; width:calc(100% - 100rem); font-size:20rem; color:#444;}
.area_visual .swiper-pagination{position:relative; bottom:auto; top:auto; left:auto;}
.area_visual .swiper-pagination-bullet{position:relative; margin:0 !important; width:calc(100% / 3); height:80rem; border-radius:0; background:#eff6fd; opacity:1;}
.area_visual .swiper-pagination-bullet:nth-child(2){border-left:1px solid #fff; border-right:1px solid #fff;}
.area_visual .swiper-pagination-bullet:before{font-size:18rem; color:#90a6bd; line-height:80rem; font-weight:bold;}
.area_visual .swiper-pagination-bullet:before{font-size:18rem; color:#90a6bd; line-height:80rem; font-weight:bold;}
.area_visual .swiper-pagination-bullet:nth-child(1):before{content:'01. 후순위담보대출 (부동산/자동차)';}
.area_visual .swiper-pagination-bullet:nth-child(2):before{content:'02. 신용대출 (중금리대출)';}
.area_visual .swiper-pagination-bullet:nth-child(3):before{content:'03. 회생 파산대출';}
.area_visual .swiper-pagination-bullet:after{content:''; display:block; position:absolute; top:-25rem; left:50%; transform:translateX(-50%); height:25rem; width:42rem; background:url(../images/main/img_pager.png)no-repeat 50% 100%/contain; opacity:0;}
.area_visual .swiper-pagination-bullet-active{background:var(--primary);}
.area_visual .swiper-pagination-bullet-active:before{color:#fff;}
.area_visual .swiper-pagination-bullet-active:after{opacity:1;}
@keyframes scale{
   0%{transform:translate(-50%,-50%) scale(1);}
   50%{transform:translate(-50%,-50%) scale(1.05);}
   100%{transform:translate(-50%,-50%) scale(1);}
}
@media(max-width:1279px){
    .area_visual .obj01{width:150rem;}
    .area_visual .obj03{bottom:-40rem; right:-50rem; width:300rem;}
    .area_visual .obj05{left:55%; width:110rem;}
    .area_visual .obj06{bottom:-32rem; width:100rem;}
    .area_visual .visual_wrap{padding:calc(40rem + var(--header_height)) 0 60rem;}
    .area_visual .swiper{width:calc(100% - 350rem);}
    .area_visual .swiper-slide .txt{padding-top:40rem;}
    .area_visual .swiper-pagination-bullet{height:60rem;}
    .area_visual .swiper-pagination-bullet:before{line-height:60rem;}
    .area_visual .swiper-pagination-bullet:after{width:30rem;}
}
@media(max-width:767px){
    .area_visual .visual_wrap{padding:calc(20rem + var(--header_height)) 0 60rem;}
    .area_visual .form_wrap{display:none;}
    .area_visual .swiper{width:100%;}
    .area_visual .swiper-slide .txt{padding-top:46rem; padding-left:0;}
    .area_visual .swiper-slide .txt h2{font-size:30rem;}
    .area_visual .swiper-slide .txt h2 i{top:30%; left:0; font-size:100rem;}
    .area_visual .swiper-slide .txt ul{margin-top:40rem;}
    .area_visual .obj_wrap{opacity:0.5;}
    .area_visual .obj06{width:80rem;}
    .area_visual .obj05,
    .area_visual .obj04{display:none !important;}
    .area_visual .obj03{bottom:-52rem; right:-78rem; width:200rem;}
    .area_visual .obj02{left:57%; top:-60rem; width:200rem;}
    .area_visual .swiper-pagination{margin-top:-20rem; padding-top:20rem; white-space:nowrap; overflow-x:scroll;}
    .area_visual .swiper-pagination-bullet{display:inline-block; width:290rem;}
}

/* 메인공통 */
#container{overflow:hidden;}
article{position:relative; padding:140rem 0;}
.main_tit{margin-bottom:50rem; text-align:center;}
.main_tit i{display:block; margin-bottom:15rem; color:var(--primary); font-size:20rem; }
.main_tit h2{color:#111; font-size:var(--fs40);}
.main_tit.w i{color:#ffe500;}
.main_tit.w h2{color:#fff;}
h3{font-size:var(--fs24); color:#111;}
p{font-size:18rem; color:#555;}
@media(max-width:1279px){
    article{padding:100rem 0;}
    .main_tit{margin-bottom:40rem;}
    .main_tit i{margin-bottom:10rem;}
}
@media(max-width:767px){
    article{padding:70rem 0;}
    .main_tit{margin-bottom:35rem;}
    .main_tit h2{font-size:30rem;}
    h3{font-size:24rem;}
}
    

/* 대출장점 */
.area_loan ul{display:flex; justify-content:space-between;}
.area_loan ul li{padding:50rem 30rem; width:calc((100% - 80rem) / 3); box-shadow:15rem 15rem 40rem rgba(0,46,100,0.15); border:2px solid #fff; transition:0.2s ease; text-align:center; border-radius:6rem;}
.area_loan ul li img{display:block; margin:auto; height:100rem;}
.area_loan ul li h3{margin:35rem 0 15rem;}
@media(hover:hover){
    .area_loan ul li:hover{border-color:var(--primary);}
}
@media(max-width:1279px){
    .area_loan ul li{padding:30rem 20rem; width:calc((100% - 40rem) / 3); box-shadow:5rem 5rem 20rem rgba(0,46,100,0.15);}
    .area_loan ul li img{height:70rem;}
    .area_loan ul li h3{margin:25rem 0 15rem;}
    .area_loan ul li p > br{display:none;}
}
@media(max-width:767px){
    .area_loan ul{display:block;}
    .area_loan ul li{width:100%;}
    .area_loan ul li+li{margin-top:20rem;}
}


/* 진행절차 */
.area_step{background:url(../images/main/bg_step.jpg)no-repeat center/cover;}
.area_step .obj{display:block; position:absolute;}
.area_step .obj01{top:-75rem; left:-75rem; height:420rem;}
.area_step .obj02{bottom:0; right:0; width:416rem;}
.area_step ul{display:flex; justify-content:space-between;}
.area_step ul li{padding:30rem; width:calc((100% - 120rem) / 4); height:262rem; border-radius:6rem;}
.area_step ul li:nth-child(odd){background:#fff;}
.area_step ul li:nth-child(even){margin-top:40rem; background:var(--second);}
.area_step ul li .step_num{display:flex; justify-content:space-between;}
.area_step ul li .step_num span{font-size:16rem; font-weight:bold; color:var(--primary);}
.area_step ul li:nth-child(even) .step_num span{color:#ffe500;}
.area_step ul li .step_num img{display:block; height:50rem;}
.area_step ul li h3{margin:20rem 0 15rem;}
.area_step ul li:nth-child(even) h3{color:#fff;}
.area_step ul li:nth-child(even) p{color:#fff; opacity:0.9;}
@media(max-width:1279px){
    .area_step .obj01{top:-50rem; height:300rem;}
    .area_step .obj02{width:250rem;}
    .area_step ul li{padding:30rem 20rem; width:calc((100% - 60rem) / 4); height:268rem;}
    .area_step ul li .step_num img{height:40rem;}
    .area_step ul li p > br{display:none;}
}
@media(max-width:767px){
    .area_step .obj01{height:180rem;}
    .area_step .obj02{width:200rem;}
    .area_step ul{display:block;}
    .area_step ul li{width:100%; height:auto;}
    .area_step ul li:nth-child(even){margin-top:20rem;}
    .area_step ul li+li{margin-top:20rem;}
    .area_step ul li .step_num span{font-size:18rem;}
    .area_step ul li .step_num img{height:50rem;}
}


/* 카카오상담 */
.area_kakao .inr{display:flex; align-items:center; justify-content:space-between; padding:60rem 100rem; background:#ffe500 url(../images/main/bg_kakao.jpg)no-repeat 100% 50%/cover; border-radius:6rem;}
.area_kakao .txt_wrap{display:flex; align-items:flex-start; justify-content:space-between; width:670rem;}
.area_kakao .txt_wrap .qr{display:block; width:124rem;}
.area_kakao .txt_wrap .txt{padding-left:30rem; width:calc(100% - 124rem);}
.area_kakao .txt_wrap .txt h2{position:relative; margin-bottom:15rem; font-size:var(--fs40); color:#381e1f;}
.area_kakao .txt_wrap .txt h2 img{position:absolute; top:-100rem; right:0; width:155rem; animation:kakao 2s infinite ease-in-out;}
.area_kakao .txt_wrap .txt i{display:block; color:#3f3031; font-size:16rem;}
.area_kakao .btn_kakao{display:block; padding-top:15rem; font-size:var(--fs24); width:260rem; height:60rem; color:#ffe500; text-align:center; background:#381e1f; border-radius:30rem; transition:0.2s ease;}
@keyframes kakao{
   0%{transform:scale(0.95) rotate(10deg);}
   50%{transform:scale(1) rotate(0);}
   100%{transform:scale(0.95) rotate(10deg);}
} 
@media(hover:hover){
    .area_kakao .btn_kakao:hover{background:#250809;}
} 
@media(max-width:1279px){
    .area_kakao .inr{padding:50rem;}
    .area_kakao .txt{width:440rem;}
    .area_kakao .txt h2 img{top:-75rem; width:120rem;}
    .area_kakao .btn_kakao{width:220rem;}
}
@media(max-width:767px){
    .area_kakao .inr{display:block; padding:50rem 20rem; background:#ffe500 url(../images/main/bg_kakao_m.jpg)no-repeat 30% 100%/cover;}
    .area_kakao .txt_wrap{display:block; width:100%;}
    .area_kakao .txt_wrap .qr{margin-bottom:30rem; width:80rem;}
    .area_kakao .txt_wrap .txt{width:100%; padding-left:0;}
    .area_kakao .txt_wrap .txt h2{font-size:30rem;}
    .area_kakao .txt_wrap .txt h2 img{top:-70rem; width:120rem;}
    .area_kakao .txt_wrap .txt i{font-size:18rem;}
    .area_kakao .btn_kakao{margin-top:50rem;}
}


/* 대출이미지 */
.area_loan-img{display:block; margin:auto; max-width:1110rem; width:80%;}


/* 신청현황 */
.area_application{background:url(../images/main/bg_application.jpg)no-repeat center/cover;}
.area_application .inr{display:flex; justify-content:space-between;}
.area_application .box{padding-right:40rem; width:calc(100% - 430rem);}
.area_application .box .main_tit{margin-bottom:0; text-align:left; height:133rem;}
.area_application .box .main_tit h2 > br{display:none;}
.area_application .box .status{padding:50rem 50rem; background:#fff; border-radius:6rem;}
.area_application .box .swiper{height:280rem;}
.area_application .box .swiper-slide{display:flex; align-items:center; justify-content:space-between;}
.area_application .box .swiper-slide .date{display:block; font-size:18rem; color:#90a6bd; width:115rem;}
.area_application .box .swiper-slide .name{display:block; font-size:18rem; color:#444; width:120rem; text-align:center;}
.area_application .box .swiper-slide .loan{color:#444; width:330rem;}
.area_application .box .swiper-slide span{display:block; width:100rem; height:36rem; line-height:38rem; color:#fff; background:#aaa; border-radius:3rem; text-align:center; font-size:18rem;}
.area_application .box .swiper-slide span.approval{background:var(--primary);}
@media(max-width:1279px){
    .area_application .box{width:calc(100% - 350rem);}
    .area_application .box .status{padding:30rem;}
    .area_application .box .swiper-slide .date{width:110rem; font-size:14rem;}
    .area_application .box .swiper-slide .name{width:105rem; font-size:16rem;}
    .area_application .box .swiper-slide .loan{width:300rem; font-size:16rem;}
    .area_application .box .swiper-slide span{font-size:16rem;}
}
@media(max-width:767px){
    .area_application .inr{display:block;}
    .area_application .box{margin-bottom:30rem; padding-right:0; width:100%;}
    .area_application .box .main_tit{margin-bottom:35rem; text-align:center;}
    .area_application .box .main_tit h2 > br{display:block;}
    .area_application .box .status{padding:30rem 20rem;}
    .area_application .box .swiper-slide .date{display:none;}
    .area_application .box .swiper-slide .name{text-align:left; width:60rem;}
    .area_application .box .swiper-slide .loan{width:210rem;}
    .area_application .box .swiper-slide span{width:90rem;}
}


/* 리뷰 */
.area_review{padding:0 !important; background:linear-gradient(45deg,#ede6f2,#d4deff); overflow:hidden;}
.area_review .obj{position:absolute;}
.area_review .obj01{left:6%; bottom:-55rem; width:480rem; animation:review 2s infinite ease-in-out;}
.area_review .obj02{right:-50rem; top:20%; width:230rem;}
.area_review .obj03{left:-50rem; top:30%; width:150rem; opacity:0.8;}
.area_review .inr{display:flex; justify-content:space-between;}
.area_review .main_tit{padding-top:140rem; text-align:left; width:calc(100% - 905rem);}
.area_review .review{margin-right:-40rem; width:825rem;}
.area_review .review .swiper{padding:0 40rem; height:750rem;}
.area_review .review .swiper-slide{display:flex; align-items:flex-end; justify-content:space-between; padding:0 40rem; background:#fff; border-radius:6rem; box-shadow:10rem 10rem 20rem rgba(0,46,100,0.15); height:180rem !important;}
.area_review .review .swiper-slide img{width:187rem;}
.area_review .review .swiper-slide .txt{width:calc(100% - 227rem); padding:40rem 0;}
.area_review .review .swiper-slide .txt .top{display:flex; margin-bottom:15rem; padding-bottom:10rem; border-bottom:1px solid #ddd;}
.area_review .review .swiper-slide .txt .top h4{font-size:22rem; color:var(--second);}
.area_review .review .swiper-slide .txt .top .grade{font-size:0;}
.area_review .review .swiper-slide .txt .top .grade span{display:inline-block; margin-right:15rem; font-size:15rem; color:var(--primary);}
.area_review .review .swiper-slide .txt .top .grade em{display:inline-block; font-size:16rem;}
.area_review .review .swiper-slide .txt p{font-size:16rem; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
@keyframes review{
   0%{transform:scale(0.95) rotate(5deg);}
   50%{transform:scale(1) rotate(0);}
   100%{transform:scale(0.95) rotate(5deg);}
}
@media(max-width:1279px){
    .area_review{padding:100rem 0 !important;}
    .area_review .obj01{left:auto; bottom:auto; top:6%; right:5%; width:300rem;}
    .area_review .obj02{bottom:-76rem; top:auto; opacity:0.4;}
    .area_review .obj03{left:-40rem; top:55%; width:100rem; opacity:0.4;}
    .area_review .inr{display:block;}
    .area_review .main_tit{padding-top:0; width:100%;}
    .area_review .review{margin:0; width:100%;}
    .area_review .review .swiper{padding:0; overflow:visible; height:auto;}
    .area_review .review .swiper-slide{display:block; padding:30rem 20rem; height:345rem !important;}
    .area_review .review .swiper-slide img{display:block; margin:auto; width:auto; height:120rem}
    .area_review .review .swiper-slide .txt{width:100%; padding:20rem 0 0;}
    .area_review .review .swiper-slide .txt .top{display:block; margin-bottom:20rem; padding-bottom:15rem; text-align:center;}
    .area_review .review .swiper-slide .txt .top h4{font-size:20rem;}
    .area_review .review .swiper-slide .txt .top .grade{margin-top:10rem;}
}
@media(max-width:767px){
    .area_review{padding:70rem 0 !important;}
    .area_review .obj01{right:2%; width:150rem;}
}