@charset "utf-8";
/*2024.03.22 운영배포*/
/*2024.03.29 운영배포*/
/*2024.04.05 운영배포*/
/*
2024 KINFA APP Renewer

※ 작업 시 .wrapper.page-sub 필수
※ 메뉴별 class 추가
    -미소드림적금:.wrapper.page-sub.mds
*/

/*
    page
*/

/*미소드림적금-top*/
.page-sub.mds .product-top .content-container{background-color:#89af36;}
.page-sub.mds .product-top .desc-box dl{background-color:#71991c;}
.page-sub.mds .product-top .img-box.svg-mds_ic_kv{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/mds/mds_ic_kv.svg);}
.page-sub.mds .product-top p.typo-ty{font-weight: 600}

/*재무진단-top*/
.page-sub.crdv2 .product-top .content-container{padding:2.5rem 2rem;background-color:#159ede;}
.page-sub.crdv2 .product-top .top-text2 strong{font-weight:600;display: flex;gap:.5rem;justify-content: center;}
.page-sub.crdv2 .product-top .top-text2 strong span{color:#75ffde;}
.page-sub.crdv2 .product-top .top-text-hash{display:flex;gap:2rem;margin-top:.75rem;justify-content:space-between}
.page-sub.crdv2 .product-top .top-text-hash >div{flex:1;display: grid;justify-items:center;}
.page-sub.crdv2 .product-top .top-text-hash span{display:inline-flex;margin-top:.38rem;padding:.3125rem 0.75rem; justify-content:center;color:#fff;background-color:#0075b7;border-radius: 1.25rem;font-size: .6875rem;line-height: 1.125rem;letter-spacing:-.01719rem;}
.page-sub.crdv2 .product-top .img-box.svg-mds_ic_kv{margin-top:2.5rem;background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/crdv2/crdv2_ic_kv1.svg);}
.page-sub.crdv2 .product-top .text-desc{margin-top:2.5rem; text-align:left;font-weight:400;}
@media only screen and (max-width: 359px) {
    .page-sub.crdv2 .product-top .top-text2{font-size:var(--t4-font-size);line-height:var(--t4-line-height);letter-spacing:var(--t4-letter-spacing);}
    .page-sub.crdv2 .product-top .top-text-hash {gap:0;}
}

/* 지원대상 조회 확인*/
.page-sub.wrapper .checklist-form-wrap{display:flex;gap:1rem;flex-direction:column;}
.page-sub.wrapper .checklist-form-wrap .form-radio{display:flex;}
.page-sub.wrapper .checklist-form-wrap .radio-label{color:var(--grayscale-1) !important;font-size:var(--t6-font-size);line-height:var(--t6-line-height);letter-spacing:var(--t6-letter-spacing);}
.page-sub.wrapper .checklist-form-wrap .checklist-support{display:inline-block;vertical-align:middle;padding:.25rem .5rem;background-color: transparent;}


.page-sub.wrapper .content-info-photo p strong{color:var(--grayscale-1)}
.page-sub.wrapper .ic-photo::before{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/mds/mds_ic_photo.svg)}
.page-sub.wrapper .ic-idea::before{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/mds/mds_ic_idea.svg)}
.page-sub.wrapper .ic-monitor::before{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/mds/mds_ic_monitor.svg)}

.page-sub.wrapper .bullet-list + .info-title{margin-top:1.5rem;}

.page-sub.wrapper .text-box-type1.info-wrap dl{display: flex; flex-display: column; justify-content: space-between;}
.page-sub.wrapper .text-box-type1.info-wrap dl+dl{margin-top:.5rem;}
.page-sub.wrapper .text-box-type1.info-wrap dt,
.page-sub.wrapper .text-box-type1.info-wrap dd{font-size:var(--t7-font-size);line-height:var(--t7-line-height);letter-spacing:var(--t7-letter-spacing);}
.page-sub.wrapper .text-box-type1.info-wrap dt{flex:0 0 40%;font-weight: 400;}
.page-sub.wrapper .text-box-type1.info-wrap dd{font-weight: 600;word-break: break-all;}


