@charset "UTF-8";

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

 * { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; word-break: keep-all;} 

 html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  height: -webkit-fill-available;
}

h1, p, span, a { word-break: keep-all; }

.container .row { padding: 0; margin:0;}


.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #f4623a;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#mainNav {
	/*background: linear-gradient(to left top,#1f6da2,#d2dfe5);*/
	/*background: rgba(250, 250, 250, 0.8); */

	box-shadow: none;
	/*background-color: transparent;*/
	background-color: #fff;
	background: rgba(255, 255, 255, 0);

}

.navbar-nav {
	/*flex-direction: row;*/
	/*justify-content: flex-end;*/

	display: flex;
	flex-direction: column;
}

/*
.navbar-collapse.show {
	background-color: red;
}
*/

/*a.navbar-brand {width: 50%;}*/
button.navbar-toggler { font-size: 1rem;}

#mainNav .navbar-nav .nav-item .nav-link {
  /*padding: 0 1rem;*/

  /*font-weight: 700;*/
  font-size: 1.2rem;
  padding: 0.75rem 0.75rem;
  margin: 0;
  color: rgba(0, 0, 0, 1);
}
#mainNav .navbar-nav .nav-item .nav-link.btn {	color: #418efa; }


/*스크롤 내릴때 메뉴 배경 색상*/
#mainNav.navbar-shrink {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	/*background-color: #fff;*/
	background: rgba(255, 255, 255, 0.9);
}

#mainNav.navbar-collapse-show {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	/*background-color: #fff;*/
	background: rgba(255, 255, 255, 0.9);
}

/*
.Navbg { background: #d1dee4; }
.Navborder {border-bottom: 3px solid #198754;}
*/
.cs_mainvh { height: 100vh;  }

