@charset "utf-8";
/* CSS Document */
/* 메인ebf9ff */
main {
	padding: 10rem 0 3.5rem; 
	background-image:url(../images/main_bg_l.png), url(../images/main_bg_img.png), linear-gradient(to bottom, var(--gray_f9), #dbe9f6 80%); 
	background-size:650px, contain, cover; 
	background-repeat: no-repeat; 
	background-position: bottom left, right center, center;
	transition: all var(--q_trans); 
}
/* main .wrap { padding-top: 6rem; padding-bottom: 3rem; } */
main .wrap .txt_02 {letter-spacing: -0.045rem; }
main .wrap .txt_02 span {font-size: 1.2em; }


/* 공통 - 패딩 */
#prod_point, #prod_info, #txt_banner, #prod_step, #calculator, #qna, #review, #form, #warning,#privacy,#disclaimer,#liability, footer { display: block; padding: 8rem 0; }

/* 공통 - 타이틀 background-color: var(--purple);*/
body > section > .wrap > .tit { margin-bottom: 5rem; text-align: center; position: relative; }
body > section > .wrap > .tit > .txt_01 {font-size: 3em;  }
	/* body > section > .wrap > .tit::after { content: ''; position: absolute; width: 80px; height: 6px; background: linear-gradient(to right, #fdfc47, #24fe41); left: 50%; transform: translateX(-50%); bottom: -1.5rem; } */
body > section > .wrap > .tit > .txt_02 { font-size: 1.3em; }

/* 텍스트배너 */
#txt_banner{box-shadow: inset 0 0 12rem rgba(161, 130, 255, 0.3);}
#txt_banner img { display: block; margin:auto; width: 100%; max-width:480px;  }

/* 포인트 */
#prod_point ul {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; gap:1.5rem;}
#prod_point ul li {width: 18%;flex-grow: 1; text-align: center; padding: 2.25rem 0; border-radius:var(--br_r); background-color:var(--surface); background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); font-size: 1.1em; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;}
#prod_point ul li .num { display: flex; justify-content: center; align-items: center; border-radius: var(--br_c); background-color:var(--white); width: 5rem; aspect-ratio: 1/1; line-height: 1px; font-size: 2rem; margin: 0 auto 1rem; font-weight: bold;}
#prod_point ul li .txt_01 > strong{color: var(--purple);}

/* 상세정보 */
#prod_info { padding: 7.5rem 0 0!important; }
#prod_info .flexwrap img { margin-right: 5rem; }
#prod_info .flexwrap ul { width: 50%; flex-grow: 1;}
#prod_info .flexwrap ul li { width: 100%; margin-bottom: 1rem; background-color:var(--surface); background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); border-radius: var(--br_r); padding: 1.5rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;}
#prod_info .flexwrap ul li i { font-size: 1.3em; margin-right: 1rem; }
#prod_info .flexwrap 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: 2.2em; box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;}
#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 { font-size: 1.5em; width: 3%; }

/* 월 납입금 계산기 */
#calculator .cal_input { position: relative; width: 100%; }
#calculator .cal_input .innerwrap { width: 80%; display: inline-block; }
#calculator .cal_input .innerwrap .flexwrap { 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(--purple);  }
#calculator .cal_input select:focus{border: 1px solid  #bcbcbc!important;  }
#calculator .cal_input .cdt_txt input { color:var(--purple); 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;}

/* 자주 묻는 질문 */
.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(--purple); }
.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; line-height:24px; border-top: 1px solid #e6e6e6;}
.qna-item .answer-article strong {font-weight:normal; display: none; }

/* 대출 성공 사례 */
#review ul li { background-color:var(--white); width: 49%; padding: 3rem; border-radius: var(--br_r); box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;}
#review ul li img { display: block; width: 175px; margin-right: 2rem; }
#review ul li .txtwrap .txt_01 { font-size: 1.6em; margin: 0 0 0.2rem; }
#review ul li .txtwrap .star { margin: 0.2rem 0 1rem; }

