@charset "utf-8";
/* CSS Document */
/* 메인ebf9ff */
main {
	padding: 12rem 0 0; 
	background-image:url(../images/main_bg_pat.png); 
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position: center;
	transition: all var(--q_trans); 
}
/* main .wrap { padding-top: 6rem; padding-bottom: 3rem; } */
main .wrap .txt_02 {letter-spacing: -0.045rem; }
main .wrap p.fs_24 span.border_point{background-color: rgba(0,93,191,0.08); text-shadow: 0 0 3px #fff;} 
main .circle_box_pack .circle_box:nth-child(1){ background-color: rgba(0, 40, 97, 0.4); }
main .circle_box_pack .circle_box:nth-child(3){ background-color: rgba(0, 40, 97, 0.5); }
main .circle_box_pack .circle_box:nth-child(5){ background-color: rgba(0, 40, 97, 0.6); }
main .circle_box_pack .circle_box:nth-child(7){ background-color: rgba(0, 40, 97, 0.7); }


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

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

body > section > .wrap > .tit > .txt_01 {font-size: 3em; position: relative; margin-bottom:6rem; }
	body > section > .wrap > .tit > .txt_01::before { content: ''; position: absolute; width: 150px; height: 1px;  left: 50%; transform: translateX(-50%); bottom: calc(-3rem + 2px); display: block; z-index: 1;}	
	body > section > .wrap > .tit > .txt_01::after { content: ''; position: absolute; width: 40px; height: 5px;  left: 50%; transform: translateX(-50%); bottom: -3rem; display: block; z-index: 2; }	
		body > section > .wrap > .tit > .txt_01.fc_point::before{background-color: var(--point);}
		body > section > .wrap > .tit > .txt_01.fc_point::after{background-color: var(--light_blue);}

		body > section > .wrap > .tit > .txt_01.fc_orange::before{background-color: var(--orange);}
		body > section > .wrap > .tit > .txt_01.fc_orange::after{background-color: var(--red);}

body > section > .wrap > .tit > .txt_02 { font-size: 1.3em;}

/* 텍스트배너 box-shadow: inset 0 0 12rem rgba(161, 130, 255, 0.3);*/
#txt_banner{padding: 0; overflow: hidden;}
#txt_banner .circle_box{margin: -5rem; }
#txt_banner .circle_box img { display: block; margin:2rem; width: 100%; max-width:600px;  }

/* 포인트 border-width: 10px; background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;*/
#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_l); font-size: 1em; background-color:var(--white); padding: calc(var(--base-px) * 5) calc(var(--base-px) * 4); box-shadow: 0 30px 100px 0 rgba(149, 161, 191, 0.4),0 5px 20px 0 rgba(149, 161, 191, 0.15); }
#prod_point ul li .num { display: flex; justify-content: center; align-items: center; border-radius: var(--br_l); background-color:var(--surface); color:var(--orange); width: 5rem; aspect-ratio: 1/1; line-height: 1px; font-size: 2rem; margin: 0 auto 1.5rem; font-weight: bold;}
#prod_point ul li .txt_01 > strong{color: var(--orange);}

.cont2 li{display: flex; align-items: center; gap:1.5rem; width: 32%; box-shadow: 0 30px 100px 0 rgba(193, 199, 212, 0.4); }
.cont2 li p {text-align: left}


.MyCard{background-color:#ffffff; border-radius:var(--br_l); gap:calc(var(--base-px) *  4); padding: calc(var(--base-px) * 5) calc(var(--base-px) * 4); box-shadow: 0 30px 100px 0 rgba(193, 199, 212, 0.4); }

/* 상세정보  background-color:var(--surface); background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);*/
#prod_info { padding: 7.5rem 0 0!important; }
#prod_info .flexwrap > img { margin-right: 5rem; align-self: flex-end }
#prod_info .flexwrap ul { width: fit-content; }
#prod_info .flexwrap ul li { width: 100%; margin-bottom: 1rem; border-radius: var(--br_l); }
#prod_info .flexwrap ul li i { font-size: 1.3em; margin-right: 1rem; }
#prod_info .flexwrap ul li p span.marker_sky {font-size: 1.2rem;}

/* 진행 절차  background-color:var(--surface); background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);*/
#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%; background: rgba(0,0,0,0.15); border-radius: var(--br_l); padding: calc(var(--base-px) * 5) calc(var(--base-px) * 4);}
#prod_step ul .item .num { font-size: 0.9em; margin-bottom: 1rem; }
#prod_step ul .item .icon { background-color:var(--surface); display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border-radius: var(--br_r); font-size: 1.5em; box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px; margin: 0 auto;}

#prod_step ul .item .txt_01 { display: inline-block; font-size: 1.1em; width: 100%; margin: 1.5rem 0 1rem; }
#prod_step ul .item .txt_02 { font-size: 0.9em; }
#prod_step ul .arrow { font-size: 1.5em; width: 3%; align-self: center }

/* 월 납입금 계산기 */
#calculator .cal_input { position: relative; width: 100%; }
	#calculator .cal_input .innerwrap { width: 90%; display: flex; flex-direction: column; }
	#calculator .cal_input .innerwrap .d_flex { display: flex; }
	#calculator .cal_input .cdt_txt, 
	#calculator .cal_input select { display:flex; 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: 0rem 1rem 0; color:var(--point);  }
	#calculator .cal_input select:focus{border: 1px solid  #bcbcbc!important;  }
	#calculator .cal_input .cdt_txt input { color:var(--point); background-color: rgba(0,0,0,0); border: none!important;  }
	#calculator .cal_input .cdt_txt #sel_money { width: 100px!important; }
	#calculator .cal_input .cdt_txt #sel_rate { width: 80px!important; }
	#calculator .cal_input p { font-size: 1.6em; margin-right: 1rem;}
	#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_grd { animation-name: blink 1s step-end; display: inline-block;}
	#calculator .cal_result .txt_03 {font-size: 1.1em;}

/* 자주 묻는 질문 line-height:24px;*/
#qna{padding-bottom: 0;}
.qna_img{width: auto; align-self: flex-end;}
.qna_box{ width: 100%; max-width: 600px; }
.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; }

/* 대출 성공 사례  padding: 3rem;*/
#review ul li { background-color:var(--white); width: 33%; 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: 0 auto;  }
#review ul li .txt_01 { margin: 0 0 0.2rem; }
#review ul li .txtwrap {}

/* 신청 폼 */
[id^="_fieldset"] { width: 49%; }
#form.LS_gray_1{ background-image: url(../images/form_top.png), url(../images/form_top.png); background-size: 450px, 300px; background-position: left -25px top 100px, right bottom 50px; background-repeat: no-repeat}
#form .tit { margin-bottom: 0; padding-bottom: 5rem; position: relative;}
#form .tit .form_img {z-index: 1; position: absolute; bottom: -2.7rem; right: 3%;  width: 30%; max-width: 280px;}



/* 보이스피싱 주의 */
#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 {  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); }
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;}


