﻿@charset "utf-8";
/* CSS Document */
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48
}
/* 스크롤바 전체 */ ::-webkit-scrollbar { width: 8px!important; background-color: #cecfd0!important; }
/* 스크롤바 막대 */ ::-webkit-scrollbar-thumb { background-color: #9e9fa2!important; }
/* 스크롤바 외부 */ ::-webkit-scrollbar-track { background-color: #cecfd0!important; }
:root { 
	/* 트랜지션 */
	--transition: 0.15s ease-in;
	--q_trans: 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /*큐빅*/
	/* 패딩,마진 */
	--sec_pd: 6rem;
	
	/* 컬러 */
	--scroll: #4361ee4d; /*포인트컬러 4d 앞에 넣어주기*/		
	
	--point: #4361ee;	
	--light_blue: #879cf7;
	--dark_point: #314391;	

	--red:#ff2a2a;
	--purple:#a03ee2;
	--orange:#ff5858;

	--gray_3: #333333;	
	--gray_4: #444444;
	--gray_5: #555555;
	--gray_6: #666666;
	--gray_8: #888888;
	--gray_9: #999999;
	
	--gray_f3: #f3f3f3;
	--gray_f5: #f5f5f5;
	--gray_f8: #f8f8f8;
	--gray_f9: #f9f9f9;
	--gray_fa: #fafafa;	
	--surface:#fcf8ff;
	--white: #ffffff;
	--black: #000000;
	--light_gray: #F3FBFF;
	--border_g: 1px solid #dfdfdf;
	--op_white: 1px solid rgba(255,255,255, .15);
	--op_black: 1px solid rgba(0,0,0,0.15);
	
	--gradientR: linear-gradient(to right,#6a5ff9,#e2657a);
	--gradientRB: linear-gradient(to right bottom,#6a5ff9,#e2657a);
	
	--btn_grd:linear-gradient(to right, #cbe0ff 0%, #5c51f2 50%, #332182 110%);
	--btn_grd_hover:linear-gradient(to right, #e2657a  ,#5c51f2 100% );
}

/*라인*/
hr {/*display:none;*/ width: 100%; height: 1px; background-color: rgba(212, 223, 236, 0.719); border : 0; margin-left : auto; margin-right : auto; padding: 0; margin-block-start: 0; margin-block-end: 0;}
.line{ width: 100%; height: 1pt; background-color: #bbbbbb; display: block; content: ""}

/*보더색상*/
.border_w { border: var(--op_white); }
.border_b { border: var(--op_black); }
.border_g { border: var(--border_g); }
.border_point { border:  1px solid var(--point); }
.border_white { border:  1px solid var(--white); }
.border_light_blue {border: 1px solid var(--light_blue);}
/* 그라데이션배경 */
.orange_grd{background: linear-gradient(70deg, #ff4e50, #ff5858, #f89b29);}
.green_grd{background: linear-gradient(90deg, hsla(175, 79%, 63%, 1) 0%, hsla(82, 96%, 57%, 1) 100%);}
.blue_grd{background: linear-gradient(90deg, hsla(171, 87%, 67%, 1) 0%, hsla(236, 100%, 72%, 1) 100%);}
.mint_grd{background: linear-gradient(90deg, hsla(138, 82%, 69%, 1) 0%, hsla(186, 100%, 50%, 1) 100%);}
.purple_grd{background: linear-gradient(90deg, hsla(307, 93%, 84%, 1) 0%, hsla(256, 96%, 44%, 1) 100%);}
.pink_grd{background: linear-gradient(90deg, hsla(335, 91%, 70%, 1) 0%, hsla(49, 89%, 61%, 1) 100%);}

/* 텍스트 마커 */
.marker_green {box-shadow: inset 0px -.5em 0 rgb(239 254 190);}
.marker_orange {box-shadow: inset 0px -.5em 0 #ffe0cd;}
.marker_blue {box-shadow: inset 0px -.5em 0 #d0e2ff;}
.marker_purple {box-shadow: inset 0px -.5em 0 #dacdff;}

.marker_red {box-shadow: inset 0px -.3em 0 #b20a0a; padding: .1rem 0.3rem;}

/*포지션*/
.absolute { position: absolute !important}
.fixed { position: fixed !important}
.relative { position: relative !important}
.static { position: static !important}
.sticky { position: sticky!important}
.visible { visibility: visible}
.invisible { visibility: hidden}

/*디스플레이*/
.CenCen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.flexwrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 	
.d_flex { display: flex; }
.d_inline_flex { display: inline-flex; }
.d_block { display: block; }
.d_inline_block { display: inline-block; }
.inline{display: inline;}
.flex_wrap { flex-wrap: wrap; }
.flex_column { flex-direction: column; }
.flex_row { flex-direction: row; }
.grow_1{flex-grow: 1; }

.jc_cen { justify-content: center; }
.jc_sb { justify-content: space-between; }
.jc_sa { justify-content: space-around; }
.jc_end { justify-content: end; }

.ai_cen { align-items: center; }
.ai_str { align-items: flex-start; }
.ai_st { align-items: stretch; }
.ai_end { align-items: flex-end; }
/*텍스트 행간 높이*/
.lh_1_0{line-height: 1}.lh_1_1{line-height: 1.1}.lh_1_2{line-height: 1.2}.lh_1_3{line-height: 1.3}.lh_1_4{line-height: 1.4}.lh_1_5{line-height: 1.5}.lh_1_6{line-height: 1.6}
/* 텍스트정렬 */
.ta_l { text-align: left; }
.ta_cen { text-align: center; }
.ta_r { text-align: right; }
/* 그림자 */
.shadow { box-shadow: 0 0.2rem 0.4rem 0rem rgba(0,0,0,0.15); }
.shadow_strong { box-shadow: 0 0.25rem 0.8rem 0.15rem rgba(0,0,0,0.25); }
.shadow_blue { box-shadow: 0 0.2rem 0.7rem 0.2rem  rgba(0,93,191,0.15);}
.filter_shadow{filter: drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, 0.25));}
.filter_shadow_white{filter: drop-shadow(0 .15rem .2rem rgba(255, 255, 255, .9));}

/* 박스 스타일 */
.shadow_box { background-color: var(--white); border-radius: var(--br_xl); padding: 3rem; box-shadow: 0px 3px 15px 2px rgba(34, 50, 91, 0.25); }

/* Wrap width: 100%;  */
.wrap { width: 100%; max-width: calc( 1350px + 2rem); padding-left: 1rem; padding-right: 1rem; margin: 0 auto; word-break: keep-all; }

/* 모바일 표시 */
.m_ver { display: none; }

/* br */
.m_br { display: none; }
.p_br { display: inline-block; }

/* 포지션 중앙 정렬 */
.pos_cen { position: absolute!important; 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%); }

/* 배경 컬러 */
.bc_blue { background: var(--point); background-image: linear-gradient(135deg, #9b37ff 7%, var(--point) 96%); }
.bc_gray { background-color: #f4f4f4; }

.bg_white { background-color: var(--white); }
.bg_point { background-color: var(--point); }
.bg_red { background-color: var(--red); }
.bg_purple { background-color: var(--purple); }
.bg_surface { background-color: var(--surface); }
.bg_light_blue { background-color: var(--light_blue);}
.bg_light_gray { background-color: var(--light_gray);}

.bg_gray_3 { background-color: var(--gray_3); }
.bg_gray_4 { background-color: var(--gray_4); }
.bg_gray_5 { background-color: var(--gray_5); }
.bg_gray_6 { background-color: var(--gray_6); }
.bg_gray_8 { background-color: var(--gray_8); }
.bg_gray_9 { background-color: var(--gray_9); }

.bg_gray_f3 { background-color: var(--gray_f3); }
.bg_gray_f5 { background-color: var(--gray_f5); }
.bg_gray_f8 { background-color: var(--gray_f8); }
.bg_gray_f9 { background-color: var(--gray_f9); }
.bg_gray_fa { background-color: var(--gray_fa); }

/* 폰트 컬러 */
.fc_blue { color: var(--point); }
.fc_light_blue { color: var(--light_blue); }

.fc_orange { color: var(--orange); }
.fc_yellow { color: #ffdd47; }
.fc_gray_01 { color: rgba(51,51,51,0.7); }
.fc_gray_02 { color: rgba(51,51,51,0.85); }
.fc_point { color: var(--point) !important; }
.fc_white { color: var(--white); }
.fc_red { color: var(--red)!important; }
.fc_purple { color: var(--purple); }

.fc_g_3 { color: var(--gray_3);}
.fc_g_4 { color: var(--gray_4);}
.fc_g_5 { color: var(--gray_5);}
.fc_g_6 { color: var(--gray_6);}
.fc_g_8 { color: var(--gray_8);}
.fc_g_9 { color: var(--gray_9);}
.fc_g_f5 { color: var(--gray_f5);}

/*폰트 그라디언트 색상*/
.fc_grd_1 { background: linear-gradient( 135deg, #ff4e50, #f9d423 96%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.fc_grd_2{ background: linear-gradient( 135deg, var(--point) 7%, #9b37ff 96%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* 공통 폼 */
form { text-align: center; }
input, select { padding: 1rem; height: 58px; outline: 0; border: none; background-color: rgba(241,240,247,0.6); font-size: 1em; border-radius: var(--br_s); color: inherit; font-family: 'SEBANG_Gothic_Regular'}
textarea { display:inline-block; border:0; border-radius: var(--br_s); outline:none; box-sizing:border-box; padding: 20px; background-color: rgba(0,0,0,0.04); margin-top: 0.5rem; }
.agree_set { margin-bottom:  1rem; }
.agree_set #checkbox_label { margin-right: 0.5rem; }
.agree_set a { margin-left: 0.5rem; color: inherit; font-weight: 500; }
.agree_set a:hover { color: #016e83!important; }

.fieldset_basic { margin-bottom: 1.5rem; display: inline-block; width: 100%; }
	.fieldset_basic:last-of-type { margin-bottom: 0rem; }
.fieldset_basic input, .fieldset_basic textarea, .fieldset_basic select { border-bottom:2px solid rgba(255,255,255,0)!important; transition:.2s ease-in-out; }
.fieldset_basic:focus-within > label { color: var(--purple); }
.fieldset_basic:focus-within > input, .fieldset_basic:focus-within > div > input,	 .fieldset_basic:focus-within > textarea, .fieldset_basic:focus-within > div > textarea, .fieldset_basic:focus-within > select, .fieldset_basic:focus-within > div > select { border-bottom:2px solid var(--purple); animation:border_blink 1s infinite; }
.fieldset_basic label { display: flex; align-items: center; width: 100%; margin-bottom: 0.7rem; font-weight: 500; text-align: left; font-size: 1.1em; }
.fieldset_basic label i { margin-right: 0.5rem; margin-bottom: .1rem; }
.fieldset_basic label sup { font-size: 0.8em; font-weight: normal; margin-left: 0.5rem; display: inline-flex; align-items: center; color: #ff4f4f; }
.fieldset_basic label sup i { display: inline-block; margin-right: 0.25rem; }
.fieldset_basic input, .fieldset_basic select { display: inline-block; width: 100%; background-color: rgba(0,0,0,0.0); border: solid 1px #ddd!important; }
#phone_fieldset select, #phone_fieldset input { width: 30%; }
#name_fieldset, #job_fieldset, #insurance_fieldset, #overdue_fieldset { float: left; }
#phone_fieldset, #income_fieldset, #property_fieldset, #income_fieldset { float: right; }
#name_fieldset, #phone_fieldset, #insurance_fieldset, #property_fieldset, #overdue_fieldset, #income_fieldset { width: 49%; }

.form_btn { width: 100%; max-width: 400px; margin: 0 auto; margin-top: 2rem; }

/* 체크박스 */
input#chk_top{ display: none; }
#checkbox_label { padding-bottom: 3px; }
input#chk_top + #checkbox_label { display: inline-block; cursor: pointer; }
input#chk_top + #checkbox_label:before{ content:""; display:inline-block; width:17px; height:17px; line-height: 17px; border:1px solid #cbcbcb; vertical-align:middle;/*체크 전과 체크 후 높이 차이 때문에 설정*/ background-color: var(--white); }
input#chk_top:checked + #checkbox_label:before{ content:"\f00c"; font-family:"Font Awesome 7 Pro"; font-weight:900; color:var(--white); background-color: var(--point); border-color: var(--point); font-size:14px; text-align:center; }

input#chk_top_0{ display: none; }
#checkbox_label_0 { padding-bottom: 3px; }
input#chk_top_0 + #checkbox_label_0 { display: inline-block; cursor: pointer; }
input#chk_top_0 + #checkbox_label_0:before{ content:""; display:inline-block; width:17px; height:17px; line-height: 17px; border:1px solid #cbcbcb; vertical-align:middle;/*체크 전과 체크 후 높이 차이 때문에 설정*/ background-color: var(--white); }
input#chk_top_0:checked + #checkbox_label_0:before{ content:"\f00c"; font-family:"Font Awesome 7 Pro"; font-weight:900; color:var(--white); background-color: var(--point); border-color: var(--point); font-size:14px; text-align:center; }

input#chk_top_1{ display: none; }
#checkbox_label_1 { padding-bottom: 3px; }
input#chk_top_1 + #checkbox_label_1 { display: inline-block; cursor: pointer; }
input#chk_top_1 + #checkbox_label_1:before{ content:""; display:inline-block; width:17px; height:17px; line-height: 17px; border:1px solid #cbcbcb; vertical-align:middle;/*체크 전과 체크 후 높이 차이 때문에 설정*/ background-color: var(--white); }
input#chk_top_1:checked + #checkbox_label_1:before{ content:"\f00c"; font-family:"Font Awesome 7 Pro"; font-weight:900; color:var(--white); background-color: var(--point); border-color: var(--point); font-size:14px; text-align:center; }

/* 선택형 라디오 */
.switch-field { /* margin-top: 1rem; */ width: 100%; padding: 0!important; }
.switch-field > input { display: none; }
.switch-field > input[type=radio] { display: none; height: 1px; width: 1px; border: 0; }
.switch-field > label { background-color: rgba(255,255,255,1); color: #666; font-weight: normal; text-align: center!important; text-shadow: none; padding: 1rem; border: 1px solid #ddd; font-size: 1em;  margin: 0 0.2em; display: flex; justify-content: center; align-items: center; border-radius: var(--br_s);}
.switch-field > label:first-of-type{margin-left: 0;}
.switch-field > label:last-of-type{margin-right: 0;}
.switch-field > label:hover { cursor: pointer; }
.switch-field > input[type=radio]:checked + label { border: 1px solid var(--purple); background: var(--white); color: var(--purple); background-color: var(--surface); font-weight: bold; border-radius: var(--br_s);}

/* 비활성화 - 연체 있음 선택시 */
.disabled_label { background-color: rgba(0,0,0,0.04)!important; color: #888888!important; border-color: rgba(0,0,0,0.04)!important; }
/*활성화 인풋*/
input:focus,
select:focus { border: solid 1px var(--purple)!important; background-color: var(--surface);}

/* 버튼 스타일 */
.btn_style_01 { display: inline-block!important; font-weight: 400; color: #fff; 
	font-size: 1.75rem; line-height: 1; background-color: var(--point); background-image:linear-gradient(130deg, var(--point) 7%, #9b37ff 96%); border-radius: var(--br_c); padding:1.7rem 2rem 1.5rem; border:1px solid rgba(255, 255, 255, 0.15); box-shadow: rgb(66, 75, 85) 0px 10px 20px -5px; 

}
	.btn_style_01:hover { background: linear-gradient(130deg, hsla(4, 84%, 49%, 1) 7%, #eb7a01 96%); }

/*기본버튼 배경 이펙트*/
.btn_style_01{ position: relative!important; overflow: hidden; min-width: fit-content!important;}
.btn_style_01:after { background: var(--white); content: ""; height: 155px; left: -150%; opacity: 0.2;  position: absolute; top: -50px; transform: rotate(35deg); transition: all 450ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px; /* z-index: -10;*/}
.btn_style_01:hover:after { left: 150%; transition: all 450ms cubic-bezier(0.19, 1, 0.22, 1);}


/* 버튼 효과 animation-name: btn_flash; animation-duration: 750ms; animation-iteration-count:infinite;*/
@keyframes btn_flash {
0% ,100%  { left: -150%; }
10%  { left: 150%; }
}


/*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;
    -webkit-transform: translate3d(0, 0, 0);   
	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
}

/* 모바일 레이아웃 */
@media only screen and (min-width: 300px) and (max-width: 850px) {
	/*모바일 스크롤바 없애기*/
	body{ -ms-overflow-style: none; /* IE and Edge */  scrollbar-width: none; /* Firefox */}
	body::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/}
	.wrap { padding: 0 1rem;}
	
	/* 모바일 표시 */
	.m_ver { display: inline-block; }
	
	/* br */
	.m_br { display: inline-block; }
	.p_br { display: none; }
	
	/* 버튼 스타일 */
	.btn_style_01 { padding: 1.25rem 1.95rem; font-weight: 700; font-size: 1.2rem;}
	
	/* 박스 스타일 */
	.shadow_box { padding: 2rem; }
	/* 포지션 중앙 정렬 */
	.pos_cen {  top: 55%; left: 48%;  }
}