/* 신청 폼 */
#form .tit { color:var(--white); margin-bottom: 0; padding-bottom: 5rem; position: relative;}
#form .tit .form_img {z-index: -1; position: absolute; bottom: 0; right: 5%;  width: 17%; max-width: 230px;}

/* 보이스피싱 주의 */
#warning { color:var(--white); background-color: #151e28;
	background-image: url(../images/warning.png), linear-gradient(to bottom, #17273a,  #0d1218);
background-size:contain, cover;
background-repeat: no-repeat;
background-position: center bottom; }
#warning .tit { color:var(--white); 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; }
footer a{ color: var(--point); }
footer a:hover { color: var(--point); }
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;}






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

/* 1200px */
@media ( max-width: 1200px ) {
	main{ 
		background-image: url(../images/main_bg_l.png), linear-gradient(to bottom, var(--gray_f9), #ebf9ff); 
		background-size:contain, cover; 
		background-repeat: no-repeat; 
		background-position:bottom left, center;}
/* 메인  */
	main .wrap { text-align: center;}
	main .wrap .txt_01 { font-size: 1.2em; line-height: 1.3; }
	main .wrap .txt_02 { font-size: 2.6em; line-height: 1.2; margin-top: 0.5rem; }
	main .wrap a.btn_style_01 { margin: 1.5rem 0 2rem; }	
	/* 월 납입금 계산기 */
	#calculator .cal_input .innerwrap .flexwrap { margin-bottom: 1rem; }
		#calculator .cal_input .innerwrap .flexwrap: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;}
}

@media only screen and (min-width: 300px) and (max-width: 850px) {

	/* 공통 - 패딩 */
	#prod_point, #prod_info ,#txt_banner, #prod_step, #calculator, #qna, #review, #form, #warning,#privacy,#disclaimer,#liability, footer { display: block; padding: 6rem 0; }

	/* 공통 - 타이틀 */
	body > section > .wrap > .tit { margin-bottom: 3rem;}
	body > section > .wrap > .tit > p:first-of-type { font-size: 1.8em; }
	body > section > .wrap > .tit > p:first-of-type::after { width: 30px; height: 5px; bottom: -1.0rem; }
	body > section > .wrap > .tit > .txt_02 { font-size: 1em; margin-top: 3em!important; }
	
	/* 텍스트배너 */
	#txt_banner .wrap { flex-wrap: wrap; justify-content: center; flex-direction: column-reverse; gap: 2rem; }
	#txt_banner img {width: 70%; margin: auto;}
	/* 포인트 */
	#prod_point ul {display: flex; width: 100%; justify-content: space-between; align-items: stretch; flex-wrap: wrap; gap: 1rem;}
	#prod_point ul li { width: 48%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; padding: 1.5rem 1rem; font-size: 1em; }
	#prod_point ul li .txt_01 { width: 100%; text-align: center; }
	
	/* 상세정보 */
	#prod_info { padding: 5rem 0!important; }
	#prod_info > .wrap > .flexwrap { display: inline-block; text-align: center; }
	#prod_info .flexwrap img { width: 70%; margin-right: 0; }
	#prod_info .flexwrap ul { width: 100%; }
	#prod_info .flexwrap ul li { text-align: left; font-size: 1em; }
		#prod_info .flexwrap 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: 0.9em;}
	#calculator .cal_input .innerwrap .flexwrap { justify-content: center; margin-bottom: 0rem; height: 45px }
		#calculator .cal_input .innerwrap .flexwrap: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: 70%;}
	#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; }
	
	/* 신청 폼 */
	#name_fieldset, #phone_fieldset, #insurance_fieldset, #property_fieldset, #overdue_fieldset, #income_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 0.25rem; 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%;}
}
/* ==================== 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; }
}

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