@charset "utf-8";
/* CSS Document */
/* 공통 - 패딩 */
main, body > section {  padding: var(--sec_pd) 0; }
/* 메인ebf9ff */
main {
	padding: calc(var(--sec_pd) * 1.6) 0 var(--sec_pd); 
	background-image: url(https://allbar.co.kr/allb/images/main_bg.png); 
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position: center;
	transition: all var(--q_trans); 
}
main .wrap .txt_01 { letter-spacing: -0.045rem; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.7); }
main .wrap .txt_01 span{ text-shadow: none!important}
main .wrap .txt_02 { text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.7); }

main .circle_box_pack .circle_box {align-items: center; justify-content: center; background-color:#0e0b6982;}

/* 공통 - 타이틀 background-color: var(--purple);*/
body section .wrap .tit { margin-bottom: 3rem; text-align: center;  }

body section .wrap .tit .txt_01 {font-size: 3em; }
body section .wrap .tit .txt_02 { font-size: 1.5em; }

/* 처음부터  calc(var(--sec_pd) * 1.5) text-shadow: 1px 1px 0 #00000033;  #a740ff, #0052a9) border-top: 2px solid rgba(255,255,255, .09); border-bottom: 2px solid rgba(255,255,255, .09);*/
#bule_sec {padding: 0; background-image: url("https://allbar.co.kr/allb/images/bule_sec_bg.png"), linear-gradient(135deg, #ff4e50, #ff5858, #e48512); background-size: 102%, cover; background-repeat: no-repeat; background-position: center; box-shadow: 0px -13px 25px 0px rgba(133, 47, 0, 0.25), 0px 13px 25px 0px rgba(95, 33, 0, 0.35); 
}
    #bule_sec .wrap { padding:var(--sec_pd) 1rem; }
    #bule_sec .sec_tit { margin-bottom: unset; background: rgba(255, 255, 255, 0.09); box-shadow: 0 6px 40px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8.3px); -webkit-backdrop-filter: blur(8.3px); border: 1px solid rgba(255, 255, 255, 0.48); }

    /*  오브젝트 */
    #bule_sec .obj { width: 35%; animation: bounce 5s infinite; filter: drop-shadow(0px 1.8rem 15px #00000033); }
        #bule_sec .obj img { max-width: 85%; margin: 0 auto; }
    /*  리스트 */
    #bule_sec ul { display:flex; flex-direction: column; gap: 2rem;  }
            #bule_sec ul li .txt_01 { font-size: 2rem; margin-bottom: 0.5rem; }
                #bule_sec ul li .txt_01 span {color: var(--yellow);}
            #bule_sec ul li .txt_02 {font-size: 1.1em;opacity: 0.7;}