/*약정서*/
.page-sub.wrapper .contract-wrap{}
.page-sub.wrapper .contract-wrap .summary{margin-top:.62rem;font-size:var(--t7-font-size);line-height:var(--t7-line-height);letter-spacing:var(--t7-letter-spacing);color:var(--grayscale-2);}
.page-sub.wrapper .contract-wrap .contract-title-lv1{font-size:var(--t6-font-size);line-height:var(--t6-line-height);letter-spacing:var(--t6-letter-spacing);font-weight:600;color:var(--grayscale-1);}
.page-sub.wrapper .contract-wrap .contract-title-lv2{margin-top:1.5rem;font-size:var(--t7-font-size);line-height:var(--t7-line-height);letter-spacing:var(--t7-letter-spacing);font-weight:600;color:var(--grayscale-1);}

.page-sub.wrapper .contract-wrap .contract-title-lv1 + .info-table{margin:.625rem 0 1.5rem;padding-bottom: 1.5rem;border-bottom:1px solid var(--grayscale-6);}
.page-sub.wrapper .contract-wrap .contract-doc{margin-top: 1.5rem;}
.page-sub.wrapper .contract-wrap .contract-doc p,
.page-sub.wrapper .contract-wrap .contract-doc li{font-size:var(--t7-font-size);line-height:var(--t7-line-height);letter-spacing:var(--t7-letter-spacing);color:var(--grayscale-2)}
.page-sub.wrapper .contract-wrap .contract-doc .sign-box{display: flex;flex-direction: column; text-align: right;gap:.625rem;}
.page-sub.wrapper .contract-wrap .contract-doc .txt-important{margin-top: 1.5rem;}
.page-sub.wrapper .contract-wrap .contract-doc li{margin-top: 10px;}

/* 신청완료 - 설문 */
.page-sub #ratingForm fieldset {display: flex;direction: rtl; justify-content: center;}
.page-sub #ratingForm fieldset legend {text-align:left;}
.page-sub #ratingForm input[type=radio] + label:before,
.page-sub #ratingForm input[type=radio]:before {display:none;}
.page-sub #ratingForm input[type=radio],
.page-sub #ratingForm label {font-size: 1.5rem !important;color: transparent !important;text-shadow: 0 0 0 #f0f0f0;}
.page-sub #ratingForm input[type=radio]:checked ~ label {text-shadow: 0 0 0 #ffd400;    }
.page-sub #ratingForm span.alertMessage {margin-top: var(--title-sub-margin);color:var(--secondary-red);display: block;}
.page-sub #ratingForm span.helpMessage {display: block;text-align:right;margin-top: var(--title-sub-margin);color: var(--grayscale-2);}
.page-sub #ratingForm span.helpMessage,
.page-sub #ratingForm span.alertMessage{font-size:var(--t7-font-size);line-height:var(--t7-line-height);letter-spacing:var(--t7-letter-spacing);}
.page-sub #ratingForm .info-title{margin: var(--title-sub-margin) 0;}

.page-sub .mds-summary-wrap{padding-bottom:1.5rem;border-bottom:1px solid var(--grayscale-6);font-size:var(--t2-font-size);line-height:var(--t2-line-height);letter-spacing:var(--t2-letter-spacing);font-weight: 200;}
.page-sub .mds-summary-wrap strong{color:var(--primary)}

/* [[[[[[[[[[[[[[[[[[[ add ]]]]]]]]]]]]]]]]]]] */