header.masthead, section#section_about {
  /*padding-top: 10rem;*/
  /*padding-bottom: calc(10rem - 4.5rem);*/
  /*background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/main_view.jpg");*/
  background: url("/img/main_1bg_2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
header.masthead.about { background-image: url("/img/about_1.png");  }

.mainbg {
  background: url("/img/main_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
.cs_bg_cal {  background: #eff2fb; }

.cs_bg {
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;

  border-radius: 1.25rem;
}
.cs_m1{ background-image: url("/img/main_2.png");   }
.cs_m2{ background-image: url("/img/main_3bg.png");  }
.cs_m3{ background-image: url("/img/main_4bg.png");  }

header.masthead.img_loan{ background-image: url("/img/about_main_2.jpg");  padding-top: 5rem; }
header.masthead.img_notice{ background-image: url("/img/notice.png");       padding-top: 10rem;    padding-bottom: 10rem; }

section#section_about.about_2 { background:#eff2fb!important; } 
section#section_about.about_3 { background-image: url("/img/about_3.png"); } 
section#section_calculate { background-image: url('/img/cal_1.png'); padding-top: 10rem; }


.text-sky { color: #008ae1; }
.text-blue { color: #1d3e8b; }

.cs_section {
  padding-top: calc(8rem - 4.5rem);
  padding-bottom: calc(10rem - 4.5rem);
  /*background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/main_view.jpg");*/
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;  
}


#section_info, #section_result { background: #e2e8f9; padding: 0; } 
#section_ins .container, #section_info .container, #section_result .container { max-width: 960px; height:auto; margin: 0 auto;}

#section_cal  { max-width: 960px; height:auto; margin: 0 auto;}

.cs_cal {
	max-width: 600px;
	padding: 0;
	margin: 0 auto;
	border-radius: 2rem;
	background: #314f97;
}
.cs_calin {
	padding: 2rem;
	max-width: 600px;
	margin: 0 auto;
	border-radius: 2rem;
	background: white;
}

#section_about_title { max-width: 960px; margin: 0 auto; } 
/*
#section_info, #section_cal { max-width: 960px;     margin: 0 auto;  padding-top: 3rem; } 
*/


#section_ins { /*display: none;*/ position: fixed; top: 0; width:500px; height:auto; margin: 0 auto; z-index:99999; }

#section_contactus div.row.cs_con > div:nth-child(3) p { color: #28119f; }
#section_contactus div.row.cs_con > div:nth-child(4) { padding: 0.5rem 0; margin: 0.5rem auto; }
#section_contactus div.row.cs_con > div:nth-child(4) span { background: #28119f; color: white;  padding: 0.5rem 2rem; margin: 0.5rem auto; }

#section_notice, #section_linfo { max-width: 980px; margin: 0 auto; padding: 2rem 0;}

.cs_notice_header {
	border-top: 1px solid black;
	background: #f4f4f4;
}

.cs_btn{
	min-width:250px; 
	max-width: 450px;
}
.cs_title {
	word-break: keep-all;
}
.cs_btn_circle {
	display:block;
	text-decoration: none;
	width: 10.5rem;
    font-size: 1.5rem;
    border-radius: 25rem;
    padding: 3rem 0;
    text-align: center;
    color: white;
    background: #24489c;
    position: absolute;
    margin-top: -70vh;
	word-break: keep-all;
}
a.cs_btn_circle:hover {
	/*color: #24489c;*/
	color: white;
    background: #0a58ca;
}


/*cinfo , result*/

.Page_Info { min-height: 80vh;}
.Page_Info .cs_info_box {	min-height: 70vh; }
.accordion-item .form-check-input {border-radius: 1.25rem;}
.Page_Info .list-group {border-radius: 0rem;}
.Page_Info .list-group li {border: 0;}


.cs_v_bankimg { width: 2.5rem; height:2.5rem;}
.cs_v_loanname { vertical-align: middle;}

#id_result { white-space: nowrap; }
#id_result .bg-light { color: #6c6c6c; }

.input-group { width: 100%;}
.input-group input[type=text] { border-right: 0px; width:80%!important;}

/*.input-group span { border-left: 0px;  background: none; color: #b8bbc5; }*/
.input-group > span:last-child {  width:3.5rem; border-left: 0px; /* background: #2c5ea9; color: #edf0f9;*/ }
.input-group > .form-control:focus { box-shadow: inset 0 0 0 0.25rem rgb(13 110 253 / 25%); }

.cs_info_box { min-height: 400px;}
.cs_section .cs_info_box input[type=text] { width: 100%;}
.cs_section .cs_info_box input.sz_medium { width: 50%;  display: inline-block; }	/*주민등록번호*/
.cs_section .cs_info_box .accordion { width: 100%;}
.cs_section .cs_info_box textarea {	resize: none; }

.cs_radio_box .btn { width: 96%; font-size: 1rem; margin: 0 2%;}

.Page_Info > div { padding: 0 ;}
.csb_rounded-5 { border-radius: 1.75rem!important; }




.btn-outline-color {
	color: #00a6fb;
	background-color: #fff;
	border-color: #00a6fb;
}
.btn-check:checked+.btn-outline-color, .btn-outline-color:hover {
	color: #fff;
	background-color: #00a6fb;
	border-color: #00a6fb;
}
.btn.btn-outline-color {border-radius: 1.25rem; width: 96%; margin: 0 2%;}

.accordion-button::after { transition: transform .4s ease-in-out;}    

.accordion-button .invalid-feedback { float:left; width: unset;  margin-left: 0.75rem; }
.accordion-button .invalid-feedback h6 { margin: 0; font-size:0.75rem;}

#id_agree_all .accordion-button::after {display: none;}
/*
#id_agree_all .accordion-button .form-check { padding-left:1.5rem ;}
*/


/*ByCCH20221213 약관동의 수정*/
/*
.accordion-button .form-check { width: 100%; padding-left:2.5rem;}
.accordion-item .form-check-input {
	position: absolute;
    z-index: 999;
    
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;

	margin-top: 1rem;
	margin-left: 2rem;
}
*/


.cs_agreeall_check-input{
	width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;

	margin-top: 0rem;
}


.cs_agreeitem_form-check{
	width: 100%;
	padding-left:2.5rem;
}

.cs_agreeitem_check-input{

	z-index: 9999;

	width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;

	margin-top: 0rem;
	margin-right: 0.7rem;

}


.cs_agreeall_check-input{
	width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;

	margin-top: 0rem;
	margin-left: 1rem;
	margin-right: 0.7rem;
	
}


/*
#id_agree_all .form-check-input {
	margin-left: 1rem;
}
*/





button.accordion-button { 
	font-size: 0.8rem;
	padding: 1rem;
}

.cs_v_row_title {
	border-bottom: 1px;
	text-align:center;
}
.cs_v_row_content  {padding:0;}
.cs_divtext {
	text-align:left;
	min-height: 8rem;
	padding: 0.5rem 1rem;
	background: #e7e7e7;
}




/* Placeholder 색상*/
.cs_section .cs_info_box input::placeholder {  color: #b8bbc5;  opacity: 0.8; }
.cs_section .cs_info_box input::-webkit-input-placeholder { /* WebKit browsers */ color: #b8bbc5; }
.cs_section .cs_info_box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b8bbc5; opacity: 0.8; }
.cs_section .cs_info_box input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #b8bbc5; opacity: 0.8; }
.cs_section .cs_info_box input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #b8bbc5; }
.cs_section .cs_info_box input::-ms-input-placeholder { /* Edge */ color: #b8bbc5; }


/*result*/
.flex-center {
	display: flex;
    align-items: center;
    /*justify-content: center;*/
}


/* 로딩레이어 */

#loading_page { 
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: fixed;
	display: block;
	opacity: 0.8;
	background-color: #2a2a2a;
	z-index: 99;
	text-align: center; 
} 

#loading_page .loading_img { position: relative; top: 35%; z-index: 100; }


/*footer*/
.footer_link { padding: 1rem; border-bottom: 1px #6a6a6a solid;}
.footer_link a { padding: 1rem; color: white; text-decoration: none;}
.footer_txt { padding: 0;}
.footer_txt .cs_litxt { background-color: unset; font-size: 0.7rem;}
.footer_txt .list-group-item { background-color: unset; color:#8a8a8a; word-break: keep-all;}

.cs_lititle span {display: inline-block; color:#8a8a8a; font-weight: bold;}

/*term*/
.cs_fs-sx {font-size: 0.75rem;}

.cs_mainimg .img-fluid {  width: auto; }

/*media*/


@media (max-width: 576px) {
	html {
		font-size: 14px;
	}
	.navbar-nav {
		flex-direction: column;
		justify-content: flex-end;
	}

	.cs_section {
	  padding-top: calc(6rem - 4.5rem);
	  padding-bottom: calc(6rem - 4.5rem);
	}
	section#section_calculate{ padding-top: calc(8rem - 4.5rem); }


	.cs_btn_circle { 
		font-size: 1.25rem;
	    padding: 1.25rem 0;
		position: unset;
		width: 65%;
		margin: 0 auto;	
	}
	
	.cs_mainvh {    height: 100%;}

	.h-25 > div { margin-top: 1rem;}

	.cs_mainimg .img-fluid {  width: auto;  height:100%;}
}

@media (min-width: 576px) and (max-width: 768px) {
	html {
		font-size: 14px;
	}
	.cs_subtext{ position: absolute; margin-top: -1.25rem;}

	.cs_btn_circle { 
		font-size: 1.25rem;
	    padding: 1.25rem 0;
		position: unset;
		width: 65%;
		margin: 0 auto;		
	}
	.cs_mainimg .img-fluid {  width: auto;  height:100%;}
}


@media (min-width: 768px) and (max-width: 992px) {
	html {
		font-size: 16px;
	}
	.cs_subtext{ position: absolute; margin-top: -1.25rem;}


	.cs_btn_circle { 
		font-size: 1.25rem;
	    padding: 1.25rem 0;
		position: unset;
		width: 65%;
		margin: 0 auto;		
	}
	.cs_mainimg .img-fluid {  width: auto;  height:100%;}
}


@media (min-width: 992px) and (max-width: 1200px) {
	html {
		font-size: 18px;
	}

	#mainNav {
		box-shadow: none;
		background-color: transparent;
		background: rgba(255, 255, 255, 0);
	}

	#mainNav .navbar-nav .nav-item .nav-link {
		padding: 0 1rem;
		margin: 0 0.25rem;
		font-size: 1rem;
		color: rgba(0, 0, 0, 1);
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}


@media (max-height: 500px) {
	.cs_mainimg { display: none;}
}
/*
@media (min-width: 992px) {
	
	#mainNav.navbar-shrink .navbar-brand {
    	color: #212529;
  	}

  	#mainNav.navbar-shrink .navbar-brand:hover {
    	color: #f4623a;
  	}

  	#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    	color: #212529;
  	}

  	#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
    	color: #f4623a;
  	}
	
}
*/

/*
@media (max-width: 992px) {

	

	.cs_radio_box .btn { width: 49%;}
  
	
	button.accordion-button { 
		font-size: 0.8rem;
		padding: 1rem;
	}
	.accordion-item .invalid-feedback h6 { font-size: 0.8rem; }
  
	form .form-check .form-check-input {
		float: left;
		margin-left: -1.25em;
		margin-top: 0.5em;
	}
}


@media (max-width: 580px) {
	
	button.navbar-toggler { font-size: 0.6rem;}

	
	.cs_radio_box .btn { width: 49%; }
	
	button.accordion-button { 
		font-size: 0.6rem;
		padding: 1rem 0.5rem;
	}
	.accordion-item .invalid-feedback h6 { font-size: 0.6rem; }
	

    form .form-check .form-check-input {
		float: left;
		margin-left: -1.25em;
		margin-top: 0.6em;
	}

	#id_result {
		text-align: center;
	
	}

	
	
}


@media (min-width: 576px) {
	.subtext { position: absolute; margin-top: -1rem;}
}
*/