/* 신청 폼 1 */
[id^="_fieldset"] { width: 49%; }
.form_sect {padding-top: calc(var(--sec_pd) / 4); padding-bottom: 0; background-image:url(https://allbar.co.kr/allb/images/half_circle.svg),linear-gradient(to bottom, #f4f5ff 40%, #fff 100%); background-size:cover; background-repeat: no-repeat; background-position:bottom center; }
.form_sect .tit{ text-align: left!important; padding-left: 4rem; margin-bottom: 0 !important; padding-bottom: 2rem; position: relative;}
.form_sect .tit .form_img  {z-index: 1; position: absolute; bottom: -5rem; right: 8%;  width: 33%; max-width: 495px; transition: var(--q_trans);}

/* ★★★★★ 마이카드 ★★★★★*/
.MyCard{background-color:#fafafa; border-radius:var(--br_r); border: 1px solid #00000013; gap:calc(var(--base-px) *  4); padding: calc(var(--base-px) * 5) calc(var(--base-px) * 4); }

/* 포인트 */
#prod_point{padding-bottom: 0; background-image:linear-gradient(to bottom, #ffffff 60%, #f4f5ff 100%); background-size:cover; background-repeat: no-repeat;}
	#prod_point  ul {flex-wrap: wrap; gap:1.5rem;}
	#prod_point  ul li{  font-size: 1.4em;}
	#prod_point  ul.point_cont{ margin-bottom: 1.5rem;}
	#prod_point  ul.point_cont li {width: 18%; flex-grow: 1; display: flex; justify-content: space-between; align-items: center; gap:calc(var(--base-px) *  3);}
	#prod_point  ul.point_cont li .num { display: flex; justify-content: center; align-items: center; border-radius: var(--br_s); background-color:var(--white); width: 3.5rem; aspect-ratio: 1/1; line-height: 1px; font-size: 1.5rem; border: 1px solid #00000013; }
	#prod_point  ul.point_cont li .txt_01{ flex: 1; font-size: 1.1rem; }
	#prod_point  ul.point_cont li .txt_01 > strong{color: var(--gray_3);}
	/* 화살표 */
	.spiralArrow{ width: 40px; height: 150px; display: block; justify-content: center; margin-left: auto; margin-right: auto;}
	.spiralArrow__line{ fill: none; stroke: var(--point); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}
	/* 점선 + 그려지는 애니메이션 */
	.spiralArrow__line{ stroke-dasharray: 4 7; stroke-dashoffset: 120; animation: spiralDraw 4.0s cubic-bezier(0.45, 0, 0.25, 1) infinite;}
	/* 화살촉은 같은 타이밍으로 이어서 */
	.spiralArrow__head{	fill: var(--point); stroke: var(--point); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
	/* 점선 경로 애니메이션 */
	@keyframes spiralDraw{
		0%{
			stroke-dashoffset: 120;
			opacity: 0.3;
		}
		10%{
			opacity: 1;
		}
		70%{
			stroke-dashoffset: 0;
			opacity: 1;
		}
		100%{
			stroke-dashoffset: -120;
			opacity: 0.3;
		}
	}

/* 상세정보 */
#prod_info { background-image: linear-gradient(to bottom, var(--point), var(--purple) 75%) ; }
	#prod_info .info_cont > img { margin-right: 5rem; }
	#prod_info .info_cont ul { width: 50%; flex-grow: 1;}
	#prod_info .info_cont ul li { width: 100%; margin-bottom: 1rem; }
	#prod_info .info_cont ul li p span.marker_orange {font-size: 1.2rem;}

/* 진행 절차 */
#prod_step .wrap { color:var(--white); text-align: center; }
#prod_step .txtwrap .txt_01 { font-size: 2.2em; }
#prod_step .txtwrap .txt_02 { margin: 1rem 0 4rem; font-size: 1.1em; }

#prod_step ul .item { width: 15%; }
#prod_step ul .item .num { font-size: 0.9em; margin-bottom: 1rem; }
#prod_step ul .item .icon { display: inline-block; background-color:var(--surface); background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); width: 100px; height: 100px; line-height: 100px; border-radius: var(--br_c); font-size: 2em; box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;}
#prod_step ul .item .txt_01 { display: inline-block; font-size: 1.12em; width: 100%; margin: 1rem 0 0.4rem; }
#prod_step ul .item .txt_02 { font-size: 1em;line-height: 1.2; }
#prod_step ul .arrow { font-size: 1.5em; width: 3%; }

/* 월 납입금 계산기 */
#calculator {background-image: url(https://allbar.co.kr/allb/images/form_bg_t.png), url(https://allbar.co.kr/allb/images/form_bg_b.png);
background-size: 50%, 60%; background-position: top left, bottom right; background-repeat: no-repeat;}
#calculator .cal_input { position: relative; width: 100%; }
#calculator .cal_input .innerwrap { width: 80%; display: inline-block; }
#calculator .cal_input .innerwrap .d_flex { display: inline-flex; }
#calculator .cal_input .cdt_txt, 
#calculator .cal_input select { display: inline-block; width: auto; border: 1px solid #bcbcbc; background-color:var(--white); padding-right: 1rem; border-radius: var(--br_s); font-size: 1.6em; margin-right: 1rem; }
#calculator .cal_input select { padding: 0.2rem 1rem 0; color:var(--orange);  }
#calculator .cal_input select:focus{border: 1px solid  #bcbcbc!important;  }
#calculator .cal_input .cdt_txt input { color:var(--orange); background-color: rgba(0,0,0,0); border: none!important;  }
#calculator .cal_input .cdt_txt #sel_money { width: 110px!important; }
#calculator .cal_input .cdt_txt #sel_rate { width: 90px!important; }
#calculator .cal_input p { line-height: 58px; display: inline-block; margin: 0 1rem 0 0; font-size: 1.6em; }
#calculator .cal_input button { position: absolute!important; right: 0; top: 40%; transform: translateY(-50%); width: 18%; font-size: 1.2rem!important; }
#calculator .cal_result { border-top: solid 1px #ddd; padding-top: 3rem; margin-top: 2rem; text-align: center; }
#calculator .cal_result .txt_01 { font-size: 1.2em; }
#calculator .cal_result .txt_02 { font-size: 2.2em; font-weight: bold; margin: 0.2rem 0 1.5rem; transition: ease all 300ms;}
#calculator .cal_result .txt_02 .fc_blue {font-size: 1.25em; animation-name: blink 1s step-end; display: inline-block;}
#calculator .cal_result .txt_03 {font-size: 1.1em;}

/* 자주 묻는 질문 line-height:24px;*/
.qna-list { border-top: 2px solid #000; }
.qna-item { border-bottom: 1px solid #e6e6e6; }
.qna-item:hover { background: #f8f8f8; }
.qna-item .question-article {padding:0 2rem;border-bottom:0;}
.qna-item:first-child .question-article {border-top:0;}
.qna-item.on .question-article {border-bottom:0;}
.qna-item.on + .qna-item .question-article {border-top:0;}
.qna-item .question {display:flex; justify-content: space-between; align-items: center; position:relative; color:#333; font-weight: 500; transition:all 0.3s ease; font-size: 1.3em; line-height: 65px; }
.qna-item.on .question { font-size: 1.3em; color: var(--point); }
.question .fa-chevron-down { float: right; line-height: 65px; color: #b7b7b7; }
.qna-item .question span.q { margin-right: 10px; display: inline-block; font-weight: bold; }
.qna-item .answer-article a:hover { text-decoration: underline; }
.qna-item .answer-article {display:none; padding:33px; border:0; background:#f8f8f8; color:#666; font-size:18px;  border-top: 1px solid #e6e6e6;}
.qna-item .answer-article strong {font-weight:normal; display: none; }


/* 신청 폼 2  */
#form .tit { margin-bottom: 0 !important; padding-bottom: 5rem; position: relative;}
#form .tit .form_img  {z-index: 1; position: absolute; bottom: -8rem; right: 3%;  width: 30%; max-width: 400px; transition: var(--q_trans); }


/* 후기  padding: 3rem; box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;*/
#review{ background-image:url(https://allbar.co.kr/allb/images/review_bg.png); background-size:20px 12px; background-repeat: repeat-x; background-position:top; }
	#review ul li { width: 32.5%; }
	#review ul li img { display: block; width: 175px; margin: 0 auto;  }

/* 보이스피싱 주의 */
#warning { color:var(--white); background-color: #151e28;
	background-image: url(https://allbar.co.kr/allb/images/warning.png), linear-gradient(to bottom, #002757,  #0d1218);
background-size:contain, cover;
background-repeat: no-repeat;
background-position: center bottom; }
#warning .tit {  margin-bottom: 3rem!important; }
#warning .tit i { color:var(--red); }
#warning .tit p::after { display: none; }
#warning .tit .txt_01 { margin: 1.5rem 0 0.5rem; }

/* 워닝 텍스트 박스 max-width: 750px;*/
#warning .listbox {  width: fit-content;  font-size: 1.2em; margin: 0 auto 3rem; text-align: center; border-radius:var(--br_xl); 
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0px 0px rgba(255, 255, 255, 0);  position: relative; overflow: hidden; }
#warning .listbox::before,#warning .listbox::after{content: ''; position: absolute; top: 0; left: 0;}
	#warning .listbox::before { right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.8),ransparent);}
#warning .listbox::after { width: 1px; height: 100%;background: linear-gradient(180deg,rgba(255, 255, 255, 0.8),transparent,rgba(255, 255, 255, 0.3));}
#warning .listbox .header { font-size: 1.2em; font-weight: bold; margin-bottom: 1rem; }
#warning .listbox li { margin-bottom: 0.3rem; line-height: 1.6}
	#warning .listbox li:last-of-type { margin-bottom: 0; }
#warning .listbox li i { margin-right: 0.5rem; }
#warning .listbox li span.point_line {color:var(--red); font-weight: bold; border-bottom: 2px solid var(--red)}
#warning .txt_03 { width: 100%; word-break: keep-all; text-align: center; margin: 0 auto; }

/* 푸터 */
footer { padding: 5.5rem 0; font-size: 16px; letter-spacing: -1px; }
footer a{ color: var(--point); }
footer a:hover { color: var(--point_hover); }
footer .grow_1{width: 48%;}

footer ul li{ position: relative; margin-left: 1rem; margin-bottom: 0.5rem; }
footer ul.ul_01 li:before { content: '· '!important; position: absolute; left: -.7rem;opacity: 0.7; }
footer ul.ul_02 li:before { content: '- ';  position: absolute; left: -.9rem; transform: scale(0.8); opacity: 0.7;}






/* ==================== 모바일 레이아웃 ==================== */

/* 1280px */
@media (max-width: 1280px ) {
	
/* 메인 ebf9ff */
main {
	padding: calc(var(--sec_pd) * 1.9) 0 var(--sec_pd); 
	background-image: url(https://allbar.co.kr/allb/images/main_bg_m.png); 
	background-position: bottom center ;
	min-height: 85vh;
}
main .wrap { text-align: center;}
main .circle_box_pack  {justify-content: center;}
main .circle_box_pack .circle_box {min-width: 60px; background-color: rgba(24, 65, 198, 0.55); }

/* 월 납입금 계산기 */
	#calculator .cal_input .innerwrap .d_flex { margin-bottom: 1rem; }
		#calculator .cal_input .innerwrap .d_flex:last-of-type { margin-bottom: 0.5rem; }
	
/* 대출 성공사례 */
	#review ul { display: inline-block; }
	#review ul li { display: inline-block; width: 100%; margin-bottom: 1rem; text-align: center; }
		#review ul li:last-of-type { margin-bottom: 0; }
	#review ul li img { margin: 0 auto 2rem; max-width: 175px; width: 30%; min-width: 80px; }
	footer .wrap {padding: 1rem;}
	
/*	폼이미지*/
.form_sect .tit .form_img, #form .tit .form_img  { bottom: -5rem; right: -1%; width:28%; max-width: 350px; }
}

@media ( max-width: 900px ) {
/* 공통 - 타이틀 */
.form_sect .tit { padding-left: 0;}

	.form_sect .tit .txt_01 span{padding: 1rem .5em; display: flex; justify-content: center; align-items: center; line-height: 1;}
	.form_sect .tit .txt_02 {padding-left: 1rem;}
/* ★★★★★ 마이카드 ★★★★★*/
.MyCard{ gap:calc(var(--base-px) * 8); padding: calc(var(--base-px) * 10) calc(var(--base-px) * 8); }

	/* 포인트 */
	#prod_point .allb_Logo {width: 30px; margin-top: 1rem;}
	#prod_point  ul.point_cont {display: flex; width: 100%; justify-content: space-between; align-items: stretch; flex-wrap: wrap; gap: 1rem;}
	#prod_point  ul.point_cont li { width: 48%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; padding: 1.5rem 1rem; font-size: 1em; }
	#prod_point  ul.point_cont li .txt_01 { width: 100%;  }
	#prod_point  ul.point_cont2 li{ width: 100%; padding-top: 2rem; padding-bottom: 2rem; }
	#prod_point  ul.point_cont2 li .fs_18{font-size: 1.3rem;}
	/* 화살표 */
	.spiralArrow{height: 70px;}


	/* 상세정보 */
	#prod_info { padding: 5rem 0!important; }
	#prod_info .info_cont > img { width: 50%; margin-right: 0; }
	#prod_info .info_cont ul { width: 100%; }
	#prod_info .info_cont ul li { text-align: left; font-size: 1em; }
		#prod_info .info_cont ul li span.fs_16{font-size: 1rem;}
	/* 진행 절차 */
	#prod_step .txtwrap .txt_01 { font-size: 2em; }
	#prod_step ul { display: inline-block; }
	#prod_step ul .item { width: 100%; font-size: 1.2em; }
	#prod_step ul .item .icon { display: inline-block; background-color:var(--white); width: 70px; height: 70px; line-height: 70px; border-radius: var(--br_c); font-size: 1.5em; }
	#prod_step ul .item .txt_01 { display: inline-block; font-size: 1.1em; width: 100%; margin: 1rem 0 0.4rem; }
	#prod_step ul .item .txt_02 { font-size: 0.9em; }
	#prod_step ul .arrow { position: relative; transform: rotate(90deg); margin: 1.5rem auto 1.7em; }
	
	
	/* 월 납입금 계산기 */
	#calculator .cal_input { text-align: center; }
	#calculator .cal_input .innerwrap { width: 100%; text-align: center; font-size: 1rem;}
	#calculator .cal_input .innerwrap .d_flex { justify-content: center; margin-bottom: 0rem; height: 45px }
		#calculator .cal_input .innerwrap .d_flex:last-of-type { margin-bottom: 0; }
	#calculator .cal_input .cdt_txt, #calculator .cal_input select { font-size: 1.2em; }
	#calculator .cal_input .cdt_txt #sel_money { width: 90px!important; height: 35px!important; }
	#calculator .cal_input input, #calculator .cal_input select { height: 35px!important; }
	#calculator .cal_input p { font-size: 1.2em; }
	#calculator .cal_input button { position: relative!important; right: auto; transform: none; margin: 0.5rem auto 0; width: 60%;}
	#calculator .cal_result { padding-top: 2rem; }
	#calculator .cal_result .txt_01 { font-size: 1.1em; }
	#calculator .cal_result .txt_02 { font-size: 1.58em; }
	#calculator .cal_result .txt_03 { font-size: 0.85em; text-align: left; }
	
	/* 자주 묻는 질문 */
	.qna-item .question-article { padding: 0rem 1rem; font-size: 0.85em; }
	.qna-item .question { line-height: 55px; }
	.qna-item .answer-article { padding: 1.5rem; }
	.qna-item .answer-article #answer-cnt { font-size: 0.8em; }
	
	/* 대출 성공사례 */
	#review ul li { padding: 2rem 1rem; }
	#review ul li img { margin: 0 auto 1rem; }
	#review ul li .txtwrap .txt_01 { font-size: 1.4em; }
	#review ul li .txtwrap .txt_03 { font-size: 0.9em; }
	.review_cont .MyCard {margin-top: 0; margin-bottom: 0;}
	/* 신청 폼 */
	[id^="_fieldset"] { width: 100%; }
	#form .form_btn { margin-top: 0.5rem; }
	
	/* 보이스피싱 주의 */
	#warning .tit { margin-bottom: 2rem!important; }
	#warning .tit .txt_02 { margin-top: 1rem!important; }
	#warning .listbox { padding: 1.5rem 2.5rem; font-size: 0.85em; margin: 0 auto 2rem; }
	#warning .listbox .header { font-size: 1.3em; }
	#warning .txt_03 { font-size: 0.85em; }
	#warning .listbox li { font-size: 0.9em}
	#warning .listbox li i { margin-right: 0.2rem; margin-top: -2px;}

	/* 푸터 */
	footer .infobox {flex-wrap: wrap; flex-direction: column;}
	footer .grow_1{width:100%;}
	
/*	폼이미지*/
.form_sect .tit .form_img, #form .tit .form_img  { bottom: -3rem; right: 0; width:25%; max-width: 300px; }
}
@media ( max-width: 600px ) {
/* 공통 - 타이틀 */
body > section > .wrap > .tit > .txt_01 {font-size: 1.8em; }
body > section > .wrap > .tit > .txt_02 { font-size: 1em; }
		
/*	폼이미지*/
	.form_sect .tit, #form .tit {padding-bottom:180px;  }
	.form_sect .tit{text-align: center!important; padding-left: 0 }
	    .form_sect .tit .txt_01 span {padding: 1.35rem 1rem 1rem;  }
.form_sect .tit .form_img, #form .tit .form_img  { width:auto; max-height: 180px; right: 50%; transform: translateX(50%);}
}
/* ==================== oneWaySend ==================== */

.result_page { text-align: center; position: absolute; width: 100%; height: inherit; }
.result_page .innerwrap {  width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);  }
.result_page img { width: 110px; }
.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.5rem; }
.result_page a { background-color: rgba(0,0,0,0.8); color:var(--white); padding: 0.7rem 2rem; border-radius: var(--br_c); margin-top: 2.5rem; }

@media only screen and (min-width: 300px) and (max-width: 850px) {
	.result_page img { width: 85px; }
	.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.2rem; }
	.result_page a { margin-top: 2rem; }
}

/* ========================================================================== */