@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: 9rem;

    /* 컬러 */
    --scroll: #4361ee4d;
    /*포인트컬러 4d 앞에 넣어주기*/

    --point: #0473ea;
    --point_hover: rgb(67, 100, 164);
    --light_blue: #18abeb;
    --light_blue_hover: #008AC7;

    --dark_point: #0e3265;
    --highlight: #00f7ff;

    --deep_blue: #035cff;
    --green_01: #bfff00;
    --green_01_hover: #94ED70;
    --green_02: #2aac48;
    --green_02_hover: #1F9039;
    --green_03: #2d9c00;
    --green_03_hover: #268f00;
    --light_green: #efffe1;
    --purple: #a03ee2;
    --pink: #FF5A97;
    --red: #ff4024;
    --orange: #ffa000;
    --yellow: #ffdb4e;
    --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;
    --slate_gray: #636e8a;
    --slate_gray_hover: #45506c;
    --dark_gray: #2C333D;
    --border_color: #ebebeb;
    --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: #21252982;

    --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);
    --gradient_02: linear-gradient(to right bottom, #F3FBFF 35%, #C8E3F4 120%);
    --btn_grd: linear-gradient(to right, #cbe0ff 0%, #5c51f2 50%, #332182 110%);
    --btn_grd_hover: linear-gradient(to right, #e2657a, #5c51f2 100%);
    --wrap: 1500px;
}


/*라인*/
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_green {
    border: 1px solid var(--green_01);
}

.border_white {
    border: 1px solid var(--white);
}

.border_light_blue {
    border: 1px solid #b3d7ff
}

/* 그라데이션배경 */
.orange_grd {
    background: linear-gradient(90deg, #2563eb, #7c3aed, #a855f7);
}

.green_grd {
    background: linear-gradient(90deg, rgb(9, 255, 234) 0%, #ccff00 90%);
}

.blue_grd {
    background: linear-gradient(135deg, #00A8F1 0%, #0065D1 70%);
}

.mint_grd {
    background: linear-gradient(90deg, hsla(138, 82%, 69%, 1)-1%, hsla(186, 100%, 50%, 1) 101%);
}

.purple_grd {
    background: linear-gradient(90deg, hsla(307, 93%, 84%, 1) -1%, hsla(256, 96%, 44%, 1) 101%);
}

.pb_grd {
    background: linear-gradient(297deg, var(--purple), var(--point) 101%);
}

.pink_grd {
    background: linear-gradient(90deg, hsla(335, 91%, 70%, 1) -1%, hsla(49, 89%, 61%, 1) 101%);
}

.rainbow {
    background-image: linear-gradient(109.6deg, rgba(254, 253, 205, 1) 11.2%, rgba(163, 230, 255, 1) 91.1%);
}

.chick {
    background-image: radial-gradient(circle 314px at 95.1% 37.9%, rgba(255, 246, 78, 1) 1.4%, rgba(242, 252, 186, 1) 100.7%);
}

.blpink {
    background-image: linear-gradient(114.2deg, rgba(252, 251, 224, 1), rgba(245, 212, 212, 1) 8.5%, rgba(255, 180, 239, 1));
}

.sky {
    background-image: linear-gradient(109.6deg, rgba(204, 228, 247, 1) 11.2%, rgba(237, 246, 250, 1) 100.2%);
}

.seassak {
    background-image: linear-gradient(135deg, rgba(252, 255, 222, 1) 2.2%, #b6f1ab 99.3%);
}

.sprout {
    background-image: linear-gradient(to bottom, #fcff99 30%, #c5ff08 120%);
}

.baby {
    background-image: linear-gradient(180deg, #fff56a 11.5%, #ffb64f 91%);
}

/*폰트 그라디언트 색상 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);background-image: linear-gradient(to top, #c7ffd3 0%, #fbfff2 100%);*/
.fc_grd {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.black50 {
    background-color: #00000080;
}

/* 텍스트 마커 */
.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 #3075d559;
}

.marker_sky {
    box-shadow: inset 0px -.5em 0 #d1e7ff;
}

.marker_purple {
    box-shadow: inset 0px -1.2em 0 #aa00ff2e;
}

.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;
}

.ai_left {
    align-items: left;
}

.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_40);
    padding: 4rem;
    box-shadow: 0px 3px 15px 2px rgba(34, 50, 91, 0.25);
}

/* Wrap width: 100%;  */
.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2rem);
    padding-right: 1rem;
    padding-left: 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 {
    padding: 0;
    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_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_dark_gray {
    background-color: var(--dark_gray);
}

.bg_green {
    background-color: var(--green_01);
}

.bg_green_02 {
    background-color: var(--green_02);
}

.bg_green_03 {
    background-color: var(--green_03);
}

.bg_light_green {
    background-color: var(--light_green);
}

.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_light_blue {
    color: var(--light_blue);
}

.fc_green {
    color: var(--green_01);
}

.fc_green_02 {
    color: var(--green_02);
}

.fc_green_03 {
    color: var(--green_03);
}

.fc_light_green {
    color: var(--light_green);
}

.fc_orange {
    color: var(--orange);
}

.fc_yellow {
    color: var(--yellow);
}

.fc_deep_blue {
    color: var(--deep_blue) !important;
}

.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);
}



/* 공통 폼 */
/*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);
}

.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);
}

/* 버튼 스타일 border:1px solid rgba(255, 255, 255, 0.15); filter: hue-rotate(30deg);background-size: 115%; background-position: center right; hue-rotate(227deg)*/
.Mybtn {
    color: #fff;
    line-height: 1;
    border-radius: var(--br_c);
    padding: 1.6rem 3rem 1.5rem;
    border: 1px solid #ffffff27;
    background-clip: padding-box;
}

.Mybtn:hover {
    filter: hue-rotate(40deg) contrast(110%) saturate(120%);
    box-shadow: 0 10px 20px rgba(46, 7, 0, 0.20), 0 -5px 10px rgba(46, 7, 0, 0.15), 0 6px 6px rgba(46, 7, 0, 0.10);
}

a.orange_grd:hover,
button.orange_grd:hover {
    background: linear-gradient(-70deg, #ff4e50, #ff5858, #f89b29);
    filter: none;
}

a.blue_grd:hover,
button.blue_grd:hover {
    background: linear-gradient(-70deg, #035cff, #2563eb, #3b82f6);
    /* deep_blue 계열 */
    filter: none;
}


a.bg_point:hover,
button.bg_point:hover {
    background-color: var(--point_hover);
}

a.bg_light_blue:hover,
button.bg_light_blue:hover {
    background-color: var(--light_blue_hover);
}

a.bg_green:hover,
button.bg_green:hover {
    background-color: var(--green_01_hover);
}

a.bg_green_02:hover,
button.bg_green_02:hover {
    background-color: var(--green_02_hover);
}

a.bg_green_03:hover,
button.bg_green_03:hover {
    background-color: var(--green_03_hover);
}

/*기본버튼 배경 이펙트*/
.hover {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    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;
    pointer-events: none;
    filter: blur(3px);
}

.hover:hover::after {
    left: 150%;
    transition: all 750ms cubic-bezier(.81, .11, .41, 1);
}

.hover.hover_loop:hover::after {
    transition: none !important;
    animation: hoverFlashLoop 1800ms cubic-bezier(.81, .11, .41, 1) infinite;
}

.hover.hover_loop:not(:hover)::after {
    animation: none !important;
    left: -150%;
    opacity: 0.2;
}

/* 반복 플래시 키프레임 */
@keyframes hoverFlashLoop {
    0% {
        left: -150%;
        opacity: 0;
    }

    12% {
        opacity: 0.25;
    }

    45% {
        left: 150%;
        opacity: 0.25;
    }

    60% {
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}



/* a나 버튼 에 텍스트랑 아이콘 함께 있는 경우 작은 버튼 큰번튼 동시에 사용하려면  */
a .btn_txt,
button .btn_txt {
    transform: translateX(0.85rem);
    transition-duration: 0.3s;
    line-height: 1;
}

a .iconer,
button .iconer {
    transform: translateY(4rem);
    transition-duration: 0.3s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

a:hover .btn_txt,
button:hover .btn_txt {
    transform: translateX(0px);
}

a:hover .iconer,
button:hover .iconer {
    transform: translateY(0%);
}

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

.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%);
    }
}

/* ==================== 모바일 레이아웃 ==================== --base-px: 2px;*/
@media (max-width: 1280px) {

    body,
    html {
        font-size: 15px;
    }

    :root {
        /* 패딩,마진 */
        --sec_pd: 7rem;
    }

    .column_lg {
        flex-direction: column;
    }

}

@media (max-width: 900px) {

    body,
    html {
        font-size: 14px;
    }

    .column_md {
        flex-direction: column;
    }
}

@media (max-width: 600px) {

    body,
    html {
        font-size: 10px;
    }

    :root {
        /* 폰트 */
        --base-font-size: 12px !important;
    }

    .column_sm {
        flex-direction: column;
    }

    input,
    select {
        height: 45px;
    }
}

@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: 0;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .form_inner .fieldset_basic {
        margin-bottom: 1.5rem;
        display: inline-block;
        width: 100%;
    }

    /* 박스 스타일 */
    .shadow_box {
        padding: 3rem 2.5rem;
    }

    /* 포지션 중앙 정렬 */
    .pos_cen {
        top: 55%;
        left: 48%;
    }
}

.common_box {
    width: 100%;
    float: left;
    min-width: 1300px;
}

.common_box>div {
    width: 1300px;
    margin: 0 auto;
}

.common_box>div>div {
    width: 100%;
    float: left;
}

.common_box>div::after {
    content: "";
    display: block;
    clear: both;
}

.common_aibox {
    width: 100%;
    float: left;
    min-width: 1000px;
}

.common_aibox>div {
    width: 1000px;
    margin: 0 auto;
}

.common_aibox>div>div {
    width: 100%;
    float: left;
}

#wrap2 .common_aibox {
    background-color: #f5f9ff;
}

input[readonly] {
    background-color: #f8f8f8;
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    display: none;
}

input[type="checkbox"]:checked+label>.on {
    display: inline-block;
}

input[type="checkbox"]:checked+label>.off {
    display: none;
}

input[type="radio"]:checked+label>.on {
    display: inline-block;
}

input[type="radio"]:checked+label>.off {
    display: none;
}

*::selection {
    background-color: #000;
    color: #FFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: break-all;
    position: relative;
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -1px;
    outline: none !important;
}

*:focus {
    outline: none;
}

*::selection {
    background-color: #000;
    color: #FFF;
}

/* loading */
#loadingWrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    display: none;
    background: rgba(0, 0, 0, 0.5);
}

#loadingWrap * {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

#loadingWrap>#loadingPercent {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    text-align: center;
    line-height: 50px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: #333;
    text-shadow: 0 0 2px #FFF;
}