/* 햇살론 카드 */
.page-sub.kfa-cad .product-top .img-box.svg-mds_ic_kv {background-image: url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/main_ill_03.svg);}
.page-sub.kfa-cad .product-top .content-container {background-color: #57af70;}
.page-sub.kfa-cad .product-top .desc-box dl {background-color: #468c5a;}

/* 햇살론 유스 */
.page-sub.you .product-top .img-box.svg-mds_ic_kv{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/main_ill_02.svg);}
.page-sub.you .product-top .content-container{background-color:#57af70;}
.page-sub.you .product-top .desc-box dl{background-color:#468c5a;}

/* 최저특례보증 */
.page-sub.low .product-top .img-box.svg-mds_ic_kv{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/low/icon_bnrTyI_n.svg);}
.page-sub.low .product-top .content-container{background-color:#5491bd;}
.page-sub.low .product-top .desc-box dl{background-color:#3778a8;}

/* 채무조정 */
.page-sub.div .product-top .img-box.svg-mds_ic_kv{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/icon_debenture.svg);}
.page-sub.div .product-top .content-container	{background-color: #007dc4;}

/* 불법사금융예방 */
.page-sub.drt .product-top .img-box.svg-mds_ic_kv{background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/drt/icon_drt_main.svg);}
.page-sub.drt .product-top .content-container	{background-color: #159ede;}
.page-sub.wrapper.drt .product-top .desc-box dl{
    background-color:#007dc4;
    padding: 0.5rem;
}

/* 경남동행론 */
.page-sub.kdl .product-top .img-box.svg-mds_ic_kv {
    background-image: url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/icon_kdl_main.png);
    height: 6.2rem;
}

.page-sub.kdl .product-top .content-container {background-color: #159ede;}

.page-sub.wrapper.kdl .product-top .desc-box dl {
    background-color: #00669d;
    padding: 0.5rem;
}
.page-sub.kdl-1 .product-top .content-container {background-color: #efa13c;}
.page-sub.wrapper.kdl-1 .product-top .desc-box dl {background-color: #bd6a00;}
.page-sub.kdl .product-top .desc-box .txt-s {color: #cefff9;}
.page-sub.wrapper .product-top .desc-box dd.txt-s   {font-size: 0.6875rem;}

/* 성실상환 */
@media (max-width: 355px)   {
    .page-sub.fis .page-header.small:has(.close-button) .header-title {
        font-size: var(--t6-font-size);
        letter-spacing: var(--t6-letter-spacing);
    }
}
@media (max-width: 330px)   {
    .page-sub.fis .page-header.small:has(.close-button) .header-title {max-width: 130px;}
    .page-sub.fis:has(.page-header.small) .section-wrap.product-top {padding-top: 1.75rem;}
}
.page-sub.fis .product-top .content-container{background-color: #8bce30;}
.page-sub.fis .product-top .desc-box dl{background-color:#71991c;}
.page-sub.fis .product-top .img-box{
    background-image:url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/icon_fis_main_1.png); 
    height: 6.5rem;
    margin: 2rem 0 1rem;
}
.page-sub.fis .product-top p.typo-ty{font-weight: 600}

.page-sub .box-list.box-list.box-icon li   {align-items: flex-start; gap: 1rem;}
.page-sub .box-list.box-list.box-icon.small li .icon    {position: relative;}
.page-sub .box-list.box-list.box-icon.small li .icon::after   {
    content: "";
    position: absolute;
    background: #ebf0f6;
    padding: 18px;
    border-radius: 2rem;
    z-index: 0;
    top: -4px;
    left: -6px;
}
.page-sub .box-list.box-list.box-icon.small li .icon > img   {width: 1.5rem; z-index: 1;}

.page-sub .com-box1.line-green .list   {border: 2px solid #78ee89;}
.page-sub .com-box1.line-green .arrow-r-small:after {border-color: #00bd1b;}
.page-sub .com-box1.line-green .list .txt    {color: #008745; word-break: keep-all;}
.page-sub .com-box1.line-green .list .txt-con    {font-weight: 600;}


.page-sub .list-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.page-sub .list-step li {
    position: relative;
    display: flex;
    gap: .75rem;
    align-items: center;
    padding-bottom: 1rem;
    font-size: var(--t7-font-size) !important;
    letter-spacing: var(--t7-letter-spacing) !important;
    line-height: 1.4 !important;
    width: 100%;
}

.page-sub .list-step li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
.page-sub .list-step li::after {
    content: '';
    display: block;
    border-left: 2px solid #d1d1d1;
    position: absolute;
    top: 30%;
    bottom: -35%;
    left: .28rem;
    z-index: 0;
}
.page-sub .list-step li.step-line-none::after {
    content: none;
}
.page-sub .list-step li:last-child::after   {bottom:  55%;}
/* .page-sub .list-step li:first-child::after   {top:  40%;} */
.page-sub .list-step li .step-symbol    {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    /* width: 0.7rem;
    min-width: 0.7rem;
    height: 0.7rem; */
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 20rem;
    background-color: #c3c3c3;
    border: 2px solid #c3c3c3;
    z-index: 1;
}
.page-sub .list-step li .step-text   {
    display: flex;
    max-width: 180px;
    flex: 1;
    gap: 0.4rem;
}
.page-sub .list-step li .step-text .tit {
    flex: 1;
    max-width: 78px;
}
.page-sub .list-step li .step-date  {
    background-color: var(--secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 2rem;
    color: #fff;
    font-size: 0.6875rem;
}

/* complete, running */
.page-sub .list-step li.complete::after {border-left: 2px solid var(--primary);}
.page-sub .list-step li.complete .step-symbol {
    background-color: var(--primary);
    border: none;
}

/* .page-sub .list-step li.running::after {border-left: 2px solid var(--primary);} */
.page-sub .list-step li.running .step-symbol {
    background-color: #fff;
    border: 2px solid var(--primary);
}
.page-sub .list-step li.error .step-symbol {
    background-color: var(--secondary-red);
    border: 2px solid var(--secondary-red);
}

.page-sub .list-step li.complete .step-text .result   {color: var(--primary);}
/* .page-sub .list-step li.running .step-text   {color: var(--grayblue-2);} */
.page-sub .list-step li.error .step-text .result   {color: var(--secondary-red);}

.page-sub .list-step li.complete .step-text .result,
.page-sub .list-step li.running .step-text .result,
.page-sub .list-step li.error .step-text .result {font-weight: 700;}
.page-sub .list-step li.running .step-text .result  {color: var(--grayscale-2);}

/* .page-sub .list-step li.complete .step-symbol::before {
    content: '';
    display: block;
    width: 8px;
    top: 0.32em;
    left: 0.28rem;
    position: absolute;
    height: 5px;
    border: 2px solid #fff;
    border-bottom: 0;
    border-left: 0;
    transform: rotate(135deg);
} */

.page-sub .apply-step  {
    display: flex;
    justify-content: space-between;
}
.page-sub .apply-step li  {
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.page-sub .apply-step li img {width: 48px;}
.page-sub .apply-step li .arrow-tt  {color: #00ba47;font-weight: 500;}
.page-sub .apply-step .arrow-right,
.page-sub .apply-step .arrow-left {
    position: relative;
    display: inline-block;
    border-top: 3px solid #00ba47;
    width: 70%;
    margin-top: 25px;
}

.page-sub .apply-step .arrow-right::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #00ba47;
    border-right: 8px solid transparent;
    top: -6px;
    right: -11px;
}
.page-sub .apply-step .arrow-left::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid #00ba47;
    top: -7px;
    left: -10px;
}
.page-sub .apply-step .arrow-left + .arrow-right  {margin: 0.2rem;}
.page-sub .apply-step .text    {
    font-size: var(--t7-font-size) !important;
    letter-spacing: var(--t7-letter-spacing) !important;
    font-weight: 500;
    line-height: 1.2 !important;
    margin-top: 0.6rem;
    text-align: center;
}
.page-sub .apply-step .box-line .img {
    border-radius: 0.4rem;
    position: relative;
}
.page-sub .apply-step .box-line .img .tit    {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #79b690;
    border-radius: 4px;
    line-height: 1.6;
    z-index: 1;
    color: #fff;
    width: 90%;
    font-size: 11px;
    font-weight: 500;
}
@media (max-width: 350px)   {
    .page-sub .apply-step .text   {font-size: 13px !important;}
}