@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: #0144a5;	
	--light_blue: #0851b7;
	--dark_point: #0e3265;	
	--highlight:#00f7ff;

	--red:#d13429;
	--light_red:rgba(209,52,41,0.25);
	--purple:#a03ee2;
	--orange:#e5483d;
	--yellow:#ffdc57;
	--light_yellow:#fff7e1;

	--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:#f8faff;
	--white: #ffffff;
	--black: #000000;
	--light_gray: #F3FBFF;
	--db_gray:#434656;

	/* Light Steel */
	--bright-snow: #f8f9faff;
	--platinum: #e9ecefff;
	--alabaster-grey: #dee2e6ff;
	--pale-slate: #ced4daff;
	--pale-slate-2: #adb5bdff;
	--slate-grey: #6c757dff;
	--iron-grey: #495057ff;
	--gunmetal: #343a40ff;
	--carbon-black: #212529ff;


	--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);}
.border_light_red {border: 1px solid var(--light_red);}
/* 그라데이션배경 */
.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 #6d9ee32e;}
.marker_purple {box-shadow: inset 0px -1.2em 0 #aa00ff2e;}
.marker_pink {box-shadow: inset 0px -.5em 0 #FFCDD1;}
.marker_red {box-shadow: inset 0px -.3em 0 #b20a0a; padding: .1rem 0.3rem;}
.marker_sky {box-shadow: inset 0px -.5em 0 #E6EEF5;}

/*포지션*/
.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 0.2rem 0.2rem rgba(0,0,0,0.25));}
.filter_shadow_s{filter: drop-shadow(0 0.1rem 0.1rem rgba(0,0,0,0.5));}
.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; }
.p_ver{display: inline-flex;}
/* 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_dark_point { background-color: var(--dark_point); }

.bg_red { background-color: var(--red); }
.bg_purple { background-color: var(--purple); }
.bg_orange { background-color: var(--orange); }
.bg_yellow { background-color: var(--yellow); }
.bg_light_yellow { background-color: var(--light_yellow); }


.bg_surface { background-color: var(--surface); }
.bg_light_blue { background-color: var(--light_blue);}
.bg_light_gray { background-color: var(--light_gray);}
.bg_db_gray { background-color: var(--db_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); }


.LS_gray_1{background-color: var(--bright-snow);}
.LS_gray_2{background-color: var(--platinum);}
.LS_gray_3{background-color: var(--balabaster-grey);}
.LS_gray_4{background-color: var(--pale-slate);}
.LS_gray_5{background-color: var(--pale-slate-2);}
.LS_gray_6{background-color: var(--slate-grey);}
.LS_gray_7{background-color: var(--iron-grey);}
.LS_gray_8{background-color: var(--gunmetal);}
.LS_gray_9{background-color: var(--carbon-black);}

/* 폰트 컬러 */
.fc_blue { color: var(--point); }
.fc_light_blue { color: var(--light_blue); }

.fc_orange { color: var(--orange); }
.fc_yellow { color: var(--yellow); }
.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_f3 { color: var(--gray_f3);}

.fc_g_f5 { color: var(--gray_f5);}

/*폰트 그라디언트 색상 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);*/
.fc_grd_1 { background: linear-gradient( 135deg,#6cf0ff, #f3ff99 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(--point)!important; }
.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(--point); 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%; }
#empty_fieldset label, #empty_fieldset input{visibility: hidden}
.form_inner{gap:1rem;flex-wrap: wrap }
.form_inner .fieldset_basic { margin-bottom: 1.5rem; display: inline-block; width: calc(50% - 0.5rem); }
/*#name_fieldset, #job_fieldset,  #property_fieldset, #phone_fieldset { float: left; }
#income_fieldset, #income_fieldset, #insurance_fieldset, #overdue_fieldset { float: right; }
margin: 0.5%; float: left*/

[id^="_fieldset"] {width: 100%; }
.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(--point); background: var(--white); color: var(--point); 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(--point)!important; background-color: var(--surface);}

/* 버튼 스타일 */
.btn_style_01 { display: inline-block!important; color: #fff; 
	 line-height: 1; background-color: var(--orange); border-radius: var(--br_c); padding:1.75rem 2rem 1.4rem; border:1px solid rgba(255, 255, 255, 0.15); /* box-shadow: rgb(66, 75, 85) 0px 10px 20px -5px;  */

}
	.btn_style_01:hover { background-color: var(--point); }

/*기본버튼 배경 이펙트*/
.hover{ position: relative!important; overflow: hidden; min-width: fit-content!important;}
.hover: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;*/}
.hover: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="zoom"] {
    transform: scale(1.5)
}

[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
}

[data-animate-in^="flip"]{
  transform-style: preserve-3d;
  backface-visibility: visible !important; /* animate.css는 visible을 씀 */
  will-change: transform, opacity;
}

/* 시작 상태(보이지 않게) */
[data-animate-in="flipInY"],
[data-animate-in="flipInX"]{
  opacity: 0;
}

/* 공통 in-view 시: animation으로만 처리 */
[data-animate-in="flipInY"].in-view{
  opacity: 1;
  transition: none;
  animation: flipInY_Embank 0.9s both;
}

[data-animate-in="flipInX"].in-view{
  opacity: 1;
  transition: none;
  animation: flipInX_Embank 0.9s both;
}

/* Y축 플립(좌우로 뒤집힘) */
@keyframes flipInY_Embank{
  from{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(0,1,0,90deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  40%{
    transform: perspective(900px) translate3d(0,0,40px) rotate3d(0,1,0,-18deg);
    animation-timing-function: ease-in;
  }
  60%{
    transform: perspective(900px) translate3d(0,0,18px) rotate3d(0,1,0,10deg);
    opacity: 1;
  }
  80%{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(0,1,0,-4deg);
  }
  to{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(0,1,0,0deg);
  }
}

/* X축 플립(위아래로 뒤집힘) */
@keyframes flipInX_Embank{
  from{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,90deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  40%{
    transform: perspective(900px) translate3d(0,0,40px) rotate3d(1,0,0,-18deg);
    animation-timing-function: ease-in;
  }
  60%{
    transform: perspective(900px) translate3d(0,0,18px) rotate3d(1,0,0,10deg);
    opacity: 1;
  }
  80%{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,-4deg);
  }
  to{
    transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,0deg);
  }
}
.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
}
/* 바운스 애니메이션 */
.wobble {    animation: wobble 2s ease infinite;}
.bounce {    animation: bounce 1.5s infinite;}
.swing {    transform-origin: top center;    animation: swing 2s ease infinite;}
@keyframes bounce {
    0%, 50%, 100% {
        transform: scale(.97);
    }

    25% {
        transform: scale(1.025);
        /*transform-origin: bottom center;*/
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}
/* 모바일 레이아웃 */
@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-flex; }
	.p_ver {display: none;}
	/* 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;}
	
	#empty_fieldset, #empty_fieldset label, #empty_fieldset input{visibility: hidden; display: none!important}
	.form_inner{gap:1rem; flex-wrap: wrap; flex-direction: column; }
	.form_inner .fieldset_basic { margin-bottom: 1.5rem; display: inline-block; width:100%; }
	/* 박스 스타일 */
	.shadow_box { padding:3rem 2rem; }
	/* 포지션 중앙 정렬 */
	.pos_cen {  top: 55%; left: 48%;  }
	input, select { height: 43px; }
}