#loadingWrap>#loading {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: loading 1s ease-in-out infinite;
    -webkit-animation: loading 1s ease-in-out infinite;
}

@keyframes loading {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loading {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* --- 모바일 메뉴 버튼 강제 노출 (768px 이하) --- */
@media (max-width: 768px) {

    /* 1. 헤더 내의 m_ver 클래스 강제 노출 */
    header .m_ver {
        display: flex !important;
        /* block 대신 flex로 정렬 */
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        z-index: 99999 !important;
        width: 40px !important;
        height: 40px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 2. 아이콘 스타일 및 색상 (배경이 어두우면 흰색, 밝으면 검정색) */
    header .m_ver i.fa-bars {
        display: block !important;
        font-size: 24px !important;
        color: #ffffff !important;
        /* 흰색 아이콘 */
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
        /* 가독성을 위한 그림자 */
    }

    /* 3. 혹시 모를 클릭 영역 확보 */
    header .m_ver a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        text-align: center !important;
        line-height: 40px !important;
    }

    /* 4. PC 버전 메뉴는 확실히 숨김 */
    header .p_ver {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* 1. 컨테이너 설정: 가로 정렬 및 줄바꿈 허용 */
    .sec_06 .content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px 10px !important;
        /* 위아래 15px, 좌우 10px 간격 */
        width: 100% !important;
        padding: 0 10px !important;
        margin-top: 30px !important;
    }

    /* 2. 원형 박스 공통: 크기 고정 및 찌그러짐 방지 */
    .sec_06 .content .box {
        width: 150px !important;
        /* 지름 고정 */
        height: 150px !important;
        /* 지름 고정 */
        min-width: 150px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        /* 내용을 세로로 배치 */
        justify-content: center !important;
        /* 상하(수직) 정중앙 정렬 */
        align-items: center !important;
        /* 좌우(수평) 정중앙 정렬 */
        margin: 0 !important;
        flex: 0 0 150px !important;
        /* 크기 절대 유지 */
        box-sizing: border-box !important;
    }

    /* 3. 첫 번째 박스(누적 승인건)를 무조건 중앙 상단에 배치 */
    .sec_06 .content .box:nth-child(1) {
        margin-bottom: 10px !important;
        /* 아래 두 박스가 올라오지 못하게 너비를 100%처럼 활용하되 원형 유지 */
        margin-left: calc(50% - 75px) !important;
        margin-right: calc(50% - 75px) !important;
    }

    /* 4. 텍스트 및 숫자 크기 최적화 */
    .sec_06 .content .box {
        font-size: 14px !important;
    }

    .sec_06 .content .box .num {
        font-size: 22px !important;
        margin-top: 5px !important;
    }

    .sec_06 .content .box .num>.unit {
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {

    /* 간격을 살짝 줄임 */
    .sec_06 .content {
        gap: 10px 5px !important;
    }

    /* 원의 지름을 150px -> 130px로 축소하여 공간 확보 */
    .sec_06 .content .box {
        width: 130px !important;
        height: 130px !important;
        min-width: 130px !important;
        flex: 0 0 130px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        /* 내용을 세로로 배치 */
        justify-content: center !important;
        /* 상하(수직) 정중앙 정렬 */
        align-items: center !important;
        /* 좌우(수평) 정중앙 정렬 */
    }

    /* 첫 번째 박스 독차지 영역도 줄어든 지름의 절반(65px)으로 재계산 */
    .sec_06 .content .box:nth-child(1) {
        margin-left: calc(50% - 65px) !important;
        margin-right: calc(50% - 65px) !important;
    }

    /* 원이 작아졌으니 안의 글자와 숫자 크기도 살짝 줄여서 삐져나가지 않게 보호 */
    .sec_06 .content .box {
        font-size: 13px !important;
    }

    .sec_06 .content .box .num {
        font-size: 18px !important;
    }

    .sec_06 .content .box .num>.unit {
        font-size: 12px !important;
    }
}

/* PC 버전에서 '자주 묻는 질문' 섹션 여백 조절 */
@media (min-width: 768px) {
    section#qna {
        padding-top: 50px !important;
        /* 상단 여백을 50px로 축소 */
        padding-bottom: 50px !important;
        /* 하단 여백을 50px로 축소 */
    }
}

/* PC 버전에서 FAQ 하단 및 신청폼 상단 여백 제거 */
@media (min-width: 768px) {

    /* 1. FAQ 섹션 하단 여백 제거 */
    section#qna {
        padding-bottom: 0 !important;
    }

    /* 2. 신청폼 섹션 상단 여백 제거 */
    .form_warp {
        padding-top: 0 !important;
    }

    /* 3. 신청폼 내부 컨텐츠 상단 마진 제거 (필요시) */
    .form_warp .con_box {
        margin-top: 0 !important;
    }
}

/* PC 버전 푸터 상단 영역(로고, 등록번호, 방침) 정리 */
@media (min-width: 768px) {

    /* 1. 상단 3개 요소(로고, 등록번호, 개인정보)를 한 줄로 정렬 */
    footer .wrap>.d_flex.flex_wrap.jc_sb {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid #eee;
        /* 구분선 추가로 더 깔끔하게 */
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }

    /* 2. 각 요소의 폰트 크기 및 간격 조절 */
    footer .fs_23 {
        font-size: 20px !important;
        font-weight: bold !important;
    }

    /* 안심금융서비스 */
    footer .fs_18 {
        font-size: 14px !important;
        color: #333 !important;
    }

    /* 등록번호 */
    footer .privacy_btn a {
        font-size: 13px !important;
        color: #007bff !important;
    }

    /* 개인정보처리방침 */

    /* 3. 하단 기업 정보(상호, 주소 등) 정렬 */
    footer .infobox .grow_1 .fc_g_5 {
        font-size: 12px !important;
        line-height: 1.8 !important;
        color: #666 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        /* 항목 간 간격 */
    }

    /* 4. 불필요한 여백 제거 */
    footer .mt_5 {
        margin-top: 30px !important;
    }

    footer .my_2 {
        margin-bottom: 5px !important;
    }
}

/* PC 버전 FAQ 하단 여백 추가 축소 */
@media (min-width: 768px) {

    /* 1. FAQ 섹션 자체의 하단 여백 제거 */
    section#qna {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. FAQ 내부 컨테이너의 하단 여백 제거 */
    section#qna .wrap {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. FAQ 리스트 자체의 하단 마진 제거 */
    section#qna .qna-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 4. 신청폼 섹션 상단 여백 제거 (다시 한번 확인) */
    .money_form,
    .form_warp {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}