@charset "utf-8";
/* CSS Document */

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
@font-face {
    font-family: 'ELAND_Nice_M';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; width:100%; height:100%; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit;box-sizing: inherit; }
body { position: relative; height: 100%; background-color: #f6f9fa; overflow-x: hidden!important;}
body *{ box-sizing: border-box;  }
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, strong, sub, sup, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, embed, input, select, textarea, button {margin:0;padding:0;}
body, html { font-size:18px; /* line-height: +1.4; */ font-family: 'Noto Sans KR', sans-serif; color: #333c4a; letter-spacing: -1px;}
input, button, textarea {font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.025em; padding: 2%; }
code, pre {font-size:1.3em; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.025em; }
address, em, cite {font-style:normal;}
img { border:0 none; /* image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; */ }
hr {display:none;}
table {border-collapse:separate;border-spacing:0;}
/* caption, .hd {width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;} */
th, td {vertical-align:top;text-align:left;font-weight:normal;}
li {list-style-type:none;}
form {margin:0;padding:0;}
fieldset {border:0 none;}
legend, .hd {position: absolute;border:0px;width: 1px;height: 1px;clip: rect(1px, 1px, 1px ,1px);clip-path:inset(50%);overflow: hidden;}
label, button {cursor:pointer;}
input[type="date"] { display:block; -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; min-width: 100%; }
button {overflow: visible; border: none; background: transparent; white-space: nowrap; vertical-align: top; text-decoration:none; }
button::-moz-focus-inner {border:0;padding:0;}
a:link, a:visited, a:hover, a:active { text-decoration:none;*cursor:pointer;}
img{vertical-align: top}
div, input { box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* 스크롤바 전체 */ ::-webkit-scrollbar { width: 8px; background-color: #cecfd0!important; }
/* 스크롤바 막대 */ ::-webkit-scrollbar-thumb { background-color: #9e9fa2!important; }
/* 스크롤바 외부 */ ::-webkit-scrollbar-track { background-color: #cecfd0!important; }

/* 플레이스홀더숨김 */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

.blockclear { content: ""; display: block; clear: both; }

/* Wrap */
.wrap { width: 100%; margin:0 auto; max-width: 1000px; overflow-x: hidden; overflow-y: hidden; }
.wrap:after{display:block; clear:both; content:'';}


/* PC,Mobile */

/* Flex */
.flexwrap {
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.jc_cen { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.jc_r { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; }
.jc_sb { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.ai_cen { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.ai_st { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.ai_en { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }



/*Animations*/
[data-animate-in] {
    opacity: 0;
    transition: transform 0.8s ease, opacity 2s ease
}

[data-animate-in="up"] {
    transform: translate3d(0, 24px, 0)
}

[data-animate-in="left"] {
    transform: translate3d(-25%, 0, 0)
}

[data-animate-in="right"] {
    transform: translate3d(25%, 0, 0)
}

[data-animate-in="down"] {
    transform: translate3d(0, -24px, 0)
}

[data-animate-in="fadeIn"] {
    transform: translate3d(0, 0, 0)
}

[data-animate-in].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease
}

.page-loaded .fade-in,.page-loaded.fade-in {
    opacity: 1
}

.isSafari.isTouch [data-animate-in],.isSafari.isTouch [data-animate-in="up"] {
    opacity: 1;
    transition: none;
    transform: none
}


/******************************************************************************************************************************/

/* 결과 페이지 */
html, body { width: 100%; height: 100%; }

.result_page > div { position: absolute; text-align: center; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; }
.result_page > div > div > img { display: inline-block; }
.result_page > div > div > strong { display: inline-block; font-size: 2em; margin-top: 20px; }
.result_page > div > div > p { font-size: 1.3em; margin-bottom: 30px; }
.result_page > div > div > .flexwrap { text-align: center; }
.result_page > div > div > .flexwrap > a { display: inline-block; background-color: #333; color: #fff; padding: 15px 25px; border-radius: 200px; display: inline-block; font-size: 1.1em; font-weight: bold; margin-left: 8px; }
.result_page > div > div > .flexwrap > a:first-of-type { margin-right: 0%; }

/* 우측 고정 네비 */
.fix_nav { display: inline-block; z-index: 8888; position: fixed; bottom: -4%; right: 0; margin: 3%; }
.fix_nav li { border-radius: 500px; padding: 0.6rem 0.7rem; margin-bottom: 1rem; box-shadow: 6px 6px 10px 1px rgb(0 0 0 / 20%); }
.fix_nav li a { width: 240px; }
.fix_nav li a .txtwrap { line-height: 1.2; margin-left: 0.7rem; }
.fix_nav li a .txtwrap .txt_01 { font-size: 0.9em; }
.fix_nav li a .txtwrap .txt_02 { font-weight: bold; font-size: 1.4em; }
.fix_nav .fix_btn_01 { background-color: #0bbfe1; }
.fix_nav .fix_btn_01 a .txtwrap .txt_01 { color: #fff; }
.fix_nav .fix_btn_01 a .txtwrap .txt_02 { color: #333; }
.fix_nav .fix_btn_02 { background-color: #FAE100; }
.fix_nav .fix_btn_02 a { color: #3B1E1E; }

/* 심의필 */
.header_top { background-color: #333; color: #fff; font-size: 1.3em; padding: 8px 0; bottom: 0;  right: 0; }

/* 폰트 스타일 */
.title_main,.title_sub, .point_font, main > .wrap > .innerwrap > ul > li
{ font-family: 'ELAND_Nice_M'; font-weight: normal; font-style: normal; }
.italic { font-style: italic; }
.title_main { font-size: 4.5em; }
.title_sub { font-size: 3.5em; }
.fs_01 { font-size: 1.3em; }
.fs_02 { font-size: 1.8em; }
.fs_03 { font-size: 2em; }
.fs_04 { font-size: 2.3em; }


/* 폰트 컬러 */
.fc_white { color: #fff; }
.fc_point_01 { color: #7242FF; }
.fc_point_02 { color: #fecb00; }
.fc_point_03 { color: #fa6600; }
.fc_point_04 { color: #6039D4; }
.fc_gray { color: #555; }

/* 이미지 pc,mobile 구별 */
.mobile_img { display: none; }

/* 타이틀 공용 */
.titlewrap { width: 100%; text-align: center; }
.titlewrap > .fs_02 { font-style: italic; margin-bottom: 1%; font-weight: 500; }

/* 메인 */
main { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("../images/main_bg.png"); }
.main_top { padding: 1% 0; }
.main_logo { max-width: 200px; }
.tel_btn { display: inline-block; width: 41%; }
.tel_btn > a > p:last-of-type { font-weight: bold; }
main > .wrap > .innerwrap { height: 640px; padding-top: 1.3%; }
main > .wrap > .innerwrap > p { text-align: center; margin-top: 2.5%; }
main > .wrap > .innerwrap > p > strong { font-size: 1.2em; }
main > .wrap > .innerwrap > ul { display: inline-block; width: 100%; position: relative; margin-top: 3%; }
main > .wrap > .innerwrap > ul > li { display: inline-block; border-radius: 200px; width:30%; border: solid 2px #fa6600; padding: 2.5% 0; text-align: center; background-color: #fff; box-shadow: 0 0 15px 1px rgb(0 0 0 / 30%); position: absolute; top:50%; }
main > .wrap > .innerwrap > ul > li:first-of-type { left: 50%; transform:translateX(-135%); }
main > .wrap > .innerwrap > ul > li:nth-of-type(2) { left: 50%; transform:translateX(-50%);  }
main > .wrap > .innerwrap > ul > li:last-of-type { left: 50%; transform:translateX(35%); }
main > .wrap > .innerwrap > ul > li > p > span { display: inline-block; font-size: 0.6em; margin-bottom: 1.5%; font-style: italic; }

/* 모바일 이미지 변환 */
.m_img { display: none; }

/* 섹션 공동 패딩 */
.no, .ok, .step, .review_area { padding: 6% 0; }

/* no */
.no { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("../images/no_bg.jpg"); text-align: center; }
.no > .wrap > .titlewrap > .fs_02 > strong { font-size: 1.3em; }
.no > .wrap > .fs_01 { display: inline-block; margin-top: 2%; }
.no > .wrap > ul { 
	margin-top: 5%; 
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
 }
.no > .wrap > ul > li { display: inline-block; position: relative; }
.no > .wrap > ul > li > p { position: absolute; transform: translateY(-50%); top: 68%; left: 50%; transform: translateX(-50%); width: 84%; }

/* ok */
.ok { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("../images/ok_bg.jpg"); }
.ok > .wrap > ul { display: inline-block; width: 100%; border-top: dotted 1px #ccc; border-bottom: dotted 1px #ccc; margin-top: 5%; }
.ok > .wrap > ul > li { float: left; width: 50%; text-align: left; padding: 2.5%; }
.ok > .wrap > ul > li > .flexwrap { width: 100%; }
.ok > .wrap > ul > li > .flexwrap > img { display: inline-block; width: 36%; max-width: 150px; }
.ok > .wrap > ul > li > .flexwrap > p { display: inline-block; font-weight: 500; text-align: left; padding-left: 4%; }
.ok > .wrap > ul > li > .flexwrap > p > span:first-of-type { display: inline-block; margin-bottom: 3%; }
.ok > .wrap > ul > li:nth-of-type(2n+0) { border-left: dotted 1px #ccc; }
.ok > .wrap > ul > li:first-of-type, .ok > .wrap > ul > li:nth-of-type(2) { border-bottom: dotted 1px #ccc; }

/* 대출절차 */
.step { background-repeat: no-repeat; background-size: cover; background-position: bottom; background-image: url("../images/step_bg.jpg"); }
.step > .wrap > ul { margin-top: 5%; }
.step > .wrap > .titlewrap > .title_sub { display: inline-block; margin-bottom: 3%; }
.step > .wrap > ul > li { display: inline-block; float: left; width: 49%; position: relative; margin-bottom: 2%; }
.step > .wrap > ul > li:nth-of-type(2n+0) { margin-left: 2%; }
.step > .wrap > ul > li > .innerwrap
{ position: absolute; transform: translateY(-50%); top: 62%; left: 50%; transform: translateX(-50%); text-align: center; width: 84%; }


/* 리뷰 */
.review_area { background-image: url("../images/img04_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } 
.review { margin-top: 5%; }

/* Form */
form { background-color: #fa6600; }
form > .wrap { 
	height: 350px;	
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}

form > .wrap > .form_header_area { width: 45%; height: 350px; background-image: url("../images/form_line.png") ; background-repeat: repeat-y; background-size: auto; background-position: top right;  height: inherit; padding-right: 3%; text-align: center; position: relative; }
form > .wrap > .form_header_area > .innerwrap { position: absolute; top: 50%; transform: translateY(-50%); }
form > .wrap > .form_header_area > .innerwrap > .tel_btn { width: 100%; margin-top: 2.5%; }
form > .wrap > .form_header_area > .innerwrap > p:first-of-type { font-size: 1.2em; margin-bottom: 1%; }
form > .wrap > .form_header_area > .innerwrap > p:last-of-type { font-size: 0.9em; margin-top: 1%; color: rgba(255,255,255,0.8); }
form > .wrap > .input_area { width: 60%; padding: 1.8% 0 0 4%; }
form > .wrap > .input_area > .flexwrap:first-of-type { margin-bottom: 10px; }
form > .wrap > .input_area > .flexwrap > label { display: inline-block; width: 20%; font-weight: bold; font-size: 1.2em; }
form > .wrap > .input_area > .flexwrap > input, form > .wrap > .input_area > .flexwrap > div { width: 80%; }
form > .wrap > .input_area > .flexwrap > div > input, form > .wrap > .input_area > .flexwrap > div > select { width: 32%; }
input, select { outline: 0; background: #fff; border: 0; padding: 15px; box-sizing: border-box; /* font-size: 1em; */ padding: 15px; height: 56px; }
select { height: 56px; }
.agree { margin-top: 10px; }
.mobile_agree { display: none; }
.form_btn { display: inline-block; width: 490px; height: 98px; background-image: url("../images/form_btn.png"); background-repeat: no-repeat; background-size: contain; background-position: center; margin-top: 20px; }
input[type="radio"] { width: 18px; height: 18px; vertical-align: middle; }

/* 푸터 */
footer { background-color: #333; color: #888; padding: 5% 0; }
footer > .wrap { 
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.mobile_footer_nav { display: none; }
.logo_area {width: 50%; margin-right: 5%; }
.txt_area > nav > a { color: #888; text-decoration: none; border-right: solid 1px #626262; margin-right: 15px; padding-right: 15px; }
.txt_area > nav > a:last-of-type { border-right: none; margin-right: 0px; }

.txt_area > p > span {color: #ACB4BB; }
.txt_area  > h3 {font-weight: normal; }
/******************************************************************************************************************************/

@media only screen and (max-width: 1100px) {
	
	body, html { font-size: 12px; }
	
	.wrap { padding: 0 3%; }
	/* 우측 고정 네비 */
	.fix_nav { 
		width: 100%;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
		justify-content: center;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0 2%;
	}
	.fix_nav li { width: 49%; max-width: 200px; margin: 0 0.3rem 0.7rem; }
	.fix_nav li a { width: 100%; }
	.fix_nav li a img { width: 27%; }
	.fix_nav li a .txtwrap .txt_02 { font-size: 1.2em; }
	
	/* 폰트스타일 */
	.title_main { font-size: 3em; }
	.title_sub { font-size: 2.5em; }
	.fs_01 { font-size: 1.2em; }
	.fs_02 { font-size: 1.35em; }
	.fs_03 { font-size: 1.8em; }
	
	/* 모바일 이미지 변환 */
	.m_img { display: inline-block; }
	.pc_img { display: none; }

	/* 메인 */
	main { background-image: url("../images/main_bg_m.jpg"); }
	.main_top { padding: 8px 15px; }
	.main_top > li:first-of-type { width: 35%; }
	.tel_btn { width: 40%; }
	.tel_btn > a { float: right; }
	.tel_btn > a > p:first-of-type { display: none; }
	main > .wrap { padding-bottom: 25%;}
	main > .wrap > .innerwrap { height: 60%; }
	main > .wrap > .innerwrap > p { font-size: 1em; }
	main > .wrap > .innerwrap > ul > li { width: 33%; border: solid 1px #fa6600; }
	main > .wrap > .innerwrap > ul > li > .fs_03 { font-size: 1.4em; }	
	
	/* 심의필 */
	.header_top { font-size: 1.3em; padding: 10px 12px; text-align: center; }
	
	/* 섹션 공동 패딩 */
	.no, .ok, .step, .review_area { padding: 10% 0; }
	
	/* 타이틀 */
	.titlewrap { font-size: 0.9em; }
	.titlewrap .title_sub { font-size: 2.3em; }
	
	/* no */
	.no > .wrap > .titlewrap > p:last-of-type { display: inline-block; margin: 3% 0 1%; }
	.no > .wrap > ul { display: block; }
	.no > .wrap > ul > li { width: 49%; float: left; font-weight: 500; }
	.no > .wrap > ul > li:first-of-type, .no > .wrap > ul > li:nth-of-type(2)
	{ margin-bottom: 2%; }
	.no > .wrap > ul > li:nth-of-type(2n+0) { margin-left: 2%; }
	.no > .wrap > ul > li > p { font-size: 1.2em; }	
	
	/* ok */
	.ok > .wrap > ul > li:nth-of-type(2n+0) { border-left: none; }
	.ok > .wrap > ul > li:first-of-type, .ok > .wrap > ul > li:nth-of-type(3) { border-right: dotted 1px #ccc; }
	.ok > .wrap > ul > li > .flexwrap > img { width: 27%; }
	
	/* 대출절차 */
	.step > .wrap > ul > li { display: inline-block; width: 100%; }
	.step > .wrap > ul > li:nth-of-type(2n+0) { margin-left: 0%; }
	.step > .wrap > ul > li > .innerwrap { text-align: left; top: 50%; left: 26%; width: 60%; transform: translateY(-50%); }
	
	/* 폼 */
	form > .wrap { height: auto; display: inline-block; padding: 3% 0 0; }
	form > .wrap > .input_area { display: inline-block; width:100%; padding: 0 4% 3%; margin-top: 5%; }
	form > .wrap > .form_header_area { display: inline-block; width: 94%; padding-right: 0%; position: static; background-image: url("../images/form_line_m.png"); background-repeat: repeat-x; background-position: bottom; padding: 0 0 5%; margin: 6% 3% 0; }
	form > .wrap > .form_header_area > .innerwrap { width: 100%; position: static; top: auto; transform: translateY(0);}
	form > .wrap > .form_header_area > .innerwrap > .tel_btn { display: none; }
	input { height: 56px; }
	form > .wrap > .input_area > .flexwrap > label { font-size: 1.0em; }
	.agree { margin-top: 4%; vertical-align: middle; }
	.pc_agree { display: none; }
	.mobile_agree { display: inline-block; }
	.form_btn { margin-top: 2%; width: 100%; max-width: 490px; }
	input[type="radio"] { width: 16px; margin: 0; padding: 1px 0 0; height: 16px; display: inline-block; }
	
	/* 푸터 */
	footer { padding: 8% 3% 30%; }
	footer > .wrap { display: inline-block; text-align: center; font-size: 0.6em;  }
	footer > .wrap > .logo_area { display: inline-block; width: 40%; margin-right: 0%; max-width: 223px; margin-bottom: 4%; }
	footer > .wrap > .txt_area { width: 100%; }
	footer > .wrap > .txt_area > nav { font-size: 1.2em; margin-bottom: 4%; }
	footer > .wrap > .txt_area > p > a { color: #888; }
	.mobile_footer_nav { display: inline-block; }
	.pc_footer_nav { display: none; }
}

@media only screen and (max-width: 340px) {
	
	body, html { font-size: 10px; }
	
}