/*폼 바*/
.cert_loading {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

	.bar_wrap {
		display: flex;
		gap: 5px;
	}

	.bar {
		width: 1rem;
		height: 1.25rem;
		background-color: #cfe7ff; /* 옅은 색 */
		border-radius: 2px;
		animation: fillBar 3s infinite;
	}

		/* 왼쪽 → 오른쪽 순차 애니메이션 */
		.bar:nth-child(1)  { animation-delay: 0s; }
		.bar:nth-child(2)  { animation-delay: 0.1s; }
		.bar:nth-child(3)  { animation-delay: 0.2s; }
		.bar:nth-child(4)  { animation-delay: 0.3s; }
		.bar:nth-child(5)  { animation-delay: 0.4s; }
		.bar:nth-child(6)  { animation-delay: 0.5s; }
		.bar:nth-child(7)  { animation-delay: 0.6s; }
		.bar:nth-child(8)  { animation-delay: 0.7s; }
		.bar:nth-child(9)  { animation-delay: 0.8s; }
		.bar:nth-child(10) { animation-delay: 0.9s; }

		@keyframes fillBar {
			0% {
				background-color: #cfe7ff;
				opacity: 0.5;
			}
			40% {
				background-color: var(--light_blue); /* 진한 색 */
				opacity: 1;
			}
			100% {
				background-color: #cfe7ff;
				opacity: 0.5;
			}
		}


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

/* 1200px */
@media ( max-width: 1200px ) {
	main{ 
		
		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: 2.5rem; }
	main .wrap a.btn_style_01 { margin: 1.5rem 0 2rem; }	
	/* 월 납입금 계산기 */
	#calculator .cal_input .innerwrap{display: flex; flex-direction: column;}
		#calculator .cal_input .innerwrap .d_flex { margin-bottom: 0rem; }
	
	/* 대출 성공사례 */
	#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 .tit .form_img { width:25%; max-width: 200px;}
}

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

.MyCard{ gap:calc(var(--base-px) *  6); padding: calc(var(--base-px) * 10) calc(var(--base-px) * 8); }
	/* 공통 - 패딩 */
	#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 > .txt_02 { font-size: 1em; margin-top: 3em!important; }
	
	/* 텍스트배너 */
	#txt_banner .wrap { flex-wrap: wrap; justify-content: center; flex-direction: column-reverse; gap: 2rem; }
	/* 텍스트배너 box-shadow: inset 0 0 12rem rgba(161, 130, 255, 0.3);*/
	#txt_banner .circle_box{margin: 0rem; width: 70vw; }
	#txt_banner .circle_box img { margin:auto; width:100%; max-width:500px;  }
	/* 포인트 */
	#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_point .cont2 {flex-direction: column; margin-bottom: 5rem }
	#prod_point .cont2 li{width: 90%; margin-left: 5%; flex: none}	
	/* 상세정보 */
	#prod_info { padding: 5rem 0!important; }
	#prod_info > .wrap > .flexwrap { display: inline-block; text-align: center; }
	#prod_info .flexwrap > img { width: 50%; 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; padding: calc(var(--base-px) * 12);}
	#prod_step ul .item .icon { display: inline-block; background-color:var(--white); width: 70px; height: 70px; line-height: 70px; }
	#prod_step ul .item .txt_01 { display: inline-block; font-size: 1.1em; width: 100%; }
	#prod_step ul .item .txt_02 { }
	#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%; height: fit-content; text-align: center; font-size: 1rem;}
	#calculator .cal_input .innerwrap .d_flex { justify-content: center; height: fit-content; gap:.5rem}
	#calculator .cal_input .innerwrap > p{padding: 1.5rem;}	
	#calculator .cal_input .cdt_txt, 
	#calculator .cal_input select { font-size: 1.3em; }
	#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.3em; }
	#calculator .cal_input button { position: relative!important; right: auto; transform: none; margin: 0.5rem auto 0; width: 60%; font-size: 1.25rem!important;}
	#calculator .cal_result { padding: 2rem 1.5rem 0; }
	#calculator .cal_result .txt_01 { font-size: 1.3em; }
	#calculator .cal_result .txt_02 { font-size: 1.58em; }
	#calculator .cal_result .txt_03 { font-size: 1.3em; }
		#calculator .cal_input .cdt_txt, #calculator .cal_input select,#calculator .cal_input p {margin-right: 0rem;}
	
	/* 자주 묻는 질문 */
#qna{padding-bottom: 0;}
.qna_cont{gap:0}
.qna_img{width: 40%; margin: 0 auto;}
.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; }
	
	/* 신청 폼 */
	[id^="_fieldset"] { width: 100%; }
	#form .form_btn { margin-top: 0.5rem; }
	/*	폼이미지*/
	.cert_loading img.bounce {max-width:45px;}
	.form_top_img {width: 40%; }
	
	#form.LS_gray_1{ background-size: 140px, 100px; background-position: left -40px top 40px, right -25px top 60px; background-repeat: no-repeat; }
	#form .tit {padding-bottom: 2rem!important; }
	#form .tit .fs_65{ margin-bottom: 1rem!important; }
	#form .tit .txt_02{margin-top: 1.5rem!important; }
	/* 보이스피싱 주의 */
	#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%;}
}
/* ==================== 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; }
}

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