/*************** main-wrapper 기본 레이아웃 시작 ***************/

    .main-wrapper {
        width: 100%;
        height: 100%;
        max-width: 1160px;
        min-width: 1160px;
        margin: 0 auto;
        gap: 20px;
        align-items: flex-start;
    }
    .main-wrapper,
    ._fin._origin .main-wrapper {
        grid-template-rows: 120px auto 350px auto;
        grid-template-areas:
            'header header header'
            'main main aside'
            'footer footer .'
            'empty empty .';
    }
    ._mb .main-wrapper {
        grid-template-rows: 120px auto;
        grid-template-areas:
            'header'
            'main';
        gap: 0;
    }
    ._fin .main-wrapper,
    ._ecos .main-wrapper,
    ._fin._origin._h_side .main-wrapper,
    ._fss .main-wrapper {
        grid-template-rows: 120px auto 350px auto;
        grid-template-areas:
            'header header header'
            'main main main'
            'footer footer .'
            'empty empty .';
        grid-auto-columns: auto auto 360px;
    }
    ._fin._full .main-wrapper,
    ._hf_mode .main-wrapper,
    ._ecos .main-wrapper {
        max-width: 100%;
        position: relative;
        gap: 0;
        overflow-x: clip;
    }
    ._fin._view .main-wrapper {
        max-width: 900px;
        min-width: 900px;
        gap: 0;
        grid-template-areas:
        'header header header'
        'main main main'
        'footer footer footer'
        'empty empty enmpty';
        grid-template-rows: 0 auto 350px auto;
    }
    
    .main-wrapper main {
        grid-area: main;
        width: 780px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    ._mb .main-wrapper main,
    ._fin .main-wrapper main,
    ._ecos .main-wrapper main,
    ._fss .main-wrapper main{
        width: 100%;
        height: 100%;
    }
    ._fin._origin .main-wrapper main {
        height: auto;
    }
    ._fin .main-wrapper main,
    ._snap .main-wrapper main:has(>.wiki-header.snap),
    ._fss .main-wrapper main {
        justify-content: flex-start;
    }
    aside {
        grid-area: aside;
        grid-row: span 4;
        flex-direction: column;
        padding-bottom: 100px;
    }
    ._fin:not(._origin) aside,
    ._fin._origin._h_side aside,
    ._ecos aside,
    ._fss aside {
        display: none;
    }
    .empty_section {
        grid-area: empty;
    }
    .section_header {
        width: 100%;
    }
    .section_header h2,
    .section_header h3 {
        color: var(--black);
    }
    .section_body {
        margin-top: 20px;
        width: 100%;
    }
/*************** main-wrapper 기본 레이아웃 끝 ***************/



/*************** header 시작 ***************/
    header {
        grid-area: header;
        width: 100%;
        height: 100%;
    }
    ._full header {
        position: fixed;
        height: 120px;
        z-index: 10000;
    }
    ._fbc header {
        position: sticky;
        top: 0;
    }
    ._fin._view header .wrapper {
        display: none;
    }
    ._hf_mode header,
    ._ecos header {
        display: flex;
        justify-content: center;
    }
    header .wrapper {
        width: 100%;
        height: 80px;
        margin: 40px 0 0 0;
        position: relative;
    }
    ._full header .wrapper {
        height: 80px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .site-config {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        gap: 5px;
        height: 40px;
        width: 100%;
        justify-content: flex-start;
        background-color: var(--grey-f9);
        border-bottom: 1px solid var(--grey-ea);
    }
    .site-config .wrap {
        height: 20px;
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
    }
    .site-config span {
        font-size: 13px;
        font-weight: 400;
        color: var(--grey);
    }
    .mainLogo {
        width: 75px;
        height: 18px;
        background-image: url(/res/svg/logo.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    nav {
        margin-left: 55px;
        height: 100%;
    }
    nav .navList{
        height: 100%;
        gap: 35px;
    }
    nav .navList li,
    nav .navList a {
        height: 100%;
    }
    nav .navList a span,
    header .btnBox a span {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color:var(--black);
        position: relative;
        top: 2px;
    }
    nav .navList li.on a span {
        font-weight: 700;
    }
    header .btnBox {
        margin-left: auto;
        gap: 35px;
    }
    header .btnBox a {
        transition: all 0.3s ease;
    }
    header .btnBox .top-btn {
        position: absolute;
        top: -28px;
        right: 0;
    }
    header .btnBox .top-btn span {
        font-size: 13px;
        font-weight: 400;
        color: var(--grey);
    }
    header .btnBox .log {
        width: 69px;
        height: 28px;
        justify-content: center;
        border-radius: 5px;
        border: solid 1px var(--black);
        background-color: var(--grey-f9);
        top: 1px;
    }
    header .btnBox .log span {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        position: relative;
        top: -1px;
        transition: all 0.1s ease;
    }



    .sub-wrapper {
        position: absolute;
        top: 80px;
        width: 100%;
        padding: 0 69px 0 130px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        z-index: 1002;
        transition: all 0.3s ease;
    }
    ._full .sub-wrapper {
        max-width: 1160px;
        left: 50%;
        transform: translateX(-50%);
    }
    .sub-open .sub-wrapper {
        opacity: 1;
        height: 402px;
        padding: 0 69px 0 130px;
    }
    .sub-back {
        position: absolute;
        width: 100%;
        height: 0;
        top: 80px;
        left: 0;
        background-color: var(--white);
        z-index: 1001;
        opacity: 0;
        transition: all 0.3s ease;
        background-color: var(--grey-fc);
    }
    ._full .sub-back {
        position: fixed;
    }
    ._fbc .sub-back {
        position: absolute;
    }
    .sub-open .sub-back {
        height: 402px;
        opacity: 1;
        border-top: 1px solid var(--grey-ea);
        border-bottom: 1px solid var(--grey-ea);
    }
    .sub-wrapper > div {
        height: 100%;
        align-items: flex-start;
    }
    .sub-wrapper .sub-left {
        margin-right: auto;
    }
    .sub-wrapper .sub-right {
        gap: 35px;
        padding-left: 20px;
        border-left: 1px solid var(--grey-ea);
        position: relative;
    }
    .sub-wrapper.login .sub-right {
        margin-right: 0;
    }
    .s-menu {
        display: grid;
        grid-template-rows: repeat(auto-fit, 20px);
        gap:5px;
        height: 100%;
        padding: 20px 0;
    }
    .sub-wrapper .sub-left .s-menu {
        gap: 13px;
    }
    .s-menu.l2 {
        grid-template-columns: 130px 165px;
        gap: 11px 10px !important;
        grid-auto-flow: column;
    }
    .s-menu.l3 {
        grid-template-columns: repeat(1,1fr);
        gap: 11px 10px;
        grid-auto-flow: column;
        height: 402px;
    }
    .s-menu.rt {
        width: 136px;
    }
    .s-menu.loan {
        width: 115px;
    }
    .s-menu.cm {
        width: 90px;
    }
    .s-menu.calc {
        width: 340px;
        height: 402px;
    }
    .s-menu.cs {
        width: 89px;
        gap: 13px;
    }
    .s-menu.product {
        width: 112px;
        direction: rtl;
    }
    .s-menu.ad {
        width: 195px;
        position: absolute;
        top: 2px;
        right: -100vw;
        background-color: var(--grey-fc);
        border-left: 1px solid var(--grey-ea);
        transition: all 0.3s ease;
        padding: 20px 0 20px 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-right: 5px;
    }
    .s-menu.ad.on {
        right: -69px;
        z-index: 10;
        height: 99%;
    }
    .s-menu.ad .x_icon {
        width: 40px;
        height: 40px;
        background-image: url(/res/svg/popup_x_b.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .s-menu.ad .x_icon:hover {
        transform: rotate(90deg);
    }
    .s-menu .item {
        height: 20px;
        font-size: 15px;
        font-weight: 500;
    }
    .s-menu .item span {
        font-size: 15px;
        font-weight: 500;
    }
    .s-menu .item a {
        width: 100%;
        height: 100%; 
        display: flex;
        align-items: center;
    }
    .s-menu .item a span {
        position: relative;
        top: 1px;
        line-height: 20px;
    }
    .s-menu .item a:hover span {
        color: var(--green);
        vertical-align: middle;
    }
    .sub-right .s-menu:not(.ad) .item a{
        justify-content: flex-start;
    }
    .sub-right .s-menu.product .item a {
        justify-content: flex-start;
    }
    .sub-right .s-menu.ad .item a {
        white-space: nowrap;
        align-items: flex-start;
        place-items: flex-end !important;
        justify-content: flex-end;
    }
    .s-menu .item .d-day,
    .mobileMenu .container .menu_box .menuList .item a .d-day,
    .category-list .item .d-day {
        margin-left: 5px;
        border: 1px solid var(--green);
        font-size: 12px !important;
        font-weight: 600;
        color: var(--green);
        padding: 0 10px;
        border-radius: 25px;
    }
    .s-menu .item .d-day {
        margin-left: 0;
    }
    .mobileMenu .container .menu_box .menuList .item a .d-day {
        line-height: 20px;
        position: relative;
        top: 1px;
        margin-left: 0;
        padding: 3px 10px;
        font-size: 11px !important;
    }
    .mobileMenu .container .menu_box .menuList .item.wrap a,
    .s-menu.ad .item.wrap a {
        display: grid;
        gap: 10px;
        place-items: flex-start;
    }
    .mobileMenu .container .menu_box .menuList .item.wrap a {
        gap: 13px;
    }
    .s-menu.ad .item.wrap a {
        gap: 8px;
    }
    .s-menu.ad .item.wrap {
        margin-bottom: 23px;
    }
    .mobileMenu .container .menu_box .menuList .item.wrap a .r_count,
    .s-menu.ad .item .r_count,
    .category-list .item .r_count {
        margin-left: 0;
        font-size: 12px;
        line-height: 20px;
        border: 1px solid var(--green);
        font-weight: 600;
        color: var(--green);
        padding: 0 10px;
        border-radius: 25px;
    }
    .mobileMenu .container .menu_box .menuList .item.wrap a .r_count {
        padding: 3px 10px;
    }


    header:has(> .fixHead-wrapper .menuBox-wrap.on) {
        position: unset;
    }
    .fixHead-wrapper {
        width: 100%;
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background-color: var(--white);
        z-index: 53;
        border-top: 1px solid var(--grey-ea);
    }
    ._full .fixHead-wrapper {
        position: fixed;
    }
    ._full header:has(> .fixHead-wrapper .menuBox-wrap.on) {
        position: fixed;
        background-color: var(--white);
    }
    .fixHead-wrapper:has(.menuBox-wrap.on) {
        display: flex;
    }
    .fixHead-wrapper .menuBox-wrap {
        padding: 30px 30px 50px 30px;
        max-width: calc(1160px + 225px);
        width: 100%;
        height: 100%;
        /* max-height: 388px; */
        display: none;
        position: relative;
        /* left: -85px; */
        align-items: flex-start;
        /* gap: 50px; */
        left: -95px;
        gap: 60px;
    }
    .fixHead-wrapper .menuBox-wrap.on {
        /* display: flex; */
        display: grid;
        grid-template-columns: 250px auto;
    }
    .fixHead-wrapper .menuBox-wrap.wiki.on {
        grid-template-columns: 120px auto;
    }
    .backblack-wrap {
        position: absolute;
        z-index: -3;
        top: 120px;
        left: 0;
        visibility: hidden;
        width: 100%;
        height: 100vh;
        background: #111;
        opacity: 0;
        -webkit-transition: opacity 400ms ease, visibility 400ms ease;
        -o-transition: opacity 400ms ease, visibility 400ms ease;
        transition: opacity 400ms ease, visibility 400ms ease;
    }
    ._full .backblack-wrap {
        position: fixed;
    }
    .backblack-wrap:has(~ .main-wrapper .menuBox-wrap.on) {
        visibility: visible;
        z-index: 50;
        opacity: 0.6;
    }
    .menuBox-wrap .pm-box {
        width: 250px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: -5px;
        padding: 20px 10px 0 0;
    }
    .pm-title {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.4;
        margin-bottom: 30px;
        text-align: center;
    }
    .menuBox-wrap .pm-box img {
        width: 55%;
    }
    .menuBox-wrap:where(.loan, .my) .pm-box img {
        width: 65%;
    }
    .menuBox-wrap .category-box {
        display: flex;
        position: relative;
        /* min-height: 249px; */
        /* max-height: 238px; */
        max-height: 272px;
    }
    /* .menuBox-wrap.wiki .category-box {
        margin-bottom: 32px;
    } */
    /* .menuBox-wrap .category-box::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: var(--grey-ea);
        position: absolute;
        top: 0;
        left: -40px;
    } */
    .menuBox-wrap .category-box .cg-section {
        /* min-width: 210px; */
        min-width: 175px;
    }
    .menuBox-wrap:where(.loan, .business, .cm, .cs) .category-box .cg-section {
        min-width: unset;
    }
    .menuBox-wrap .category-box .cg-section:not(:last-child) {
        /* margin-right: 40px; */
        margin-right: 35px;
    }
    .cg-title {
        /* padding: 10px 0; */
        padding: 0px 0 20px 0; 
        color: var(--grey);
        /* font-size: 14px; */
        font-size: 13px;
        font-weight: 300;
        line-height: 24px;
        letter-spacing: -0.005em;

        height: 44px;
    }
    .category-list {
        display: grid;
        grid-template-rows: repeat(7, 1fr);
        grid-auto-flow: column;
        gap: 10px;
    }
    .cg-section.row-6 .category-list {
        grid-template-rows: repeat(6, 1fr);
    }
    .menuBox-wrap:where(.loan, .business, .cm, .cs) .cg-section .category-list {
        grid-template-rows: repeat(3, 1fr);
    }
    .menuBox-wrap:where(.calc) .cg-section .category-list {
        grid-template-rows: repeat(6, 1fr);
    }
    .menuBox-wrap:where(.finlife) .cg-section .category-list {
        grid-template-rows: repeat(5, 1fr);
    }
    .category-list .item {
        /* min-width: 210px; */
        /* min-width: 175px; */
        /* padding: 10px 0; */
        color: var(--black);
    }
    .menuBox-wrap:where(.finlife, .wiki) .category-list .item {
        min-width: 175px;
    }
    .menuBox-wrap:where(.loan, .business, .cm, .cs) .category-list .item {
        min-width: 135px;
    }
    .menuBox-wrap .cg-section.min-105 {
        margin-left: 30px;
    }
    .menuBox-wrap .cg-section.min-105 .category-list .item {
        min-width: 110px;
    }
    .category-list .item a span {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }
    .category-list .item:hover a span {
        font-weight: 700;
    }
    .cg-section:has(>.category-list.imgList) {
        margin: 0;
    }
    .category-list.imgList {
        gap: 24px 60px;
        grid-template-rows: repeat(4, 1fr);
    }
    .category-list.imgList .item {
        max-width: 210px;
    }
    .category-list.imgList .item a {
        gap: 20px;
    }
    .category-list.imgList .item .description {
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
    }
    .category-list.imgList .item .description .title {
        font-size: 17px;
        font-weight: 700;
        line-height: 21px;
    }
    .category-list.imgList .item .description .content {
        font-size: 12px;
        font-weight: 500;
        line-height: 21px;
    }
    .category-list .item .logoImg {
        width: 35px;
        height: 35px;
        /* border-radius: 50%; */
        /* overflow: hidden; */
    }
    .category-list .item .logoImg img {
        width: 100%;
        height: 100%;
    }
/*************** header 끝 ***************/


/*************** footer 시작 ***************/
    footer {
        grid-area: footer;
        grid-auto-rows: auto;
        height: 100%;
        align-items: flex-start;
        padding-top: 60px;
    }
    ._full footer{
        width: 780px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    ._hf_mode footer,
    ._ecos footer {
        width: 780px;
        position: relative;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    footer .wrapper {
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
    }
    footer .wrapper .top {
        width: 100%;
    }
    .footerInfo_list {
        gap: 10px;
        width: 100%;
    }
    .footerInfo_list .item {
        position: relative;
        flex-direction: column;
        width: calc((100% / 4) - 10px);
        flex: 1;
    }
    .footerInfo_list .viewBox {
        width: 100%;
        height: 48px;
        border-radius: 10px;
        background-color: var(--grey-ed);
        padding: 0 20px;
        position: relative;
        cursor: pointer;
    }
    .footerInfo_list .viewBox .text {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--black);
    }
    .footerInfoArrow {
        width: 9px;
        height: 5px;
        display: inline-block;
        background-image: url(/res/svg/black_dn_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        transition: all ease 0.3s;
    }
    .footerInfo_list .ab_box {
        padding: 0 30px;
        border-radius: 10px;
        border: solid 1px var(--grey);
        background-color: var(--white);
        position: absolute;
        height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;

    }
    .footerInfo_list .item.info .ab_box {
        left: 0;
    }
    .footerInfo_list .item.rate .ab_box {
        left: 50%;
        transform: translateX(-50%);
    }
    .footerInfo_list .item.call .ab_box {
        left: 50%;
        transform: translateX(-50%);
    }
    .footerInfo_list .item.acc .ab_box {
        right: 0;
    }
    .footerInfo_list .ab_box.big {
        width: 446px;
    }
    .footerInfo_list .ab_box.small {
        width: 288px;
    }
    .footerInfo_list .ab_box dl {
        flex-direction: column;
    }
    .footerInfo_list .ab_box dd,
    .footerInfo_list .ab_box dd .key,
    .footerInfo_list .ab_box dd .val {
        width: 100%;
        align-items: flex-start;
    }
    .footerInfo_list .item:not(.info) .ab_box dd {
        flex-direction: column;
    }
    .footerInfo_list .ab_box .f_column {
        flex-direction: column;
        /* margin-top: 40px; */
    }
    .footerInfo_list .item.info .ab_box dd:not(.f_column) .key {
        width: 165px;
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.71;
        letter-spacing: -0.42px;
        color:var(--black);
        font-weight: 500;
    }
    .footerInfo_list .item.info .ab_box dd .val,
    .footerInfo_list .item:not(.info) .ab_box dd .val {
        flex: 1;
    }
    .footerInfo_list .item.info .ab_box dd .val,
    .footerInfo_list .item:not(.info) .ab_box dd .val,
    .footerInfo_list .item.info .ab_box dd .val p,
    .footerInfo_list .item:not(.info) .ab_box dd .val p {
        font-size: 14px;
        line-height: 1.71;
        letter-spacing: -0.42px;
        color:var(--grey);
        font-weight: 500;
    }
    .footerInfo_list .ab_box .f_column .key,
    .footerInfo_list .item:not(.info) .ab_box dd .key {
        width: 100%;
        align-items: flex-start;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        line-height: 1.29;
        color:var(--black);
    }
    .footerInfo_list .ab_box .f_column .key {
        margin-bottom: 5px;
    }
    .footerInfo_list .ab_box .f_column .val{
        flex-direction: column;
    }
    .footerInfo_list .ab_box .f_column .val .mt-20,
    .footerInfo_list .item.rate .ab_box dd .val,
    .mt-20 {
        margin-top: 20px;
    }
    .footerInfo_list .item.rate .ab_box dd:last-child {
        margin-top: 30px;
    }
    .footerInfo_list .item.rate .ab_box dd .val{
        margin-top: 17px;
    }
    .footerInfo_list .item.rate .ab_box dd:last-child .val {
        margin-top: 8px;
    }
    .footerInfo_list .item:where(.call, .acc) :where(dl,dd){
        width: 100%;
    }
    .footerInfo_list .item:where(.call, .acc) .val {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .TelAccount {
        margin-top: 23px;
        color:var(--green);
        font-size: 25px;
        font-weight: 700;
        line-height: 0.69;
        letter-spacing: -0.78px;
        cursor: pointer;
    }
    .footerInfo_list .item.call .val .description,
    .footerInfo_list .item.acc .val .description {
        margin-top: 38px;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 9px;
    }
    .footerInfo_list .item:where(.call, .acc) .description .des_item {
        width: 100%;
        line-height: unset;
    }
    .footerInfo_list .item:where(.call, .acc) .description .des_item :where(.des_t, .des_c){
        font-size: 14px;
        line-height: 1;
        letter-spacing: -0.42px;
        color:var(--grey);
        font-weight: 500;
    }
    .footerInfo_list .item:where(.call, .acc) .description .des_item .des_c {
        color:var(--black);
        margin-left: auto;
    }
    .footerInfo_list .item:where(.call, .acc) .description .des_item .des_t.cg,
    .footerInfo_list .item:where(.call, .acc) .description .des_item .des_t.cg a {
        color: var(--green);
        font-weight: 500;
    }
    .p-tm-7 {
        padding: 7px 0;
    }
    footer .bottom {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 25px;
    }
    .footerNav a span,
    .footerInfo .key,
    .footerInfo .val,
    .footerInfo .half {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--grey);
        transition: all 0.3s ease;
    }
    .footerInfo {
        margin-top: 25px;
        flex-wrap: wrap;
        gap: 5px 0;
    }
    .footerInfo .half {
        margin: 0 5px;
    }
    .footerSns {
        gap: 10px;
        /* position: absolute;
        right: 0;
        bottom: 0; */
        margin-top: 30px;
    }
    .footerSns a {
        width: 20px;
        height: 20px;
        transition: all 0.3s ease;
    }
    .footerSns a span {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .footerIcon.tistory .icon {
        background-image: url(/res/svg/sns/tistory_logo.svg);
    }
    .footerIcon.Nband .icon {
        background-image: url(/res/svg/sns/naverband-logo.svg);
    }
    .footerIcon.Nblog .icon {
        background-image: url(/res/svg/sns/g_blog.svg);
    }
    .footerIcon.Gblog .icon {
        background-image: url(/res/svg/sns/n_blog.svg);
    }
    .footerIcon.youtube .icon {
        background-image: url(/res/svg/sns/youtube.svg);
    }
    .footerIcon.instagram .icon {
        background-image: url(/res/svg/sns/instagram.svg);
    }
    .footerIcon.linkedin .icon {
        background-image: url(/res/svg/sns/linkedin.svg);
    }
    .footerIcon.reddit .icon {
        background-image: url(/res/svg/sns/reddit.svg);
    }
    .footerIcon.pinterest .icon {
        background-image: url(/res/svg/sns/pinterest.svg);
    }
    .footerIcon.twitter .icon {
        background-image: url(/res/svg/sns/twitter.svg);
    }
    .footerIcon.tumblr .icon {
        background-image: url(/res/svg/sns/tumblr.svg);
    }
    .footerIcon.link .icon {
        background-image: url(/res/svg/sns/copy.svg);
    }
    .footerIcon.facebook .icon {
        background-image: url(/res/svg/sns/facebook_il.svg);
    }
    .footerIcon.medium .icon {
        background-image: url(/res/svg/sns/medium.svg);
    }
    .footerIcon.behance .icon {
        background-image: url(/res/svg/sns/behance.svg);
    }
    .footerIcon.dribbble .icon {
        background-image: url(/res/svg/sns/dribbble_back.svg);
    }
    .footerIcon.livejournal .icon {
        background-image: url(/res/svg/sns/livejournal.svg);
    }
    .footerIcon.quora .icon {
        background-image: url(/res/svg/sns/quora_logo.svg);
    }
    .footerIcon.instapaper .icon {
        background-image: url(/res/svg/sns/instapaper_logo.svg);
    }
    .footerIcon.flickr .icon {
        background-image: url(/res/svg/sns/flickr_logo.svg);
    }
    .footerIcon.threads .icon {
        background-image: url(/res/svg/sns/threads_logo.svg);
    }
    .footerIcon.bsky .icon {
        background-image: url(/res/svg/sns/bsky_logo.svg);
    }
    .footerIcon.mastodon .icon {
        background-image: url(/res/svg/sns/mastodon_logo.svg);
    }
    .footerIcon.vimeo .icon {
        background-image: url(/res/svg/sns/vimeo_logo.svg);
    }
    footer .copyright {
        width: 100%;
        justify-content: flex-start;
        /* margin-top: 30px; */
        margin-top: 10px;
        font-size: 12px;
        font-weight: 300;
        color:var(--grey);
    }
    footer .copyright a {
        margin-left: 3px;
    }
/*************** footer 끝 ***************/



/*************** aside 시작 ***************/
    aside {
        width: 360px;
        gap: 20px;
    }
    aside .sideLayer {
        width: 100%;
    }
    aside :where(.filter, .filter-form) {
        width: 100%;
    }
    aside :where(.filter-form, .filter-form .fliter_box){
        flex-direction: column;
        width: 100%;
    }
    .filter.changer .filter-title-changer {
        display: flex;
        align-items: center;
        gap: 30px;
        justify-content: flex-start;
        width: 100%;
        position: absolute;
        top: 0;
        padding-top: 3px;
    }
    .sideLayer {
        width: 100%;
        border-radius: 15px;
        background-color: var(--white);
        padding: 30px;
    }
    .sectionTitle {
        font-size: 22px;
        font-weight: 800;
        line-height: 0.82;
        letter-spacing: -0.66px;
    }
    .sectionSubTitle {
        font-size: 18px;
        font-weight: 800;
        line-height: 0.82;
        letter-spacing: -0.66px;
        margin-top: 50px;
    }
    .sectionTitle span,
    .sectionSubTitle span {
        font-weight: 800;
    }
    .sectionTitle .en,
    .sectionSubTitle .en{
        color:var(--green);
        margin-right: 5px;
    }
    .filter.changer {
        overflow: hidden;
        height: 356px;
        position: relative;
    }
    .filter.changer .fliter_box:where(.location, .product) {
        position: absolute;
        top: 20px;
        transition: all 0.4s ease;
    }
    .filter.changer .fliter_box.location.on {
        right: 0;
    }
    .filter.changer .fliter_box.product {
        right: 100%;
        margin-top: 0px;
    }
    .filter.changer .fliter_box.location {
        right: -100%;
    }
    .filter.changer .fliter_box.product.on {
        right: 0;
    }
    .filter.changer .fliter_box.product .section_body {
        margin-top: 40px;
    }
    .fliter_box .sectionTitle {
        width: 100%;
    }
    .fliter_box .sectionTitle .reset_btn {
        font-size: 12px;
        font-weight: 400;
        border: 1px solid var(--grey-ea);
        padding: 6px 13px;
        margin-left: auto;
        border-radius: 25px;
        color: var(--grey);
    }
    .fliter_box.location .section_body {
        margin-top: 20px;
    }
    .filter.changer .fliter_box.location .section_body {
        margin-top: 31px;
    }
    .fliter_box.product .section_body {
        margin-top: 27px;
    }
    .fliter_box.type .section_body{
        flex-direction: column;
    }
    .filter_list {
        width: 100%;
    }
    .fliter_box.type .filter_list {
        display: flex;
        gap: 9px 7px;
    }
    .filter_list.local {
        grid-template-columns: repeat(5,1fr);
        gap: 9px 7px;
    }
    .filter_list.local li {
        width: 54px;
        height: 32px;
    }
    .filter_list.local li label,
    .filter_list.product.loan li label,
    .fliter_box.type .filter_list li label {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        justify-content: center;
        cursor: pointer;
    }
    .filter_list li label .text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .filter_list.local li label:has(>input:checked),
    .filter_list.product.loan li label:has(>input:checked),
    .fliter_box.type .filter_list li label:has(>input:checked) {
        background-color: #eaf8f6;
    }
    .filter_list li label input:checked ~ .text {
        color:var(--green);
        font-weight: 400;
    }
    .fliter_box.product,
    .fliter_box.type {
        margin-top: 53px;
    }
    .filter_list.product {
        grid-template-columns: repeat(4,1fr);
        gap: 29px 22px;
    }
    .filter.changer .filter_list.product {
        gap: 26px 22px;
    }
    .filter_list.product.loan {
        display: flex;
        gap: 9px 7px;
    }
    .filter_list.product.loan li,
    .fliter_box.type .filter_list li {
        height: 32px;
        width: auto;
    }
    .filter_list.product.loan li label,
        .fliter_box.type .filter_list li label {
        padding: 0 14px;
    }
    .filter_list.product label {
        cursor: pointer;
    }
    .filter_list.type2 {
        margin-top: 10px;
    }
    .mobileMenu {
        width: 100%;
        flex-direction: column;
        border-radius: 15px;
        background-color: var(--white);
    }
    .p_menuTitle {
        padding: 30px 30px 20px 30px;
        width: 100%;
        gap: 30px;
    }
    .p_menuTitle .title,
    .filter-title-changer .title {
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.54px;
        color:var(--grey);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .p_menuTitle .title.on,
    .filter-title-changer .title.on {
        font-size: 22px;
        font-weight: 800;
        line-height: 0.82;
        letter-spacing: -0.66px;
        color:var(--black);
    }
    .mobileMenu .container {
        position: relative;
        overflow: hidden;
        max-height: 859px;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
    }
    .mobileMenu .container >div {
        width: 100%;
        height: 100%;
    }
    .mobileMenu .container :where(.item.popular, .item.recent) {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        align-items: flex-start;
        transition: all 0.4s ease;
    }
    .mobileMenu .container .item.popular {
        right: 100%;
    }
    .mobileMenu .container .item.recent {
        right: -100%;
    }
    .mobileMenu .container .item.on {
        right: 0;
    }
    .oneline-list {
        width: 100%;
    }
    .oneline-list li {
        width: 100%;
        height: 85px;
    }
    .oneline-list li:not(:first-child) {
        border-top: 1px solid var(--grey-ea);
    }
    .oneline-list a {
        width: 100%;
        height: 100%;
        padding: 0 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        justify-content: center;
        position: relative;
    }
    .oneline-list .title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.48px;
        color:var(--green);
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        transition: all 0.3s ease;
    }
    .oneline-list .content {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .oneline-list .none_post {
        padding: 0 30px;
        justify-content: center;
        height: 85px;
    }
    .oneline-list .local {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 24px;
        border-radius: 12px;
        justify-content: center;
        background-color: transparent;
        font-size: 13px;
        letter-spacing: -0.39px;
        color: var(--green);
        border: 1px solid var(--green);
    }
    .post_list {
        width: 100%;
        border-radius: 15px;
        background-color: var(--white);
        padding: 30px;
    }
    .r_arrow {
        width: 8px;
        height: 12px;
        background-image: url(/res/svg/right_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        margin-left: 10px;
    }
    :where(.sectionTitle, .post_list) .r_arrow {
        position: relative;
        top: 1px;
    }
    .post_list .section_body {
        margin-top: 25px;
        gap: 9px;
    }
    .post_list li {
        height: 25px;
        width: 100%;
    }
    .post_list .item {
        width: 100%;
        height: 100%;
    }
    .post_list .item span {
        transition: all 0.3s ease;
    }
    .post_list .item .content {
        max-width: 53%;
    }
    .post_list .item .content .text {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--grey);
        flex: 1;
    }
    .post_list .item .date {
        font-family: 'pt';
        font-size: 13px;
        font-weight: 400;
        color:var(--grey);
        margin-left: auto;
        font-feature-settings: "tnum";
        font-variant-numeric: tabular-nums;
    }
    .none_post {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .none_post p {
        font-size: 13px;
        font-weight: 300;
        letter-spacing: -0.39px;
    }
/*************** aside 끝 ***************/



/*************** 메인 검색 최상단 시작 ***************/
    .word-search {
        width: 100%;
        border-radius: 15px;
        background-color: var(--grey-f2);
        flex-direction: column;
        position: relative;
    }
    .form-mainSearch {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 0 20px 60px;
    }
    .form-mainSearch .wordBox {
        width: 500px;
        height: 55px;
        padding: 0 40px 0 10px;
        border-bottom: 2px solid var(--black);
    }
    .form-mainSearch .wordBox input:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        -webkit-box-shadow: 0 0 0px 1000px var(--grey-f2) inset !important;
        -webkit-text-fill-color: var(--black) !important;
    }
    .form-mainSearch .wordBox input,
    .form-mainSearch .wordBox input::placeholder {
        flex: 1;
        border: none;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.48px;
        color:var(--black);
        background-color: transparent;
    }
    .form-mainSearch .wordBox button {
        width: 20px;
        height: 20px;
        cursor: pointer;
        outline: none;
        border: none;
        background-image: url(/res/svg/search.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-color: transparent;
    }
    .recent_search_box {
        width: 100%;
        height: 45px;
    }
    ._index .searchWordSlide {
        width: 100%;
        margin: unset;
    }
    .recommendWord {
        margin-top: 10px;
    }
    body:not(._index, ._search) .recommendWord {
        gap: 10px;
    }
    ._index .recommendWord li {
        width: auto;
    }
    .recommendWord .item {
        height: 35px;
        padding: 0 15px;
        border-radius: 17.5px;
        background-color: var(--grey-df);
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--black);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .swiper {
        overflow-x: hidden;
    }
    .wordSlide {
        width: 100%;
        height: 216px;
    }

    .wordSlide > ul > li {
        width: 780px;
        height: 100%;
        padding: 20px 30px 0 60px;
        position: relative;
        display: flex;
    }
    .wordSlide .description {
        flex-direction: column;
        align-items: flex-start;
    }
    .wordSlide .description .title {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.84px;
        line-height: 0.85;
        color:var(--black);
    }
    .wordSlide .description .sub {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        margin: 20px 0;
    }
    .wordSlide .description a {
        width: 152px;
        height: 40px;
        justify-content: center;
        border-radius: 20px;
        border: solid 1px var(--green);
        transition: all 0.3s ease;
    }
    .wordSlide .description a .text {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        color:var(--green);
    }
    .wordSlide .lp-slide-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
        width: 60%;
    }
    .wordSlide .lp-slide-list .item {
        width: 100%;
    }
    .wordSlide .lp-slide-list :where(.key, .val) {
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.84px;
        line-height: .85;
        color: var(--black);
        
    }
    .wordSlide .lp-slide-list .dash {
        flex: 1;
        margin: 0 10px;
        height: 1px;
        border: 1px dashed var(--grey-bb);
    }
    .wordSlide li img {
        position: absolute;
        right: 55px;
        bottom: 0;
        height: 75%;
    }
    .wordSlide li.lp img {
        right: 38px;
        bottom: 20px;
        height: 77%;
    }
    .wordSlide li.main img {
        width: 200px;
        right: 35px;
    }
    .wordSlide li.ad_free img {
        width: 250px;
        height: auto;
        right: 35px;
    }
    .wordSlide li.rq img {
        right: 45px;
    }
    .wordSlide li.calc img {
        height: 140%;
        right: 0;
    }
    .wordSlide li.wiki img {
        width: 200px;
        height: auto;
        right: 20px;
        bottom: 10px;
    }
    .wordSlide li.illegal img {
        right: 20px;
        width: 180px;
        height: auto;
        bottom: 10px;
    }
    section:where(.word-search, .rt-loan_business) .swiper-pagination.main {
        bottom: -20px;
        left: 0;
        width: 200px;
        text-align: left;
        padding: 0 20px;
    }
    :where(._index, ._bis) section:where(.word-search, .rt-loan_business) .swiper-pagination.main {
        left: calc(100% - 200px);
        text-align: right;
    }
    section:where(.word-search, .rt-loan_business) .swiper-pagination.main .swiper-pagination-bullet-active {
        background-color: var(--green);
    }
/*************** 메인 검색 최상단 끝 ***************/


/*************** 메인 나에게 맞는 추천 대출 / 최근 등록 업체 시작 ***************/
    section:where(.bestLoan, .liveLoan, .recent_business, .tipNews, .loan_calculator) {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    section.bestLoan {
        position: relative;
        /* height: 1405px; */
    }
    .loan_list {
        width: 100%;
        display: grid;
        gap: 20px;
    }
    .loan_list.recommend {
        grid-template-columns: repeat(3,1fr);
    }
    body:not(._rt-loan) section.bestLoan.main-padding.flex .loan_list.recommend {
        grid-template-columns: repeat(5, 1fr);
        position: absolute;
        top: 70px;
        width: 1160px;
        left: 0;
        gap: 13px;
    }
    .loan_list.recent {
        grid-template-columns: repeat(2,1fr);
    }
    .loan_list li {
        border-radius: 15px;
        background-color: var(--white);
        flex-direction: column;
        align-items: flex-start;
        transition: all 0.3s ease;
    }
    .loan_list.recommend li {
        height: 241px;
        position: relative;
    }
    .loan_list.recommend .new-new {
        width: 5px;
        height: 5px;
        top: 18px !important;
        right: 18px !important;
    }
    .loan_list.recent li {
        height: 182px;
    }
    .loan_list .item {
        width: 100%;
        padding: 30px 30px 20px 30px;
        flex-direction: column;
        align-items: flex-start;
    }
    body:not(._rt-loan) section.bestLoan.main-padding.flex .loan_list.recommend .item {
        padding: 30px 20px 20px 20px;
    }
    .loan_list .item .name {
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--grey);
        margin-bottom: 15px;
    }
    .loan_list .content.sub .text {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .loan_list.recommend .content {
        flex-direction: column;
        align-items: flex-start;
    }
    .loan_list.recent .content span:first-child {
        margin-right: 5px;
    }
    .loan_list .content.main .text {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.54px;
    }
    .loan_list.recent .content.main .text {
        font-size: 16px;
        letter-spacing: -0.74px;
    }
    .loan_list .content .text.st {
        color:var(--green);
    }
    .loan_list.recommend .content.main .text:last-child {
        margin-top: 8px;
    }
    .loan_list.recommend .content .text:last-child {
        margin-top: 10px;
    }
    .loan_list.recommend .content.sub {
        margin-top: 20px;
    }
    .loan_list.recent .content.sub {
        margin-top: 10px;
    }
    
    .loan_list .tel_btn {
        margin: 0 30px;
        width: calc(100% - 60px);
        height: 60px;
        border-top: 1px solid var(--grey-ea);
    }
    body:not(._rt-loan) section.bestLoan.main-padding.flex .loan_list.recommend .tel_btn {
        margin: 0 20px;
        width: calc(100% - 40px);
    }
    .loan_list .tel_btn a {
        width: 100%;
        height: 100%;
    }
    .tel_icon {
        width: 9px;
        height: 10px;
        background-image: url(/res/svg/tel_black.svg?v=1);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin-right: 10px;
        position: relative;
        top: -0.5px;
    }
    .loan_list .tel_btn .text {
        font-weight: 500;
        letter-spacing: -0.42px;
    }
    .loan_list .tel_btn .text.pc_show {
        font-family: 'pt';
        position: relative;
        top: -0.5px;
    }
    .loan_list .empty-item {
        background-color: #f7f7f7;
        overflow: hidden;
    }
    .loan_list .empty-banner {
        padding: 30px 20px 0 20px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .loan_list .empty-banner .content {
        padding-top: 28px;
    }
    .loan_list .empty-banner .tel_btn {
        margin: auto 0 0px 0 !important;
        width: 100% !important;
        border: none;
        position: relative;
    }
    .loan_list .empty-banner .tel_btn .regBtn {
        display: flex;
        align-items: flex-start;
        position: relative;
        top: -15px;
        font-size: 16px;
    }
    .loan_list .empty-banner img {
        width: 150px;
        height: 150px;
        position: absolute;
        right: -37px;
        top: -74px;
        filter: opacity(0.03);
    }
    .loan_list .empty-ad img {
        width: 140px;
        height: 140px;
        right: -53px;
        top: -43px;
        filter: opacity(0.15);
    }
    .loan_list .empty-f img {
        width: 120px;
        height: 120px;
        right: -34px;
        top: -46px;
        filter: opacity(0.15);
    }
    .loan_list .empty-calc img {
        width: 120px;
        height: 120px;
        right: -33px;
        top: -45px;
        filter: opacity(0.15);
    } 
    .loan_list .empty-i img {
        width: 350px;
        height: 350px;
        right: -185px;
        top: -172px;
        filter: opacity(0.15);
    }








    .banner-main:where(.count_ad, .count_ad_lp) {
        width: 100%;
        /* border-radius: 15px; */
        /* margin: 50px 0 0 0; */
        /* padding: 30px; */
    }
    .banner-main.count_ad {
        padding-top: 50px;
        display: flex;
    }
    .banner-main.count_ad .linked {
        display: flex;
        background-color: var(--blue-graph);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
        min-height: 90px;
        height: auto;
        padding: 30px;
        position: relative;
        border-radius: 15px;
    }
    .banner-main.count_ad .linked::after {
        content: '';
        /* width: 90px;
        height: 90px; */
        width: 80px;
        height: 80px;
        position: absolute;
        /* bottom: 4px; */
        bottom: 15px;
        /* right: 20px; */
        right: 30px;
        background-image: url(/res/image/17.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .banner-main.count_ad .title,
    .banner-main.count_ad .title span {
        /* font-size: 16px; */
        font-size: 26px;
        /* font-weight: 500; */
        font-weight: 700;
        letter-spacing: -0.45px;
        line-height: 1.2;
        color: var(--white);
        color: #d0f2ff;
    }
    .banner-main.count_ad .title span {
        font-weight: 700;
        color:var(--white)
    }
    .banner-main.count_ad .count-description {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .banner-main.count_ad .count-description .sub-title,
    .banner-main.count_ad .count-description .key {
        /* color: var(--black-66); */
        color: var(--white);
    } 
    .banner-main.count_ad .count-description .sub-title {
        font-weight: 500;
        margin-bottom: 8px;
    }
    .banner-main.count_ad .count-description .count_ad-list {
        /* display: grid;
        grid-template-columns: repeat(1, 1fr); */
        display: flex;
        justify-content: flex-start;
        width: 100%;
        /* gap: 8px; */
        gap: 30px;
    }
    
    .banner-main.count_ad .count-description .count_ad-list .item {
        /* gap: 10px; */
        gap: 5px;
    }
    
    .banner-main.count_ad .count-description .key,
    .banner-main.count_ad .count-description .val {
        /* font-size: 12px; */
        font-size: 16px;
        position: relative;
        font-weight: 500;
        /* color: var(--black-66); */
        color: var(--white);
    }
    .banner-main.count_ad .count-description .key {
        /* width: 70px; */
        color: #d0f2ff;
    }
    /* .banner-main.count_ad .count-description .count_ad-list .key::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -11px;
        height: 10px;
        width: 1px;
        transform: translateY(-50%);
        background-color: var(--white);
    } */
    .banner-main.count_ad .count-description .val {
        font-weight: 700;
    }
    .banner-main.count_ad .count-description .val .count-text {
        font-weight: 600;
        margin-right: 3px;
    }
    .banner-main.count_ad .count-description .val,
    .banner-main.count_ad .count-description .val .count-text {
        color: #0A529B;
        color: #144B8C;
        color: #023E73;
        color: #1A237E;
        color: var(--white);
    }












    .banner-main.count_ad_lp {
        padding-top: 50px;
    }
    .banner-main.count_ad_lp .wrap-box {
        /* width: calc(100vw - 40px); */
        width: 100%;
        background-color: #fedc00;
        border-radius: 15px;
    }
    .banner-main.count_ad_lp .linked {
        background-color: #fedc00;
        min-height: 90px;
        height: auto;
        width: 100%;
    }
    .banner-main.count_ad_lp .count_ad-list {
        flex: 1;
    }
    .banner-main.count_ad_lp .item {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 20px;
        min-height: 90px;
        height: auto;
        gap: 20px;
    }
    .banner-main.count_ad_lp .count_ad-list .text {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -0.45px;
        line-height: 1.2;
        /* color: var(--white); */
        color: var(--black);
    }
    .banner-main.count_ad_lp .count_ad-list .text :where(.product, .local) {
        font-size: 18px;
        color: var(--black);
        margin: 0 3px;
        position: relative;
        font-weight: 700;
    }
    
    .banner-main.count_ad_lp .count_ad-list .text :where(.product, .local)::after{
        content: "";
        display: inline-block;
        width: 100%;
        height: 12px;
        /* background: #e84c00; */
        background: #eece00;
        background: var(--color-end);
        background-color: #FFEB99;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: -1;
    }
    .banner-main.count_ad_lp .count_ad-list .text :where(.product, .local) .text_c {
        /* color: var(--green-fin); */
        color: #e84c00;
        color: #D35400;
        font-weight: 700;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box {
        width: 100%;
        height: 25px;
        border-radius: 25px;
        position: relative;
        overflow: hidden;
        
        background-color: var(--white);
        box-shadow: 0 0 5px 1px #e9c11d;
    }
    /* .banner-main.count_ad_lp .count_ad-list .graph-box::after {
        content: '';
        box-shadow: inset 0 0 5px 1px #e9c11d;
        width: 100%;
        height: 100%;
        border-radius: 25px;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
    } */
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item {
        height: 100%;
        background-color: transparent;
        /* border-radius: 25px; */
        color: var(--black);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2); */
        /* border-right: 1px solid #FFEB99; */
        position: absolute;
        top: 0;
        left: 0;
        padding-right: 5px;
        gap: 5px;
        
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item.rank5 {
        width: calc(calc(100% / 5)* 1);
        z-index: 5;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item:where(.rank5, .rank4, .rank3, .rank2)::after {
        content: '';
        width: 100%;
        height: 25px;
        border-radius: 0 50px 50px 0;
        background-color: transparent;
        position: absolute;
        top: -1px;
        left: 0;
        z-index: -1;
        border-top: 1px solid #FFEB99;
        border-right: 1px solid #FFEB99;
        border-bottom: 1px solid #FFEB99;
        /* box-shadow: 5px 0 5px -5px #e9c11d; */
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item.rank4 {
        width: calc(calc(100% / 5)* 2);
        z-index: 4;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item.rank3 {
        width: calc(calc(100% / 5)* 3);
        z-index: 3;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item.rank2 {
        width: calc(calc(100% / 5)* 4);
        z-index: 2;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item.rank1 {
        width: calc(calc(100% / 5)* 5);
        z-index: 1;
        border-right: unset;
    }
    .banner-main.count_ad_lp .count_ad-list .graph-box .graph-item span {
        font-size: 10px;
        /* color: var(--black); */
        color: #d35400;
        font-weight: 600;
    }
/*************** 메인 나에게 맞는 추천 대출 / 최근 등록 업체 끝 ***************/



/*************** 메인 실시간 대출문의 시작 ***************/
    .live_list {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }
    .live_list .item {
        width: 100%;
        height: 100px;
        border-radius: 10px;
        background-color: var(--white);
        display: grid;
        grid-template-columns: repeat(1,1fr);
        padding: 0 30px;
        gap: 10px;
        transition: all 0.3s ease;
    }
    .live_list.main .item {
        grid-template-columns: 122px auto;
        padding: 0;
        gap: 8px 0;
    }
    ul .item.now {
        position: relative;
        overflow: hidden;
    }
    ul .item.now::after {
        content: '';
        width: 10px;
        height: 100%;
        position: absolute;
        top : 0;
        left: 0;
        background-color: rgba(53, 186, 170, 0.13);
    }
    .cmcs-list .item.now::after {
        content: unset;
    }
    .cmcs-list .item.now .title .text {
        color: var(--red);
    }
    .live_list .item .status {
        width: 122px;
        height: 100%;
        grid-row: span 2;
        justify-content: center;
    }
    .live_list .item .status span {
        width: 42px;
        height: 24px;
        border-radius: 12px;
        justify-content: center;
        background-color: #eaf8f6;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--green);
    }
    .live_list .item :where(.top, .bottom) {
        height: 100%;
        width: 100%;
    }
    .live_list.main .item :where(.top, .bottom) {
        padding-right: 50px;
    }
    .live_list .item .top {
        align-items: flex-end;
    }
    .live_list .item .bottom {
        align-items: flex-start;
    }
    .live_list .item :where(.top, .bottom) > div:last-child {
        margin-left: auto;
    }
    .live_list .item .top .title {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.48px;
        max-width: 90%;
    }
    .live_list .item .top .local {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--red);
    }
    .live_list .item .bottom .info div {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.26px;
        color:var(--grey);
    }
    .live_list .item .bottom .count {
        color:var(--red);
        margin-left: 3px;
    }
    .live_list .item .bottom .price,
    .live_list .item .bottom .price .num {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--red);
    }
/*************** 메인 실시간 대출문의 끝 ***************/



/*************** 메인 대출 이자 게산기 시작 ***************/
    .loan_calculator .section_body {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
    }
    .loan_calculator .type_box {
        gap: 30px;
    }
    .loan_calculator .type_box .btn {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.54px;
        color:var(--grey);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .loan_calculator .type_box .btn.on {
        font-size: 22px;
        font-weight: 800;
        line-height: 0.82;
        letter-spacing: -0.66px;
        color:var(--black);
    }
    .calViewBox {
        width: 100%;
        border-radius: 10px;
        background-color: var(--white);
        margin-top: 20px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .calViewBox:has(> .fieldset.loan.on) {
        height: 357px;
    }
    .calViewBox:has(> .fieldset.loan.on.result) {
        height: 1086px;
    }
    .calViewBox:has(> .fieldset.fee.on) {
        height: 371px;
    }
    .calViewBox:has(> .fieldset.fee.on.result) {
        height: 461px;
    }
    .calViewBox .fieldset {
        grid-template-columns: repeat(2,1fr);
        gap: 30px 50px;
        padding: 40px;
        width: 100%;
        position: absolute;
        top: 0;
        transition: all 0.4s ease;
    }
    .calViewBox .fieldset.loan {
        right: 100%;
        opacity: 0;
    }
    .calViewBox .fieldset.fee {
        right: -100%;
        opacity: 0;
    }
    .calViewBox :is(.fieldset.loan.on, .fieldset.fee.on) {
        right: 0%;
        opacity: 1;
    }
    .calViewBox .fieldset .item.full {
        grid-column: span 2;
        padding-top: 10px;
    }
    .calViewBox .fieldset .item {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }
    .calViewBox .fieldset .item .key {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        margin-bottom: 12px;
    }
    .calViewBox .fieldset .item .val {
        width: 100%;
        height: 50px;
    }
    .calViewBox .fieldset .item.type .val {
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        overflow: hidden;
    }
    .calViewBox .fieldset .calBtn {
        flex: 1;
        width: 100%;
        height: 100%;
        justify-content: center;
        background-color: var(--grey-f9);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--grey);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .calViewBox .fieldset .calBtn:last-child {
        border-left: 1px solid var(--grey-ea);
    }
    .calViewBox .fieldset .calBtn.on {
        background-color: var(--white);
        color:var(--black);
    }
    .calViewBox .fieldset :where(.item.period, .item.remaining_period) .val {
        gap: 10px;
    }
    .calViewBox .fieldset .btnBox {
        width: 120px;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid var(--grey-ea);
    }
    .calViewBox .fieldset .inputBox {
        flex: 1;
        height: 100%;
    }
    .calViewBox .fieldset .inputBox,
    .calViewBox .fieldset :where(.item.rate, .item.price, .item.repayment_amount, .item.commission, .item.exemption) .val {
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        overflow: hidden;
        padding: 0 20px;
    }
    .calViewBox .fieldset .inputBox input,
    .calViewBox .fieldset :where(.item.rate, .item.price, .item.repayment_amount, .item.commission, .item.exemption) .val input {
        flex: 1;
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        text-align: right;
    }
    .calViewBox .fieldset .inputBox .text,
    .calViewBox .fieldset :where(.item.rate, .item.price, .item.repayment_amount, .item.commission, .item.exemption) .val .text {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color:var(--grey);
        margin-left: 5px;
        position: relative;
        top: 1px;
    }
    .calViewBox .fieldset.fee .item.btn {
        justify-content: flex-end;
    }
    .calViewBox .fieldset .item.btn .btn_box {
        width: 100%;
        height: 50px;
        justify-content: center;
        gap: 10px;
    }
    .calViewBox .fieldset .btn_box .btn {
        width: 200px;
        height: 100%;
        border-radius: 5px;
        background-color: var(--grey-fa);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        color:var(--grey);
        cursor: pointer;
        justify-content: center;
    }
    .calViewBox .fieldset .btn_box .btn.cal {
        background-color: var(--green);
        color:var(--white);
    }
    .calViewBox .fieldset.fee .btn_box .btn {
        width: 160px;
    }
    .calViewBox .loan-pop {
        position: absolute;
        top: 357px;
        left: 0;
        width: 100%;
        padding: 10px 40px 40px 40px;
    }
    .loan-pop,
    .loan-pop .layer_body,
    .fee-pop,
    .fee-pop .layer_body {
        flex-direction: column;
        width: 100%;
    }
    .loan-pop .summaryBox,
    .fee-pop .summaryBox {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        border: solid 2px var(--green);
        justify-content: center;
        gap: 65px;
    }
    .loan-pop .summaryBox .item,
    .fee-pop .summaryBox .item {
        gap: 10px;
    }
    .loan-pop .summaryBox .key,
    .fee-pop .summaryBox .key {
        font-size: 15px;
        font-weight: 400;
        letter-spacing: -0.45px;
        color:var(--grey);
    }
    .loan-pop .summaryBox .val,
    .fee-pop .summaryBox .val {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.45px;
    }
    .loan-pop .summaryBox .item.int .val,
    .fee-pop .summaryBox .item .val {
        color:var(--green);
    }
    .loan-pop .layer_body {
        gap: 20px;
    }
    .loan-pop .content_container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 611px;
        border-radius: 10px;
        border: solid 1px var(--grey-ea);
        padding: 30px 0 20px 20px;
    }
    .loan-pop .content_container .titleBox {
        width: 100%;
        gap: 10px;
    }
    .loan-pop .content_container .titleBox .default {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.45px;
    }
    .loan-pop .content_container .titleBox .type {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
    }
    .loan-pop .contentTitle {
        background-color: var(--green-light);
        width: calc(100% - 20px);
        height: 40px;
        margin-top: 17px;
    }
    .loan-pop .contentTitle .item {
        flex: 1;
        width: 100%;
        height: 100%;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color: var(--green);
    }
    .loan-pop .content_container .content_box {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 100%;
        height: 100%;
        flex: 1;
        padding-right: 20px;
        overflow-y: scroll;
    }

    .loan-re_list {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 100%;
    }
    .loan-re_list .item,
    .table-list .item {
        width: 100%;
        height: 40px;
    }
    .loan-re_list .item.back,
    .table-list .item.back,
    .annuity-result .item.back {
        background-color: var(--grey-f9);
    }
    .loan-re_list .item div,
    .table-list .item div {
        flex: 1;
        width: 100%;
        height: 100%;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
    }
    .loan-re_list .item div,
    .calc-section .loan-re_list .item :where(th, td) {
        font-family: 'pt', 'SDGothicNeo';
        font-weight: 500;
    }
    .loan-re_list .item .re {
        color:var(--red);
    }
    .calViewBox .fee-pop {
        position: absolute;
        top: 374px;
        left: 0;
        width: 100%;
        padding: 0 40px 40px 40px;
    }
/*************** 메인 대출 이자 게산기 끝 ***************/





/********** 메인 검색 페이지 시작 **********/
    ._search .form-mainSearch .wordBox input,
    ._search .form-mainSearch .wordBox input::placeholder {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.48px;
    }
    .searchWordSlide {
        padding-right: 20px !important;
    }
    ._search .recommendWord li {
        background-color: var(--green);
        padding: 0 0 0 20px;
        height: 35px;
        border-radius: 17.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: auto;
        width: auto;
    }
    ._search .recommendWord li.default_keywords {
        padding: 0 20px;
        background-color: var(--grey-df);
    }
    ._search .recommendWord li .item {
        width: auto;
        height: 100%;
        border-radius: unset;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color: var(--white);
        cursor: pointer;
        background-color: transparent;
        padding: 0;
        margin-right: 10px;
        transition: all 0.3s ease;
    }
    ._search .recommendWord li.default_keywords .item {
        margin-right: 0;
        font-weight: 400;
        color: var(--black);
    }
    .x_btn {
        width: 30px;
        height: 100%;
        background-image: url(/res/svg/x_btn_w.svg);
        background-repeat: no-repeat;
        background-position: center left;
        background-size: 10px 10px;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        position: relative;
        top: -1px;
    }
    ._search .sectionTitle .en{
        margin: 0 0 0 5px;
    }
    ._search .sectionTitle .en.mr{
        margin: 0 5px 0 0;
    }
/********** 메인 검색 페이지 끝 **********/





/********** 이용약관/개인정보처리방침/한계와법적고지 시작 **********/
    .tp_view {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        background-color: var(--white);
        padding: 50px;
        border-radius: 15px;
    }
    .tp_view .section_header {
        position: relative;
        width: 100%;
    }
    .tp_view .section_header::after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: var(--black);
        position: absolute;
        bottom: -32px;
        left: 0;
    }
    .tp_view .section_body {
        margin-top: 80px;
    }
/********** 이용약관/개인정보처리방침/한계와법적고지 끝 **********/





/*************** 뷰 / 실시간 대출 뷰 / 업체등록현황 뷰 페이지 시작 ***************/
    ._logOffer ._view main :where(section:not(.bestLoan)),
    ._rt-loan ._view main :where(section:not(.bestLoan, .liveLoan)),
    ._bis ._view main :where(section:not(.bestLoan)),
    .wiki-section {
        background-color: var(--white);
        width: 100%;
        padding: 60px 50px;
    }
    ._logOffer ._view main :where(section:not(.bestLoan, .caution_info)),
    ._rt-loan ._view main :where(section:not(.bestLoan, .ex_info, .liveLoan)),
    ._bis ._view main :where(section:not(.bestLoan, .caution_info)) {
        border-bottom: 1px solid var(--grey-ea);
    }

    .quick_info {
        border-radius: 15px 15px 0 0;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    ._bis ._view main section.quick_info {
        padding: 50px;
    }
    .pay_readys_icon {
        border-color: var(--red);
        position: absolute;
        min-width: 2rem;
        min-height: 2rem;
        top: 0;
        left: 0;
        color: var(--white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: var(--red);
        padding: 0.5rem 0.8rem;
        border-radius: 15px 0 15px 0;
        opacity: 0.6;
    }
    .pay_readys_icon a {
        color: var(--white);
    }
    .quick_info .intro-name {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--grey);
        margin-bottom: 20px;
    }
    .viewTitle {
        font-size: 48px;
        font-weight: 800;
        letter-spacing: -1.44px;
        line-height: 1.25;
    }
    .viewTitle.rt-loan {
        max-width: 75%;
    }
    .viewTitle.cg {
        color:var(--green);
    }
    .taglist {
        width: 100%;
        gap: 10px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .taglist .item {
        height: 30px;
        width: auto;
        border-radius: 15px;
        background-color: var(--grey-f5);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .taglist .item a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .quick_info .sub_title_box {
        width: 100%;
        margin-top: 35px;
    }
    .quick_info .sub_title_box >p:first-child {
        margin-right: 10px;
    }
    .viewSubTitle {
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.66px;
        color:var(--grey);
    }
    .quick_info .loan_info {
        width: 100%;
        margin-top: 90px;
        gap: 120px;
    }
    .quick_info .loan_info .key {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--green);
        margin-bottom: 13px;
    }
    .quick_info .loan_info .val {
        font-size: 25px;
        font-weight: 700;
        color:var(--green);
    }
    .quick_info .loan_info .val .per {
        font-weight: 700;
        color:var(--green);
    }
    .leftover {
        position: absolute;
        top: 50px;
        right: 50px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color: var(--grey);
        border: 1px solid var(--grey-d3);
        padding: 13px 18px;
        border-radius: 25px;
    }
    .leftover span {
        font-weight: 500;
        letter-spacing: -0.48px;
        color: var(--green);
    }
    .product_info_list{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 35px 0;
    }
    .product_info_list .item {
        width: 100%;
        justify-content: flex-start;
    }
    .product_info_list .item.full {
        grid-column: span 3;
    }
    .product_info_list .val.phone {
        display: flex;
        align-items: center;
    }
    .product_info_list .val .number_box .phone {
        width: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        white-space: nowrap;
    }
    .product_info_list .val .number_box .phone.on {
        width: 110px;
    }
    .product_info_list .val .number_box .phone.no_show.on {
        transition: all 0.3s ease 0.3s;
    }
    .product_info_list .val .number_box .phone.show.on {
        transition: all 0.3s ease 0.3s;
    }
    .product_info_list .val .btn {
        height: 24px;
        padding: 0 15px;
        border-radius: 12px;
        background-color: var(--green-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--green);
        cursor: pointer;
        white-space: nowrap;
    }
    ._logOffer ._view main .key,
    ._rt-loan ._view main .key,
    ._bis ._view main .key,
    .calc-section .bi_list .key {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.48px;
    }
    ._logOffer ._view main :where(.product_info_list, .business_info) .key,
    ._bis ._view main  .business_info .key,
    ._rt-loan ._view main .key,
    .calc-section .bi_list .key {
        font-weight: 700;
    }
    ._logOffer ._view main :where(.product_info, .business_info) .val,
    ._logOffer ._view main .val span,
    ._rt-loan ._view main .product_info .val,
    ._rt-loan ._view main .val span,
    ._bis ._view main :where(.business_info) .val,
    ._bis ._view main .val span,
    .calc-section .bi_list .val,
    .bi_list.area .item .content .text,
    .agency_phone_text {
        font-size: 15px;
        font-weight: 500;
        color:var(--grey);
    }
    .product_info_list .item .key {
        width: 92px;
    }
    .bi_list {
        margin-top: 50px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 35px 10px;
    }
    .bi_list .item  {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .bi_list .item .val :where(.road, .jibun) {
        transition: opacity 0.3s ease;
        width: 100%;
        opacity: 1;
        line-height: 1.88;
        overflow: hidden;
        display: initial;
    }
    .bi_list .item .val.road .jibun,
    .bi_list .item .val.jibun .road {
        width: 0;
        height: 0;
        opacity: 0;
        display: inline-flex;
        overflow: hidden;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .bi_list .item .change-btn {
        border-radius: 12px;
        height: 24px;
        padding: 0 10px;
        background-color: var(--grey-f9);
        cursor: pointer;
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--grey);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -2px;
        margin-left: 5px;
    }
    .bi_list .item.tip_phone {
        grid-row: 4/6;
        grid-column: 1/2;
    }
    .bi_list .item.ad_phone {
        grid-row: 4/6;
        grid-column: 2/3;
    }
    .bi_list .item.ad_phone .val {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .bi_list .item.ad_phone .val .phone,
    .bi_list .item.tip_phone .val {
        color:var(--red);
        font-weight: 600;
    }
    .bi_list .item.ad_phone .val .phone.none {
        color: var(--grey);
    }
    .bi_list .item .tip {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--green);
    }
    .bi_list .item .tip.link_tip {
        display: flex;
        flex-direction: column;
    }
    .bi_list .item .tip a {
        margin-top: 10px;
        display: block;
        width: 100%;
    }
    ._rt-loan .ex_info {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .agency_phone_text {
        margin-top: 10px;
    }
    .ex_info .section_body {
        margin-top: 50px;
    }
    .ex_info .content {
        width: 100%;
    }
    .ex_info .content p {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.88;
        letter-spacing: -0.48px;
        color:var(--grey);
        text-align: justify;
    }
    .ex_info .content :where(img, video) {
        max-width: 100%;
    }
    .caution_info {
        border-radius: 0 0 15px 15px;
    }
    .caution_info .section_header .sectionTitle {
        cursor: pointer;
    }
    .downArrow {
        width: 11px;
        height: 6px;
        display: inline-block;
        background-image: url(/res/svg/black_dn_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        transform: rotate(0deg);
        transition: all 0.3s ease;
        margin-left: 10px;
    }
    .caution_info .downArrow {
        position: relative;
        top: -2px;
    }
    .caution_info.on .downArrow {
        transform: rotate(180deg);
    }
    .caution_info .caution_list {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 12px;
    }
    .caution_info.on .caution_list {
        height: 740px;
        opacity: 1;
        margin-top: 48px;
    }
    .caution_list .item {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        line-height: 1.54;
        color:var(--grey);
        padding-left: 7px;
        text-indent: -7px;
        text-align: justify;
    }
    .caution_list .item.color_g,
    .caution_list .item .color_g {
        color: var(--green);
    }
    .caution_list .item .color_g {
        display: contents
    }
    .reportBtn {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        line-height: 1.54;
        color:var(--green);
        display: contents;
        transition: all 0.3s ease;
    }
    ._logOffer ._view .btn_box,
    ._rt-loan ._view .btn_box,
    ._bis ._view .btn_box,
    ._cm ._view .btn_box,
    ._cs ._view .btn_box {
        width: 100%;
        margin: 30px 0 60px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    ._rt-loan ._view .btn_box {
        justify-content: flex-end;
        gap: 20px
    }
    .btn_box.myPostOption {
        justify-content: space-between !important;
    }
    ._cm ._view .btn_box,
    ._cs ._view .btn_box {
        gap: 20px;
    }
    .btn_box a {
        width: 247px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        transition: all 0.3s ease;
    }
    .btn_box a span {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--white);
        position: relative;
    }
    .btn_box .optionBtn.edit {
        background-color: var(--white);
    }
    .btn_box .optionBtn.edit span {
        color:var(--grey);
    }
    .btn_box .optionBtn.del {
        background-color: var(--red);
    }
    ._rt-loan .btn_box .optionBtn.del {
        background-color: var(--white);
    }
    ._rt-loan .btn_box .optionBtn.del span {
        color:var(--grey);
    }
    .btn_box .optionBtn.extension,
    .btn_box .optionBtn.list {
        background-color: var(--green);
    }
    .btn_box .optionBtn .d-day {
        margin-left: 5px;
        font-weight: 500;
    }
    ._rt-loan ._view .loan_list li {
        cursor: pointer;
    }
    ._rt-loan ._view .loan_list .item.bannerReg {
        height: 180px;
    }
    ._rt-loan ._view .loan_list .item.bannerReg .content {
        padding: 28px 0 0 0;
    }
    .regBtn {
        width: 100%;
        height: 100%;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -0.42px;
        color:var(--green);
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .loanView_popup {
        width: 450px;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0px 14px 40px 0 rgba(0, 0, 0, 0.1);
        background-color: var(--white);
        position: relative;
    }
    .loanView_popup.reg {
        position: relative;
    }
    #Layer .loanView_popup .layer_header .popupClose {
        width: 20px;
        height: 20px;
    }
    #Layer .loanView_popup .layer_header .popupClose span {
        width: 100%;
        height: 100%;
    }
    .loanView_popup .layer_header .text {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.66px;
    }
    .loanView_popup .layer_body {
        margin-top: 15px;
        align-items: flex-start;
    }
    .loanView_popup .layer_body p {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .loanView_popup .layer_footer {
        margin-top: 45px;
    }
    .loanView_popup .write_button {
        width: 100%;
        background-color: var(--green);
    }
    .loanView_popup .write_button.closeLayer {
        font-size: 16px !important;
    }
    .loanView_popup.delete .layer_footer {
        gap: 10px;
        width: 100%;
    }
    .loanView_popup.delete .layer_footer.fieldset li {
        gap: 0 !important;
    }
    .loanView_popup.delete.ow-box.phone_auth .layer_footer input {
        width: 100%;
        flex: 1;
    }
    .loanView_popup.ow-box.phone_auth .ow-btn {
        background-color: var(--green);
        color:var(--white);
    }
    .loanView_popup.delete .layer_footer.fieldset li .ow-btn.js-authRequest,
    .loanView_popup.delete .layer_footer.fieldset li .ow-btn.js-authConfirm,
    .loanView_popup.delete .layer_footer.fieldset li.show.complete .ow-btn.js-confirmPhone,
    .loanView_popup.delete .layer_footer.fieldset li.show.complete .ow-btn.qnaConfirm {
        margin-left: 10px;
    }

    .loanView_popup .counting_box {
        position: absolute;
        left: 50px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color: var(--grey);
    }
    .loanView_popup .counting_box .count {
        font-weight: 500;
        letter-spacing: -0.48px;
        color: var(--green);
    }
/*************** 뷰 / 실시간 대출 뷰 / 업체등록현황 뷰 페이지 끝 ***************/





/*************** 로그인 페이지 시작 ***************/
    .login_section {
        width: 100%;
        height: 100%;
        justify-content: center;
        padding: 50px 0;
    }
    .login_container {
        max-width: 500px;
        width: 100%;
        height: auto;
        border-radius: 15px;
        padding: 50px;
        height: auto;
        background-color: var(--white);
    }
    .login_container .login_box {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 100%;
    }
    .login_box .text_box .top_ment {
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.84px;
    }
    .login_box .text_box p {
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--grey);
        margin-top: 10px;
        font-weight: 500;
    }
    .login_box .login_list {
        margin-top: 50px;
        width: 100%;
        gap: 10px;
    }
    .login_box .login_list .item {
        width: 100%;
        height: 60px;
        border-radius: 30px;
        background-color: var(--grey-fa);
        padding: 0 30px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .login_box .login_list .item .sns_icon {
        background-position: center;
        background-repeat: no-repeat;
        width: 21px;
        height: 100%;
    }
    .sns_icon.kakao {
        background-image: url(/res/svg/kakao.svg);
        background-size: 21px 20px;
    }
    .sns_icon.naver {
        background-image: url(/res/svg/naver.svg);
        background-size: 21px 20px;
    }
    .sns_icon.google {
        background-image: url(/res/svg/google.svg);
        background-size: 21px 20px;
    }
    .login_box .login_list .item .text {
        width: 100%;
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        transition: all 0.3s ease;
    }
/*************** 로그인 페이지 끝 ***************/



/*************** 광고등록 / 실시간 대출 문의 등록 페이지 시작 ***************/
    .form-offerWrite,
    .form-rt_loanWrite {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background-color: var(--white);
        padding: 0 0 50px 0;
    }
    .form-offerWrite>section,
    .form-rt_loanWrite>section {
        padding-left: 50px;
        padding-right: 50px;
    }
    .moveBtn {
        height: 34px;
        border-radius: 17px;
        background-color: var(--grey-f9);
        display: flex;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--black);
        margin-left: 13px;
    }
    .form-offerWrite .moveBtn {
        position: relative;
        top:-2px;
    }
    .adSelect .section_body {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px
    }
    .adSelect .ad_item {
        width: 100%;
        height: 320px;
        border: 1px solid var(--grey-ea);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        transition: all 0.3s ease;
    }
    .adSelect .position_a {
        position: absolute;
        top: 20px;
        left: 20px;
        height: 26px;
        border-radius: 13px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        background-color: var(--grey-f9);
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--green);
    }
    .adSelect .ad_item .title_box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

    }
    .adSelect .ad_item .title_box .m_text {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.66px;
    }
    .adSelect .ad_item .title_box .p_text {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.84px;
        margin-top: 25px;
    }
    .adSelect .ad_item .title_box .p_text .pp {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.66px;
        color:var(--grey);
        margin-left: 10px;
    }
    .adSelect .ad_item .description {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        margin-top: 30px;
        gap: 20px;
    }
    .adSelect .ad_item .description .icon {
        margin-right: 10px;
        width: 14px;
        height: 14px;
        background-image: url(/res/svg/ow_check_g.svg);
        background-position: center;
        background-repeat: no-repeat;
        transition: all 0.3s ease;
    }
    .adSelect .ad_item .description .text {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color: var(--grey);
    }
    .adSelect .ad_item.checked {
        background-color: var(--green);
        border-color: var(--green);
    }
    .adSelect .ad_item.checked .position_a {
        background-color: var(--white);
    }
    .adSelect .ad_item.checked :is(.title_box span, .description .item .text) {
        color: var(--white);
    }
    .adSelect .ad_item.checked .description .icon {
        background-image: url(/res/svg/ow_check_w.svg);
    }
    .adSelect .ad_item.disabled {
        opacity: 0.6;
        background-color: var(--grey-fa);
    }
    .adSelect .ad_item.disabled .position_a {
        background-color: var(--white);
        border: 1px solid var(--grey-ea);
    }
    .rt-loan_info {
        padding-top: 50px;
    }
    .cs-write_section {
        padding: 50px;
        border-radius: 10px;
        background-color: var(--white);
    }
    :where(.rt-loan_info, .cs-write_section) .section_body.fieldset {
        margin-top: 50px;
        gap: 0 !important;
    }
    :where(.rt-loan_info, .cs-write_section) .field {
        flex-direction: column;
        align-items: flex-start;
    }
    .ow-box.phone_auth{
        position: relative;
    }
    .ow-box.phone_auth .fieldset {
        gap: 10px;
    }
    .ow-box.phone_auth .fieldset li {
        gap: 20px;
        transition: all 0.3s ease;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .fieldset li:not(:first-child) {
        margin-top: 30px;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .fieldset li:where(.field.phone, .field.auth, .field.fraud_bar, .field.call_number) .val,
    .form-offerWrite .ow-box.phone_auth :where(.field.phone, .field.auth) {
        border: 1px solid var(--grey-ea);
        border-radius: 5px;
        overflow: hidden;
    }
    .form-offerWrite .ow-box.phone_auth .fieldset :where(li.field.phone, li.field.auth) {
        gap: 0;
        width: fit-content;
        overflow: hidden;
    }
    .ow-box.phone_auth .fieldset li input {
        width: 330px;
        height: 50px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        padding: 0 20px;
    }
    .ow-box.phone_auth .fieldset li input::placeholder {
        color:var(--grey-d3);
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .fieldset li input {
        width: 420px;
    }
    .form-offerWrite .ow-box.phone_auth .fieldset :where(li.field.phone, li.field.auth) input {
        width: 230px;
        border: none;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .fieldset li:where(.field.phone, .field.auth, .field.fraud_bar, .field.call_number) input {
        width: 320px;
        border: none;
        height: 48px;
    }
    .ow-box.phone_auth.rt-loan_info .fieldset .field:where(.rt_loan_amount, .age) .val {
        width: 420px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        padding-right: 20px;
    }
    .ow-box.phone_auth.rt-loan_info .fieldset .field:where(.rt_loan_amount, .age) .val input {
        border: none;
        width: 100%;
        padding: 0 0 0 20px;
        flex: 1;
        text-align: right;
    }
    .ow-box.phone_auth.rt-loan_info .fieldset .field:where(.rt_loan_amount, .age) .val input::placeholder {
        text-align: left; /* placeholder 텍스트를 왼쪽 정렬 */
        direction: ltr; /* placeholder 텍스트가 항상 왼쪽부터 시작하도록 설정 */
    }
    .ow-box.phone_auth.rt-loan_info .fieldset .field:where(.rt_loan_amount, .age) .val .unit_text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.42px;
        color:var(--grey);
        margin-left: 10px;
        display: flex !important; 
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .fieldset li .check_wrap input {
        width: 0;
        height: 0;
    }
    .ow-box.phone_auth li.auth {
        height: 0;
        opacity: 0;
        overflow: hidden;
    }
    .form-rt_loanWrite .ow-box.phone_auth li.auth {
        position: relative;
    }
    .ow-box.phone_auth li.show {
        height: 50px;
        opacity: 1;
        overflow: hidden;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) li.show {
        height: 83px;
        overflow: unset;
    }
    .ow-btn {
        width: 330px;
        height: 50px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 700;
        color:var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--green-light);
        cursor: pointer;
        padding-top: 3px;
    }
    .ow-box.phone_auth .ow-btn,
    .ow-box.company_info .fieldset .field .ow-btn{
        width: 100px;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .ow-btn {
        border-radius: 0;
        height: 48px;
    }
    .form-offerWrite .ow-box.phone_auth .fieldset :where(li.field.phone, li.field.auth) .ow-btn {
        border-radius: 0;
        height: 100%;
    }
    .ow-box.phone_auth .ow-btn.complete {
        background-color: var(--green);
        width: 0;
        opacity: 0;
    }
    .ow-box.phone_auth .field.auth .ow-btn {
        transition: all 0.3s ease;
        overflow: hidden;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .field.auth {
        margin-top: 0 !important;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .field.auth.show {
        margin-top: 30px !important;
    }
    .ow-box.phone_auth .field.auth.complete .js-authConfirm{
        width: 0;
        opacity: 0;
        display: none;
    }
    .ow-box.phone_auth:where(.rt-loan_info, .cs-write_section) .field.auth.complete .js-authConfirm,
    .loanView_popup.delete .layer_footer.fieldset li.complete .ow-btn.js-authConfirm {
        display: flex;
        margin-left: 0;
    }
    .ow-box.phone_auth .field.auth.complete .ow-btn.complete {
        width:100px;
        color:var(--white);
        opacity: 1;
    }
    .ow-box.phone_auth .ow-btn.js-authRequest.done {
        pointer-events: none;
    }
    .authText {
        position: absolute;
        bottom: -23px;
        left: 50px;
        font-size: 13px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
    .authText.false {
        color:var(--red);
        opacity: 1;
        height: 13px;
    }
    .authText.true {
        height: 13px;
        opacity: 1;
        color:var(--green);
    }
    .authText.complete {
        bottom: -13px;
    }
    .fieldset.ow-style {
        grid-template-columns: repeat(2,1fr);
        gap: 30px 20px;
    }
    .fieldset.ow-style.company,
    .fieldset.ow-style.lender {
        height: 0;
        overflow: hidden;
        margin-top: 0; 
        transition: all 0.3s ease;
    }
    .fieldset.ow-style.company.show {
        margin-top: 50px;
        height: 405px;
        opacity: 1;
        overflow: unset;
    }
    .fieldset.ow-style.lender.show {
        margin-top: 50px;
        height: 78px;
        opacity: 1;
        overflow: unset;
    }
    .fieldset.ow-style .field {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 15px;
    }
    .fieldset.ow-style.company .field.adr .val .j_adr,
    .fieldset.ow-style.company .field.adr .val.old .r_adr {
        position: absolute;
        top: -9999px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    .fieldset.ow-style.company .field.adr .val.old .j_adr {
        position: unset;
        top: unset;
        width: 100%;
        height: 50px;
        opacity: unset;
    }
    .fieldset.ow-style.company .field input.disabled,
    .fieldset.ow-style.lender .field input.disabled {
        background-color: var(--grey-fa);
        cursor: default;
    }
    .fieldset.ow-style.company .field.full {
        grid-column: span 2;
    }
    .fieldset.ow-style.company .field.full .val {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fieldset.ow-style.company .field.full .tel_item {
        width: auto;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        overflow: hidden;
    }
    .fieldset.ow-style.company .field.full input {
        width: 230px;
        border: none;
    }
    .fieldset.ow-style.company .field.full .js-ad_tel_add {
        width: 100px;
        overflow: hidden;
        opacity: 1;
        transition: all 0.3s ease;
    }
    .fieldset.ow-style.company .field.full .tel_item .ow-btn {
        border-radius: 0;
    }
    .fieldset.ow-style.company .field.full .js-ad_tel_add.close {
        width: 0;
        opacity: 0;
    }
    .ow-box:where(.company_info, .lender_registrar, .product_information, .rt-loan_info, .cs-write_section, .hf-section) .key,
    .calc-section .fieldset .field .key {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.39px;
    }
    .ow-box.rt-loan_info .key:has(>.rt-tip) {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .ow-box .rt-tip {
        /* margin-left: 10px; */
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.39px;
        color: var(--grey);
    }
    .ow-box .rt-tip .emphasis {
        color: var(--red);
        font-weight: 700;
    }
    .ad_tel_tip {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color: var(--red);
        margin-left: 10px;
    }
    .ow-input {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        padding: 0 20px;
        border: 1px solid var(--grey-ea);
        font-weight: 500;
        padding-bottom: 1px;
    }
    .ow-input::placeholder,
    .calc-section .fieldset .field input::placeholder {
        font-weight: 500;
        color:var(--grey);
    }
    .ow-input.back {
        border: none;
        background-color: var(--grey-f9);
    }
    .ow-input.back:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        -webkit-box-shadow: 0 0 0px 1000px var(--grey-f9) inset !important;
        -webkit-text-fill-color: var(--black) !important;
    }
    .ow-input.cg,
    .ow-input.cg::placeholder{
        color:var(--green);
    }
    .ow-input.cg:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        -webkit-box-shadow: 0 0 0px 1000px var(--grey-f9) inset !important;
        -webkit-text-fill-color: var(--green) !important;
    }
    .oneline_des_list {
        gap: 10px;
    }
    .ad_preview_box {
        width: 0;
        overflow: hidden;
        transition: width 0.3s ease;
    }
    .oneline_des .section_body {
        position: relative;
        overflow: hidden;
    }
    .oneline_des .section_body.on {
        gap: 20px;
    }
    .oneline_des .section_body .oneline_des_list {
        width: 100%;
        transition: width 0.3s ease;
    }
    .oneline_des .section_body.on .ad_preview_box {
        width: 247px;
    }
    .oneline_des .section_body.on .oneline_des_list {
        width: calc(100% - 267px);
    }
    .oneline_des .section_body.on .ad_preview_box .loan_list {
        grid-template-columns: repeat(1,1fr);
    }
    .oneline_des .section_body.on .ad_preview_box .loan_list li {
        border: 1px solid var(--grey-ea);
        transition: width 0.3s ease;
    }
    .oneline_des .section_body .ad_preview_box .loan_list .item {
        height: 100%;
        justify-content: center;
        white-space: pre;
        padding: 30px;
        cursor: default;
    }
    .fieldset.product {
        position: relative;
    }
    .fieldset.product,
    .calc-section .fieldset {
        margin-top: 50px;
        gap: 30px;
    }
    .fieldset.product .field,
    .calc-section .fieldset .field {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 15px;
    }
    .fieldset.product .val {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        max-width: 420px;
        width: 100%;
    }
    .fieldset.product .field.full .val {
        max-width: 100%;
        grid-template-columns: repeat(4,1fr);
    }
    .fieldset.product .field.sms_time .val {
        max-width: 505px;
    }
    .fieldset.product .val.wave {
        position: relative;
    }
    .fieldset.product .val.wave::before {
        content: '~';
        font-size: 13px;
        font-weight: 400;
        color:var(--grey);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .fieldset.product .box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 50px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        padding: 0 20px;
        flex: 1;
    }
    .fieldset.product .box .text,
    .calc-section .fieldset .field .text {
        font-size: 14px;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .fieldset.product .box input,
    .calc-section .fieldset .field input {
        flex: 1;
        height: 100%;
        border: none;
        border-radius: unset;
        text-align: right;
        padding: 0 5px 2px 5px;
    }
    .direct-field {
        margin-top: 0 !important;
        gap: unset !important;
        display: flex;
        flex-direction: column;
    }
    .calc_wrap[data-type="ltv"] .fieldset .field.type.option {
        transition: all 0.3s ease;
    }
    .direct-field .field {
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .direct-field .field:not(:first-child) {
        margin-top: 30px;
    }
    .direct-field .field.disabled {
        height: 0;
        margin-top: 0;
    }
    .ow-box.phone_auth.rt-loan_info .fieldset .field:where(.rt_loan_type, .rt_gender, .rt_job) .val {
        width: 420px;
        gap: 20px;
    }
    .checkbox.ow-style {
        width: 100%;
        height: 50px;
        flex: 1;
        padding: 0;
        animation: show_checkbox 0.3s linear forwards;
    }
    
    .checkbox.ow-style.disabled {
        overflow: hidden;
        animation: hide_checkbox 0.3s linear forwards;
    }
    @keyframes hide_checkbox {
        from { 
            width: 100%;
            opacity: 1;
        }
        100% { 
            width: 0%;
            opacity: 0;
        }
    }
    @keyframes show_checkbox {
        from { 
            width: 0%;
            opacity: 0;
        }
        100% { 
            width: 100%;
            opacity: 1;
        }
    }
    .checkbox.ow-style .check_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        border-radius: 5px;
        background-color: var(--grey-f9);
        transition: all 0.3s ease;
    }
    .ow-box.phone_auth.fraud .checkbox.ow-style .check_wrap {
        padding: 0 10px;
    }
    .checkbox.ow-style .text,
    .checkbox.ow-style .text span {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.42px;
        margin-right: auto;
        letter-spacing: -0.42px;
        color: var(--grey);
        white-space: nowrap;
        transition: all 0.3s ease;
    }
    .checkbox.ow-style .checkmark {
        position: relative;
        top: unset;
        left: unset;
        background-color: unset;
        border: none;
    }
    .checkbox.ow-style .check_wrap:has(>input:checked){
        background-color: var(--green-light);
    }
    .checkbox.ow-style input:checked ~ .text,
    .checkbox.ow-style input:checked ~ .text * {
        color:var(--green)
    }
    ._h_side .checkbox.ow-style .check_wrap:has(>input:checked){
        background-color: var(--blue-light);
    }
    ._h_side .checkbox.ow-style input:checked ~ .text,
    ._h_side .checkbox.ow-style input:checked ~ .text * {
        color:var(--blue);
    }
    .checkbox.ow-style .check_wrap:has(>input:disabled){
        background-color: var(--grey-d3);
    }
    .checkbox.ow-style input:disabled ~ .text,
    .checkbox.ow-style input:disabled ~ .text * {
        color:var(--black);
    }
    .checkbox.ow-style input:checked ~ .checkmark {
        background-color: unset;
        transition: all 0.3s ease;
    }
    .checkbox.ow-style input:checked ~ .checkmark::after {
        border-color: var(--green);
        transition: all 0.3s ease;
    }
    ._h_side .checkbox.ow-style input:checked ~ .checkmark::after {
        border-color: var(--blue);
        transition: all 0.3s ease;
    }
    .ow-box.explanation .section_body {
        width: 100%;
        height: 370px;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid var(--grey-ea);
        margin-top: 30px;
    }
    .form-rt_loanWrite .ow-box.explanation .section_body {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 0;
        border-radius: unset;
        border: none;
    }
    .form-rt_loanWrite .ow-box.explanation .section_body input {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border: solid 1px var(--grey-ea);
        padding: 0 20px;
    }
    .form-rt_loanWrite .ow-box.explanation .section_body input::placeholder {
        color:var(--grey-d3);
        font-size: 16px;
    }
    .form-rt_loanWrite .ow-box.explanation .content_wrap,
    .ow-box.cs-write_section .content_wrap  {
        width: 100%;
        height: 370px;
        margin-top: 10px;
        border-radius: 10px;
        border: solid 1px var(--grey-ea);
        padding: 20px;
    }
    .ow-box:where(.explanation, .cs-write_section) .content_box {
        width: 100%;
        height: 100%;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.48px;
        border: none;
        resize: none;
    }
    .ow-box:where(.explanation, .cs-write_section) .content_box::placeholder {
        color: rgba(136, 136, 136, 0.4);
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.48px;
    }
    .ow-box.lender_file .file-box label {
        border: 1px solid var(--grey-ea);
        display: flex;
        align-items: center;
        width: 330px;
        border-radius: 5px;
        overflow: hidden;
    }
    .ow-box.lender_file .file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
        white-space: nowrap;
        clip: rect(0, 0, 0, 0);
    }
    .ow-box.lender_file .upload-name {
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 47px;
        padding: 3px 20px;
        white-space: nowrap;
        display: block;
        color: rgba(136, 136, 136, 0.4);
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.48px;
        width: 230px;
    }
    .ow-box.lender_file .ow-btn {
        width: 100px;
        border-radius: 0;
    }
    .ow-box.tag_select {
        padding-bottom: 80px;
        border-bottom: 1px solid var(--grey-ea);
    }
    .ow-box.tag_select .section_body{
        margin-top: 0;
    }
    .ow-box .tag_box {
        margin-top: 50px;
    }
    .tag_box .tag_title .main {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.54px;
    }
    .tag_box .tag_title .sub {
        font-size: 13px;
        letter-spacing: -0.36px;
        color:var(--red);
        margin-left: 10px;
    }
    .rt-loan_info .fieldset .rt_local .val {
        width: 100%;
    }
    .tag_list {
        margin-top: 30px;
        gap: 10px;
    }
    .rt-loan_info .tag_list {
        margin-top: 0;
        width: 100%;
    }
    .tag_list.local {
        grid-template-columns: repeat(9,1fr);
    }
    .tag_list.product {
        grid-template-columns: repeat(6,1fr);
    }
    .tag_list label {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        width: 100%;
        height: 32px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .tag_list label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0 !important;
        width: 0 !important;
    }
    .tag_list label .text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .tag_list label:has(>input:checked) {
        background-color: var(--green-light);
    }
    .tag_list label input:checked ~ .text {
        color:var(--green);
    }
    .payemnt_receipt_container {
        grid-template-areas: 'payment receipt'
        'payment receipt';
        gap: 20px;
        grid-template-columns: 330px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
    .payemnt_receipt_container.free {
        height: auto;
        opacity: 1;
        overflow: unset;
    }
    .payemnt_receipt_container .payment_info_box {
        grid-area: payment;
    }
    .payemnt_receipt_container .cash_receipt_box {
        grid-area: receipt;
    }
    .payemnt_receipt_container .payment_info_box .section_body,
    .payemnt_receipt_container .cash_receipt_box .section_body {
        margin-top: 30px;
    }
    .pm_list {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--grey-ea);
        padding: 50px;
        gap: 25px;
        margin-bottom: 10px;
    }
    .pm_list .key {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        color:var(--grey);
        margin-right: auto;
    }
    .pm_list .val {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
    }
    .wrap_input.pos-depositor {
        margin-bottom: 10px;
    }
    .cash_receipt_box .section_body {
        display: grid;
        gap: 10px;
    }
    .payemnt_receipt_container input[type="text"]::placeholder {
        color: rgba(136, 136, 136, 0.4);
    }
    .payment_terms .payment_amount{
        margin-top: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
    .payment_terms .payment_amount.free {
        margin-top: 50px;
        height: auto;
        opacity: 1;
        overflow: unset;
    }
    .payment_terms .payment_amount .section_body {
        padding: 50px;
        border: 1px solid var(--grey-ea);
        border-radius: 10px;
        margin-top: 30px;
    }
    .amount_list {
        grid-template-columns: repeat(1,1fr);
        gap: 30px;
    }
    .amount_list .item.tag {
        display: none;
    }
    .amount_list .item.tag.use {
        display: flex;
    }
    .amount_list .key,
    .amount_list .val {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .amount_list .key {
        margin-right: auto;
    }
    .amount_list .item.title {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--grey-ea);
    }
    .amount_list .item.title .key,
    .amount_list .val {
        color: var(--black);
    }
    .amount_list .val.cr span {
        font-size: 28px;
        font-weight: 700;
        color: var(--red);
    }
    .terms_pop_view {
        padding: 50px;
        border: 1px solid var(--grey-ea);
        border-radius: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0 !important;
    }
    .form-rt_loanWrite .terms_pop_view {
        width: 100%;
        margin-top: 20px;
    }
    .terms_pop_view .checkbox input {
        width: 0 !important;
        height: 0 !important;
    }
    .terms_pop_view .checkbox .text {
        font-size: 15px;
        letter-spacing: -0.45px;
    }
    .terms_pop_view .checkbox .checkmark {
        top: -2px;
        border-radius: 50%;
    }
    .terms_pop_view .checkbox .checkmark:after {
        left: 50%;
        top: 3px;
        width: 3px;
        height: 8px;
        border: solid var(--white);
        border-width: 0 1px 1px 0;
        -webkit-transform: rotate(45deg) translateX(-50%);
        -ms-transform: rotate(45deg) translateX(-50%);
        transform: rotate(45deg) translateX(-50%);
        transition: all ease 0.2s;
    }
    .terms_pop_view .checkbox input:checked ~ .checkmark {
        background-color: var(--green);
        border: 1px solid var(--green);
    }
    .agree_list {
        width: 100%;
        margin-top: 35px;
        gap: 20px;
    }
    .agree_list .item {
        margin-top: 0 !important;
    }
    .agree_list .key,
    .agree_list .val {
        font-size: 13px;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .agree_list .key {
        margin-right: auto;
    }
    .agree_list .val {
        text-decoration: underline;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn_box.write {
        margin-top: 30px;
        justify-content: center;
    }
    .write_button {
        width: 330px;
        height: 50px;
        border-radius: 8px;
        background-color: var(--red);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--white);
        cursor: pointer;
        outline: none;
        border: none;
    }
    .write_button.cg {
        background-color: var(--green);
    }
    ._h_side .write_button.cg {
        background-color: var(--blue);
    }
    /*** 광고 안내 레이어 시작 ***/
        .ad_layer {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            background: var(--grey-f9);
            height: 0;
            width: 100%;
            overflow: hidden;
            transition: all 1s ease;
        }
        .ad_layer .x-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 2;
        }
        .ad_layer .coalition {
            padding: 60px 0 0 0;
            margin: 0;
        }
        .form-offerWrite.ani {
            transition: all 1s ease;
            padding-bottom: 0;
            overflow: hidden;
        }
    /*** 광고 안내 레이어 끝 ***/
/*************** 광고등록 / 실시간 대출 문의 등록 페이지 끝 ***************/


/*************** 광고등록 페이지 검색 팝업 시작 ***************/
    .searchPopup {
        width: 930px;
        height: 100%;
        max-height: 744px;
        padding: 50px 20px 20px 50px;
        border-radius: 10px;
        box-shadow: 0px 4px 16px 0 rgba(0, 65, 57, 0.08);
        background-color: var(--white);
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    .searchPopup .layer_header .text {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.84px;
    }
    #Layer :where(.layer_header, .layer_body) {
        width: 100%;
    }
    #Layer .popupClose,
    .ad_layer .x-btn {
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    #Layer .x_icon,
    .ad_layer .x-btn {
        width: 26px;
        height: 26px;
        background-image: url(/res/svg/popup_x_b.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #Layer .layer_header .popupClose {
        position: absolute;
        top: 30px;
        right: 30px;
    }
    .searchPopup .layer_body {
        padding-top: 30px;
        height: 100%;
    }
    .searchPopup .form-searchPopup.company {
        gap: 20px;
        padding-right: 30px;
    }
    .searchPopup .form-searchPopup.company .Custom-select {
        width: 190px;
        height: 60px;
        border-radius: 10px;
    }
    .searchPopup .form-searchPopup.company .Custom-select.active .scroll {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .searchPopup .form-searchPopup.company .Custom-select .title {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        height: 100%;
    }
    .searchPopup .form-searchPopup.company input {
        flex: 1;
        width: 100%;
        height: 60px;
        border-radius: 10px;
        color:var(--black);
        padding: 0 20px;
        border: 1px solid var(--grey-ea);
    }
    .searchPopup .form-searchPopup.company input,
    .searchPopup .form-searchPopup.company input::placeholder {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
    }
    .searchPopup .form-searchPopup.company input::placeholder {
        color:var(--grey-d3);
    }
    .searchPopup .form-searchPopup.company .searchBtn {
        width: 170px;
        height: 60px;
        border-radius: 10px;
        background-color: var(--green);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        border: none;
    }
    .searchPopup .form-searchPopup.company .searchBtn .text {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--white);
    }
    .searchPopup .form-searchPopup.company .searchBtn .glasses {
        width: 15px;
        height: 15px;
        background-image: url(/res/svg/glasses_w.svg);
        background-position: center;
        margin-right: 5PX;
    }
    .searchPopup .content_box {
        padding-top: 50px;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 40px auto;
        overflow: hidden;
    }
    .searchPopup .content_box .title {
        width: 100%;
        height: 40px;
        padding-right: 30px;
    }
    .searchPopup .content_box .title .item {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--green-light);
    }
    .searchPopup .content_box .title .item.name,
    .sr_list .item .name {
        width: 186px;
    }
    .searchPopup .content_box .title .item.number,
    .sr_list .item .number {
        width: 166px;
    }
    .searchPopup .content_box .title .item.ceo,
    .sr_list .item .ceo {
        width: 76px;
    }
    .searchPopup .content_box .title .item.phone,
    .sr_list .item .phone {
        width: 108px;
    }
    .searchPopup .content_box .title .item.adr,
    .sr_list .item .adr {
        width: 100%;
        flex: 1;
    }
    .searchPopup .content_box .title .item span {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.39px;
        color:var(--green);
    }
    .sr_list {
        width: 100%;
        max-height: 466px;
        height: 100%;
        padding-right: 15px;
        overflow-y: scroll;
    }
    .sr_list li.item.none {
        width: 100%;
        height: 100%;
        min-height: 466px;
        justify-content: center;
    }
    .sr_list li.item.none .none_text {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color:var(--grey-d3);
    }
    .sr_list .item {
        width: 100%;
        height: 60px;
        transition: all 0.3s ease;
    }
    .sr_list .item:not(.none) {
        border-bottom: 1px solid var(--grey-ea);
    }
    .sr_list .item > div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        line-height: 1.38;
    }
    .sr_list .item > div.adr {
        justify-content: flex-start;
        width: calc(100% - 604px);
        flex: unset;
        padding-left: 20px;
    }
    .sr_list .item > div:not(.adr) {
        text-align: center;
    }
    .searchPopup .checkbox_container {
        width: 100%;
        grid-template-columns: repeat(11,1fr);
        gap: 10px;
    }
    .searchPopup .checkbox_container label {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        background-color: var(--grey-f9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .searchPopup .checkbox_container label .text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .searchPopup .checkbox_container label:has(>input:checked) {
        background-color: var(--green);
    }
    .searchPopup .checkbox_container label input:checked ~ .text {
        color:var(--white);
    }
    .searchPopup .content_box.lender .title .item.local_main,
    .searchPopup .sr_list.lender .item div.si  {
        width: 188px;
    }
    .searchPopup .content_box.lender .title .item:not(.local_main),
    .searchPopup .sr_list.lender .item div:not(.si) {
        flex: 1;
    }
    .terms_popup {
        width: 780px;
        height: 615px;
        border-radius: 15px;
        background-color: var(--white);
        padding: 50px;
        position: relative;
        display: grid;
        grid-template-rows: 55px auto;
    }
    .terms_popup .layer_header {
        height: 55px;
    }
    .terms_popup h2 {
        height: auto !important;
        padding: 0 !important;
    }
    #Layer .terms_popup .layer_body {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    #Layer .terms_popup .content.terms {
        width: 100%;
        padding: 0;
    }
/*************** 광고등록 페이지 검색 팝업 끝 ***************/



/*************** 광고등록 완료 페이지 시작 ***************/
    .ad_registration {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 250px 0 50px 0;
        border-radius: 15px;
        background-color: var(--white);
    }
    .ad_registration :where(.section_header, .section_body) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .complete_icon {
        width: 60px;
        height: 60px;
        background-image: url(/res/svg/circle_check2.svg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .c_title {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.84px;
        margin-top: 30px;
    }
    .ad_registration .section_body {
        width: 500px;
        margin-top: 0;
    }
    .ad_registration :where(.total_price_box, .deposit_info_box) {
        width: 100%;
        margin-top: 50px;
    }
    .ad_registration .title_box {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.66px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--black);
    }
    .ad_registration .fieldset {
        padding: 30px 0;
        border-bottom: 1px solid var(--grey-ea);
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 35px;
    }
    .ad_registration .fieldset .key {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.45px;
        color:var(--grey);
        margin-right: auto;
    }
    .ad_registration .total_price_box .fieldset .val {
        font-size: 15px;
        font-weight: 600;
        color:var(--grey);
    }
    .ad_registration .total_price_box .fieldset .field.total .val {
        font-size: 22px;
        font-weight: 600;
        color:var(--red);
    }
    .ad_registration .deposit_info_box .fieldset .val {
        font-size: 15px;
        font-weight: 600;
        color:var(--black);
    }
    .ad_registration .deposit_info_box .info_box {
        padding: 20px 0 30px 0;
    }
    .ad_registration .deposit_info_box .info_box p {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.67;
        color:var(--grey);
    }
    .ad_registration .btn_box {
        gap: 10px;
    }
    .ad_registration .btn_box a {
        width: 170px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--grey);
        background-color: var(--grey-f5);
    }
    .ad_registration .btn_box .viewBtn {
        background-color: var(--green);
        color:var(--white);
    }
/*************** 광고등록 완료 페이지 끝 ***************/




/*************** 실시간 대출문의 / 업체등록현황 리스트 페이지 시작 ***************/
    .rt-loan_business {
        width: 100%;
        border-radius: 15px;
        flex-direction: column;
        background-color: var(--green-light2);
        position: relative;
    }
    ._rt-loan .rt-loan_business .wordSlide {
        height: 228px;
    }
    .rt-loan_business .wordBox input:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        -webkit-box-shadow: 0 0 0px 1000px var(--green-light2) inset !important;
        -webkit-text-fill-color: var(--black) !important;
    }
    .rt-loan_business .tip_ment {
        padding: 20px 0 0 10px;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color:var(--black);
    }
    .rt-loan_business .recommendWord.business .item {
        width: 95px;
        border: 1px solid var(--green);
        background-color: var(--green-light2);
        color:var(--green);
        cursor: default;
    }
    .rt-loan_business ul li .description .title span {
        color:var(--green);
        font-weight: 700;
    }
    .chart_container {
        width: 263px;
        height: 124px;
        margin-left: auto;
        display: flex;
        flex-direction: column;
    }
    .chart_box {
        margin-top: 25px;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid var(--green);
        padding: 0 20px;
        gap: 10px;
        align-items: flex-end;
        flex-direction: row-reverse;
    }
    .chart_box .bar {
        width: 100%;
        height: 0;
        overflow: hidden;
        position: relative;
        opacity: 0;
        transition: all 0.3s ease 0.3s;
    }
    .chart_box .bar.top::after {
        content: '';
        width: 0;
        height: 0;
        border-top: var(--graph) solid var(--green);
        border-bottom: var(--graph) solid transparent;
        border-left: var(--graph) solid var(--green);
        border-right: var(--graph) solid transparent;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .chart_box .bar:nth-child(1) {
        background-color: var(--green);
    }
    .chart_box .bar:nth-child(2) {
        background-color: rgba(53, 186, 170, 0.85);
    }
    .chart_box .bar:nth-child(3) {
        background-color: rgba(53, 186, 170, 0.65);
    }
    .chart_box .bar:nth-child(4) {
        background-color: rgba(53, 186, 170, 0.45);
    }
    .chart_box .bar:nth-child(5) {
        background-color: rgba(53, 186, 170, 0.25);
    }
    .chart_box .bar .text {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.39px;
        color:var(--white);
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .chart_container .subject_box {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        padding: 0 20px;
        gap: 10px;
        flex-direction: row-reverse;
    }
    .chart_container .subject_box .text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: -0.48px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-height: 1.2;
        text-align: center;
    }
    .text-viewBox {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
    }
    .text-viewBox .d-text {
        font-size: 24px;
        font-weight: 700;
    }
    .text-viewBox .d-icon {
        width: 33px;
        height: 33px;
        background-image: url(/res/svg/graph5.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: relative;
        top: 5px;
        margin-right: 5px;
    }
    .text-viewBox .count-text {
        font-size: 55px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--green);
        margin: 0 10px;
    }
    ._rt-loan ._list .liveLoan {
        padding-top: 80px;
    }
    ._rt-loan .liveLoan .section_header {
        position: relative;
    }
    .write-btn {
        width: 100px;
        height: 34px;
        border-radius: 17px;
        background-color: var(--green);
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--white);
        line-height: 33px;
        padding-top: 2px;
    }
    ._rt-loan .liveLoan .section_header .write-btn {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    ._rt-loan .liveLoan .live_list.loan {
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        margin-top: 30px;
    }
    ._rt-loan .liveLoan .live_list.loan .item {
        height: 108px;
        position: relative;
    }
    ._rt-loan .liveLoan .live_list:where(.loan, .main) .new-new {
        width: 4px;
        height: 4px;
        top: 15px !important;
        left: 15px !important;
    }
    ._rt-loan .liveLoan .live_list.loan .item.my_add_banner {
        position: relative;
        overflow: hidden;
    }
    ._rt-loan .liveLoan .live_list.loan .item.my_add_banner::after {
        content: '';
        width: 10px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(53, 186, 170, 0.13);
    }
    ._rt-loan .liveLoan .live_list.loan .item .title {
        max-width: 70%;
        flex: 1;
    }
    ._rt-loan .liveLoan .section_footer {
        width: 100%;
    }
    .loanCompany {
        padding-top: 60px;
        flex-direction: column;
        width: 100%;
    }
    .live_list.business {
        grid-template-columns: repeat(2,1fr);
        margin-top: 30px;
    }
    .live_list.business li {
        position: relative;
    }
    .live_list.business .item {
        grid-template-columns: 122px auto;
        padding: 0;
        gap: 20px 0;
        height: 108px;
    }
    .live_list.business .item :where(.top, .bottom) > div:last-child {
        margin-left: unset;
    }
    .live_list.business .item .status {
        grid-row: unset;
    }
    .live_list.business .item .top {
        align-items: flex-start;
        padding-top: 30px;
    }
    .live_list.business .item.none_tel .top {
        align-items: center;
        padding: 0;
    }
    .live_list.business .item .title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.54px;
        max-width: calc(100% - 20px);
    }
    .live_list.business .tel_box {
        position: absolute;
        left: 122px;
        bottom: 0;
        height: 50%;
        align-items: flex-start;
        padding-top: 12px;
    }
    .live_list.business .tel_icon {
        top: 2px;
    }
    .live_list.business .tel_box .text {
        font-family: 'pt';
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.42px;
        color:var(--black);
    }
    ._bis .section_footer {
        width: 100%;
    }
    .noneItem {
        min-height: 600px;
        max-height: 600px;
        height: 100%;
        grid-column: span 2;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--white);
        border-radius: 15px;
    }
    .noneIcon {
        display: none;
    }
    .noneItem .text {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -.42px;
        color: var(--grey);
        margin-top: 30px;
    }
/*************** 실시간 대출문의 리스트 페이지 끝 ***************/



/*************** 스마트 매칭 검색 페이지 시작 ***************/
    .form-smart {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }
    .sm-section {
        border-radius: 15px;
        background-color: var(--white);
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .sm-section:not(.sm-conditions) {
        padding: 60px 50px;
    }
    .sm-section:not(.sm-conditions) .section_header {
        flex-direction: column;
        justify-content: center;
    }
    .step {
        width: 100px;
        height: 40px;
        border-radius: 20px;
        border: 1px solid var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 3px;
        margin-bottom: 20px;
    }
    .step span {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--green);
    }
    .sm-section:not(.sm-conditions) .section_body {
        margin-top: 50px;
    }
    .sm-loan :where(.section_body, .area.input) {
        flex-direction: column;
        justify-content: center;
    }
    .loan-icon {
        margin-top: 25px;
        width: 141px;
        height: 56px;
        background: url(/res/image/pig.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sm-loan .wrap {
        margin-top: 45px;
        width: 100%;
        grid-template-areas: 'loan_write loan_write loan_write loan_write loan_write'
                            'loan_slide loan_slide loan_slide loan_slide loan_btn';
        grid-template-columns: auto auto auto auto 123px;
        gap: 15px 30px;
        position: relative;
    }
    .sm-loan .wrap.direct {
        grid-template-areas: 'loan_write loan_write loan_write loan_write loan_btn'
                            'loan_write loan_write loan_write loan_write loan_btn';
        height: 110px;
        place-items: center;
        grid-template-rows: 42px 53px;
        padding-top: 10px;
    }
    .sm-loan .wrap .write_box {
        width: 100%;
        justify-content: center;
        grid-area: loan_write;
        align-items: flex-end;
        transition: width 0.3s ease;
    }
    .sm-loan .wrap.direct .write_box {
        width: 310px;
        height: 50px;
        border-radius: 10px;
        border: solid 1px var(--grey-ea);
        align-items: center;
        margin-left: auto;
        padding: 0 20px;
    }
    .sm-loan .wrap .slide_text{
        font-size: 30px;
        font-weight: 700;
        line-height: 0.6;
        transition: all 0.3s ease;
    }
    .sm-loan .wrap.direct .slide_text {
        width: 0;
        overflow: hidden;
    }
    .sm-loan .wrap .write_box input {
        font-size: 30px;
        font-weight: 700;
        line-height: 0.6;
        border: none;
        outline: none;
        width: 0;
        overflow: hidden;
    }
    .sm-loan .wrap.direct .write_box input {
        width: 100%;
        flex: 1;
        text-align: end;
        font-size: 16px;
        font-weight: 700;
    }
    .sm-loan .text {
        font-size: 16px;
        font-weight: 700;
    }
    .sm-loan .wrap.direct .write_box .text {
        font-weight: 400;
        color:var(--grey);
        padding-top: 1px;
    }
    .sm-loan .wrap .btn {
        width: 123px;
        height: 50px;
        border-radius: 10px;
        background-color: var(--grey-f9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        padding-top: 3px;
        grid-area: loan_btn;
        position: absolute;
        top: 0;
        right: 0;
        transform: translateY(-18px);
    }
    .sm-loan .wrap.direct .btn {
        position: unset;
        transform: translateY(0px);
    }
    .slideContainer {
        grid-area: loan_slide;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 25px;
        height: 100%;
        opacity: 1;
    }
    .sm-loan .wrap.direct .slideContainer {
        height: 0;
        overflow: hidden;
        opacity: 0;
    }
    .slideContainer,
    .slideContainer input {
        width: 100%;
    }
    .slideContainer input {
        height: 15px;
        border-radius: 7px;
        background: linear-gradient(to right, var(--green) 0%, var(--green) 0%, var(--grey-fa) 0%, var(--grey-fa) 100%);
        opacity: 0.7;
        transition: all 0.3s ease;
    }
    .slideContainer input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        box-shadow: 0px 4px 16px 0 rgba(0, 65, 57, 0.08);
        border: solid 1px var(--grey-ea);
        border-radius: 50%;
        background-color: var(--white);
        cursor: pointer;
    }

    .slideContainer input::-moz-range-thumb {
        width: 25px;
        height: 25px;
        box-shadow: 0px 4px 16px 0 rgba(0, 65, 57, 0.08);
        border: solid 1px var(--grey-ea);
        border-radius: 50%;
        background-color: var(--white);
        cursor: pointer;
    }
    .slideContainer input[type=range]:focus::-ms-fill-lower {
        background: var(--green);
    }
    .slideContainer .tickmarks {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .slideContainer .tickmarks span {
        font-size: 13px;
        font-weight: 400;
    }
    .sm-section .section_body {
        transition: all 0.3s ease;
    }
    .sm-section.close .section_body {
        height: 0;
        margin-top: 0;
        overflow: hidden;
    }
    .sm-local .section_body {
        height: 396px;
    }
    .sm-local .map_area {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 97px;
    }
    .sm-local .tag_list {
        grid-template-columns: repeat(3,1fr);
        margin-top: 0;
    }
    .sm-local .tag_list label {
        width: 67px;
    }
    .sm-local .tag_list label .text {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        position: relative;
        top: 1px;
    }
    .sm-local .mapview {
        width: 275px;
        height: 396px;
        margin-left: 55px;
        position: relative;
    }
    .mapview .map_item {
        position: absolute;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .mapview .map_item.on,
    .mapview .map_item.select {
        z-index: 10 !important;
    }
    .mapview .map_item.gangwon {
        width: 156px;
        height: 137px;
        top: 0;
        right: 15px;
        background-image: url(/res/svg/map/gangwon_off.svg);
    }
    .mapview .map_item.gangwon.on,
    .mapview .map_item.gangwon.select {
        background-image: url(/res/svg/map/gangwon_on.svg);
    }
    .mapview .map_item.gyeonggi {
        width: 104px;
        height: 119px;
        top: 35px;
        left: 53px;
        background-image: url(/res/svg/map/gyeonggi_off.svg);
    }
    .mapview .map_item.gyeonggi.on,
    .mapview .map_item.gyeonggi.select {
        background-image: url(/res/svg/map/gyeonggi_on.svg);
    }
    .mapview .map_item.seoul {
        width: 27px;
        height: 22px;
        top: 85px;
        left: 80px;
        background-image: url(/res/svg/map/seoul_off.svg);
        z-index: 1;
    }
    .mapview .map_item.seoul.on,
    .mapview .map_item.seoul.select {
        background-image: url(/res/svg/map/seoul_on.svg);
    }
    .mapview .map_item.incheon {
        width: 21px;
        height: 27px;
        top: 87px;
        left: 67px;
        background-image: url(/res/svg/map/incheon_off.svg);
        z-index: 1;
    }
    .mapview .map_item.incheon.on,
    .mapview .map_item.incheon.select {
        background-image: url(/res/svg/map/incheon_on.svg);
    }
    .mapview .map_item.chungnam {
        width: 108px;
        height: 87px;
        top: 137px;
        left: 37px;
        background-image: url(/res/svg/map/chungnam_off.svg);
    }
    .mapview .map_item.chungnam.on,
    .mapview .map_item.chungnam.select {
        background-image: url(/res/svg/map/chungnam_on.svg);
    }
    .mapview .map_item.chungbuk {
        width: 100px;
        height: 104px;
        top: 119px;
        left: 113px;
        background-image: url(/res/svg/map/chungbuk_off.svg);
    }
    .mapview .map_item.chungbuk.on,
    .mapview .map_item.chungbuk.select {
        background-image: url(/res/svg/map/chungbuk_on.svg);
    }
    .mapview .map_item.sejong {
        width: 18px;
        height: 27px;
        top: 163px;
        left: 107px;
        background-image: url(/res/svg/map/sejong_off.svg);
    }
    .mapview .map_item.sejong.on,
    .mapview .map_item.sejong.select {
        background-image: url(/res/svg/map/sejong_on.svg);
    }
    .mapview .map_item.daejeon {
        width: 21px;
        height: 28px;
        top: 182px;
        left: 114px;
        background-image: url(/res/svg/map/daejeon_off.svg);
        z-index: 1;
    }
    .mapview .map_item.daejeon.on,
    .mapview .map_item.daejeon.select {
        background-image: url(/res/svg/map/daejeon_on.svg);
    }
    .mapview .map_item.gyeongbuk {
        width: 124px;
        height: 129px;
        top: 126px;
        right: 0;
        background-image: url(/res/svg/map/gyeongbuk_off.svg);
    }
    .mapview .map_item.gyeongbuk.on,
    .mapview .map_item.gyeongbuk.select {
        background-image: url(/res/svg/map/gyeongbuk_on.svg);
    }
    .mapview .map_item.jeonbuk {
        width: 105px;
        height: 70px;
        top: 210px;
        left: 56px;
        background-image: url(/res/svg/map/jeonbuk_off.svg);
    }
    .mapview .map_item.jeonbuk.on,
    .mapview .map_item.jeonbuk.select {
        background-image: url(/res/svg/map/jeonbuk_on.svg);
    }
    .mapview .map_item.gyeongnam {
        width: 115px;
        height: 83px;
        top: 231px;
        right: 24px;
        background-image: url(/res/svg/map/gyeongnam_off.svg);
    }
    .mapview .map_item.gyeongnam.on,
    .mapview .map_item.gyeongnam.select {
        background-image: url(/res/svg/map/gyeongnam_on.svg);
    }
    .mapview .map_item.ulsan {
        width: 31px;
        height: 32px;
        top: 246px;
        right: 9px;
        background-image: url(/res/svg/map/ulsan_off.svg);
    }
    .mapview .map_item.ulsan.on,
    .mapview .map_item.ulsan.select {
        background-image: url(/res/svg/map/ulsan_on.svg);
    }
    .mapview .map_item.busan {
        width: 67px;
        height: 49px;
        top: 260px;
        right: 2px;
        background-image: url(/res/svg/map/busan_off.svg);
        transform: rotate3d(60, 5, 3, 44deg);
    }
    .mapview .map_item.busan.on,
    .mapview .map_item.busan.select {
        background-image: url(/res/svg/map/busan_on.svg);
    }
    .mapview .map_item.jeonnam {
        width: 110px;
        height: 95px;
        top: 265px;
        left: 44px;
        background-image: url(/res/svg/map/jeonnam_off.svg);
    }
    .mapview .map_item.jeonnam.on,
    .mapview .map_item.jeonnam.select {
        background-image: url(/res/svg/map/jeonnam_on.svg);
    }
    .mapview .map_item.jeju {
        width: 39px;
        height: 23px;
        bottom: 0;
        left: 0;
        background-image: url(/res/svg/map/jeju_off.svg);
    }
    .mapview .map_item.jeju.on,
    .mapview .map_item.jeju.select {
        background-image: url(/res/svg/map/jeju_on.svg);
    }
    .mapview .map_item.gwangju {
        width: 31px;
        height: 20px;
        bottom: 92px;
        left: 72px;
        background-image: url(/res/svg/map/gwangju_off.svg);
        z-index: 1;
    }
    .mapview .map_item.gwangju.on,
    .mapview .map_item.gwangju.select {
        background-image: url(/res/svg/map/gwangju_on.svg);
    }
    .mapview .map_item.daegu {
        width: 31px;
        height: 20px;
        bottom: 143px;
        right: 73px;
        background-image: url(/res/svg/map/daegu_off.svg);
        z-index: 1;
    }
    .mapview .map_item.daegu.on,
    .mapview .map_item.daegu.select {
        background-image: url(/res/svg/map/daegu_on.svg);
    }
    .sm-loan_type .section_body {
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        width: auto;
        height: 186px;
    }
    .sm-loan_type .item {
        width: 230px;
        flex-direction: column;
        cursor: pointer;
    }
    .sm-loan_type .item label {
        width: 100%;
        height: 150px;
        border-radius: 20px;
        border: 1px solid var(--grey-ea);
        background-color: var(--white);
        transition: all 0.3s ease;
        position: relative;
        cursor: pointer;
    }
    .sm-loan_type .item .text {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color:var(--grey);
        margin-top: 20px;
    }
    .sm-loan_type .item  .type_img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sm-loan_type .item  .type_img.credit {
        background-image: url(/res/image/credit.png);
        width: 69px;
        height: 47px;
    }
    .sm-loan_type .item  .type_img.mortgage {
        background-image: url(/res/image/mortgage.png);
        width: 69px;
        height: 61px;
    }
    .sm-loan_type .item label:has(>input:checked) {
        background-color: var(--green-light);
        border-color: var(--green);
    }
    .sm-loan_type .item label:has(>input:checked) ~ .text {
        font-weight: 600;
        color:var(--black);
    }
    .sm-basic_info .section_body {
        height: 246px;
    }
    ._sm ._write .fieldset {
        gap: 30px;
    }
    ._sm ._write .sm-job_income .fieldset {
        height: 80px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    ._sm ._write .sm-job_income .fieldset.office {
        height: 1025px;
    }
    ._sm ._write .sm-job_income .fieldset.business {
        height: 1085px;
    }
    ._sm ._write .sm-job_income .fieldset.unemployed {
        height: 855px;
    }
    ._sm ._write .fieldset .field {
        display: grid;
        gap: 15px;
    }
    ._sm ._write .fieldset .field .key {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.1;
        color:var(--black);
    }
    ._sm ._write .fieldset .field .val {
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
    }
    .sm-conditions {
        padding: 95px 50px 50px 50px;
    }
    .sm-conditions .section_header {
        cursor: pointer;
    }
    .resetBtn {
        width: 14px;
        height: 13px;
        margin-left: 13px;
        background-image: url(/res/svg/reset_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        top: -2px;
    }
    .sm-conditions .section_body {
        margin-top: 50px;
        gap: 60px;
        display: flex;
        align-items: flex-start;
    }
    .cdt_list {
        gap: 27px;
        flex: 1;
    }
    .cdt_list .key {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.42px;
        color:var(--grey);
        margin-right: auto;
    }
    .cdt_list .val {
        font-size: 14px;
        font-weight: 600;
    }
    .matching_box {
        width: 360px;
        height: 230px;
        border-radius: 15px 15px 15px 15px;
        background-color: var(--grey-f9);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 50px;
    }
    .matching_box .submitBtn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        outline: none;
        border: none;
        border-radius: 0 0 15px 15px;
        background-color: var(--red);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--white);
        cursor: pointer;
    }
    .matching_box .title {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.54px;
        color:var(--black);
        margin-bottom: 13px;
    }
    .matching_box .matching_count {
        font-size: 40px;
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: -1.2px;
        color:var(--red);
    }
/*************** 스마트 매칭 검색 페이지 끝 ***************/



/*************** 스마트 매칭 완료 페이지 시작 ***************/
    .matching_result {
        padding: 43px 50px;
        width: 100%;
        border-radius: 15px;
        background-color: var(--green-light2);
    }
    .matching_result p {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.64;
        letter-spacing: -0.66px;
    }
    .matching_result .cg {
        color:var(--green);
        font-weight: 700;
    }
    .resetPrev {
        margin-left: auto;
        width: 122px;
        height: 50px;
        border-radius: 25px;
        background-color: var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .resetPrev .resetBtn {
        margin: 0 10px 0 0;
        background-image: url(/res/svg/reset_arrow_w.svg);
    }
    .resetPrev .text {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.45px;
        color:var(--white);
        padding-top: 3px;
    }
    .matchingSection {
        width: 100%;
    }
    .matchingSection .section_footer {
        justify-content: center;
        margin-top: 30px;
    }
    .matchingSection .moreBtn {
        width: 247px;
        height: 50px;
        border-radius: 25px;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color: var(--grey);
        background-color: var(--white);
        padding-top: 3px;
    }
    .loadingIcon {
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loadingIcon span {
        position: absolute;
        height: 5px;
        width: 3px;
        background: var(--green);
        border-radius: 50%;
        transform: rotate(calc(var(--i) * (360deg / 15))) translateY(15px);
        animation: loading_ani 1.5s linear infinite;
        animation-delay: calc(var(--i) * 0.1s);
        opacity: 0;
    }
    @keyframes loading_ani {
        0% {
            opacity: 1;
            transform: rotate(calc(var(--i) * (360deg / 15))) translateY(15px) scale(1.5);
        }
        100% {
            opacity: 0;
            transform: rotate(calc(var(--i) * (360deg / 15))) translateY(15px) scale(0.5);
        }
    }
/*************** 스마트 매칭 완료 페이지 끝 ***************/



/*************** 커뮤니티 / 고객센터 리스트 페이지 시작 ***************/
    .pageNav-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 30px;
    }
    .pageNav-container.csNavSlide {
        margin-bottom: 20px;
    }
    .cmPageNav,
    .csPageNav {
        border-radius: 10px;
        background-color: var(--white);
        height: 60px;
        width: 100%;
    }
    .pageNav-container .csPageNav {
        height: 60px;
        width: 100%;
    }
    .cmPageNav .item,
    .csPageNav .item {
        flex: 1;
        justify-content: center;
        height: 100%;
        border-radius: 10px;
    }
    .cmPageNav .item.on,
    .csPageNav .item.on {
        border: 1px solid var(--green);
    }
    .cmPageNav .item .itemLink,
    .csPageNav .item .itemLink {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cmPageNav .item .itemLink .text,
    .csPageNav.calcMain .item .itemLink .text {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.54px;
        color:var(--grey);
        transition: all 0.3s ease;
    }
    .csPageNav .item .itemLink .text,
    .cmPageNav.calcSub .item .itemLink .text {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        color:var(--grey);
        transition: all 0.3s ease;
    }
    .cmPageNav .item.on .itemLink .text,
    .csPageNav.calcMain .item.on .itemLink .text {
        font-size: 22px;
        letter-spacing: -0.66px;
        color:var(--green);
    }
    .csPageNav.calcMain .item.on .itemLink .text {
        font-size: 18px;
    }
    .csPageNav .item.on .itemLink .text,
    .cmPageNav.calcSub .item.on .itemLink .text {
        color:var(--green);
        font-size: 16px;
    }
    .cmcs-section {
        width: 100%;
        border-radius: 15px;
        flex-direction: column;
    }
    .cmcs-section:not(.list) {
        background-color: var(--white);
    }
    .cmcs-section.list .section_body {
        width: 100%;
        border-radius: 15px;
        background-color: var(--white);
        margin-top: 0;
    }
    .cmcs-list {
        width: 100%;
    }
    .cmcs-list .item {
        width: 100%;
    }
    .cmcs-list .item:not(:first-child) {
        border-top: 1px solid var(--grey-ea);
    }
    .cmcs-list.cm .item {
        height: 159px;
    }
    .cmcs-list.cs .item {
        height: 100px;
    }
    .cmcs-list .item .itemLink {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 38px 50px;
    }
    .cmcs-list.cs .item .itemLink {
        padding: 30px 50px;
        display: grid;
        grid-template-areas: 'cs_title cs_title cs_arrow'
                            'cs_date cs_date cs_arrow';
        grid-template-columns: auto auto 10px;
        gap: 12px 0
    }
    .cmcs-list .item.now .itemLink {
        z-index: 1;
    }
    .cmcs-list.cm .text-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .cmcs-list .text-wrap .title{
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .cmcs-list.cs .title {
        width: 100%;
        display: flex;
        align-items: center;
        grid-area: cs_title;
    }
    .fixed-item .title {
        position: relative;
    }
    .fixed-item .title::after {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--red);
        position: absolute;
        top: 3px;
        left: -18px;
    }
    .cmcs-list .text-wrap .title .text,
    .cmcs-list.cs .title .text {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
        max-width: 95%;
    }
    .cmcs-list .text-wrap .title .text {
        max-width: unset;
    }
    .cmcs-list .text-wrap .title .text:has(+.new) {
        max-width: 95%;
    }
    .cmcs-list.cs .title .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }
    .cmcs-list .new {
        margin-right: 0;
        margin-left: 5px;
    }
    .cmcs-list.cm .text-wrap .content {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -0.39px;
        color: var(--grey);
        margin: 0 0 18px 0;
    }
    .cmcs-list .text-wrap .date {
        font-size: 13px;
        font-weight: 400;
        color: var(--grey);
        font-family: 'pt';
        font-feature-settings: "tnum";
        font-variant-numeric: tabular-nums;
    }
    .cmcs-list.cs .date {
        font-size: 14px;
        font-weight: 400;
        color: var(--grey);
        grid-area: cs_date;
    }
    .cmcs-list.cs .r_arrow {
        grid-area: cs_arrow;
        background-image: url(/res/svg/cs_r_arrow.svg);
        width: 8px;
        height: 15px;
        margin-left: auto;
    }
    .cmcs-list .img-box {
        max-width: 50%;
        width: fit-content;
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 74px;
    }
    .cmcs-list .img-box .img-wrap {
        width: 82px;
        height: 82px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .cmcs-list .img-box .img-wrap img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .cmcs-list.faq {
        min-height: 759px;
        flex-direction: column;
    }
    .cmcs-list.faq .item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
        border-bottom: 1px solid var(--grey-ea);
        transition: all 0.3s ease;
    }
    .cmcs-list.faq .item:not(:first-child) {
        border-top: none;
    }

    .cmcs-list.faq .item.item.lastItem {
        border-bottom: none;
    }
    .cmcs-list.faq .item .top {
        height: 75px;
        width: 100%;
        padding: 0 50px;
        border-bottom: 1px solid transparent;
    }
    .cmcs-list.faq .item .top .title {
        flex: 1;
    }
    .cmcs-list.faq .item .top .title .text {
        max-width: 95%;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.48px;
    }
    .cmcs-list.faq .item .bottom {
        background-color: var(--grey-fc);
        height: 0;
        opacity: 0;
        width: 100%;
        padding: 0 50px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .cmcs-list.faq .item .bottom .content {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.59;
        letter-spacing: -0.39px;
        color:var(--grey);
    }
    .cmcs-list.faq .item.on .top {
        border-bottom-color: var(--grey-ea);
    }
    .cmcs-list.faq .item.on .bottom {
        height: auto;
        opacity: 1;
        padding : 50px;
    }
    .cmcs-list.faq .item.lastItem .bottom {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .cmcs-list.faq .d_arrow {
        width: 9px;
        height: 5px;
        background-image: url(/res/svg/pc_faq_arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transform: rotate(0deg);
        transition: all 0.3s ease;
    }
    .cmcs-list.faq .item.on .d_arrow {
        transform: rotate(180deg);
    }
    .cmcs-section.list .section_footer {
        width: 100%;
    }
    .cs_none_item {
        width: 100%;
        height: 100%;
        min-height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cs_none_item .none_text {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.29;
        letter-spacing: -0.42px;
        color: var(--grey-d3);
    }
    .mobile_banner {
        border-radius: 15px;
        overflow: hidden;
        width: 100%;
        margin-bottom: 20px;
        background-color: var(--white);
    }
    .mobile_banner a {
        width: 100%;
        height: 110px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        background-color: #2e38a1;
    }
    .mobile_banner .ad_ment,
    .mobile_banner .ad_ment span {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.3;
        color: var(--white);
    }
    .mobile_banner img {
        width: 16%;
        height: 75%;
        margin: 0 25px 0 auto;
        position: relative;
        top: 6px;
    }
/*************** 커뮤니티 / 고객센터 리스트 페이지 끝 ***************/



/*************** 커뮤니티 / 고객센터 뷰 페이지 시작 ***************/
    .cmcs-section.view .section_header {
        padding: 50px;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid var(--grey-ea);
    }
    .cmcs-section.view .section_header .sectionTitle{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.25;
    }
    .cmcs-section.view .section_header .date,
    .cmcs-section.view .linkcontainer {
        margin-top: 20px;
    }
    .cmcs-section.view .section_header .date,
    .cmcs-section.view .linkcontainer .linkTitle,
    .cmcs-section.view .linkcontainer .linkContent a {
        font-size: 14px;
        font-weight: 400;
        color: var(--grey);
    }
    .cmcs-section.view .linkcontainer .linkContent{
        margin-left: 5px;
    }
    .cmcs-section.view .section_body {
        margin-top: 0;
    }
    .cmcs-section.view .section_body:not(.cmcs-list) .content {
        width: 100%;
        padding: 50px;
        line-height: 1.57;
    }
    .cmcs-section.view .section_body .content span:has(>img) {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .cmcs-section.view .section_body .content img {
        max-width: 100%;
        height: auto;
    }
    .cmcs-section.view .section_body .content p,
    .cmcs-section.view .section_body .content a {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.69;
        letter-spacing: -0.48px;
        color: var(--grey);
    }
    ._cm ._view .cmcs-section.list .section_body,
    ._cs ._view .cmcs-section.list .section_body {
        margin-top: 30px;
    }
    .cmcs-section.view .content .fss_newsletter a {
        font-size: unset !important;
        line-height: unset !important;
    }
    .youtube-wrap {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }
    .youtube-wrap iframe,
    .youtube-wrap object,
    .youtube-wrap embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius: 15px;
    }
    .cmcs-section.view .section_footer {
        width: 100%;
        padding: 50px;
        border-top: 1px solid var(--grey-ea);
    }
    .cmcs-section.view .section_footer .fieldset.file {
        margin-top: 30px;
        width: 100%;
        gap: 10px;
    }
    .cmcs-section.view .section_footer .fieldset.file .field {
        width: 100%;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        display: flex;
        align-items: center;
        overflow: hidden;
        background-color: var(--grey-f9);
        padding: 15px 0 15px 20px;
    }
    .cmcs-section.view .section_footer .fieldset.file .field .down-link {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .cmcs-section.view .section_footer .fieldset.file .field .file-field {
        width: 100%;
        flex: 1;
        max-width: calc(100% - 60px);
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }
    .cmcs-section.view .section_footer .fieldset.file .field .file-name {
        width: 100%;
        flex: 1;
    }
    .cmcs-section.view .section_footer .fieldset.file .field .file-name .text {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.48px;
        color: var(--grey);
        display: block;
        width: 100%;
        white-space: nowrap;
        transition: all 0.3s ease;
    }
    .cmcs-section.view .section_footer .fieldset.file .field .file-size {
        font-size: 11px;
        font-weight: 400;
        letter-spacing: -.48px;
        color: var(--grey);
    }
    .file-down {
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .file-down .icon {
        display: block;
        width: 30px;
        height: 30px;
        background-image: url(/res/svg/download_icon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 35px 50px;
        transform: scale(0.7);
        transition: all 0.3s ease;
    }
/*************** 커뮤니티 / 고객센터 뷰 페이지 끝 ***************/



/*************** 커뮤니티 / 고객센터 등록 페이지 시작 ***************/
    .form-cmcs {
        width: 100%;
    }
    .cmcs-section.write {
        padding: 50px;
    }
    .cmcs-section.write .fieldset {
        width: 100%;
        gap: 10px;
    }
    .cmcs-section.write .fieldset .cmcs-writeInput {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        padding: 0 20px;
    }
    .cmcs-section.write .fieldset :where(.cmcs-writeInput, textarea),
    .cmcs-section.write .fieldset .cmcs-writeInput::placeholder,
    .cmcs-section.write .fieldset textarea::placeholder {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
    }
    .cmcs-section.write .fieldset :where(.cmcs-writeInput, textarea){
        color:var(--black);
    }
    .cmcs-section.write .fieldset .cmcs-writeInput::placeholder,
    .cmcs-section.write .fieldset textarea::placeholder {
        color:var(--grey-df);
    }
    .cmcs-section.write .fieldset .field.content {
        width: 100%;
        height: 370px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
        padding: 20px;
    }
    .cmcs-section.write .fieldset .field.content textarea {
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        line-height: 1.13;
        resize: none;
    }
    .cmcs-section.write .file-content {
        width: 100%;
    }
    .cmcs-section.write .file-content input[type=file] {
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        top: -9999px;
    }
    .cmcs-section.write .file-content .upload {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        border: 1px solid var(--grey-ea);
    }
    .cmcs-section.write .file-content .fileup {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color: var(--grey-df);
        width: 100%;
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }
    .cmcs-section.write .file-content .add_box {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto 45px;
        gap: 10px;
    }
    .cmcs-section.write .file-content .add_box input {
        width: 100%;
        height: 100%;
        padding: 0 0 0 20px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color:var(--black);
        outline: none;
        border: none;
        background-color: var(--white);
    }
    .cmcs-section.write .file-content .add_box button {
        width: 100%;
        height: 100%;
        justify-content: center;
        background-color: transparent;
        cursor: pointer;
        border: none;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.48px;
        color: var(--black);
    }
    .form-cmcs .btn_box {
        width: 100%;
        justify-content: center;
        margin-top: 30px;
    }
    .form-cmcs .btn_box button {
        width: 330px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        border: none;
        padding-top: 3px;
        transition: all 0.3s ease;
    }
    .form-cmcs .btn_box button .text {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.48px;
        color:var(--white);
        transition: all 0.3s ease;
    }
    .cmcs-section.write .section_footer {
        width: 100%;
        padding: 50px 0 0 0;
    }
    .cmcs-section.write .section_footer .fieldset {
        margin-top: 20px;
    }
/*************** 커뮤니티 / 고객센터 등록 페이지 끝 ***************/




/*************** 고객센터 신고하기 페이지 시작 ***************/
    .fraud-search {
        margin-bottom: 20px;
        align-items: flex-start;
        transition: all 0.3s ease;
        height: auto;
    }
    .ow-box.phone_auth.fraud .fieldset li {
        gap: 15px;
    }
    .fraud-ment {
        margin-top: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.57;
        letter-spacing: -0.42px;
        color:var(--grey);
    }
    .fraud-search .fieldset {
        flex-direction: column;
        align-items: flex-start;
        height: 50px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .fraud_result_container {
        height: auto;
        width: 100%;
        margin: 0 !important;
        padding-top: 0 !important;
        opacity: 0;
        transition: all 0.3s ease;
    }
    .fraud-search .fieldset.on .fraud_result_container {
        padding-top: 50px !important;
        opacity: 1;
    }
    .fraud_result_container .resultTitle {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.66px;
    }
    .fraud_result_container .resultTitle .count {
        color:var(--red);
    }
    .fraud-list {
        width: 100%;
        height: 100%;
        margin-top: 30px;
        transition: all 0.3s ease;
    }
    .fraud-list .item {
        width: 100%;
    }
    .fraud-list .item div {
        flex: 1;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid var(--grey-ea);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fraud-list .item.title div {
        background-color: var(--grey-fa);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.45px;
    }
    .fraud-list .item.fraud div {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.45px;
        color:var(--grey);
    }
    .cs-write_section.fraud .fieldset .field.report_type .val {
        width: 100%;
        grid-template-columns: repeat(5,1fr);
        gap: 10px;
    }
    .cs-write_section.fraud .content_wrap {
        margin-top: 0;
    }
    .cs-write_section.fraud .content_box,
    .cs-write_section.fraud .content_box::placeholder {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.29;
        letter-spacing: -0.42px;
    }
    .cs-write_section.fraud .field.call_number .val {
        flex-direction: column;
        gap: 20px;
        border: none;
    }
    .cs-write_section.fraud .field.call_number .call_number_add_box{
        border: 1px solid var(--grey-ea);
        border-radius: 5px;
        overflow: hidden;
    }
    .cs-write_section.fraud .field.call_number input.disabled{
        background-color: var(--grey-fa);
        cursor: default;
    }
/*************** 고객센터 신고하기 페이지 끝 ***************/




/*************** 고객센터 광고안내 페이지 시작 ***************/
    .coalition {
        width: 100%;
        flex-direction: column;
        padding: 30px 0 0 0;
        margin: 0 37px;
        position: relative;
    }
    .coalition .background {
        width: 100%;
        height: 2391px;
        background-image: url(/res/image/sample/pc_back.png?ver=1);
        object-fit: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .coalition .ad_wrap {
        width: calc(100% - 34px);
        position: absolute;
        left: 17px;
        gap: 20px;
    }
    .coalition .ad_wrap.main {
        top: 493px;
    }
    .coalition .ad_wrap.live {
        bottom: 227px;
    }
    .coalition .ad_wrap > .item {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--green);
        padding: 0 40px;
    }
    .coalition .ad_wrap > .item.adSelect {
        background-color: var(--white);
    }
    .coalition .ad_wrap .item.list {
        flex-direction: column;
        background-color: var(--grey-f9);
    }
    .coalition .ad_wrap .item .sectionTitle {
        font-size: 18px;
        padding: 22px 0 0 14px;
    }
    .coalition .ad_wrap .item .section_body {
        padding: 0 14px 19px 14px;
        gap: 15px;
        margin-top: 15px;
    }
    .coalition .ad_wrap .loan_list li {
        height: auto;
    }
    .coalition .ad_wrap .loan_list .item {
        padding: 24px 28px 17px 28px;
    }
    .coalition .ad_wrap .loan_list .item .name {
        font-size: 10px;
        margin-bottom: 12px;
    }
    .coalition .ad_wrap .loan_list .content.main .text {
        font-size: 15px;
    }
    .coalition .ad_wrap .loan_list.recommend .content.main .text:last-child {
        margin-top: 5px;
    }
    .coalition .ad_wrap .loan_list.recommend .content.sub {
        margin-top: 18px;
    }
    .coalition .ad_wrap .loan_list .content.sub .text {
        font-size: 11px;
        letter-spacing: normal;
    }
    .coalition .ad_wrap .loan_list.recommend .content.sub .text:last-child {
        margin-top: 9px;
        height: 11px;
    }
    .coalition .ad_wrap .loan_list .tel_btn {
        margin: 0 28px;
        width: calc(100% - 56px);
        height: 50px;
    }
    .coalition .ad_wrap .loan_list .tel_btn .tel_icon {
        width: 9px;
        height: 10px;
        margin-right: 7px;
    }
    .coalition .ad_wrap .loan_list .tel_btn .text {
        font-size: 11px;
    }
    .coalition .ad_wrap .adSelect .ad_item {
        width: 100%;
        height: auto;
        border: none;
        border-radius: unset;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: unset;
        padding: 50px 0px;
        gap: 141px
    }
    .coalition .ad_wrap .adSelect .ad_item .title_box {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .coalition .ad_wrap .adSelect .ad_item .description{
        margin-top: 0;
    }
    .coalition .ad_wrap .adSelect .ad_item .title_box .m_text {
        font-size: 15px;
        letter-spacing: -0.36px;
    }
    .coalition .ad_wrap .adSelect .ad_item .title_box .p_text {
        font-size: 20px;
        letter-spacing: -0.8px;
        margin-top: 13px;
    }
    .coalition .ad_wrap .adSelect .ad_item .title_box .p_text .pp {
        font-size: 15px;
        letter-spacing: -0.66px;
        margin-left: 6px;
    }
    .coalition .ad_wrap.live .item .sectionTitle {
        padding: 19px 0 0 14px;
    }
    .coalition .ad_wrap .live_list .item {
        height: 82px;
        grid-template-columns: 99px auto;
        gap: 5px;
    }
    .coalition .ad_wrap .live_list.main .item :where(.top, .bottom) {
        padding-right: 40px;
    }
    .coalition .ad_wrap .live_list .item .status {
        width: 100%;
    }
    .coalition .ad_wrap .live_list .item .top .title {
        font-size: 13px;
        letter-spacing: -0.25px;
    }
    .coalition .ad_wrap .live_list .item .top .local {
        font-size: 14px;
    }
    .coalition .ad_wrap .live_list .item .bottom .info div {
        font-size: 11px;
        letter-spacing: -0.26px;
    }
    .coalition .ad_wrap .live_list .item .bottom .info .split {
        height: 7px;
        margin: 0 7px;
    }
    .coalition .ad_wrap .live_list .item .bottom .price {
        font-size: 13px;
    }

/*************** 고객센터 광고안내 페이지 끝 ***************/

/*************** 404 not found 시작 ***************/
._not_found header,
._not_found nav {
    display: none;
}
._not_found .main-wrapper {
    display: flex;
}
._not_found .main-wrapper main {
    width: 100%;
    height: 100%;
}
._not_found .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
._not_found .container .row {
    display: flex;
    align-items: center;
    flex-direction: column;
}
._not_found .container .main {
    font-family: 'Gosanja';
    font-family: 'Cafe24Ssurround';
    outline: none;
    font-size: 180px;
    font-weight: 800;
    color: var(--black);
}
._not_found .container .sub {
    font-size: 32px;
    font-weight: 700;
    line-height: 46px;
    letter-spacing: -.8px;
    color:var(--black);
    margin-top: 10px;
}
._not_found .container .description{
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
._not_found .container .description .text {
    margin-top: 12px;
    line-height: 1.71;
    letter-spacing: -.2px;
    color: var(--black-66);
    text-align: center;
}
._not_found .home_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    padding: 15px 0 15px;
    margin-top: 36px;
    border-radius: 30px;
    background: var(--green);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -.5px;
    color: var(--white);
}

/*************** 404 not found 끝 ***************/



/*************** view 대출계산기 시작 ***************/
.calc_sec {
    width: 100%;
    padding: 60px 0px !important;
}
.calc_sec .section_header {
    padding: 0 50px;
}
.calc_sec .sectionTitle :where(div, span) {
    font-size: 22px;
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.66px;
}
.hl {
    position: relative;
    padding: 0 5px;
    margin-left: 5px;
}
.calc_sec .section_body {
    margin-top: 30px;
    padding: 0 50px;
    position: relative;
}
.calc_sec .fieldset .item:not(:first-child, .total, .fee) {
    margin-top: 25px;
}
.calc-section.calc_sec .fieldset .item:not(:first-child, .total, .fee) {
    margin-top: 15px;
}
.calc_sec .fieldset .item.total {
    margin-top: 40px;
}
.calc_sec .fieldset .item.fee {
    margin-top: 10px;
}
.calc_sec .fieldset .item.nbt {
    align-items: baseline;
}
.key-text,
.total-text {
    font-size: 18px;
    font-weight: 600;
}
.calc_sec .item .container {
    height: 45px;
    margin: 0 10px;
    position: relative;
}
._logOffer .calc_sec .item:not(.nbt) .container {
    margin: 0 10px 0 0;
}
.calc_sec .item .view-box {
    border: 1px solid var(--green);
    height: 45px;
    border-radius: 25px;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
}
.calc_sec .item.nbt .view-box {
    border: none;
    border-radius: none;
    padding: 0;
    cursor: default;
    position: relative;
    top: 2px;
}
.view-text,
.view-sub-text{
    font-size: 24px;
    color: var(--green);
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    padding-top: 2px;
}
.view-sub-text.down {
    filter: hue-rotate(220deg);
}
.calc_sec .item .view-text,
.calc-section.calc_sec .item .view-text{
    font-family: 'pt', 'SDGothicNeo';
}
.calc_sec .item.nbt .view-box .view-text {
    font-size: 30px;
}
.calc_sec .item .view-box ion-icon {
    color: var(--green);
    margin-left: 10px;
}
.select-area {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 360px;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 55px;
    border-radius: 15px;
    background-color: var(--white);   
    opacity: 0;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container.on .select-area {
    height: auto;
    max-height: 1000px;
    opacity: 1;
}
.calc_sec .item.type .container.on .select-area {
    height: 348px;
}
.calc_sec .item:where(.period, .rate) .container.on .select-area {
    height: 370px;
}
.calc_sec .item.loan .container.on .select-area {
    height: 530px;
}
.select-title {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 20px;
    padding: 30px 30px 30px 30px;
}
.calc_sec .item:where(.period, .rate) .select-wrap {
    display: flex;
    align-items: flex-start;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.calc_sec .item.period .select-wrap {
    height: 200px;
}
.calc_sec .item:where(.period, .rate) .select-wrap::before {
    content: '';
    position: absolute;
    left: 0%;
    top: -22px;
    display: var(--m_terms_mobile_display);
    width: 100%;
    height: 50px;
    z-index: 2;
    background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 28%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 28%);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 28%);
    transform: rotate(180deg);
}
.calc_sec .item:where(.period, .rate) .select-wrap::after {
    content: '';
    position: absolute;
    left: 0%;
    bottom: -10px;
    display: var(--m_terms_mobile_display);
    width: 100%;
    height: 40px;
    z-index: 1;
    background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%);
}
.calc_sec .item:where(.type, .period, .rate, .loan) .select-box {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    border-radius: 8px;
    width: 100%;
}
.calc_sec .item:where(.type) .select-box {
    flex-direction: column;
    width: calc(100% - 60px);
    height: 220px;
    margin: 10px 30px 30px 30px;
    gap: 20px;
}
.calc_sec .item:where(.type) .select-box .select-item {
    height: 60px;
    width: 100%;
    border-radius: 8px;
    background-color: var(--grey-fa);
    transition: all 0.3s ease;
}
.calc_sec .item:where(.type) .select-box .select-item.on .select-text {
    color: var(--green);
}
.calc_sec .item:where(.type) .select-box .select-item.on {
    border: 1px solid var(--green);
    background-color: var(--white);
}
.calc_sec .item:where(.period, .rate) .select-box {
    width: 100%;
    flex: 1;
    border: none;
    background-color: transparent;
}
.calc_sec .item:where(.period, .rate) .select-box .select-text {
    color: var(--grey);
}
.calc_sec .item:where(.period, .rate) .select-box .swiper-slide-active .select-text {
    color: var(--black);
    font-weight: 700;
}
.calc_sec .item.period .select-box .swiper-wrapper {
    height: 100% !important;
}
.calc_sec .item:where(.loan) .select-wrap .select-box {
    border: none;
    border-bottom: 1px solid var(--grey-ea);
    border-radius: unset;
    background-color: var(--white);
}
.calc_sec .item:where(.type, .loan) .select-item {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}
.calc_sec .item:where(.period, .rate) .select-item {
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.select-box.detail .select-item {
    width: 100%;
}
.calc_sec .item:where(.loan) .select-box .select-item {
    width: 75px;
    height: 40px;
}
.calc_sec .item .active-box {
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% / 2);
    border: 1px solid var(--green);
    height: 40px;
    border-radius: 8px;
    background-color: var(--white);
    transition: all 0.3s ease;
}
.calc_sec .item:where(.period, .rate) .active-box {
    width: calc(100% - 60px);
    left: 30px;
    height: 40px;
    top: 150px;
    background-color: var(--red);
    border-color: var(--red);
    opacity: 0.1;
}
.select-btn {
    width: calc(100% - 60px);
    height: 60px;
    border-radius: 8px;
    background-color: var(--green);
    border: none;
    outline: none;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin: 30px;
}
.select-btn.none {
    background-color: var(--grey-ed);
    color: var(--grey-fa);
    pointer-events: none;
}
.calc_sec .item:where(.period, .rate) .select-btn {
    margin-top: 0;
}
.calc_sec .item:where(.period, .rate, .loan) .select-title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.calc_sec .item:where(.type, .period, .rate, .loan) .select-title {
    padding-bottom: 0;
}
.calc_sec .item:where(.period, .rate) .select-title {
    padding-bottom: 0;
}
.select-input-box input,
.calc_sec .result-box {
    outline: none;
    height: 100%;
    text-align: left;
    border: none;
    font-size: 26px;
    font-weight: 700;
}
.select-input-box input::placeholder {
    font-size: 26px;
    font-weight: 700;
    color: var(--grey-ed);
}
.calc_sec .result-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc_sec .result-box .result-price {
    font-family: 'pt', 'SDGothicNeo';
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}
.calc_sec .result-box .result-price.ou_price {
    color: var(--red);
}
.calc_sec .result-box .result-price.none {
    color: var(--grey-d3);
}
.calc_sec .result-box .result-reset {
    margin-left: 10px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}
.calc_sec .result-box .result-reset ion-icon {
    font-size: 20px;
    color: var(--grey-d3);
}
.pad-box {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.pad-box .pad-item {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
}
.calc_sec .item.loan .select-wrap :where(.select-item .select-text, .pad-box .pad-item) {
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 700;
    letter-spacing: -0.5px;
}
.calc_sec .item.loan .select-title {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
}
.loan-price-info {
    margin-top: 15px;
    display: flex;
    align-items: center;
    font-size: 15px;
}
.loan-price-info .limit-pice,
.loan-price-info .limit-pice .lp,
.loan-price-info .limit-pice .underText {
    color: var(--grey);
}
.loan-price-info .limit-pice .lp {
    text-decoration: underline;
    cursor: pointer;
}
.loan-price-info .limit-pice .overText,
.loan-price-info .limit-pice.over .underText {
    display: none;
}
.loan-price-info .limit-pice.over .overText {
    display: inline-flex;
}
.loan-price-info .limit-pice.over,
.loan-price-info .limit-pice.over span {
    color: var(--red);
}
.calc_sec .item:where(.loan) .select-btn {
    margin-top: 10px;
}
.calc_sec .section_footer {
    padding-top: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}
.calc_sec .section_footer .total-box {
    align-items: baseline;
}
.total-loan {
    font-size: 30px;
    color: var(--green);
    font-weight: 700;
    margin-right:5px;
}
.calc_sec .section_footer .total-info {
    gap: 10px;
    margin-top: 10px;
}
.year-rate {
    padding: 3px 8px;
    background-color: var(--grey-df);
    border-radius: 25px;
}
.year-rate .y_rate {
    font-weight: 700;
}
.calc_sec .section_footer .total-info :where(.rate-price, .rate-price span) {
    color: var(--grey);
}
.total-detail-btn {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    position: absolute;
    bottom: 0px;
    right: 50px;
    padding: 18px 35px;
    border-radius: 25px;
    background-color: var(--grey-f5);
}
.total-detail-btn .text {
    margin-right: 10px;
    font-weight: 600;
    z-index: 1;
    transition: all 0.3s ease;
}
.total-detail-btn.on {
    background-color: var(--grey-ea);
}
.total-detail-btn ion-icon {
    transition: all 0.3s ease;
    z-index: 1;
}
.total-detail-btn.on ion-icon {
    transform: rotate(180deg);
}
.total-detail  {
    width: 100%;
    height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-left: 50px;
    padding-right: 50px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.total-detail.on {
    padding-top: 50px;
    height: auto;
    opacity: 1;
    overflow: unset;
}
.total-detail .loan-pop {
    border-radius: 15px;
    background-color: var(--white);
}
.calc_sec .loan-pop .content_container {
    height: auto;
    border-radius: 0;
    border: none;
    padding: 0;
}
.calc_sec .loan-pop .contentTitle {
    margin-top: 0;
    width: 100%;
}
.calc_sec .loan-pop .content_container .content_box {
    overflow-y: unset;
    padding: 0;
}
/*************** view 대출계산기 끝 ***************/




/*************** NEW 대출 계산기 페이지 시작 ***************/
.calc_wrap {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: var(--white);
}
.wrap_slide {
    width: 100%;
}
.cmPageNav.calcSub {
    height: 60px;
}
.calc-section {
    padding: 60px 0;
    padding-left: 50px;
    padding-right: 50px;
}
.calc-section:not(.topSec){
    border-top: 1px solid var(--grey-ea);
}
.fieldTitle {
    margin: 30px 0 35px 0;
}
.calc-section.loan_calc .field.hold {
    height: 133px;
    overflow: unset;
    opacity: 1;
    transition: all 0.3s ease;
}
.calc-section.loan_calc .field.hold.not_use {
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.calc-section.loan_calc .field.hold.on {
    height: 149px;
}
.calc-section .fieldset .field .val {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 100%;
}
.calc-section .fieldset .field.type .val {
    gap: 20px;
    grid-template-columns: repeat(3,1fr);
    max-width: 520px;
}
.calc-section .fieldset .field.col-2 .val {
    gap: 20px;
    grid-template-columns: repeat(2,1fr);
}
.calc-section .fieldset .field.col-6 .val {
    gap: 20px;
    grid-template-columns: repeat(6,1fr);
}
.fieldset.holdingTable {
    gap: 50px;
}
.calc_wrap[data-type="diff"] .fieldset.holdingTable {
    margin-top: 0;
}
.calc_wrap[data-type="dsr"] .fieldset.holdingTable .field.loanMethod.off {
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.calc_wrap[data-type="dsr"] .fieldset.holdingTable .field.loanMethod {
    height: 78px;
    overflow: unset;
    opacity: 1;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="dsr"] .fieldset.holdingTable .field.loanMethod.off + .period {
    margin-top: -30px;
}
.fieldset.holding_loan_list {
    margin-top: 15px;
    padding-top: 50px;
    border-top: 1px solid var(--black-66);
}
.fieldset.holding_loan_list .field:not(.btn-box) {
    padding: 0 30px;
}
.fieldset .input-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 340px;
    height: 50px;
    border-bottom: 1px solid var(--grey-ea);
    overflow: hidden;
}
.calc_wrap:where([data-type="youth"], [data-type="weekly"]) .fieldset .input-box {
    overflow: unset;
}
.calc_wrap:where([data-type="youth"], [data-type="weekly"]) .fieldset .input-box:has(.Custom-select) {
    border-bottom: none;
}
.fieldset .input-box:has(>.input-readonly) {
    background-color: var(--grey-fa);
    padding-right: 20px;
    border-bottom: none;
    border-radius: 5px;
}
.fieldset .input-box input {
    width: 100%;
    font-size: 30px;
    font-weight: 700;
    font-family: 'pt', 'SDGothicNeo';
    color: var(--green);
    letter-spacing: -0.5px;
    padding-top: 2px;
}
.fieldset .input-box .input-readonly {
    background-color: transparent;
    cursor: default;
}
.calc-section .fieldset .input-box .text {
    font-size: 16px;
    color: var(--green);
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    padding-top: 2px;
}
._h_side .fieldset .input-box input,
._h_side .calc-section .fieldset .input-box .text {
    color: var(--blue);
}
.calc-section .fieldset .field.col-2 .check-box :where(label, .check_wrap, .check_wrap .text) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.fieldset .del-btn {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.fieldset .del-btn .icon {
    width: 100%;
    height: 100%;
    background-image: url(/res/svg/x_icon_g.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px;
    display: none;
    opacity: 0;
}
.fieldset .del-btn.on {
    pointer-events: auto;
}
.fieldset .del-btn.on .icon {
    display: flex;
    opacity: 1;
}
.ci-box {
    display: flex;
    gap: 10px;
    height: auto;
    overflow: unset;
    opacity: 1;
    padding-bottom: 10px;
    margin-top: 20px;
    padding: 0 5px;
    transition: all 0.3s ease;
}
.ci-box .c-btn {
    height: 35px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: var(--grey-fa);
    transition: all 0.3s ease;
}
.ci-box .c-btn .text {
    position: relative;
    z-index: 3;
}
.calc-section .ci-box .c-btn:active,
.calc-section .field .input-box .c-btn:active {
    background-color: var(--green-light);
}
.calc-section .ci-box .c-btn:active .text,
.calc-section .field .input-box .c-btn:active .text {
    color: var(--green);
}
.calc-section .section_footer .btn_box {
    margin-top: 60px;
    justify-content: flex-start;
    transition: all 0.3s ease;
}
.fieldset.holding_loan_list .field.btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 30px;
    margin-top: 20px;
    border-top: 1px solid var(--grey-f5);
}
.fieldset.holding_loan_list .total-detail-btn {
    position: unset;
    padding: 13px 35px;
}
.fieldset.holding_loan_list .total-detail-btn .text {
    margin-right: 0;
    color: var(--black);
}
.calc-section .section_footer .btn_box .write_button {
    width: 340px;
}
.calc-section.loan_calc .section_footer .btn_box.not_use {
    margin-top: 0;
}
.calc-section .int {
    color: var(--red);
}
.calc-section.calc_sec .fieldset {
    gap: 0;
    margin-top: 0;
}
.calc-section.calc_sec .loan-pop .content_container .titleBox {
    margin-bottom: 15px;
}
.calc-section.calc_sec .loan-pop .content_container .titleBox th.default {
    margin-right: auto;
}
.calc-section table {
    width: 100%;
}
.calc-section thead {
    display: table;
    width: 100%;
}
.calc-section .loan-pop .contentTitle :where(th, table, tbody, tr) {
    height: 40px;
    white-space: nowrap;
}
.loan-pop .contentTitle th {
    width: 100%;
}
.calc-section .loan-pop .content_container {
    height: 100%;
    padding: 0 0 20px 0;
    border: none;
}
.calc-section.calc_sec .loan-pop .content_container {
    padding: 0;
}
.calc-section .loan-pop .contentTitle {
    width: 100%;
}
.calc-section .loan-pop .content_container .content_box{
    padding: 0;
    width: 100%;
    align-items: flex-start;
    overflow-y: auto;
}
.calc_sec .loan-re_list {
    border-bottom: 1px solid var(--grey-ea);
}
.calc-section .loan-re_list .item :where(th, td) {
    flex: 1;
    width: 100%;
    height: 100%;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.39px;
}
.calc-section .loan-re_list .item :where(th span, td span) {
    font-family: 'pt', 'SDGothicNeo';
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.39px;
}
.calc-section .section_body.graph {
    margin-top: 0;
    display: grid;
    grid-template-columns: 90px auto;
}
.ndti_graph {
    margin-top: 50px;
    position: relative;
}
.ndti_graph .graph {
    position: absolute;
    width: 30px;
    border-radius: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.ndti_graph .graph.item_1 {
    background-color: #fff7ca;
    height: 100%;
}
.ndti_graph .graph.item_2 {
    background-color: #ffdd23;
    height: calc(calc(100% / 2) + 20px);
    z-index: 2;
}
.ndti_graph .graph.item_3 {
    background-color: #ffb762;
    height: calc(100% / 3);
    z-index: 3;
}
.calc_caution-list {
    gap: 25px;
    margin-top: 50px !important;
}
.calc_caution-list > .item {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 12px;
}
.calc_caution-list > .item > .key {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.48px;
}
.calc_caution-list > .item > .val,
.calc_caution-list > .item > .val :where(>.key, >.val),
.calc_coution-sub-list dd,
.noti-list .item {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.39px;
    line-height: 1.54;
    color: var(--grey);
    text-align: justify;
}
.calc_caution-list .red_per {
    margin-left: 10px;
    color: #ffb762;
    font-weight: 700;
}
.calc_caution-list > .item > .val > .key {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.48px;
}
.calc_caution-list > .item > .val,
.noti-list .item {
    font-weight: 400;
}
.calc_caution-list > .item :is(>.key) {
    color: var(--black);
}
.calc_caution-list dl {
    display: grid;
    gap: 10px;
}
.calc_caution-list dd {
    display: grid;
    gap: 6px;
}
.calc_wrap[data-type="ltv"] .calc_coution-sub-list {
    gap: 0;
    padding: 0 0 0 40px;
    list-style-type: disc;
}
.calc_wrap[data-type="ltv"] .calc_coution-sub-list dd {
    color: var(--black);
    display: list-item;

}
.calc_caution-list .sub-list {
    display: grid;
    gap: 7px;
}
.calc_caution-list .sub-list .item {
    gap: 10px;
    align-items: flex-start;
}
.calc_caution-list .sub-list .item .key {
    width: 100px;
}
.calc_caution-list .sub-list .item .val {
    width: 100%;
    flex: 1;
}
.calc-section.deposit_calc .field.interest .val,
.fieldset .field .val.line-2 {
    max-width: 100%;
    gap: 20px;
}
.calc-section.deposit_calc .field.interest .ci-box {
    margin-top: 0;
}
.calc-section.deposit_calc .check-box {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    max-width: 490px;
}
.calc-section.deposit_calc .check-box label {
    width: 150px;
    overflow: hidden;
    opacity: 1;
    transition: all 0.3s ease;
}
.calc-section.deposit_calc .check-box label .text {
    white-space: nowrap;
}
.calc-section.deposit_calc .check-box label.not_use {
    width: 0px;
    opacity: 0;
}
.calc-section .field .key {
    display: flex;
    align-items: center;
}
.calc-section .field .key .tip {
    color: var(--black);
    margin-left: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.39px;
}
.calc-section .field:where(.family, .children) .input-box {
    padding: 0;
}
.calc-section .field:where(.family, .children) .input-box input {
    width: 100%;
}
.calc-section .field .input-box .c-btn {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    padding-top: 3px;
}
.calc-section .field .input-box .c-btn .text {
    font-size: 18px;
    font-weight: 700;
    color: var(--grey);
    transition: all 0.3s ease;
}
.deduction_box {
    display: grid;
    grid-template-areas: 'ins ins tax tax'
                        'ins ins tax tax'
                        'ins ins total total';
    gap: 0 70px;
    margin-top: 50px;
}
.calc_wrap[data-type="rent_diff"] .deduction_box {
    grid-template-areas: 'mbox mbox jbox jbox'
                        'mbox mbox jbox jbox'
                        'mbox mbox jbox jbox';
}
.deduction_box .ded-title {
    font-size: 18px;
    position: relative;
    width: fit-content !important;
    font-weight: 800;
}
.deduction_box .wrap_box {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.deduction_box .wrap_box.ins {
    grid-area: ins;
}
.deduction_box .wrap_box.tax {
    grid-area: tax;
}
.deduction_box .wrap_box.j_box {
    grid-area: jbox;
}
.deduction_box .wrap_box.m_box {
    grid-area: mbox;
}
.deduction_box .wrap_box.tax_total_box {
    grid-area: total;
    width: 100%;
    margin-top: 60px;
}
.deduction_box .wrap_box.tax_total_box .tax_rate-list {
    background-color: var(--grey-f9);
    border-radius: 8px;
    padding: 0 20px;
}
.deduction_box .wrap_box.tax_total_box .tax_rate-list .item {
    width: 100%;
}
.deduction_box .wrap_box.tax_total_box .tax_rate-list .item .interest span {
    font-weight: 700;
}
.deduction_box .tax_rate-list .item .type {
    justify-content: flex-start;
}
.deduction_box .tax_rate-list .item :where(.val, .interest) {
    justify-content: flex-end;
}
.deduction_box .bi_list .item .key{
    width: 185px;
} 
.deduction_box .bi_list .item .val,
.bi_list.pay_receipt .item .val {
    flex: 1;
    width: 100%;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .content_container {
    overflow: hidden;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .content_container .content_box {
    display: flex;
}
.select-container {
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop :where(th, td) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .content_container .titleBox {
    gap: unset;
}

.stage_container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.stageBtn {
    height: 34px;
    padding: 0 15px;
    border-radius: 17px;
    background: var(--grey-fa);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: -0.39px;
    transition: all 0.3s ease;
}
.stageBtn.on {
    background-color: var(--green-light);
    color: var(--green);
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .contentTitle :where(table, tr) {
    height: 40px;
}
.calc-sg section:where(.salary_y, .salary_m) .loan-pop .hold_income {
    width: 100%;
    flex: 1;
    transition: all 0.3s ease;
}
.calc-section.salary_y .loan-pop .hold_income {
    width: calc(100% / 4);
    flex: unset;
}
.calc-section.salary_m .loan-pop .hold_income {
    width: calc(100% / 3);
    flex: unset;
}
.calc-section.salary_y .loan-pop .hold_income.on,
.calc-section.salary_m .loan-pop .hold_income.on {
    width: calc(100% / 7);
    flex: unset;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .js-salary_view{
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.calc-section:where(.salary_y, .salary_m) .loan-pop .js-salary_view.on {
    width: 100%;
    flex: 1;
    overflow: unset;
    opacity: 1;
}
.select-container .text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.39px;
}
.select-container .text.mid {
    margin: 0 10px;
}
.select-container .text.end {
    margin: 0 0 0 10px;
}
.calc-section .Custom-select {
    width: 70px;
    height: 26px;
    padding: 0 10px;
}
.calc-section .Custom-select.family {
    width: 55px;
}
.calc-section .Custom-select.dsr {
    width: 100%;
    height: 100%;
    padding: 0 20px;
}
.calc-section .Custom-select .title {
    height: 26px;
}
.calc-section .Custom-select.dsr .title {
    height: 100%;
}
.calc-section .Custom-select:not(.dsr) .scroll {
    top: 25px;
    width: 103%;
}
.calc-section .Custom-select:not(.dsr) .scroll,
.calc-section .Custom-select:not(.dsr) .scroll ul {
    padding: 0;
}
.calc_wrap:where([data-type="youth"], [data-type="weekly"]) .Custom-select {
    padding: 0 20px;
}
.calc_wrap[data-type="weekly"] .Custom-select {
    margin-right: 10px;
}
.calc_wrap:where([data-type="youth"], [data-type="weekly"]) :is(.Custom-select, .Custom-select .title ) {
    width: 100%;
    height: 100%;
    flex: 1;
}
.calc_wrap:is([data-type="youth"], [data-type="weekly"]) .Custom-select .scroll {
    width: calc(100% + 2px);
    top: 49px;
    padding: 10px;
}
.loan-re_list .item .income_m,
.calc-section.salary_m .loan-re_list .item .income {
    color: var(--red);
}
.calc-section:where(.area_trans) .input-box {
    padding: 0 20px;
}
.bi_list.area .item {
    flex-direction: unset;
}
.bi_list.area .full {
    grid-column: span 2;
}
.bi_list.area .item > .key {
    width: 60px;
}
.bi_list.area .item:not(.full) .val {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bi_list.area .item :where(.title, .content),
.bi_list.area .item .content .type {
    display: flex;
    align-items: center;
}
.bi_list.area .item .content .type {
    flex: 1;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}
.bi_list.area .item .title .key,
.bi_list.area .item .content .text{
    flex: 1;
    width: 100%;
}

section.bb-section {
    border-bottom: 1px solid var(--grey-ea);
}
.calc-section:where(.area, .apt-table) {
    border-top: none !important;
}
section.bt-section {
    border-top: 1px solid var(--grey-ea) !important;
}
.calc-section.area_trans .field .val {
    display: flex;
    align-items: center;
    gap: 20px;
}
.calc-section.area_trans .field .val .input-box {
    flex: 1;
}
.calc-section.area_trans .field .val input {
    width: 100%;
}
.same_icon {
    width: 15px;
    height: 100%;
    background-image: url(/res/svg/same_g.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.loan-pop .table-title {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0;
}
.c_arrow_icon {
    width: 16px;
    height: 25px;
    display: inline-block;
    background-image: url(/res/svg/rr_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 5px;
}
.table-title .item {
    flex: 1;
    width: 100%;
    justify-content: center;
}
.table-title .item div {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.39px;
    color: var(--green);
}
.calc_wrap[data-type="ltv"] .calc_caution-list .val.loan-pop .table-title {
    border: 1px solid var(--green-light);
}
.table-list {
    display: block;
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
    gap: 0;
    border-bottom: 1px solid var(--grey-ea);

}
.table-list.col-2 {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.table-list.col-1 {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
}
.table-list.ltv {
    columns: unset;
    -webkit-columns: unset;
    -moz-columns: unset;
    display: flex;
    height: auto;
    align-items: flex-start;
    border-right: 1px solid var(--grey-ea);
    border-left: 1px solid var(--grey-ea);
}
.table-list:where(.rent_deposit, .relay_fee, .stamp_tax, .house_bond, .dream ) {
    columns: unset;
    -webkit-columns: unset;
    -moz-columns: unset;
    border-left: 1px solid var(--grey-ea);
    border-bottom: unset;
}
.table-list.ltv .item {
    display: grid;
    grid-template-rows: repeat(6,1fr);
    height: 100%;
}
.table-title.rent_deposit {
    display: grid;
    grid-template-columns: auto 150px;
}
.table-list.rent_deposit .item {
    display: grid;
    grid-template-columns: auto 150px;
    height: unset;
}
.table-list.rent_deposit :is(.item.row2, .item.row3) {
    grid-template-columns: 200px auto 150px;
}
.table-list.rent_deposit .item .val.row2,
.table-list.relay_fee .item .val.row2,
.table-list.stamp_tax .item .val.row2 {
    grid-row: span 2;
    height: 100%;
}
.table-list.rent_deposit .item .val.row3,
.table-list.stamp_tax .item .val.row3 {
    grid-row: span 3;
    height: 100%;
}
.table-list.stamp_tax .item .val.row4 {
    grid-row: span 4;
    height: 100%;
}
.table-title.relay_fee {
    display: grid;
    grid-template-columns: 120px 120px auto 120px 120px;
}
.table-list.relay_fee .item {
    display: grid;
    grid-template-columns: 120px 120px auto 120px 120px;
    height: auto;
    min-height: 40px;
}
.table-list.relay_fee .item .val.row12 {
    grid-row: span 12;
    height: 100%;
}
.table-list.relay_fee .item .val.row6,
.table-list.stamp_tax .item .val.row6 {
    grid-row: span 6;
    height: 100%;
}
.table-list.relay_fee .item .val.col-2 {
    grid-column: span 2;
    height: 100%;
    text-align: left;
    word-break: keep-all;
}
.table-title.stamp_tax {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}
.table-list.stamp_tax .item {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    height: auto;
    min-height: 40px;
}

.table-title.house_bond {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 90px;
}
.table-list.house_bond .item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 90px;
    height: auto;
    min-height: 40px;
}
.table-list.house_bond .item .val.row4 {
    grid-row: span 4;
    height: 100%;
}
.table-list.house_bond .item .val.row7 {
    grid-row: span 7;
    height: 100%;
}
.table-title.dream {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.table-list.dream .item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 40px;
}
.table-list .item div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.table-list.stamp_tax .item div {
    justify-content: flex-start;
    padding: 10px;
}
.table-list .item .val {
    color: var(--grey);
}
.table-list:where(.ltv, .rent_deposit, .relay_fee, .house_bond) .item .val {
    min-height: 40px;
    height: 100%;
    flex: unset;
    line-height: 1.54;
}
.table-list.stamp_tax .item .val {
    min-height: 40px;
    height: 100%;
    text-align: justify;
    line-height: 1.54;
}
.table-list.rent_deposit .item .val,
.table-list.relay_fee .item .val,
.table-list.house_bond .item .val,
.table-list.dream .item .val {
    border-bottom: 1px solid var(--grey-ea);
    padding: 10px 20px;
    text-align: center;
}
.table-list.ltv .item:not(:last-child),
.table-list.rent_deposit .item .val,
.table-list.relay_fee .item .val,
.table-list.stamp_tax .item .val,
.table-list.house_bond .item .val,
.table-list.dream .item .val {
    border-right: 1px solid var(--grey-ea);
}
.table-list.ltv .item .val:not(:last-child),
.table-list.stamp_tax .item .val {
    border-bottom: 1px solid var(--grey-ea);
}
.table-list.stamp_tax .item .val.none_bt {
    border-bottom: none;
}
.table-list .text-ident {
    padding: 10px 10px 10px 20px !important;
    text-indent: -12px;
}
.table-list .text-ident-sub {
    padding: 10px 10px 10px 37px !important;
    text-indent: -17px;
}
.table-list.stamp_tax .item .val.text-right {
    justify-content: flex-end;
}
.table-list.stamp_tax .item .val.align-b {
    align-items: flex-end;
    flex-direction: column;
}
.table-list.stamp_tax .item .val.align-b::after {
    content: ""; 
    display: block;
    height: calc(100% / 9);
    width: 100%;
}
.table-list.ltv .item .val.l3 {
    grid-row: span 3;
    height: calc(40px * 3);
}
.table-list.ltv .item .val.l2 {
    grid-row: span 2;
    height: calc(40px * 2);
}
.table-list.ltv .item .val.l1 {
    grid-row: span 1;
    height: calc(40px * 1);
}
.table-list.short .item:nth-child(-n+15),
.table-list.sm_cardcash .item:nth-child(-n+4),
.table-list.sm_found .item:nth-child(-n+2) .key {
    border-right: 1px solid var(--grey-ea);
}
.table-list.long .item:nth-child(-n+75) {
    border-right: 1px solid var(--grey-ea);
}
.tax_rate-title{
    width: 100%;
    height: 40px;
    background-color: var(--green-light);
    gap: 3px;
}
.tax_rate-title .item {
    flex: 1;
    width: 100%;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.39px;
    color: var(--green);
}
.tax_rate-list {
    width: 100%;
}
.tax_rate-list .item {
    height: 60px;
    gap: 3px;
}
.tax_rate-list:not(.sm_type) .item:not(:last-child) {
    border-bottom: 1px solid var(--grey-f2);
}
.tax_rate-list.sm_type .item.top_line {
    border-top: 1px solid var(--grey-f2);
}
.tax_rate-list .item > div {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.tax_rate-list:is(.sm_type, .diff_type) .tax_name {
    justify-content: flex-start;
}
.tax_rate-list:is(.sm_type, .diff_type) .tax_price {
    justify-content: flex-end;
}
.tax_rate-list.diff_type .tax_price.col-2 {
    flex: 2;
}
.tax_rate-list.diff_type div:nth-child(2):not(.col-2) {
    justify-content: flex-start;
    padding-left: calc(calc(100% / 3) / 2);
} 
/** 예적금 이자액 넓이 { **/
    .tax_rate-title:not(.goal) :where(.type, .rate),
    .tax_rate-list:not(.goal) .item :where(.type, .rate) {
        flex: unset;
        width: 130px;
    }
/** 예적금 이자액 넓이 } **/
.tax_rate-list .item .st {
    font-size: 16px;
    font-weight: 600;
}
.tax_rate-list .item .tax_price .st {
    margin-left: 5px;
}
.tax_rate-list .item .tax_price.down span {
    color: #0066FF;
    font-weight: 700;
}
.tax_rate-list .item .tax_price.up span {
    color: var(--red);
    font-weight: 700;
}
.tax_rate-list .item .tax_price:where(.up, .down) span:last-child {
    margin-left: 15px;
}
.tax_rate-list .item .nt {
    font-family: 'pt', 'SDGothicNeo';
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
}
.tax_rate-list .item .rate .st {
    font-size: 14px;
}
.tax_rate-list .item .interest span,
.tax_rate-list.goal .item .receive span,
.tax_rate-list.sm_type .item.total span {
    color: var(--green);
}
.tax_rate-list .item.select_wrap {
    margin-bottom: 30px;
}
.tax_rate-list .item.fail div {
    align-items: center;
}
.error_icon {
    width: 15px;
    height: 15px;
    background-image: url(/res/svg/error_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 5px;
}
.noti-list {
    padding: 0 0 0 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    list-style-type: disc;
    gap: 5px;
}
.noti-list.dream {
    margin-top: 20px;
}
.noti-list .item {
    display: list-item;
}
.noti-list .item a {
    color: var(--green);
}
.fieldset.show-hide-style {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.fieldset.show-hide-style .field {
    width: 100%;
}
.fieldset.show-hide-style .field:not(:first-child) {
    margin-top: 30px;
}
.fieldset .field .val.side-btn-wrap {
    grid-template-columns: repeat(2,1fr);
    gap: 0 20px;
}
.fieldset .field .val.side-btn-wrap .checkbox {
    max-width: 160px;
}
.birth_date_input {
    text-align: left !important;
}
.birth_date_input::placeholder {
    font-size: 30px;
    font-weight: 700;
    font-family: 'pt', 'SDGothicNeo';
    color: var(--grey-d3) !important;
    letter-spacing: -0.5px;
}

.fieldset .info-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 15px;
    max-width: 340px;
    margin-top: 5px;
}
.fieldset .info-box .text-box {
    flex:1;
    display: flex;
    align-items: center;
    height: 100%;
}
.fieldset .info-box .text-box .text {
    width: 0;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
}
.fieldset .info-box .text-box .js-ageText {
    color: var(--green);
}
.fieldset .info-box .text-box .js-ageWarning {
    color: var(--red);
}
.fieldset .info-box .text-box.on .js-ageText{
    width: 45px;
}
.fieldset .info-box .text-box.not .js-ageWarning{
    width: 170px;
}
.calc-section .fieldset .info-box .text,
.fall-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.39px;
    white-space: nowrap;
}
.calc_wrap[data-type="youth"] .fieldset .field.army_period {
    height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="youth"] .fieldset .field.army_period.on {
    height: 133px;
    margin-top: 30px;
}
.calc_wrap[data-type="youth"] .fieldset .field.salary .input-box.mt-5 {
    margin-top: 5px;
}
.fieldset .field:where(.salary, .f_salary) {
    position: relative;
}
.fall-text {
    position: absolute;
    color: var(--red);
    left: 0;
    top: 85px;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="youth"] .fieldset .field.salary .fall-text {
    top: 155px;
}
.fall-text.on {
    width: 160px;
}
.fall-text.on + .input-box {
    border-color: var(--red);
}
.fall-text.on + .input-box :where(input, .text) {
    color: var(--red) !important;
}
.fall-text.on ~ .ci-box {
    margin-top: 35px;
}
.calc_wrap[data-type="youth"] label.checkbox.circle-check,
.calc_wrap[data-type="youth"] .field.terms_pop_view {
    margin-top: 70px;
    padding: 0 !important;
    border: none;
    border-radius: 0;
    align-items: unset;
}
.calc_wrap[data-type="youth"] label.checkbox.circle-check .text,
.calc_wrap[data-type="youth"] .field.terms_pop_view .text {
    color: var(--black);
}
.calc_wrap[data-type="youth"] .description {
    font-size: 14px;
    letter-spacing: -0.42px;
    color: var(--grey);
    margin-top: 10px;
}
.calc-section .section_footer .btn_box .write_button.none-event {
    pointer-events: none;
    background-color: var(--grey-ea);
}
.youth-tooltip {
    margin-left: 10px;
    position: relative;
    top: -1px;
    cursor: pointer;
}
.icon.question {
    width: 13px;
    height: 13px;
    background-image: url(/res/svg/i_info_grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.calc_wrap .fieldset .field.view .icon.question {
    background-image: url(/res/svg/i_info_g.svg);
}
.tooltip-container {
    position: absolute;
    left: -32px;
    width: 480px;
    border-radius: 15px;
    background-color: var(--grey-fc);
    padding: 0 20px;
    height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.tooltip-container .tooltip-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}
.tooltip-container .tooltip-box.ts,
.tooltip-container .tooltip-box.ti {
    height: 0px;
    overflow: hidden;
}
.tooltip-container.ts_on .tooltip-box.ts,
.tooltip-container.ti_on .tooltip-box.ti {
    height: 50px;
}
.tooltip-container .tooltip-box li {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: var(--grey);
    line-height: 1.54;
}
.tooltip-container .tooltip-box li.ft {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
}
.tooltip-container .tooltip-box .tip-list {
    display: grid;
    width: 100%;
    gap: 5px;
    flex: 1;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field.type .val {
    max-width: 505px;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val:where(.col-3, .col-4) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px 0;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val:where(.col-3, .col-4) label {
    animation: none;
    transition: all 0.3s ease;
    min-width: 155px;
    max-width: 155px;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val:where(.col-3, .col-4) label:not(:first-child) {
    margin-left: 20px;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val.col-4 {
    flex-wrap: wrap;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val.col-4 label:last-child {
    margin-left: 0;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val.col-3 .col-view {
    width: 0;
    flex: unset;
    margin: 0;
    overflow: hidden;
    animation: none;
    opacity: 0;
    min-width: 0;
    max-width: 0;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field .val.col-4 .col-view{
    width: calc(calc(175px * 3) - 100%);
    opacity: 1;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field:where(.pos-premium, .pos-monthlyPrice, .pos-inputPer, .pos-vat),
.calc_wrap[data-type="house_bond"] .fieldset .field:where(.category, .land_market_price),
.calc_wrap[data-type="purchase"] .fieldset .field:where(.purchase-option-sub, .pur_loanPrice, .pur_loanPer, .pur_monthPrice2, .pur_yearPrice2) {
    height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="relay_fee"] .fieldset .field.on:where(.pos-premium, .pos-monthlyPrice, .pos-inputPer, .pos-vat),
.calc_wrap[data-type="house_bond"] .fieldset .field.land_market_price.on,
.calc_wrap[data-type="purchase"] .fieldset .field.on:where(.pur_loanPrice, .pur_loanPer, .pur_monthPrice2, .pur_yearPrice2) {
    height: 133px;
    margin-top: 30px;
    opacity: 1;
    overflow: unset;
    transition: all 0.3s ease;
}
.calc_wrap[data-type="house_bond"] .fieldset .field.category.on {
    height: 78px;
    margin-top: 30px;
    opacity: 1;
}
.calc_wrap[data-type="purchase"] .fieldset .field.purchase-option-sub.on {
    height:80px;
    margin-top: 30px;
    overflow: unset;
    opacity: 1;
}
.mr-10 {
    margin-right: 10px;
}
.ml-10 {
    margin-left: 10px;
}
.flatpickr-day:nth-child(7n+1) {
    color: var(--red);
}
.flatpickr-day:nth-child(7n+1).prevMonthDay,
.flatpickr-day:nth-child(7n+1).nextMonthDay {
    color: rgba(248, 92, 114, 0.3) !important;
}
.fieldset .input-box:has(>.readonly-style) {
    background-color: var(--grey-f9);
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid var(--grey-ea);
}
.readonly-style {
    background-color: transparent;
    cursor: default;
}

/*************** NEW 대출 계산기 페이지 끝 ***************/


/*************** NEW 사이드 최근계산 시작 ***************/
.calcSideLayer {
    padding: 30px 0 10px 0;
}
.calc-recent {
    width: 100%;
}
.calc-recent .section_header {
    padding: 0 30px;
}
.calcSideLayer .titleBox {
    width: 100%;
    height: 40px;
    gap: 3px;
    padding: 0 10px;
    border-bottom: 1px solid var(--grey-ea);
}
.calcSideLayer .titleBox .item {
    height: 100%;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: var(--green);
    justify-content: center;
}
.calcSideLayer .titleBox .item :where(.sub) {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: var(--green);
    justify-content: center;
}
.calc_recent-list {
    width: 100%;
    flex-direction: column;
    padding: 0 10px;
}
.calc_recent-list li {
    width: 100%;
    height: 40px;
}
.calc_recent-list li:not(:last-child) {
    border-bottom: 1px solid var(--grey-f2);
}
.calc_recent-list .item {
    width: 100%;
    height: 100%;
    gap: 3px;
    transition: all 0.3s ease;
}
.calc_recent-list .item :where(div, span) {
    font-size: 12px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 500;
    letter-spacing: -0.39px;
    color: var(--grey);
    text-align: center;
}
/** 대출이자계산기 최근계산 넓이 { **/
    .calc-recent.loan .titleBox .item.type,
    .calc-recent.loan .calc_recent-list .item div.type {
        width: 90px;
        text-align: center;
    }
    .calc-recent.loan .titleBox .item.price,
    .calc-recent.loan .calc_recent-list .item div.price {
        flex: 1;
        width: 100%;
        text-align: center;
    }
    .calc-recent.loan .titleBox .item:not(.price, .type),
    .calc-recent.loan .calc_recent-list .item div:not(.price, .type) {
        width: 70px;
        text-align: center;
    }
    .calc-recent.loan .titleBox .item.price.f3,
    .calc-recent.loan .calc_recent-list .item div.price.f3 {
        flex: 3;
    }
    .calc-recent.loan .titleBox .item.price.f2,
    .calc-recent.loan .calc_recent-list .item div.price.f2 {
        flex: 2;
    }
    .calcSideLayer.hf_suggestion .calc-recent.loan .calc_recent-list .item div.price.adr {
        text-align: left;
    }
    .calcSideLayer.hf_suggestion .titleBox .item.price.adr {
        justify-content: flex-start;
    }
    .calcSideLayer.hf_suggestion .titleBox,
    .calcSideLayer.hf_suggestion .calc-recent.loan .calc_recent-list .item {
        gap: 30px;
    }
/** 대출이자계산기 최근계산 넓이 } **/

/** 중도상환수수료 최근계산 넓이 { **/
    .calc-recent.prepayment .titleBox .item:not(.price, .prepayment),
    .calc-recent.prepayment .calc_recent-list .item div:not(.price, .prepayment) {
        flex: 1;
        width: 100%;
        text-align: center;
    }
    .calc-recent.prepayment .titleBox .item.price,
    .calc-recent.prepayment .calc_recent-list .item div.price {
        width: 80px;
    }
    .calc-recent.prepayment .titleBox .item.prepayment,
    .calc-recent.prepayment .calc_recent-list .item div.prepayment {
        width: 60px;
    }
/** 중도상환수수료 최근계산 넓이 } **/

/** 예/적금 계산기 최근계산 넓이 { **/
    .calc-recent.deposit .titleBox .item:not(.type, .rate, .period),
    .calc-recent.deposit .calc_recent-list .item div:not(.type, .rate, .period) {
        flex: 1;
        width: 100%;
        text-align: center;
    }
    .calc-recent.deposit .titleBox .item.item:where(.type, .rate),
    .calc-recent.deposit .calc_recent-list .item div:where(.type, .rate) {
        flex: unset;
        width: 80px;
    }
    .calc-recent.deposit .titleBox .item.item.period,
    .calc-recent.deposit .calc_recent-list .item div.period {
        flex: unset;
        width: 60px;
    }
/** 예/적금 계산기 최근계산 넓이 } **/

/** 연봉 계산기 최근계산 넓이 { **/
    .calc-recent.salary .titleBox .item:not(.type, .family),
    .calc-recent.salary .calc_recent-list .item div:not(.type, .family) {
        flex: 1;
        width: 100%;
        text-align: center;
    }
    .calc-recent.salary .titleBox .item.item:where(.type, .family),
    .calc-recent.salary .calc_recent-list .item div:where(.type, .family) {
        flex: unset;
        width: 35px;
    }
/** 연봉 계산기 최근계산 넓이 } **/

/** 평형 계산기 최근계산 넓이 { **/
    .calc-recent.area .titleBox .item:not(.area),
    .calc-recent.area .calc_recent-list .item div:not(.area) {
        flex: 1;
        width: 100%;
        text-align: center;
    }
    .calc-recent.area .titleBox .item:where(.area),
    .calc-recent.area .calc_recent-list .item div:where(.area) {
        flex: unset;
        width: 50px;
    }
/** 평형 계산기 최근계산 넓이 } **/
.flatpickr-current-month input.cur-year,
span.flatpickr-weekday {
    color: var(--white) !important;
}

.checkbox .icon {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: auto;
}
.checkbox .icon.bank_1 {
    background-image: url(/res/image/bank/nh.png);
}
.checkbox .icon.bank_2 {
    background-image: url(/res/image/bank/shinhan.png);
}
.checkbox .icon.bank_3 {
    background-image: url(/res/image/bank/woori.png);
}
.checkbox .icon.bank_4 {
    background-image: url(/res/image/bank/hana_bank.png);
}
.checkbox .icon.bank_5 {
    background-image: url(/res/image/bank/ibk.png);
}
.checkbox .icon.bank_6 {
    background-image: url(/res/image/bank/kb.png);
}
.checkbox .icon.bank_7 {
    background-image: url(/res/image/bank/dgb.png);
}
.checkbox .icon.bank_8 {
    background-image: url(/res/image/bank/busan.png);
}
.checkbox .icon.bank_9 {
    background-image: url(/res/image/bank/jb_bank.png);
}
.checkbox .icon.bank_10 {
    background-image: url(/res/image/bank/jb_bank.png);
}
.checkbox .icon.bank_11 {
    background-image: url(/res/image/bank/kyongnam_bank.png);
}

/*************** NEW 사이드 최근계산 시작 ***************/




/*************** 대출 위키 시작 ***************/
.wiki-article {
    width: 100%;
}
main:has(.wiki-h1-title) {
    border-radius: 15px;
    background-color: var(--white);
    padding: 0 0 60px 0;
    align-items: center;
}
.main-wrapper:has(.wiki-section.wiki-header.snap) {
    justify-content: center;
}
main:has(.wiki-section.wiki-header.snap) {
    width: 1160px;
    background-color: transparent;
}
section.wiki-section:not(.wiki-header) {
    padding: 0 50px;
}
.wiki-section.none-section {
    min-height: 700px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wiki-section.wiki-header {
    width: 100%;
    height: 285px;
    border-radius: 15px 15px 0 0;
    background-color: #046772;
    background-color: #06876b;
    padding: 0 40px;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    overflow: hidden;
}
.wiki-section.wiki-header.snap {
    background-color: var(--blue);
    flex-direction: column;
    height: 350px;
    border-radius: 25px;
}

.wiki-intro-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.wiki-nav {
    margin: 0;
    height: auto;
    display: flex;
    align-items: center;
    z-index: 1;
}
.wiki-section:where(.snap, .fss) .wiki-nav {
    margin: 40px 0 0 0;
}
.wiki-navList, .wiki-navList .item {
    gap: 10px;
}
.wiki-nav .r_arrow {
    margin: 0;
    background-image: url(/res/svg/m_cs_r_arrow_w.svg);
    transform: rotate(-90deg);
}
.wiki-navList .item a {
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    opacity: 0.8;
}
.wiki-h1-title {
    font-size: 51px;
    font-weight: 800;
    line-height: 1.25;
    margin: 20px 0 10px 0;
    color: var(--white);
    z-index: 1;
    word-break: keep-all;
}
.wiki-section.wiki-header.snap .wiki-h1-title,
.wiki-section.wiki-header.fss .wiki-h1-title {
    margin: 75px 0 10px 0;
}
.wiki-section.wiki-header.snap .wiki-h1-title.snapSearch {
    margin: 75px 0 auto 0;
    max-width: 50%;
    word-break: break-all;
}
.wiki-intro-box::after {
    content: attr(data-title);
    font-size: 160px;
    font-weight: 800;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    background: #06876b;
    background: linear-gradient(to bottom, #06876b -26%, rgba(255,255,255,0.1) 134%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    opacity: 0;
}
.wiki-section.wiki-header.snap .wiki-intro-box::after {
    right: unset;
    left: 0;
}
.wiki-section.wiki-header.snap .wiki-intro-box::after {
    background: var(--blue);
    background: linear-gradient(to bottom, var(--blue) -26%, rgba(255,255,255,0.1) 134%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wiki-intro-box.exText::after {
    opacity: 1;
}
.wiki-intro-box.overTextAni::after {
    opacity: 1;
    right: unset;
    padding-left: 100%;
    padding-right: 3%;
    animation: pc_scrollText 40s linear infinite;
}
@keyframes pc_scrollText {
    from { 
        transform: translate(0%) translateY(-50%);
    }
    99%,to { 
        transform: translate(-100%) translateY(-50%);
    }
}
.wiki-section.snap .description {
    width: 50%;
    margin: auto 0 40px 0;
    color:var(--white);
    font-size: 12px;
    line-height: 1.5;
    z-index: 1;
}
.wiki-selectBox {
    width: 40%;
    border-radius: 15px 15px 0 0;
    position: absolute;
    right: 30px;
    top: 150px;
    z-index: 1;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    transition: all 0.2s ease-out;
}
.wiki-selectBox.calc-style {
    top: 200px;
}
.wiki-selectBox.on {
    border-radius: 15px;
    z-index: 10;
}
.expose-box {
    width: 100%;
    padding: 30px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px 15px 0 0;
    background-color: rgba(255,255,255,0.12);
}
.wiki-selectBox.calc-style .expose-box {
    height: 85px;
}
.wiki-section.snap .wiki-selectBox.calc-style {
    top: 250px;
}
.wiki-section.snap .wiki-selectBox.calc-style .expose-box {
    height: 100px;
}
.expose-box .title {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
}
.expose-box .sub {
    margin-top: 25px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.wiki-selectBox .list-area {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 15px 15px;
    transition: all 0.2s ease-out;
    background-color: var(--white);
}
.wiki-selectBox.on .list-area {
    padding: 30px 0;
}
.wiki-selectBox .other-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    padding: 0 30px;
}
.wiki-selectBox .other-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px 0;
}
.wiki-selectBox .other-list.illegal {
    grid-template-columns: repeat(1,1fr);
}
.wiki-selectBox .other-list .item {
    height: 30px;
    position: relative;
    padding: 0 30px;
}
.wiki-selectBox .other-list .item::after {
    content: '';
    width: 5px;
    height: 66%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.wiki-selectBox .other-list:not(.illegal) .item:nth-child(odd):after,
.wiki-selectBox .other-list.illegal .item:after {
    left: 0;
}
.wiki-selectBox .other-list:not(.illegal) .item:nth-child(even):after {
    right: 0;
}
.wiki-selectBox .other-list .item.active {
    border-color: #06876b;
}
.wiki-selectBox .other-list .other-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.wiki-selectBox .other-list .other-link p {
    font-size: 15px;
    font-weight: 400;
    color: var(--grey);
}
.wiki-h2-title {
    margin-top: 80px;
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -1.44px;
    line-height: 1.25;
}
.wiki-h3-title {
    margin-top: 40px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1.44px;
    line-height: 1.25;
}
.wiki-m3-sub-title {
    font-weight: 800;
    color: var(--green);
    margin-right: 10px;
}
.wiki-h4-title {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -1.44px;
    line-height: 1.25;
}
.wiki-wrap.boxStyle .wiki-h4-title {
    margin-top: 0;
}
.wiki-m-0 {
    margin: 0 !important;
}
.wiki-wrap,
.wiki-text,
.wiki-list,
.wiki-top-list,
.wiki-review-list {
    margin-top: 20px;
}
.wiki-wrap:not(.youtube-wrap) {
    padding-bottom: 10px;
}
.wiki-wrap img {
    max-width: 100%;
    border-radius: 15px;
}
.wiki-wrap.youtube-wrap {
    margin-bottom: 60px;
    overflow: unset;
    padding-top: 0;
}
.wiki-wrap.youtube-wrap figcaption {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center !important;
}
.wiki-text,
.wiki-list li,
.wiki-list.illegal .contents,
.table-contents-list li a,
.wiki-wrap.youtube-wrap figcaption,
.wiki-table caption,
.wiki-table table thead tr th .key,
.wiki-table table tbody tr td .val :where(p, span),
.wiki-table-default caption,
.wiki-table-default table thead tr th .key,
.wiki-table-default table tbody tr td .val :where(p, span),
.wiki-table-default table tfoot tr td .val :where(p, span),
.illegal-table caption,
.illegal-table table thead tr th .key,
.illegal-table table tbody tr td .val :where(p, span),
.wiki-table-list li,
.flow-chart :where(.text-box, .round-box) p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.69;
    letter-spacing: -0.42px;
    color: var(--grey);
    text-align: justify;
}
.wiki-list {
    padding-left: 20px;
    list-style-type: disc;
}
.wiki-list.non-top {
    margin-top: 0;
}
.circle-list {
    padding-left: 20px;
    list-style-type: circle;
}
.mb-10 {
    margin-bottom: 10px;
}
.wiki-list .in-list {
    display: flex;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
}
.wiki-list .in-list::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--grey);
    position: absolute;
    top: 10px;
    left: -16px;
}
.wiki-list ol {
    margin: 0 0 0 5px;
}
.wiki-list li,
.wiki-table-list li {
    line-height: 1.8;
    text-align: unset;
}
.wiki-list .in-list :where(ol, ul) {
    padding-left: 20px;
}
.wiki-list .in-list ol {
    list-style-type: decimal;
}
.wiki-list .in-list ul {
    list-style-type: circle;
}
.wiki-list li.title,
.wiki-list.illegal .title,
.wiki-wrap.boxStyle .title {
    position: relative;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.69;
    left: -20px;
    list-style-type: none;
    margin-bottom: 5px;
    color: var(--black);
}
.wiki-wrap.boxStyle .title {
    position: unset;
    left: unset;
}
.wiki-wrap.boxStyle .title.non_top {
    margin-top: 20px;
}
.wiki-list.boxStyle,
.wiki-wrap.boxStyle {
    border-radius: 25px;
    border: 1px solid var(--grey-f9);
    padding: 30px 30px 30px 50px;
    background-color: var(--grey-f9);
}
.wiki-wrap.boxStyle {
    padding: 30px;
}
.wiki-wrap.boxStyle .wiki-h3-title {
    margin-top: 0;
}
.wiki-list.illegal {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    list-style-type: none;
    gap: 30px;
}
.wiki-wrap.boxStyle .wiki-list.illegal {
    padding: 0;
}
ol.wiki-list {
    list-style-type: decimal;
}
.wiki-list.illegal .contents {
    position: relative;
    left: -7px;
}
.wiki-textLink,
.wiki-textLink strong {
    color: var(--green);
}
.wiki-text.big {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 800;
}
.wiki-text.big .wiki-textLink {
    position: relative;
    font-weight: 800;
}
.wiki-text.big .wiki-textLink::after {
    content: '';
    width: 10px;
    height: 14px;
    background-image: url(/res/svg/rr_arrow_g.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-45%);
}
.wiki-text.big.none_after .wiki-textLink::after {
    content: unset;
}
.wiki-bold {
    font-weight: 800 !important;
}
.wiki-tableContents .table-wrap {
    border-radius: 15px;
    padding: 40px;
    margin: 40px 0 10px 0;
    background-color: var(--grey-f9);
}
section.wiki-tableContents h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}
.table-contents-list {
    margin-top: 20px;
}
.table-contents-list li {
    display: list-item;
}
.table-contents-list li::marker {
    color: var(--grey);
}
.table-contents-list .table-main {
    margin-top: 20px;
}
.table-contents-list.main {
    margin-top: 30px;
    list-style-type: decimal;
    padding-left: 15px;
}
.table-contents-list.main > .item {
    margin-top: 20px;
}

.table-contents-list.sub {
    margin-top: 6px;
    padding-left: 20px;
    list-style-type: disc;
}
.table-contents-list.third {
    margin-top: 6px;
    padding-left: 20px;
    list-style-type: circle;
}
.wiki-table table,
.wiki-table-default table,
.illegal-table table {
    width: 100%;
}
.wiki-table table thead tr th,
.wiki-table-default table thead tr th,
.wiki-table-default table tfoot tr td,
.illegal-table table thead tr th {
    padding: 12px 8px;
    border: 1px solid var(--grey-ea);
    background-color: var(--grey-f9);
}
.wiki-wrap.boxStyle .wiki-table table thead tr th,
.wiki-wrap.boxStyle .wiki-table-default table thead tr th,
.wiki-wrap.boxStyle .wiki-table-default table tfoot tr td,
.wiki-wrap.boxStyle .illegal-table table thead tr th {
    background-color: var(--grey-fc);
}
.wiki-table table tbody tr td,
.wiki-table-default table tbody tr td,
.wiki-table-default table tfoot tr td,
.illegal-table table tbody tr td {
    border: 1px solid var(--grey-ea);
    background-color: var(--white);
}
.wiki-table table tbody tr td,
.wiki-table-default table tbody tr td,
.wiki-table-default table tfoot tr td,
.illegal-table table tbody tr td {
    padding: 15px;
}
.wiki-table table thead tr th .key,
.wiki-table table tbody tr td .val,
.wiki-table table tbody tr td .val p,
.wiki-table-default table thead tr th .key,
.wiki-table-default table tbody tr td .val.mid,
.wiki-table-default table tbody tr td .val.mid p,
.wiki-table-default table tfoot tr td .val,
.wiki-table-default table tfoot tr td .val p,
.illegal-table table thead tr th .key,
.illegal-table table tbody tr td .val,
.illegal-table table tbody tr td .val p {
    word-break: keep-all;
    text-align: unset;
}
.wiki-table-default table tbody tr td .val p {
    text-align: unset;
}
.wiki-table :where(.val.mid p, .key.mid),
.wiki-table-default :where(.val.mid p, .key.mid),
.wiki-table :where(.val.img_center, .key.img_center),
.wiki-table-default :where(.key.img_center) {
    text-align: center !important;
    white-space: nowrap;
}
.wiki-table-default table tbody tr .td_tel .val :where(p, span) {
    text-align: left !important;
}
.wiki-table-default :where(.val.img_center .val) {
    margin-left: 10px;
}

.wiki-table .val.left p,
.illegal-table .val.left p {
    text-align: unset !important;
    white-space: nowrap;
}
.ml5 {
    margin-left: 5px;
}
.wiki-table .val.fu p,
.wiki-table-default .val.fu p,
.illegal-table .val.fu p {
    font-weight: 700;
    color: var(--black);
}
.wiki-table .val.logo {
    display: grid;
    grid-template-columns: 40px;
    align-items: center;
    place-items: center;
}
.wiki-table.line-2.rate-3 .val.logo {
    justify-content: center;
}
.wiki-table table tbody tr td:has(>.val.logo) {
    border-right: none;
    padding: 15px 0 15px 15px;
    width: 40px;
}
.wiki-table.no-des table tbody tr .td_logo {
    width: 40px;
} 
.wiki-table .val img,
.wiki-table-default .val img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--grey-f9);
}
.wiki-table table tbody tr td:has(>.none_bl) {
    border-left: none;
}
.wiki-table.line-3 table tbody tr .td_rate :where(p, .per) {
    font-weight: 500;
    display: flex;
    align-items: baseline;
}
.wiki-table.line-4 table tbody tr :where(.td_des, .td_note) .val p {
    word-break: break-all;
}
.wiki-table .sm {
    font-size: 11px !important;
    margin-right: 3px;
}
.wiki-table.line-3 .sm {
    margin-right: 7px;
}
.wiki-table-list {
    padding-left: 10px;
    list-style: disc;
}
.wiki-table-list :where(li, p) {
    line-height: 1.44 !important;
}
.wiki-table table tbody tr td .val .wiki-table-list li p {
    word-break: break-all;
}
.wiki-table caption,
.wiki-table-default caption,
.illegal-table caption {
    margin-top: 10px;
    text-align: center;
}
.wiki-table .td_damage {
    padding: 0;
}
.wiki-table .td_damage .val {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.wiki-table .td_damage .val p {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wiki-table .td_damage .val p:not(.d_per) {
    flex: 1.6;
}
.wiki-table .td_damage .val .d_per {
    flex: 1;
}
.wiki-table .td_damage .val :where(.d_price, .d_per) {
    position: relative;
}
.wiki-table .td_damage .val .d_price::after, 
.wiki-table .td_damage .val .d_per::after {
    content: '';
    position: absolute;
    right: 0;
    top: -16px;
    height: 54.66px;
    width: 1px;
    background-color: var(--grey-ea);
}
.wiki-table .td_damage .val .d_per::after,
body > div.main-wrapper.grid > main > section.wiki-section.wiki-sectionContent.illegal > figure:nth-child(10) > table > tbody > tr:nth-child(1) > td:nth-child(2) > div > p.d_price::after {
    right: -1px;
}
.wiki-top-list {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    border: 1px solid var(--grey-ea);
    padding: 20px 40px;
    border-radius: 35px;
}
.wiki-top-list > li:not(:first-child) {
    border-top: 1px solid var(--grey-f9);
}
.wiki-top-list .item {
    padding: 35px 0;
    display: flex;
    align-items: flex-start;
    gap: 25px;
}
.wiki-top-list .iconBox {
    width: 45px;
    height: 100%;
}
.wiki-top-list .iconBox .icon {
    width: 100%;
    height: 45px;
    background-image: url(/res/svg/won.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.wiki-top-list .title {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.005em;
    font-weight: 800;
    color: var(--black);
    transition: all 0.3s ease;
}
.wiki-top-list .title .cg {
    letter-spacing: -0.005em;
    font-weight: 800;
    color: var(--green);
    transition: all 0.3s ease;
}
.wiki-top-list .sub-title {
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.005em;
    font-weight: 500;
    color: var(--grey);
    padding-top: 15px;
}
.wiki-top-list .description {
    padding-top: 30px;
    display: flex;
    align-items: center;
    gap: 55px;
}
.wiki-top-list .description :where(.limit, .rate, .period) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.wiki-top-list .description .key {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.005em;
    font-weight: 400;
    color: var(--grey);
}
.wiki-top-list .description .val {
    font-size: 18px;
    font-weight: 800;
    line-height: 32px;
    color: var(--black);
}
.wiki-top-list .description .per {
    font-size: 15px;
    font-weight: 800;
}
.wiki-top-list .description .rate .val {
    font-family: 'pt';
}
.wiki-faqBox {
    margin-top: 40px;
}
.wiki-faqBox .wiki-h3-title {
    margin: 0;
}
.wiki-faq-btn {
    outline: none;
    background-color: transparent;
    background-image: none;
    border: none;
    width: 100%;
    display: flex;
    /* align-items: center; */
    align-items: flex-start;
    padding: 25px 0;
    gap: 12px;
    text-align: left;
}
.wiki-faq-btn span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -1.44px;
    line-height: 1.25;
    font-weight: 700;
}
.wiki-faq-btn .text {
    -webkit-flex: 1 1 0%;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}
.wiki-faq-btn .d_arrow {
    width: 25px;
    height: 25px;
    background-image: url(/res/svg/m_cs_r_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 8px;
    transition: all 0.3s ease;
} 
.item-faq.on .wiki-faq-btn .d_arrow {
    transform: rotate(180deg);
}
.item-faq {
    border-top: 1px solid var(--grey-ea);
}
.item-faq:last-child {
    border-bottom: 1px solid var(--grey-ea);
}
.item-faq .wiki-answer-box {
    padding: 0 0 35px 0;
}
.item-faq .wiki-answer-box .wiki-text.faq {
    margin-top: 0;
}
.item-faq section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.mobile_banner.wiki {
    margin: 60px 0 0 0;
}
.mobile_banner.wiki a {
    height: 130px;
}
.mobile_banner.wiki.loan a {
    background-color: #fedc00;
}
.mobile_banner .ad_ment, .mobile_banner .ad_ment span {
    font-size: 21px;
}
.mobile_banner.wiki.loan a :where(p, span) {
    color: #3e2b00;
}
.mobile_banner.wiki.loan img {
    width: 145px;
    height: auto;
    position: relative;
    top: 10px;
}
.mobile_banner.wiki.rq a {
    background-color: #61045f;
}
.mobile_banner.wiki.rq img {
    width: 150px;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.mobile_banner.wiki.calc a {
    background-color: #ad9fe5;
}
.mobile_banner.wiki.calc img {
    width: 132px;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.wiki-slide {
    margin-top: 40px;
    overflow: unset !important;
}
.read-list{
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    gap: 35px 20px;
}
.wiki-main-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 40px;
}
.read-list .target-link,
.wiki-main-list .target-link,
.wiki-review-list .item {
    position: relative;
    width: 100%;
}
.wiki-main-list .target-link {
    display: flex;
    align-items: center;
    gap: 30px;
}
.read-list .photoBox {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 215px;
    transform: scale(0.93);
    background-color: var(--grey-ea);
    transition: all 0.2s ease-out;
}
.wiki-main-list .photoBox,
.illegal-main-list .photoBox {
    border-radius: 15px;
    overflow: hidden;
    width: 130px;
    height: 130px;
    position: relative;
}
.read-list img,
.wiki-main-list img,
.illegal-main-list img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.read-list img {
    width: auto;
    max-width: unset;
    max-height: unset;
    transform: translate(-50%, -50%) scale(0.85);
    transition: all 0.2s ease-out;
}
.wiki-main-list img,
.illegal-main-list img {
    width: auto;
    max-width: unset;
    max-height: unset;
    transform: translate(-50%, -50%) scale(0.75);
    transition: all 0.2s ease-out;
}
.read-list .contentBox{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 15px;
    width: 100%;
    height: 215px;
    background-color: var(--grey-f9);
    padding: 25px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left bottom;
    transition: all 0.2s ease-out;
}
.wiki-main-list .contentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: 100%;
}
.read-list .wiki-h3-title,
.wiki-main-list .wiki-h3-title,
.wiki-review-list .lender {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
}
.wiki-main-list .wiki-h3-title {
    font-size: 22px;
    transition: all 0.2s ease-out;
}
.read-list .contentBox .text{
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
}
.wiki-main-list .contentBox .text {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}
.read-list .contentBox .btnBox {
    margin-top: auto;
    display: flex;
    align-items: center;
}
.read-list .contentBox .btnBox .right_arrow {
    display: inline-block;
    width: 10px;
    height: 14px;
    background-image: url(/res/svg/rr_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: auto;
    transition: all 0.2s ease-out;
}
.wiki-wrap:has(>.wiki-review-list) {
    opacity: 0;
}
.wiki-review-info {
    position: absolute;
    top: -99999px;
    left: -99999px;
}
.wiki-review-list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    /* display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 35px; */
    transition-timing-function: linear !important;
    transition-duration: 15s;
}
.wiki-review-list .item {
    width: 323px;
    align-items: flex-start;
}

.wiki-review-list .lender div {
    font-weight: 800;
    letter-spacing: -1.44px;
    line-height: 1.25;
}
.wiki-review-list .review-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 25px;
    min-height: 215px;
    height: 100%;
    background-color: var(--grey-f9);
    padding: 35px 20px 35px 35px;
}
.wiki-review-list .item:hover {
    background-color: var(--blue);
}
.wiki-review-list .icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -20px;
    left: -20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.wiki-review-list .icon.female.age_20 {
    background-image: url(/res/svg/wiki/female_20.svg);
}
.wiki-review-list .icon.female.age_30 {
    background-image: url(/res/svg/wiki/female_30.svg);
}
.wiki-review-list .icon.female.age_40 {
    background-image: url(/res/svg/wiki/female_40.svg);
}
.wiki-review-list .icon.female.age_50 {
    background-image: url(/res/svg/wiki/female_50.svg);
}
.wiki-review-list .icon.male.age_20 {
    background-image: url(/res/svg/wiki/male_20.svg);
}
.wiki-review-list .icon.male.age_30 {
    background-image: url(/res/svg/wiki/male_30.svg);
}
.wiki-review-list .icon.male.age_40 {
    background-image: url(/res/svg/wiki/male_40.svg);
}
.wiki-review-list .icon.male.age_50 {
    background-image: url(/res/svg/wiki/male_50.svg);
}
.wiki-review-list .description {
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    margin-bottom: 35px;
}
.wiki-review-list .info-wrap {
    margin-top: auto;
    display: flex;
    align-items: center;
}
.wiki-review-list .info-wrap {
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
}
.wiki-review-list .info-wrap :where(div, span) {
    font-weight: 800;
}
.wiki-review-list .gender,
.wiki-review-list .name {
    margin-left: 5px;
}
.wiki-review-list .loan,
.wiki-review-list .star_rating {
    position: absolute;
    bottom: 35px;
    right: 20px;
    font-weight: 800;
}
.wiki-wrap.case {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.wiki-review-list .item:hover :where(.lender div, .description, .info-wrap div, .info-wrap span, .loan) {
    color: var(--white);
}
.iphone-img {
    width: 275px;
    height: 550px;
    background-image: url(/res/svg/illegal/iphone_line_g.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 50px;
    left: 0px;
}
.case-container {
    position: relative;
    margin: 170px 20px 0 70px;
    border-radius: 25px;
    overflow: hidden;
}
.case-title {
    background-color: rgba(153, 33, 45, 0.9);
    background-color: #990011;
    padding: 25px 0 25px 30px;
}
.case-title h4 {
    font-size: 22px;
    font-weight: 800;
    color: #FCF6F5;
}
.case-contents {
    padding: 25px;
    background-color: rgba(216, 75, 70, 0.9);
    background-color: #FCF6F5;
}
.case-text {
    font-size: 13px;
    line-height: 15px;
    letter-spacing: -0.24px;
    font-weight: 700;
    color: #990011;
}
.case-text.gp {
    margin-top: 15px;
}
.case-text.imo {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 5px 0;
}
.wiki-wrap.case-ii {
    margin-top: 50px;
}
.case-ii-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
.case-ii-list .item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.case-ii-list .item .logo_box {
    width: 50px;
    height: 50px;
    background-color: #3d3935;
    border-radius: 50%;
    position: relative;
}
.case-ii-list .item .logo_box img {
    width: 100%;
    height: 100%;
    border-radius: unset;
}
.case-ii-list .item .logo_box.square img {
    width: calc(25px * 1.4142);
    height: calc(25px * 1.4142);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.case-ii-list .chatBox {
    border-radius: 0 8px 8px 8px;
    background-color: #667baf;
    padding: 10px 10px 30px 10px;
}
.case-ii-list .case-text {
    color: var(--white);
}
.ii-list-info {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.69;
    letter-spacing: -0.42px;
    color: var(--grey);
    text-align: center;
    margin-top: 10px;
}
.flow-chart {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 50px;
}
.flow-chart :where(.before-box, .after-box) {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flow-title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 30px;
}
.com-table-box {
    position: relative;
    width: 100%;
    height: 210px;
}
.triangle-circle {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: 'c_top c_top c_top c_top'
                        'c_left c_left c_right c_right';
    place-items: center;
}
.flow-chart .circle.top {
    grid-area: c_top;
}
.flow-chart .circle.left {
    grid-area: c_left;
}
.flow-chart .circle.right {
    grid-area: c_right;
}
.flow-chart .circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.flow-chart .circle.lb {
    background-color: #b3dae3;
}
.flow-chart .circle.db {
    background-color: #44546a;
}
.flow-chart .circle.gr {
    background-color: #7cb952;
}
.flow-chart .circle.bl {
    background-color: #0a7ae7;
}
.flow-chart:not(.com-table) .before-box .circle.db {
    margin: 18px 0 6px 0;
}
.flow-chart .circle p {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    word-break: keep-all;
    line-height: normal !important;
}
.flow-chart .circle.lb p {
    font-size: 14px;
    color: var(--black);
}
.flow-chart .circle:where(.db, .gr, .bl) p {
    color: var(--white);
}
.flow-chart .circle.ss {
    width: 50px;
    height: 50px;
}
.flow-chart .text-box {
    height: 30px;
    display: flex;
    align-items: center;
}
.flow-chart .text-box.right {
    position: relative;
    left: 90px;
}
.flow-chart .before-box .circle.lb {
    position: relative;
}
.flow-chart .before-box > .circle.lb::after {
    content: '';
    width: 2px;
    height: 100%;
    background-color: #b3dae3;
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translate(-50%, 25%);
}
.flow-arrow {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.flow-arrow.left {
    width: 35px;
    height: 30px;
    background-image: url(/res/svg/wiki/flow_left.svg);
}
.flow-arrow.left-down {
    width: 35px;
    height: 30px;
    background-image: url(/res/svg/wiki/flow_left_down.svg);
}
.flow-arrow.right {
    width: 35px;
    height: 30px;
    background-image: url(/res/svg/wiki/flow_right.svg);
}
.flow-arrow.right-down {
    width: 35px;
    height: 30px;
    background-image: url(/res/svg/wiki/flow_right_down.svg);
}
.flow-arrow.down {
    width: 35px;
    height: 30px;
    background-image: url(/res/svg/wiki/flow_down.svg);
}
.flow-arrow.left-right {
    width: 40px;
    height: 15px;
    background-image: url(/res/svg/wiki/flow_left_right.svg);
    background-size: cover;
}
.flow-chart .person_icon {
    width: calc(25px * 1.4142);
    height: calc(25px * 1.4142);
    background-image: url(/res/svg/wiki/flow_person.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}
.flow-chart .text-box.center {
    position: relative;
    gap: 10px;
}
.flow-chart .before-box .text-box.center,
.flow-chart .after-box > .text-box.center {
    margin: 15px 0 10px 0;
}
.flow-chart .after-box > .text-box.center {
    margin: 5px 0 10px 0;
}
.flow-chart .after-box > .text-box.center.top {
    margin: 0;
}
.flow-chart .before-box .text-box.center p {
    position: absolute;
    left: -40%;
    transform: translateX(-50%);
}
.round-box {
    border-radius: 25px;
    border: 2px solid #b3dae3;
    display: flex;
    align-items: center;
    gap: 10px;
}
.round-box .item {
    flex-direction: column;
}
.flow-chart .before-box .round-box .item.ar,
.flow-chart .after-box > .round-box .item.ar {
    margin-bottom: 30px;
}
.round-box .item p {
    font-size: 12px;
}
.round-box .item:not(.ar) p {
    margin-top: 10px;
}
.flow-chart .before-box .round-box,
.flow-chart .after-box > .round-box {
    padding: 40px 20px 10px 20px;
    position: relative;
}
.flow-chart .before-box .round-box:after,
.flow-chart .after-box > .round-box:after {
    content: '';
    width: calc(100% - 90px);
    height: 2px;
    background-color: #b3dae3;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.flow-chart .flow-container {
    position: relative;
}
.flow-chart .after-box .flow-container .round-box {
    padding: 15px;
}
.flow-chart .flow-container .lb-text {
    position: absolute;
    font-size: 16px;
    color: #6ab5c7;
    font-weight: 600;
    top: 50%;
    left: -65px;
    transform: translateY(-50%);
    width: 65px;
    text-align: center;
    word-break: keep-all;
}
.flow-chart .after-box .flow-container .item:not(.ar) p {
    font-size: 14px;
}
.flow-chart .after-box .flow-container .item:not(.ar) p {
    margin-top: 0;
}
.flow-chart .after-box > .text-box.center {
    display: flex;
    gap: 20px;
}
.flow-chart .flow-arrowBox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flow-chart .before-box .round-box .item:not(.ar) .circle,
.flow-chart .after-box > .round-box .item:not(.ar) .circle {
    position: relative;
}
.flow-chart .before-box .round-box .item:not(.ar) .circle:after,
.flow-chart .after-box > .round-box .item:not(.ar) .circle:after {
    content: '';
    width: 2px;
    height: 50%;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #b3dae3;
}
.flow-caption {
    margin-top: 15px;
    color: #6ab5c7;
    font-size: 18px;
}
.com-table-box .ar {
    position: absolute;
    width: calc(100% / 6);
    height: 1px;
    background-color: var(--black);
    opacity: 0.5;
}
.com-table-box .ar.left_right::after {
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3.5px 7px 3.5px 0;
    border-color: transparent var(--black) transparent transparent;
    transform: rotate(0deg);
    display: block;
    position: absolute;
    top: -2.5px;
    left: -4px;
}
.com-table-box .ar.left_right::before {
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3.5px 0 3.5px 7px;
    border-color: transparent transparent transparent var(--black);
    transform: rotate(0deg);
    display: block;
    position: absolute;
    top: -2.5px;
    right: -4px;
}
.com-table-box .ar.right {
    background-image: url(/res/svg/com_right.svg);
}
.com-table-box .ar.left_right.top_right {
    right: 70px;
    top: 44%;
    transform: translateY(-50%) rotate(45deg);
}
.com-table-box .ar.left_right.top_right.top {
    right: 86px;
    top: 46%;
}
.com-table-box .ar.left_right.top_right.down {
    right: 105px;
    top: 52%;
}
.com-table-box .ar.left_right.top_left {
    left: 70px;
    top: 44%;
    transform: translateY(-50%) rotate(-45deg);
}
.com-table-box .ar.left_right.top_left.mid {
    left: 99px;
    top: 50%;
}
.com-table-box .ar.left_right.top_right.mid {
    right: 99px;
    top: 50%;
}
.com-table-box .ar.right.reverse {
    width: calc(calc(100% / 6) + 20px);
    transform: translateX(-50%) rotate(180deg);
    bottom: 45px;
    left: 50%;
}
.com-table-box .ar.right.reverse::after {
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3.5px 7px 3.5px 0;
    border-color: transparent var(--black) transparent transparent;
    transform: rotate(0deg);
    display: block;
    position: absolute;
    top: -2px;
    left: -4px;
}
.com-table-box .ar.right.reverse::before {
    content:'';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3.5px 0 3.5px 7px;
    border-color: transparent transparent transparent var(--black);
    transform: rotate(0deg);
    display: block;
    position: absolute;
    top: -2px;
    right: -4px;
}
.com-table-box .wiki-list li {
    position: absolute;
    font-size: 10px;
}
.com-table-box .one {
    top: 41%;
    left: 19%;
}
.before-box .com-table-box .two {
    top: 41%;
    right: 9%;
}
.before-box .com-table-box .three {
    bottom: 20px;
    left: 50%;
    transform: translateX(calc(-50% + 5px));
}
.before-box .com-table-box .four {
    bottom: 33%;
    left: 50%;
    width: 50px;
    line-height: 1.2;
    transform: translateX(calc(-50% + 13px));
}
.after-box .com-table-box :not(.one) {
    text-align: left;
}
.after-box .com-table-box .two {
    top: 32%;
    left: 67%;
}
.after-box .com-table-box .three {
    top: 38%;
    left: 67%;
}
.after-box .com-table-box .four {
    top: 44%;
    left: 67%;
}
strong.js-backColor {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(0, rgba(255, 117, 111, .4)));
    background-image: linear-gradient(90deg, transparent 50%, rgba(255, 117, 111, .4) 0);
    background-position: 0;
    background-size: 200%;
    -webkit-transition: background-position 1s linear;
    transition: background-position 1s linear;
}
strong.js-backColor.on {
    background-position: -100%;
}
/*************** 대출 위키 끝 ***************/
*:has(>.new-new) {
    position: relative;
}
.new-new {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--red);
    position: absolute !important;
    top: 1px !important;
    right: -11px !important;
}
.s-menu .item a span.new-new {
    top: 4px !important;
}


/*************** 불법금융대응 메인 시작 ***************/
.wiki-mainSection.illegal {
    padding: 75px 50px 40px 50px !important;
}
.hexagon-contianer {
    z-index: 1;
    position: absolute;
    top: 50%;
}
.hex {
    width: 130px;
    height: 76px;
    background: linear-gradient(to right, rgba(4, 156, 183, 1), rgba(61, 217, 189, 1));
}
.hex.top {
    width: 130px;
    height: 38px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 50% 0%);
}
.hex.bottom {
    width: 130px;
    height: 38px;
    clip-path: polygon(50% -1%, -1% -1%, 50% 100%, 100% -1%);
}
.illegal-main-list {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: calc(130px * 0.05);
}
.illegal-main-list li {
    height: calc(calc(130px * 0.576923076923077) + calc(calc(130px * 0.576923076923077) / 2));
}
.illegal-main-list li:nth-child(odd) {
    justify-content: flex-start;
}
.illegal-main-list li:nth-child(even) {
    justify-content: flex-end;
}
.illegal-main-list .target-link {
    width: calc(50% + calc(calc(130px / 2) / 2));
    height: 100%;
    position: relative;
}
.illegal-main-list li:nth-child(odd) .hexagon-contianer {
    right: 0;
    transform: translate(0, -50%);
}
.illegal-main-list li:nth-child(even) .hexagon-contianer {
    left: 0;
    transform: translate(0, -50%);
}
.illegal-main-list .photoBox {
    width: calc(130px - 30px);
    height: calc(130px - 30px);
    border: 2px solid var(--white);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.illegal-main-list img {
    width: auto;
    height: 80%;
}
.illegal-main-list .contentBox {
    width: calc(100% / 2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.illegal-main-list li:nth-child(odd) .contentBox {
    text-align: right;
    left: 25px;
}
.illegal-main-list li:nth-child(even) .contentBox {
    right: 25px;
    text-align: left;
}
.illegal-main-list .wiki-h3-title {
    margin-top: 0;
    font-size: 22px;
}
.illegal-main-list .contentBox .text {
    font-size: 13px;
}
/*************** 불법금융대응 메인 끝 ***************/


/*************** 원형 그래프 시작 ***************/

.finlife-section,
.wrap-graph {
    width: 100%;
}
.wrap-graph .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 50px 0;
    position: relative;
}
.wrap-graph .container {
    margin: 50px auto;
}
.wrap-graph .panel {
    width: 100%;
}
.wrap-graph svg {
    height: 780px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
.wrap-graph .graph-hd {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--white);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    animation: nameback 1s forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
@keyframes nameback {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}
.graph-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
}
.graph-title .number {
    font-size: 35px;
    font-weight: 700;
    font-family: 'pt','SDGothicNeo';
    margin: 0 5px;
    color: var(--black);
}
.wrap-graph .graph-bd {
    overflow: hidden;
}
.wrap-graph .graph-bd-md {
    transform: rotate(180deg);
}
.graph-data-list {
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
    position: absolute;
    left: calc(50% + 30px);
    bottom: 90px;
}
.graph-data-list .item div{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -1.44px;
    line-height: 1.25;
    color: var(--grey);
}
.graph-data-list .item .key {
    margin-right: 5px;
}
.graph-data-list .item .val .number {
    font-family: 'pt','SDGothicNeo';
    font-size: 20px;
    font-weight: 700;
    margin-right: 5px;
}
/*************** 원형 그래프 끝 ***************/


/*************** 막대 그래프 시작 ***************/

.bar-graph .year {
    -webkit-animation: fade-in-text 2.2s 0.1s forwards;
    -moz-animation: fade-in-text 2.2s 0.1s forwards;
    animation: fade-in-text 2.2s 0.1s forwards;
}
.bar-graph-vertical {
    width: 100%;
    height: 510px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 60px 50px 0 50px;
    overflow: hidden;
    position: relative;
}
.bar-graph-vertical .bar-item {
    height: 450px;
    position: relative;
    text-align: center;
    width: 100px;
}
.bar-graph-vertical .bar {
    bottom: 0;
    position: absolute;
    width: 100%;
}
.wrap-graph .wrap-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 50px 0 50px;
}
.wrap-graph .wrap-title .name {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -1.44px;
    line-height: 1.25;
    color: var(--grey);
}
.bar-graph .bar-item .count {
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 100%;
    font-size: 35px;
    font-weight: 700;
    font-family: 'pt','SDGothicNeo';
    transition: bottom 1.2s ease;
}
.bar-graph .bar::after {
    -webkit-animation: fade-in-text 2.2s 0.1s forwards;
    -moz-animation: fade-in-text 2.2s 0.1s forwards;
    animation: fade-in-text 2.2s 0.1s forwards;
    color: #fff;
    content: attr(data-percentage);
    font-weight: 700;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: left;
    top: 24px;
}

.bar-graph .bar-item .bar {
    height: 0;
    transition: height 1.2s ease;
}

.shadow_effect {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: rgba(33, 35, 38, 0.2) 0px 18px 7px 26px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 50%;
    backdrop-filter: opacity(0.5);
    z-index: 10;
}

@keyframes fade-in-text {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*************** 막대 그래프 끝 ***************/


/*************** 사각 막대 그래프 시작 ***************/
.finlife-section.intro {
    height: 280rem;
    position: relative;
    display: flex;
    justify-content: center;
}
.finlife-section.intro._not_full {
    margin-top: 80px;
}
.wrap-container {
    position: relative;
    width: 100%;
    justify-content: center;
}
.fixed-wrap {
    width: 100%;
    min-height: 80rem;
    padding: 0 50px;
    max-width: 1160px;
    position: fixed;
    top: 80px;
    align-items: flex-start;
    /* transform: translate3d(0,0,0); */
}
._fbc .fixed-wrap {
    position: sticky;
    min-width: 1160px;
    max-height: 80rem;
    min-height: unset;
}
.finlife-section.intro .wrap-box.des {
    width: 100%;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
#circle-draw {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: -280px;
}
.finlife-section .sectionTitle {
    font-size: 80px;
    font-weight: 800;
    line-height: 1.25;
    z-index: 1;
    word-break: keep-all;
}
.wrap-box.des .text.main {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.84px;
    line-height: 0.85;
    color: var(--black);
    margin-top: 40px;
}
.wrap-box.des .text.sub {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.48px;
    margin: 20px 0;
    color: var(--grey);
}
.wrap-box.des .text.total {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.48px;
    margin-top: 80px;
    position: relative;
    color: var(--grey);
}
.wrap-box.des .text.total::after {
    content: '';
    width: 60px;
    height: 3px;
    border-radius: 25px;
    background-color: var(--black);
    position: absolute;
    top: -40px;
    left: 0;
}
.wrap-box.des .text.total .number {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.84px;
    line-height: 0.85;
    color: var(--black);
    margin-right: 5px;
}
.wrap-box.graph {
    width: 1000px;
    height: 1000px;
    display: flex;
    align-items: center;
    padding: 0 180px;
    position: absolute;
    top: 0;
    right: -350px;
}
.wrap-box.graph::after {
    content: '';
    width: var(--r);
    height: var(--r);
    border-radius: 50%;
    background-color: var(--white);
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all ease 0.5s;
}
.wrap-box.graph.end::after {
    content: unset;
}
.wrap-box.graph .graph-list {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(1,1fr);
    width: 100%;
    max-width: 465px;
    z-index: 1;
}
.wrap-box.graph .graph-list .item,
.wrap-box.graph .graph-list .item .val {
    gap:  30px;
}
.wrap-box.graph .graph-list .item .key {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1.44px;
    line-height: 1.25;
}
.wrap-box.graph .graph-list .item .val {
    width: 100%;
    flex: 1;
}
.wrap-box.graph .graph-list .item .square_box {
    display: grid;
    grid-template-columns: repeat(16,1fr);
    gap: 4px;
    width: 100%;
    flex: 1;
}
.wrap-box.graph .graph-list .item .square_box .square_item {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    position: relative;
}
.wrap-box.graph .graph-list .item .square_box .square_item.shadow {
    box-shadow: 4px 4px 4px -2px rgba(0,0,0,0.2);
}
.wrap-box.graph .graph-list .item .square_box .square_item.rc {
    background-color: #f06352;
}
.wrap-box.graph .graph-list .item .square_box .square_item.yc {
    background-color: #f0b74c;
}
.wrap-box.graph .graph-list .item .square_box .square_item.cc {
    background-color: #3cb6cb;
}
.wrap-box.graph .graph-list .item .square_box .square_item.num::after {
    content: attr(data-num);
    font-family: 'pt','SDGothicNeo';
    font-size: 15px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 21px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
.wrap-box.graph .graph-list .item .square_box .square_item.rc.num::after {
    color: #f06352;
}
.wrap-box.graph .graph-list .item .square_box .square_item.yc.num::after {
    color: #f0b74c;
}
.wrap-box.graph .graph-list .item .square_box .square_item.cc.num::after {
    color: #3cb6cb;
}
.wrap-box.graph .graph-list .item .val .number {
    font-family: 'pt','SDGothicNeo';
    font-size: 20px;
    font-weight: 700;
}
.rotate-box {
    will-change: transform;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    border-radius: 50%;
    transform-origin: center center;
    display: flex;
    align-items: center;
    position: absolute;
    right: -900px;
    height: 1000px;
    width: 1000px;
    transform: translateX(-50%);
    transition: opacity 0.5s, transform 0.5s;
}
.rotate-box.ongoing {
    transform: translateX(-50%) rotate(90deg);
    transition: opacity 0.5s, transform 0.5s;
}
.rotate-box.ongoing.finish {
    transform: translateX(-50%) rotate(180deg);
    transition: opacity 0.5s, transform 0.5s;
}
.rotate-item {
    min-width: 450px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    left: 25%;
    opacity: 0;
    transform: rotate(calc(var(--i) * (360deg/4))) translate(25%, 760px);
    transition: opacity 0.5s, transform 0.5s;
}
.rotate-item.one {
    transform: rotate(calc(var(--i) * (360deg/4))) translate(2%, 750px);
}
.rotate-item.two {
    transform: rotate(calc(var(--i) * (360deg/4))) translate(2%, 758px);
}
.rotate-item.three {
    transform: rotate(calc(var(--i) * (360deg/4))) translate(2%, 690px);
}
.rotate-item.view {
    opacity: 1;
}
.rotate-box:where(.ongoing, .finish) .rotate-item.one,
.rotate-box.finish .rotate-item.two {
    opacity: 0 !important;
}
.rotate-box.ongoing .rotate-item.two,
.rotate-box.finish .rotate-item.three {
    opacity: 1;
}
.rotate-item .des-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transform: rotate(-90deg);
}

.finlifeNav {
    justify-content: center;
    /* overflow: hidden; */
    white-space: nowrap;
    width: 100%;
    max-width: 1160px;
    z-index: 1;
    /* margin-bottom: 20px; */
    margin-bottom: 50px;
    /* padding: 30px 0; */
    flex-direction: column;
    /* gap:30px; */
    border-radius: 15px;
    background-color: var(--blue);
    position: relative;
}
.finlifeNav.snap {
    margin-bottom: 0;
    background-color: transparent;
    /* position: relative;
    bottom: 50%;
    transform: translateY(50%); */
    position: absolute;
    /* top: 78px; */
    top: 133px;
    right: 0;
    width: fit-content;;
}
.finlifeNav.snap.slide-container {
    width: 400px;
    height: 75px;
}
.finlifeNav.snap.slide-container .wordSearchBox {
    overflow: hidden;
}
/* .finlifeNav.bl-ver {
    background-color: var(--blue-light);
} */
.finlifeNav .wordSearchBox {
    /* width: 550px; */
    /* height: 60px; */
    /* border-radius: 10px; */
    /* border: 2px solid var(--blue);
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.15); */
    /* overflow: hidden; */
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}
.finlifeNav .wordSearchBox .search-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 0 20px 60px;
}
.finlifeNav.snap .wordSearchBox .search-area {
    padding: 0;
}
.finlifeNav .wordSearchBox form {
    width: 500px;
    height: 55px;
    padding: 0 40px 0 10px;
    border-bottom: 2px solid var(--white);
}
.finlifeNav.snap .wordSearchBox form {
    width: 494px;
}
/* .finlifeNav.bl-ver .wordSearchBox form {
    border-bottom: 2px solid var(--black);
} */
.finlifeNav .wordSearchBox form input {
    flex: 1;
    border: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: var(--white);
    background-color: transparent;
}
.finlifeNav .wordSearchBox form input::placeholder {
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
/* .finlifeNav.bl-ver .wordSearchBox form input,
.finlifeNav.bl-ver .wordSearchBox form input::placeholder {
    color: var(--black);
} */
.finlifeNav .wordSearchBox form input:-webkit-autofill,
.finlifeNav .wordSearchBox form input:-webkit-autofill:hover,
.finlifeNav .wordSearchBox form input:-webkit-autofill:focus,
.finlifeNav .wordSearchBox form input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px var(--blue) inset !important;
    -webkit-text-fill-color: var(--white) !important;
}
/* .finlifeNav.bl-ver .wordSearchBox form input:-webkit-autofill,
.finlifeNav.bl-ver .wordSearchBox form input:-webkit-autofill:hover,
.finlifeNav.bl-ver .wordSearchBox form input:-webkit-autofill:focus,
.finlifeNav.bl-ver .wordSearchBox form input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px var(--blue-light) inset !important;
    -webkit-text-fill-color: var(--black) !important;
} */
/* .finlifeNav .wordSearchBox form input::part(autofill) {
    background-color: var(--blue) !important;
}
.finlifeNav.bl-ver .wordSearchBox form input::part(autofill) {
    background-color: var(--blue-light) !important;
} */
.finlifeNav .wordSearchBox .search-btn {
    width: 60px;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.finlifeNav .wordSearchBox .search-btn .search-icon {
    width: 20px;
    height: 20px;
    background-image: url(/res/svg/search_w.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.finlifeNav .wordSearchBox .resetBtn {
    background-image: url(/res/svg/reset_icon_w.svg);
    transition: all 0.3s ease;
    width: 0;
    overflow: hidden;
    height: 100%;
    background-size: 23px 23px;
    margin-left: 0;
}
/* .finlifeNav.bl-ver .wordSearchBox .search-btn .search-icon {
    background-image: url(/res/svg/search.svg);
}
.finlifeNav.bl-ver .wordSearchBox .resetBtn {
    background-image: url(/res/svg/reset_icon.svg);
} */
.finlifeNav .wordSearchBox .complete-form .search-btn {
    width: 0;
}
.finlifeNav .wordSearchBox .complete-form .resetBtn {
    width: 60px;
}
.finlifeNav .wordSearchBox .search-area .rateInfoBox {
    align-items: baseline;
    /* gap: 20px; */
    gap: 0;
    padding-right: 30px;
}
/* .finlifeNav .wordSearchBox .search-area.swiper-wrapper {
    flex-direction: unset;
} */
.finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide {
    justify-content: flex-end;
    /* position: absolute; */
    /* opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    transform: translateY(0); */
    transition: opacity 0.3s ease;
    opacity: 0;
}
/* .finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.swiper-slide-prev,
.finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.swiper-slide-next {
    opacity: 0;
} */
.finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.swiper-slide-active {
    opacity: 1;
} 
/* .finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.up-slide {
    animation: slideOutUp 0.5s forwards 4s;
}
@keyframes slideOutUp {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
} */
/* .finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: translateY(0);
}

.finlifeNav .wordSearchBox .search-area .rateInfoBox.swiper-slide.swiper-slide-out {
    opacity: 0;
    transform: translateY(-100%);
} */
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
    z-index: 1;
    word-break: keep-all;
    position: relative;
}
.finlifeNav .wordSearchBox .search-area .rateInfoBox .per,
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text.rate .per,
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text.year {
    position: relative;
    top: -2px;
}
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text.year {
    font-size: 15px;
    font-weight: 600;
    margin-right : 20px;
}
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text.rate {
    font-family: 'pt', 'sdgothicneo';
    font-size: 60px;
    position: relative;
}
.finlifeNav .wordSearchBox .search-area .rateInfoBox .per,
.finlifeNav .wordSearchBox .search-area .rateInfoBox .text.rate .per {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
    margin-left: 5px;
}
.finlifeNav .searchWordSlide {
    width: 100%;
    margin: unset;
}
.finlifeNav .wordSearchBox .recommendWord li {
    width: auto;
}

.finlifeNav .wordSearchBox .recommendWord .item {
    background-color: var(--blue);
    border: 1px solid var(--white);
    color: var(--white);
}
.finlifeNav .wordSearchBox .recommendWord li.on .item {
    color: var(--origin-black);
    background-color: var(--green-fin);
    border-color: var(--green-fin);
    font-weight: 700;
}
/* .finlifeNav.bl-ver .wordSearchBox .recommendWord li.on .item {
    color: var(--white);
    background-color: var(--blue);
} */
.finlifeNav .wordSlide li.calc img {
    height: 55%;
    right: 20px;
    bottom: 30px;
}
.finlifeNav .wordSlide li.deposit img {
    height: 50%;
    bottom: 30px;
}
.finlifeNav .wordSlide li.saving img {
    height: 55%;
    bottom: 30px;
}
.finlifeNav .wordSlide li img {
    height: 50%;
    bottom: 35px;   
}
.finlifeNav .wordSlide .description :where(.title, .sub, a .text) {
    color: var(--white) !important;
}
.finlifeNav .wordSlide .description a {
    border-color: var(--white);
    background-color: var(--white);
    min-width: 152px;
    width: auto;
    padding: 0 20px;
}
.finlifeNav .wordSlide .description a .text {
    color: var(--blue) !important;
}
/* .finlifeNav.bl-ver .wordSlide .description :where(.title, .sub) {
    color: var(--black) !important;
}
.finlifeNav.bl-ver .wordSlide .description a {
    border-color: var(--blue);
    min-width: 152px;
    width: auto;
    padding: 0 20px;
}
.finlifeNav.bl-ver .wordSlide .description a .text {
    color: var(--blue) !important;
} */
.finlifeNav .swiper-pagination.main {
    bottom: -20px;
    left: 0;
    width: 200px;
    text-align: left;
    padding: 0 20px;
}
.finlifeNav .finlifeNav-list {
    justify-content: center;
    width: 630px;
}
.finlifeNav .finlifeNav-wrap {
    /* gap: 30px; */
    width: 100%;
    justify-content: space-between;
}
.finlifeNav-list .item .itemLink {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:5px;
}
.fin-icon {
    /* width: 40px;
    height: 50px; */
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    font-size: 0;
}
.fin-icon.deposit {
    /* background-image: url(/res/svg/deposit1.svg); */
    background-image: url(/res/svg/finlife/fin_1.svg);
}
.fin-icon.saving {
    /* background-image: url(/res/svg/deposit2.svg); */
    background-image: url(/res/svg/finlife/fin_3.svg);
}
.fin-icon.annuity {
    /* background-image: url(/res/svg/deposit3.svg); */
    background-image: url(/res/svg/finlife/fin_4.svg);
}
.fin-icon.house {
    /* background-image: url(/res/svg/loan1.svg); */
    background-image: url(/res/svg/finlife/fin_5.svg);
}
.fin-icon.rent {
    /* background-image: url(/res/svg/loan2.svg); */
    background-image: url(/res/svg/finlife/fin_6.svg);
}
.fin-icon.credit {
    /* background-image: url(/res/svg/loan3.svg); */
    background-image: url(/res/svg/finlife/fin_7.svg);
}
.finlifeNav-list .item .itemLink .text {
    font-size: 12px;
    line-height: 1.33337;
    transition: all 0.3s ease;
}
.finlifeNav-list .item.on .itemLink .text {
    color: var(--blue);
}

.circle-space-box {
    border-radius: 50%;
    transform-origin: center center;
    display: flex;
    align-items: center;
    position: absolute;
    border: 5px solid #fcf1db;
    top: -2000px;
    left: -300px;
    height: 1900px;
    width: 1900px;
    transition: opacity 0.5s, transform 0.5s;
}
.circle-space-box .ball {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #fcf1db;
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(125%, -200%);
    animation: none;
}
/*************** 사각 막대 그래프 끝 ***************/




/*************** 최근 많이본 상품 리스트 핀라이프 시작 ***************/
._fbc .content-Section {
    margin-top: -0.25%;
}
.rank-section {
    background-color: var(--grey-f9);
    border-radius: 40px;
    padding: 50px;
}
.wrap-container.best-rank .rank-section {
    width: 100%;
    max-width: 1000px;
    background-color: var(--white);
    padding: 0;
}
._fin_main .wrap-container.best-rank .rank-section {
    /* margin-top: 30px; */
    margin-top: 50px;
}
.wrap-container.product-board {
    margin: 165px 0 100px 0;
}
.wrap-container.product-board .wrap-board {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 108px 30px;
}
.wrap-container.product-board .rank-section {
    /* max-width: 600px;
    min-width: 600px; */
    max-width: 565px;
    min-width: 565px;
    width: 100%;;
    position: relative;
}
.wrap-container.product-board .wrap-board:has(>.rank-section.hf_rank_week) {
    grid-template-columns: repeat(1,1fr);
}
.wrap-container.product-board .rank-section.hf_rank_week {
    max-width: 1160px;
}
.finlifeMove-btn {
    padding: 12px 18px;
    border-radius: 25px;
    border: 1px solid var(--grey);
    position: absolute;
    top: -58px;
    left: 28px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    
    transition: all 0.3s ease;
}
.finlifeMove-btn.js-observer {
    transform: unset;
    -webkit-transform: unset;
}
.finlifeMove-btn .r_a_icon {
    margin-left: 5px;
    width: 10px;
    height: 14px;
    background-image: url(/res/svg/rr_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.3s ease;
}
.rank-section .section_header {
    justify-content: center;
    align-items: center;
}
.rank-section.hf_rank_week .section_header {
    justify-content: center;
}
.wrap-container.product-board .rank-section .section_header {
    justify-content: space-between;
}
.rank-section .sectionTitle {
    font-size: 50px;
}
.wrap-container.product-board .rank-section .sectionTitle {
    font-size: 32px;
}
.Custom-select.hf_bank_week.active {
    border: 1px solid var(--blue);
    border-bottom: 1px solid var(--grey-ea);
    border-radius: unset;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.Custom-select.hf_bank_week .scroll {
    border: 1px solid var(--blue);
}
.Custom-select.hf_bank_week .title ion-icon {
    margin-left: 15px;
}
.Custom-select.hf_bank_week .title span,
.Custom-select.hf_bank_week .scroll span {
    font-size: 14px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 500;
}
.rank-section .section_header .date {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: var(--grey);
}
.wrap-container .section_body {
    margin-top: 50px;
}
.fin-product-list {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
}
.rank-section.hf_rank_week .fin-product-list {
    grid-template-columns: repeat(2,1fr);
    gap: 30px 50px
}
.fin-product-list.recent {
    place-items: center;
}
.fin-product-list li {
    width: 100%;
}
.fin-product-list > li {
    height: 112px;
    align-items: flex-start;
    position: relative;
}
.fin-product-list > .item:not(.best-box) .itemLink{
    display: grid;
    width: 100%;
    grid-template-columns: 80px 1fr 80px;
    gap: 5px;
    border-radius: 75px;
    z-index: 3;
}
._fin_main .fin-product-list > .item:not(.best-box) .itemLink {
    gap: 20px;
}
.fin-product-list.recent > .item:not(.best-box) {
    width: 60%;
}
.fin-product-list .num {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'pt','SDGothicNeo';
    font-size: 25px;
    font-weight: 700;
}
._fin_main .fin-product-list .num {
    width: 80px;
    height: 80px;
}
.fin-product-list.recent > .item:not(.best-box) .num {
    background-color: var(--grey-f9);
    color: var(--grey-bb);
}
.fin-product-list > .item:not(.best-box) .description {
    display: grid;
    grid-template-areas: 'fin_name fin_name fin_name fin_name fin_rate'
                        'fin_con fin_con fin_con fin_con fin_con';
    gap: 5px;
}
.fin-product-list > .item:not(.best-box) .description .name_box {
    grid-area: fin_name;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
._fin_main .fin-product-list > .item:not(.best-box) .description,
._fin_main .fin-product-list > .item:not(.best-box) .description .name_box {
    gap: 10px;
}
.fin-product-list > .item:not(.best-box) .description .rate {
    grid-area: fin_rate;
    justify-content: flex-end;
    align-items: flex-end;
    font-family: 'pt','SDGothicNeo';
    /* position: relative;
    top: -2px; */
}
.fin-product-list > .item:not(.best-box) .description .condition {
    grid-area: fin_con;
    gap: 10px;
}
.fin-product-list.des_gap5 > .item:not(.best-box) .description .condition {
    gap: 5px;
}
.fin-product-list > .item:not(.best-box) .name_box,
.fin-product-list > .item:not(.best-box) .name_box div,
.fin-product-list > .item:not(.best-box) .description .rate div:not(.per),
.best-list .item .description .name_box,
.best-list .item .description .name_box div,
.best-list .item .description .rate div:not(.per) {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
}
.fin-product-list > .item:not(.best-box) .description .rate div:not(.per),
.best-list .item .description .rate div:not(.per) {
    font-family: 'pt','SDGothicNeo';
    line-height: 1.1;
}
.fin-product-list > .item:not(.best-box) .name_box .p_name,
.best-list .item .description .name_box .p_name {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.69;
    letter-spacing: -0.42px;
    color: var(--grey);
}
.fin-product-list > .item:not(.best-box) .description .per,
.best-list .item .description .per {
    font-size: 12px;
    font-weight: 700;
}
.fin-product-list > .item:not(.best-box) .description .condition .d_item{
    border-radius: 25px;
    padding: 5px 12px;
    background-color: var(--grey-f5);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.005em;
    color: var(--grey);
}
.fin-product-list:not(.recent) > .item:not(.best-box) .description .condition .d_item {
    background-color: var(--white);
}
.fin-product-list > li.item:not(.best-box):where(.first, .second, .third) .description .condition .d_item {
    color: var(--black);
}
.fin-product-list:not(.recent) > li.item:not(.first):not(.second):not(.third) .num {
    color: var(--grey-bb);
}
.fin-product-list .logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.fin-product-list .logo img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--grey-f9);
}
._fin_main .fin-product-list .logo img {
    width: 80px;
    height: 80px;
}
.fin-product-list > .best-box {
    height: auto;
    background-color: var(--white);
    /* padding: 50px 50px 80px 50px; */
    padding: 20px 50px 80px 50px;
}
/* .js-observer{
    will-change: transform;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
} */
.fin-product-list .backdrop-item {
    display: none;
}
.best-list {
    width: 100%;
    height: 509px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.best-list .first {
    order: 2;
    margin-top: -25px;
}
.best-list .second {
    order: 1;
    margin-top: 70px;
}
.best-list .third {
    order: 3;
    margin-top: 70px;
}
.best-list .itemLink {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    padding: 30px 0;
}
.best-list li.item .logo {
    order: 1;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}
.best-list li.item.first .logo {
    background: 
        radial-gradient(white 60%, transparent 0),
        linear-gradient(to top, #f06352, #f17a5a, #f5a69b);
}
.best-list li.item.second .logo {
    background: 
        radial-gradient(white 60%, transparent 0),
        linear-gradient(to top, #f0b74c, #f0b967, #f0ce7f);
}
.best-list li.item.third .logo {
    background: 
        radial-gradient(white 60%, transparent 0),
        linear-gradient(to top, #3cb6cb, #4ab7ca, #7dbbc4);
}
.best-list li.item .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(43%);
}
.best-list .item .logo img {
    width: 150px;
    height: 150px;
}
.best-list .item .num {
    order: 2;
    position: relative;
    background-color: transparent !important;
    width: 64px;
    height: 64px;
    color: var(--white);
}
.ribbon-box {
    position: absolute;
    top: 140px;
}
.ribbon-box .ribbon-line {
    position: absolute;
}
.fin-product-list:not(.recent) .item.first .num {
    color: #f06352;
}
.fin-product-list:not(.recent) .item.second .num {
    color: #f0b74c;
}
.fin-product-list:not(.recent) .item.third .num {
    color: #3cb6cb;
}
.best-list .item .description {
    order: 3;
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 10px;
    margin-top: 22px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    position: relative;
}
.best-list .item .description::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 25px;
    box-shadow: 0 50px 13px rgba(0, 0, 0, .05);
    background-color: transparent;
    border-radius: 50%;
}
.best-list .item .description .name_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}
.best-list .item .description .name_box .name,
.best-list .item .description .name_box .p_name,
.fin-product-list > li.item:not(.best-box) .name_box .name,
.fin-product-list > li.item:not(.best-box) .name_box .p_name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}
.best-list .item .description .rate,
.best-list .item .description .condition {
    justify-content: center;
}
.best-list .item .description .condition {
    gap: 5px;
}
.best-list .item .description .condition .d_item {
    border-radius: 25px;
    padding: 7px 14px;
    background-color: var(--grey-f5);
    color: vaR(--black);
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.005em;
}


.logoSlide {
    overflow: hidden;
    width: var(--marquee-width);
    padding: 150px 0 50px 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 180px;
    opacity: 0;
    transition: opacity 1s;
}
.logoSlide::before,
.logoSlide::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 1%; 
    z-index: 10;
}

.logoSlide::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.logoSlide::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.logoSlide .logoSlide-list {
    height: 120px;
    display: flex;
    -webkit-transition-timing-function:linear!important;
    transition-timing-function:linear!important; 
    position: relative;
}
.logoSlide .logoSlide-item {
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 25px;
    width: auto;
    height: 100%;
    transition: all ease 0.5s;
}
.logoSlide .item:nth-child(odd) {
    transform: translateY(-40px);
}
.logoSlide .item img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--grey-f9);
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
}
.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
/*************** 최근 많이본 상품 리스트 핀라이프 끝 ***************/



/*************** 핀라이프 상품별 리스트 페이지 시작 ***************/
.w-small {
    max-width: 780px;
}
.finlife-section.search {
    z-index: 1;
    margin-top: 30px;
    position: relative;
}
.finlife-section.search .section_header {
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 30px;
}
.finlife-section.search .section_header .sectionTitle {
    font-size: 22px;
    line-height: 0.82;
    z-index: unset;
}
.finlife-section.search .section_header .product-count {
    font-size: 14px;
    font-weight: 700;
}
.finlife-section.search .section_header .product-count .num {
    font-family: 'pt','SDGothicNeo';
    color: var(--blue);
    font-weight: 700;
}
.fin-searchBox-list {
    gap: 10px;
}
.fin-searchBox-list > .item:not(.sort) {
    justify-content: center;
    column-gap: 6px;
    border-radius: 12px;
    padding: 8px 12px;
    background-color: var(--grey-ed);
    color: var(--black);
    cursor: pointer;
    height: 36px;
}
.fin-searchBox-list > .item.sort {
    margin-left: auto;
}
.fin-searchBox-list .item .text {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.005em;
    font-weight: 700;
    color: var(--black);
}
.fin-searchBox-list .item .condi-count,
.annuity-count {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: -.005em;
    padding-left: 4px;
    padding-right: 4px;
    background-color: var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    font-family: 'pt','SDGothicNeo';
    color: var(--white);
    min-width: 20px;
}
.wrap-filter {
    /* position: absolute; */
    bottom: 0;
    position: fixed;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-content: center;
    background-color: var(--white);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.finlife-section.search.open .wrap-filter {
    height: var(--wrap-filter-height);
    padding: 0;
    visibility: visible;
    grid-template-rows: 50px auto;
    overflow: unset;
    transition: height 0.3s ease;
}
.view-backgroud {
    background: rgba(232,232,237,.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    visibility: hidden;
    position: fixed;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: opacity .32s cubic-bezier(.4,0,.6,1) ,visibility .32s;
}
.finlife-section.search.open .view-backgroud {
    opacity: 1;
    visibility: visible;
    transition: opacity .32s cubic-bezier(.4,0,.6,1) ,visibility .32s;
}
.filter-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    background-color: var(--white);
    width: 100%;
    height: 50px;
    z-index: 2;
}
.filter-top .close-filter {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    background-color: var(--blue-light);
    width: 21%;
    height: 30px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.filter-top .close-filter .trt  {
    width: 35px;
    height: 35px;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.filter-top .close-filter .trt::before  {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    border-radius: 50%;
}
.filter-top .close-filter .trt.rt {
    left: -25px;
}
.filter-top .close-filter .trt.lt {
    right: -25px;
}
.filter-top .close-filter .trt.rt::before {
    top: 0;
    right: 0;
    box-shadow: 25px -56px 0 0 var(--blue-light);
}
.filter-top .close-filter .trt.lt::before {
    top: 0;
    left: 0;
    box-shadow: -25px -56px 0 0 var(--blue-light);
}
.finlife-section.search.open .arrow {
    width: 12px;
    height: 8px;
    display: inline-block;
    background-image: url(/res/svg/blue_dn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    transition: all ease 0.3s;
}
.filter-top .close-filter .arrow  {
    transform: rotate(0deg);
}
.finlife-section.search.open .wrap-filter form {
    max-width:1160px;                                                                                                      
    min-width: 1160px;
    width: 100%;
    z-index: 1;
    height: 100%;
    overflow-y: scroll;
}
.finlife-section.search.open .wrap-filter form{
    -ms-overflow-style: none;
}
.finlife-section.search.open .wrap-filter form::-webkit-scrollbar{
    display:none;
}
.fin-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 55px;
}
.fin-filter .field {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.fin-filter .field .key {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 800;
}
.fin-filter .field .val {
    gap: 8px;
    flex-wrap: wrap;
}
.fin-filter .field .checkbox {
    width: auto;
    height: auto;
    flex: unset;
    animation: unset;
}
.fin-filter .field .checkbox .check_wrap {
    border-radius: 12px;
    padding: 8px 12px;
    background-color: var(--grey-fa);
}
.fin-filter .field.bank_group .checkbox .check_wrap:has(>input:checked) {
    background-color: transparent;
}
.fin-filter .field.bank_group .checkbox .check_wrap::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -20px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 25px;
    z-index: -1;
    transition: all 0.3s ease;
}
.fin-filter .field.bank_group .checkbox .check_wrap:has(>input:checked)::after {
    width: 100%;
    height: 130px;
    background-color: var(--blue-light);
}
.fin-filter .field:not(.bank_group) .checkbox .check_wrap:has(>input:checked) {
    background-color: var(--blue-light);
}
.fin-filter .field .checkbox input:checked ~ .text {
    color: var(--blue);
}
.fin-filter .field.bank_group .checkbox svg {
    position: absolute;
    top: -5px;
    right: 10px;
    z-index: 1;
}
.st1 {
    fill: none;
    stroke: transparent;
    stroke-width: 6px;
    stroke-miterlimit: 10;
    stroke-dashoffset: 0;
    stroke-dasharray: 60;
    stroke-linecap: round;
}
.fin-filter .field.bank_group .checkbox input:checked ~ svg .st1 {
    animation: dash 0.3s 0.3s linear forwards;
}
@keyframes dash {
    from {
        stroke: transparent; 
        stroke-dashoffset: 60;
    }
    to {
        stroke: var(--blue); 
        stroke-dashoffset: 0;
    }
}
.fin-filter .field .checkbox .check_wrap .text,
.fin-filter .field .groupMoveBtn {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.005em;
    font-weight: 700;
}
.fin-filter .field .bankgroup-list .checkbox .check_wrap .text {
    font-size: 14px;
    font-weight: 600;
}
.fin-filter .field .groupMoveBtn {
    cursor: pointer;
    border-radius: 12px;
    padding: 6px 16px;
    background-color: var(--grey-fa);
    color: var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.fin-filter .field .groupMoveBtn.on {
    background-color: var(--blue-light);
    color: var(--blue);
}
.bankgroup-list {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 40px 10px;
    width: 100%;
}
.bankgroup-list .bank-item {
    width: 100%; 
    height: 100px;
    position: relative;
}
.bankgroup-list .bank-title {
    display: block;
    grid-column: span 6;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 800;
    margin-bottom: 10px;
}
.bankgroup-list .bank-item .checkbox {
    width: 100%;
    height: 100%;

}
.bankgroup-list .bank-item .checkbox .check_wrap {
    flex-direction: column;
    border-radius: 50%;
    padding: 0;
    gap: 10px;
    background-color: unset;
    position: relative;
}
.bankgroup-list .bank-item .check_wrap img {
    width: 60px;
    height: 60px;
    background-color: var(--grey-f9);
    border-radius: 50%;
}
.bankgroup-list .bank-item .check_wrap .text {
    margin-right: 0;
}
.finlife-section.search.open .wrap-filter form .btn-box {
    position: sticky;
    width: 100%;
    bottom: 0;
    height: 80px;
    background-color: var(--white);
    display: flex;
    align-items: flex-end;
    gap:  10px;
    padding: 0 20px 10px 20px;
    margin-top: 20px;
    z-index: 1;
}
.finlife-section.search.open .wrap-filter form .btn-box button {
    flex: 1;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.005em;
    position: relative;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    border: none;
}
.finlife-section.search.open .wrap-filter form .btn-box .filter-reset {
    text-align: center;
    background-color: transparent;
    color: var(--grey-ed);
    pointer-events: none;
    transition: all 0.3s ease;
}
.finlife-section.search.open .wrap-filter form .btn-box .filter-reset.on {
    color: var(--blue);
    pointer-events: auto;
}
.finlife-section.search.open .wrap-filter form .btn-box .filter-count {
    background-color: var(--blue);
    color: var(--white);
}
.finlife-section.search.open .wrap-filter form .btn-box .filter-count .count {
    margin-right: 5px;
    color: var(--white);
    font-family: 'pt','SDGothicNeo';
}
.finlife-section.search .sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(20px);
}
.sort-svg {
    transform: translate(0,0px) rotate(90deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
.sort-svg path {
    fill: var(--grey-d3);
}
.finlife-section.list-section .section_header form {
    width: 100%;
}
.fin-sort-list {
    gap: 10px;
    width: 100%;
}
.fin-sort-list label.checkbox {
    padding-left: 0;
}
.fin-sort-list label.checkbox .text,
.fin-sort-list .item.none_check .text {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -.005em;
    color: var(--grey-d3);
}
.fin-sort-list label.checkbox input:checked ~ .text {
    color: var(--black);
}
.fin-sort-list .item.none_check {
    pointer-events: none;
    margin-left: auto;
    margin-right: 10px;
}
.finlife-checklist {
    margin-top: 0;
}
.finlife-checklist:has(>.noneItem) {
    margin-top: 30px;
}
.finlife-checklist .item {
    gap: 30px;
    position: relative;
}
.finlife-checklist .item:not(:last-child)::after {
    content: '';
    width: calc(100% - 180px);
    height: 1px;
    background-color: var(--grey-ea);
    position: absolute;
    bottom: 0;
    left: 100px;
}
.finlife-checklist .targetLink {
    width: 100%;
    flex: 1;
    gap: 30px;
    padding: 40px 0;
}
.finlife-checklist .check-area {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.finlife-checklist .check-area .checkbox {
    width: 100%;
    height: 100%;
    padding: 0;
}
.finlife-checklist .check-area .checkbox .checkmark {
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px var(--grey-ed);
    background-color: var(--grey-ed);
}
.finlife-checklist .check-area .checkbox input:checked~.checkmark {
    background-color: var(--blue);
    border-color: var(--blue);
}
.finlife-checklist .check-area .checkbox .checkmark::after {
    left: 9px;
    top: 5px;
    width: 3px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
}
.finlife-checklist .img-box img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--grey-f5);
}
.finlife-checklist .description {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.finlife-checklist .name-box,
.finlife-checklist .info-box,
.finlife-checklist .description {
    gap:10px;
}
.finlife-checklist.line3 .description .name-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}
.finlife-checklist .name-box .bank,
.detail-diff-list .item .name .bank {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}
.finlife-checklist .name-box .product,
.detail-diff-list .item .name .product {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.69;
    letter-spacing: -0.42px;
    color: var(--grey);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.finlife-checklist .info-box .i-item {
    border-radius: 25px;
    padding: 5px 12px;
    background-color: var(--grey-f2);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.005em;
    color: var(--grey);
}
.finlife-checklist .rate-box span {
    font-family: 'pt','SDGothicNeo';
    font-weight: 700;
}
.finlife-checklist .rate-box .num {
    font-size: 22px;
}
.finlife-checklist .rate-box :where(.dash, .per) {
    font-size: 14px;
}
.finlife-checklist .rate-box .dash {
    margin: 0 5px;
}
._fin #pagination li a.active,
._fin #pagination li a:hover,
._fin #pagination li a:hover ion-icon,
._ecos #pagination li a.active,
._ecos #pagination li a:hover,
._ecos #pagination li a:hover ion-icon {
    background-color: var(--blue);
}
.diff_viewer {
    width: 600px;
    position: fixed;
    z-index: 2;
    bottom: -100vh;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    transition: all 0.3s ease;
    background-color: var(--white);
    border-top-right-radius: 35px;
    border-top-left-radius: 35px;
    padding: 50px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.diff_viewer:has(>.wrap-diff.on) {
    bottom: 0;
    visibility: visible;
}
.diff_viewer:has(>.wrap-diff.on.fold) {
    bottom: -361px;
}
.diff_viewer:has(>.wrap-diff.on.fold.z-down) {
    z-index: 0;
}
.wrap-diff {
    gap: 30px;
}
.wrap-diff .foldBtn {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    background-color: var(--blue-light);
    width: 40%;
    height: 30px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.wrap-diff.fold .foldBtn {
    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
}
.wrap-diff .foldBtn .trt  {
    width: 35px;
    height: 35px;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.wrap-diff .foldBtn .trt::before  {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    border-radius: 50%;
}
.wrap-diff .foldBtn .trt.rt {
    left: -25px;
}
.wrap-diff .foldBtn .trt.lt {
    right: -25px;
}
.wrap-diff .foldBtn .trt.rt::before {
    top: 0;
    right: 0;
    box-shadow: 25px -56px 0 0 var(--blue-light);
}
.wrap-diff .foldBtn .trt.lt::before {
    top: 0;
    left: 0;
    box-shadow: -25px -56px 0 0 var(--blue-light);
}
.wrap-diff .foldBtn .arrow {
    width: 12px;
    height: 8px;
    display: inline-block;
    background-image: url(/res/svg/blue_dn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    transition: all ease 0.3s;
}
.wrap-diff.fold .foldBtn .arrow  {
    transform: rotate(0deg);
}
.wrap-diff .title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrap-diff .title .close {
    width: 50px;
    height: 50px;
    background-image: url(/res/svg/m_menu_x.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    margin-left: auto;
}
.diff-list {
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
}
.diff-list .item {
    justify-content: center;
    position: relative;
}
.diff-list .item-del {
    font-size: 0;
    width: 25px;
    height: 25px;
    background-image: url(/res/svg/m_menu_x.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    border-radius: 50%;
    border: 1px solid var(--grey-ea);
    background-color: var(--white);
    position: absolute;
    top: 3px;
    right: 70px;
}
.diff-list .item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:15px;
}
.diff-list .item-link img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--grey-f9);
}
.diff-list .name {
    font-size: 16px;
    font-weight: 700;
}
.wrap-diff .diffBtn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.005em;
    position: relative;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    border: none;
    color: var(--white);
    background-color: var(--blue);
}
.diff-popup {
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    border-radius: 35px;
    box-shadow: 0px 4px 16px 0 rgba(0, 65, 57, 0.08);
    background-color: var(--white);
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    bottom: -100vh;
    transition: all 0.5s cubic-bezier(0.165, 0.85, 0.44, 1);
}
.diff-popup.on {
    width: 800px;
    visibility: visible;
    height: auto;
    overflow: unset;
    padding: 50px 0;
    max-height: 100vh;
    transform: scale(0);
    /* bottom: 50%;
    transform: translateY(50%) scale(0); */
}
.diff-popup.on.view {
    bottom: 50%;
    transform: translateY(50%) scale(1);
    padding: 50px 90px;
}
.diff-popup .layer_header {
    text-align: center;
}
#Layer .diff-popup .layer_header.non_top {
    border-bottom: none;
}
.diff-popup .layer_header .text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.84px;
    white-space: nowrap;
}
#Layer .diff-popup .layer_body {
    margin-top: 50px;
    overflow-y: auto;
    padding-right: 10px;
}
.detail-diff-list {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    position: relative;
}
.detail-diff-list .item {
    flex-direction: column;
    flex: 1;
    gap: 20px;
    position: relative;
}
.detail-diff-list .item .item-link {
    z-index: 2;
    width: 100%;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.detail-diff-list .item .logo img {
    background-color: var(--grey-f9);
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.detail-diff-list .item .name {
    flex-direction: column;
    gap: 5px;
}
.detail-diff-list .item:first-child {
    align-items: flex-end;
}
.detail-diff-list .item:last-child {
    align-items: flex-start;
}
.detail-diff-list .item.mid {
    width: 120px;
    z-index: 1;
    padding-bottom: 15px;
    position: relative;
}
.detail-diff-list .item.mid::before,
.detail-diff-list .item.mid::after {
    content: '';
    position: absolute;
    bottom: 13px;
    right: 0;
    width: 20px;
    height: calc(100% - 190px);
    background-color: var(--white);
}
.detail-diff-list .item.mid::after {
    left: 0;
    right: unset;
}
.detail-diff-list .item.graph_1::after,
.detail-diff-list .item.graph_2::after{
    content: '';
    position: absolute;
    bottom: 0px;
    right: -20px;
    width: 20px; 
    height: calc(100% - 175px);
    box-shadow: -10px 0 7px -7px rgba(0, 0, 0, 0.55);
    border-radius: 100%;
}
.detail-diff-list .item.graph_2::after {
    left: -20px;
    box-shadow: 10px 0 7px -7px rgba(0, 0, 0, 0.55);
}
.detail-diff-list .item.mid .title {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65px;
    font-weight: 700;    
    position: relative;
}
.detail-diff-list .item > div:not(.logo):not(.title) {
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}
.detail-diff-list .item.mid > div:not(.title) {
    font-size: 12px;
    font-weight: 500;
    color: var(--grey);
    z-index: 1;
}
.detail-diff-list .item.mid > div:not(.title) span {
    font-weight: 500;
    color: var(--grey);
}
.detail-diff-list .item > div {
    width: 100%;
    justify-content: center;
}
.detail-diff-list .item .wrap-bar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.detail-diff-list .item:first-child .wrap-bar,
.detail-diff-list .item:first-child .wrap-bar .status-bar {
    justify-content: flex-end;
}
.detail-diff-list .item:last-child .wrap-bar,
.detail-diff-list .item:last-child .wrap-bar .status-bar {
    justify-content: flex-start;
}
.detail-diff-list .item .wrap-bar .status-bar {
    height: 100%;
    width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: all 0.6s ease;
}
.detail-diff-list .item:first-child .wrap-bar .status-bar {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.detail-diff-list .item:last-child .wrap-bar .status-bar {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.detail-diff-list .item:first-child .wrap-bar .status-bar .text {
    margin-right: 20px;
}
.detail-diff-list .item:last-child .wrap-bar .status-bar .text {
    margin-left: 20px;
}
.detail-diff-list .item:first-child .wrap-bar .status-bar .trm {
    margin-right: auto;
    margin-left: 15px;
}
.detail-diff-list .item:last-child .wrap-bar .status-bar .trm {
    margin-left: auto;
    margin-right: 15px;
}
.detail-diff-list .item:first-child .wrap-bar .status-bar.down {
    background: linear-gradient(90deg, var(--blue-graph), var(--blue));
}
.detail-diff-list .item:first-child .wrap-bar .status-bar.up {
    background: linear-gradient(90deg, var(--red2-graph), var(--red2));
}
.detail-diff-list .item:first-child .wrap-bar .status-bar.same {
    background: linear-gradient(90deg, var(--red2-graph), var(--red2));
}
.detail-diff-list .item:last-child .wrap-bar .status-bar.up {
    background: linear-gradient(-90deg, var(--red2-graph), var(--red2));
}
.detail-diff-list .item:last-child .wrap-bar .status-bar.down {
    background: linear-gradient(-90deg, var(--blue-graph), var(--blue));
}
.detail-diff-list .item:last-child .wrap-bar .status-bar.same {
    background: linear-gradient(-90deg, var(--red2-graph), var(--red2));
}
.detail-diff-list .item .wrap-bar .status-bar .text {
    font-family: 'pt','SDGothicNeo';
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}
.detail-diff-list .item .wrap-bar .status-bar .trm {
    font-family: 'pt','SDGothicNeo';
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}
.detail-diff-list .item .info {
    gap: 5px;
}
.detail-diff-list .item:first-child .info {
    justify-content: flex-end;
    margin-right: 15px;
}
.detail-diff-list .item:last-child .info {
    justify-content: flex-start;
    margin-left: 15px;
}
.detail-diff-list .item .i-item {
    border-radius: 25px;
    padding: 5px 12px;
    background-color: var(--grey-f2);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.005em;
    color: var(--grey);
    margin-bottom: 10px;
}

/*************** 핀라이프 상품별 리스트 이지 끝 ***************/




/*************** 핀라이프 뷰페이지 시작 ***************/
.fe-navi-box {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 30px 0;
    position: relative;
}
.fe-navi-box .fePrevBtn {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    background-color: transparent;
}
.fe-navi-box .fePrevBtn[data-action="prev"] {
    justify-content: flex-start;
}
.fe-navi-box .fePrevBtn[data-action="home"] {
    justify-content: flex-end;
}
.fe-navi-box .fePrevBtn span {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 23px;
    height: 23px;
}
.fe-navi-box .fePrevBtn .fePrevIcon {
    background-image: url(/res/svg/fe_prev.svg);
    background-size: contain;
}
.fe-navi-box .fePrevBtn .feHomeIcon {
    background-image: url(/res/svg/fe_home.svg);
    background-size: contain;
}
.feViewSection {
    width: 100%;
}
.feViewSection.js-finlife_fullmode {
    padding-top: 100px;
}
.feViewSection.js-finlife_fullmode.hf-modify {
    padding: 0;
}
.feViewSection .section_header .type-title {
    padding-bottom: 30px;
    font-size: 28px;
    font-weight: 400;
    border-bottom: 1px solid var(--grey-ea);
}
.feViewSection .topInfoBox {
    width: 100%;
    padding: 50px 0;
    flex-direction: column;
    align-items: flex-start;
    gap : 140px;
    border-bottom: 1px solid var(--grey-ea);
}
.feViewSection .topInfoBox .top {
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.feViewSection .topInfoBox .top .logo {
    min-width: 80px;
    max-width: 80px;
}
.feViewSection .topInfoBox .top .logo img {
    width: 80px;
    height: 80px;
    background-color: var(--grey-f9);
    border-radius: 50%;
}
.feViewSection .topInfoBox .top .nameBox {
    width: 45%;
}
.feViewSection[data-type="annuity"] .topInfoBox .top .nameBox {
    width: 77%;
}
.feViewSection .topInfoBox .top .nameBox .bname {
    font-size: 32px;
    color: var(--black);
    font-weight: 800;
    line-height: 1.31;
}
.feViewSection .topInfoBox .top .nameBox .pname {
    font-size: 32px;
    color: var(--black);
    line-height: 1.31;
    font-weight: 400;
}
.feViewSection .topInfoBox .rateBox {
    margin-left: auto;
}
.feViewSection[data-type="annuity"] .topInfoBox .rateBox {
    margin-bottom: -7px;
}
.feViewSection .topInfoBox .rateBox .text,
.topInfoBox .bottom .item .key,
.topInfoBox .bottom .item .key span {
    font-weight: 600;
    font-size: 14px;
    color: var(--blue-light-deep);
}
.feViewSection .topInfoBox .rateBox .content,
.feViewSection .topInfoBox .rateBox .content .per  {
    font-size: 60px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--blue);
    font-family: 'pt','SDGothicNeo';
}
.feViewSection .topInfoBox .rateBox .content .per {
    font-size: 40px;
}
.topInfoBox .bottom .item:not(:last-child) {
    border-right: 1px solid var(--grey-ea);
}
.topInfoBox .bottom {
    width: 100%;
    align-items: flex-start;
}
.feViewSection[data-type="annuity"] .topInfoBox .bottom {
    align-items: flex-end;
}
.topInfoBox .bottom .item {
    flex-direction: column;
    padding: 0 20px;
    gap: 10px;
    align-items: flex-start;
    height: 100%;
}
.topInfoBox .bottom .item:first-child {
    padding: 0 20px 0 0;
}
.topInfoBox .bottom .item:last-child {
    padding: 0 0 0 20px;
}
.topInfoBox .bottom .item .val {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.2;
}
.feViewSection .section_body {
    margin-top: 0;
    padding: 0 0 50px 0;
}
.feViewSection:where([data-type="hf_ddd"], [data-type="hf_safe_house"]) .section_body {
    padding: 100px 0 50px 0;
}
.feViewSection.hf-modify:where([data-type="hf_ddd"], [data-type="hf_safe_house"]) .section_body {
    padding: 30px 0 50px 0;
}
.feViewSection.hf-modify:where([data-type="hf_ddd"]) .chart-scrollWrap {
    margin-bottom: 80px;
}
.simulationTitle {
    line-height: 1.33;
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
}
.simulation-wrap {
    padding: 70px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 75px;
}
.simulationIcon {
    width: 130px;
    height: 130px;
    background-image: url(/res/image/wiki/og/8.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: -25px;
}
.simulation-wrap .priceViewBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.simulation-wrap .priceViewBox .wrap {
    display: flex;
    align-items: flex-end;
}
.simulation-wrap .priceViewBox .simulationPrice {
    font-family: 'pt','SDGothicNeo';
    font-size: 20px;
    font-weight: 600;
    line-height: 0.6;
    transition: all 0.3s ease;
}
.simulation-wrap .priceViewBox :where(.won, .text) {
    font-size: 20px;
    font-weight: 700;
}
.simulation-wrap .priceViewBox .text {
    margin-left: 10px;
    font-size: 20px;
    margin-bottom: -3px;
}
.simulation-wrap .priceViewBox .won {
    margin-bottom: -3px;
}
.simulation-wrap .priceViewBox .wrap.rate div {
    color: var(--blue);
}
.simulation-wrap .priceViewBox .wrap.rate .text {
    margin-left: 0;
    margin-right: 10px;
    
}
.simulation-wrap .slideContainer input {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--blue) 0%, var(--blue) 0%, var(--blue-light-deep) 0%, var(--blue-light-deep) 100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.slideContainer input::-webkit-slider-thumb {
    border: solid 1px var(--blue);
}
.slideContainer input::-moz-range-thumb {
    border: solid 1px var(--blue);
}
.slideContainer input[type=range]:focus::-ms-fill-lower {
    background: var(--blue);
}
.simulation-wrap .tickmarks :where(div, span) {
    color: var(--blue-light-deep);
}
.feViewSection[data-type="house"] .simulation-wrap .tickmarks :where(div, span) {
    font-size: 13px;
}
.simulation-wrap .min_rate_info span {
    line-height: 1.43;
    color: var(--grey);
    font-size: 14px;
}
.simulation-wrap .min_rate_info .min_rate {
    margin-left: 5px;
}
.simulation-wrap .min_rate_info .per {
    margin-right: 5px;
}
.simulation-adbox {
    flex-direction: column;
    justify-content: center;
    margin: 100px 0;
}
.simulation-adbox .ad_icon {
    width: 130px;
    height: 130px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.simulation-adbox .ad_icon.limit {
    background-image: url(/res/image/wiki/og/42.png);
}
.simulation-adbox :where(.m_ment, .price) {
    line-height: 1.35;
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
}
.simulation-adbox .s_ment {
    margin-top: 6px;
    line-height: 1.43;
    color: var(--grey);
    font-size: 14px;
    text-align: center;
    width: 230px;
    display: flex;
    justify-content: center;
}
.simulationContainer,
.multi-container,
.card-field {
    position: relative;
}
.simulType {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
}
.simulationContainer .update-date,
.card-field .update-date {
    position: absolute;
    top: 25px;
    right: 0;
    font-size: 12px;
    color: var(--grey);
}
.feTable-list {
    width: 100%;
    border: 1px solid var(--grey-ea);
    margin-bottom: 100px;
}
.feViewSection.hf-modify:where([data-type="hf_ddd"]) .feTable-list {
    margin-bottom: 0;
}
.feTable-list.head_left {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 30px;
}
.feTable-list .item {
    width: 100%;
    min-height: 50px;
    height: 100%;
    display: grid;
    grid-template-columns: 150px auto;
}
.feTable-list .item:not(:last-child) {
    border-bottom: 1px solid var(--grey-ea);
}
.feTable-list .item.head,
.feTable-list.head_left .key {
    background-color: var(--blue-light);
}
.feTable-list .item.head > div,
.feTable-list.head_left .key span {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}
.feTable-list .item > div {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feTable-list.head_left .key {
    width: 150px;
    flex: unset;
}
.feTable-list .item > div:not(:last-child) {
    border-right: 1px solid var(--grey-ea);
}
.feTable-list.head_left .val {
    padding: 10px 20px;
    justify-content: flex-start;
}
.feTable-list .item:not(.head) .num,
.feTable-list .item .v_text,
.feTable-list .item .text {
    font-family: 'pt','SDGothicNeo';
    color: var(--grey);
}
.feTable-list .item .text {
    margin-left: 5px;
}
.feTable-list .item .per {
    color: var(--grey);
}
.feViewSection[data-type="hf_bank"] .simulationContainer {
    padding: 100px 0 0 0;
}
.simulationContainer .sort-area {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}
.simulationContainer .sort-area .update-box {
    position: unset;
    top: unset;
    right: unset;
}
.simulationContainer .chart-box {
    padding: 100px 0 50px 0;
    position: relative;
}
.simulationContainer .chart-box canvas {
    width: 100%;
    /* max-height: 450px; */
}
.simulationContainer .chart-box .line {
    fill: none;
    stroke-width: 2;
}
.update-box {
    position: absolute;
    right: 0;
    top: 101px;
    gap: 10px;
}
.update-box .btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
    /* background-color: var(--grey-f9); */
    transition: all 0.3s ease;
}
.update-box .text {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
}
.update-box .box-btn {
    width: 40px;
    height: 30px;
    background-color: var(--grey-f9);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.update-box .box-btn.on {
    background-color: var(--blue);
    color: var(--white);
}
.infoTable-list {
    border-bottom: 1px solid var(--grey-ea);
}
.infoTable-list > .item {
    flex-direction: column;
    border-top: 1px solid var(--grey-ea);
}
.infoTable-list > .item > div {
    width: 100%;
}
.infoTable-list > .item .title-area {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.infoTable-list > .item .title-area .title {
    font-size: 16px;
    font-weight: 700;
    margin-right: auto;
}
.infoTable-list > .item .title-area svg {
    transition: all 0.3s ease;
    transform: rotate(0deg);
}
.infoTable-list > .item.on .title-area svg {
    transform: rotate(180deg);
}
.infoTable-list > .item .title-area svg path {
    color: var(--grey-ea);
    transition: all 0.3s ease;
}
.infoTable-list > .item.on .title-area svg path {
    color: var(--black);
}
.infoTable-list > .item .content-area {
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
}
.infoContent-list {
    padding: 20px 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/* .rank-section.infoContent-list {
    padding: 30px 20px 0 20px;
    border-radius: 0;
    background-color: var(--white);
}
.rank-section.infoContent-list .num {
    background-color: var(--grey-f9);
}
.rank-section.infoContent-list .item .description .condition .d_item {
    background-color: var(--grey-f5) !important;
} */
.infoContent-list .i-item:last-child .i-item-list {
    padding-bottom: 30px;
}
.infoContent-list .i-item-list {
    list-style-type: disc;
    padding-left: 20px;
}
.infoContent-list .i-item-list .title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    text-indent: -20px;
}
.infoContent-list .i-item-list dd,
.feTable-list.head_left .val span {
    font-size: 14px;
    font-weight: 500;
    /* margin-bottom: 5px; */
    color: var(--grey);
    display: list-item;
    line-height: 1.54;
}
.infoContent-list .i-item-list dd a,
.feTable-list.head_left .val a {
    color: var(--grey);
}
.infoContent-list .feTable-list {
    margin-left: -20px;
    width: calc(100% + 20px);
}
.feTable-list:not(.head_left) .item {
    min-height: unset;
    height: 50px;
    display: flex;
}
.legend-container {
    margin-top: 20px;
}
/* .legend-container ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.legend-container ul li {
    padding: 10px;
    border-radius: 25px;
    transition: all 0.3s ease;
}
.legend-container ul li p {
    transition: all 0.3s ease;
    color: var(--grey);
    white-space: nowrap;
}
.legend-container ul li.select-item p {
    color: var(--blue);
    font-weight: 700;
}
.annuityCalc-container {
    padding: 50px 0;
}
.annuityCalc-filter {
    margin-top: 30px;
}
.annuityCalc-filter,
.annuityCalc-filter ul {
    width: 100%;
}
.annuityCalc-filter ul {
    gap : 10px;
    position: relative;
    background-color: var(--white);
    flex-direction: unset;
    transition: all 0.3s ease;
}
.annuityCalc-filter .view-list {
    flex-direction: column;
    gap: 0;
}
.annuityCalc-filter .item:not(.reset) {
    flex-direction: column;
    overflow: hidden;   
}
.annuityCalc-filter .item .view-btn,
.annuityCalc-filter .item.reset {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    column-gap: 6px;
    border-radius: 12px;
    padding: 8px 12px;
    background-color: var(--grey-ed);
    color: var(--black);
}
.annuityCalc-filter .item.reset {
    width: auto;
    overflow: hidden;
    transition: all 0.3s ease;
}
.annuityCalc-filter .item .view-btn .text {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.005em;
    font-weight: 700;
    color: var(--black);
    transition: all 0.3s ease;
}
.annuityCalc-filter .item .view-btn svg {
    margin-left: auto;
    transition: all 0.3s ease;
}
.annuityCalc-filter .hidden-btn {
    display: flex;
    flex-direction: unset;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin-top: 0;
    height: 0;
    background-color: var(--white);
    opacity: 0;
    transition: all 0.3s ease;
}
.annuityCalc-filter .hidden-btn.on {
    height: 36px;
    opacity: 1;
    margin-top: 20px;
}
.annuityCalc-filter .hidden-btn .checkbox .check_wrap .text {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.005em;
}
.annuityCalc-filter .item.on .view-btn {
    background-color: var(--blue-light)
}
.annuityCalc-filter .item.on .view-btn .text,
.annuityCalc-filter .item.on .view-btn svg path {
    color: var(--blue);
    font-weight: 700;
}
.annuityCalc-filter .item.on .view-btn svg {
    transform: rotate(180deg);
}
.annuityCalc-filter .item.on .hidden-btn {
    height: 78px;
    opacity: 1;
    padding: 20px;
}
.annuityCalc-filter .item.reset.on {
    width: 0;
    padding: 0;
}
.annuity-result {
    margin-top: 50px;
}
.annuity-result .item {
    width: 100%;
}
.annuity-result .item.head {
    background-color: var(--blue-light);
}
.annuity-result .item.head .text {
    color: var(--blue);
}
.annuity-result .item .box {
    width: 100%;
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    opacity: 1;
    transition: all 0.3s ease;
}
.annuity-result .item .box .v_text {
    font-family: 'pt','SDGothicNeo';
}
.annuity-result .item .box span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.39px;
}
.annuity-result .item.filtering .box {
    height: 0;
    opacity: 0;
    overflow: hidden;
}
.totalSimulation-titleBox,
.totalSimulation-wrap {
    gap : 20px;
}
.totalSimulation-titleBox div {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
}
.totalSimulation-wrap {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 10px;
    border-bottom: 1px solid var(--grey-ea);
}
.totalSimulation-wrap .chart-box {
    grid-column: span 2;
    padding: 0 0 50px 0;
}
/*************** 핀라이프 뷰페이지 시작 ***************/




/*************** 핀라이프 hf 시작 ***************/
.hf-section .wrap-container.product-board {
    margin: 80px 0 0 0;
}
.hf-section.hf-modify .wrap-container.product-board {
    margin: 30px 0 50px 0;
}

.hf-section .wrap-container.product-board .wrap-board {
    gap: 80px 30px;
}
.hf-section .fin-product-list > .item:not(.best-box) .description .name_box {
    justify-content: flex-end;
}
.hf-section .fin-product-list > .item:not(.best-box) .description .rate :where(div, span),
.hf-section .best-list .item .description .rate :where(div, span) {
    font-size: 18px;
    font-family: 'pt','SDGothicNeo';
}
.hf-section .fin-product-list > .item:not(.best-box) .description .condition {
    gap: unset;
    justify-content: space-between;
}
.hf-section .fin-product-list > .item:not(.best-box) .description .condition :where(.d_item, .text) {
    font-family: 'pt','SDGothicNeo';
    font-size: 14px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.005em;
    color: var(--grey) !important;
    background-color: transparent !important;
    padding: 5px 0;
}
.hf-section .simulationTitle,
.ecos-section .simulationTitle {
    margin-bottom: 20px;
}
.hf-section .simulationTitle,
.hf-section .update-box .text,
.hf-section .update-box .btn,
.ecos-section .simulationTitle,
.ecos-section .update-box .text,
.ecos-section .update-box .btn {
    font-size: 35px;
    font-weight: 800;
}
.ecos-section .simulationTitle .unitText,
.exlist-style .simulationTitle .unitText,
.exlist-style .sectionTitle .unitText{
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
}
.hf-section .update-box {
    top: 106px;
}
.hf-section.listType .update-box {
    top: 6px;
}
.hf-section .update-box .text {
    height: 35px;
}
.hf-section .update-box .btn {
    width: 35px;
    height: 35px;
}
.hf-provision {
    position: absolute;
    bottom: -30px;
    font-size: 12px;
    font-weight: 600;
    color: var(--grey);
}
.hf-provision span {
    font-size: 12px;
    font-weight: 600;
    color: var(--grey);
}
.ccb-list {
    margin-left: 20px;
    gap: 10px;
    position: relative;
    top: 2px;
}
.ccb-list .item {
    cursor: pointer;
    border-radius: 25px;
    padding: 5px 15px;
    background-color: var(--grey-f5);
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.005em;
    color: var(--grey);
    transition: all 0.3s ease;
}
.ccb-list .item.on {
    background-color: var(--blue);
    color: var(--white);
}
.chart-box form {
    margin-left: auto;
}

.hf-section.listType .section_header {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--grey-ea);
}
.hf-section.listType .type-title {
    padding-bottom: 0;
    border: none;
}
.form-hf_search {
    margin: 0 0 0 auto !important;
    display: flex;
    align-items: center;
    width: 60%;
    
}
.period-searchbox {
    width: 100%;
    /* overflow-y: hidden;
    overflow-x: auto; */
    white-space: nowrap; 
    /* -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: none; */
}
.period-searchbox .item {
    width: auto;
    cursor: pointer;
    border-radius: 25px;
    padding: 5px 15px;
    background-color: var(--grey-f5);
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.005em;
    color: var(--grey);
    transition: all 0.3s ease;
}
.period-searchbox .item.on {
    background-color: var(--blue);
    color: var(--white);
}
.hf-section.listType .section_body,
.hf-section:where([data-type="hf_mbs"]) .section_body {
    padding: 50px 0 50px 0;
}
.hf-section.listType.hf-modify .section_body {
    padding: 30px 0 50px 0;
}
/* .hf-section.listType .section_body .simulationContainer .chart-box {
    padding: 0 0 50px 0;
} */
/* .hf-section.listType .section_body:has(>.chart-scrollWrap.view) {
    padding: 50px 0 50px 0;
}
.hf-section.listType .chart-scrollWrap {
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.hf-section.listType .chart-scrollWrap.view {
    height: auto;
    padding: 0 0 50px 0;
} */
/* .form-hf_search .dash-box {
    color: var(--blue);
}
.form-hf_search .input-box {
    max-width: 260px;
    width: auto;
}
.form-hf_search .input-box input {
    color: var(--blue);
    flex: 1;
    height: 100%;
    border: none;
    max-width: 200px;
}
.form-hf_search .input-box input::placeholder {
    color: var(--blue-light) !important;
}
.form-hf_search .input-box .del-btn {
    width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.form-hf_search .input-box .del-btn.on {
    width: 50px;
}
.form-hf_search button {
    cursor: pointer;
    outline: none;
    border: none;
    background-image: url(/res/svg/search_blue.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-color: transparent;
    font-size: 0;
    width: 50px;
    height: 50px;
}
.init-btn {
    font-size: 0;
    width: 50px;
    height: 50px;
    background-image: url(/res/svg/reset_icon_blue.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-color: transparent;
}
._fin .dayContainer {
    gap: 10px;
    padding: 10px;
}
._fin .flatpickr-months .flatpickr-month,
._fin .flatpickr-current-month .flatpickr-monthDropdown-months,
._fin .flatpickr-weekdays,
._fin span.flatpickr-weekday {
    background-color: var(--blue);
}
._fin .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--blue);
}
._fin .flatpickr-day {
    max-width: 30px;
    height: 30px;
    line-height: 30px;
}
._fin .flatpickr-day.selected, 
._fin .flatpickr-day.startRange, 
._fin .flatpickr-day.endRange, 
._fin .flatpickr-day.selected.inRange, 
._fin .flatpickr-day.startRange.inRange, 
._fin .flatpickr-day.endRange.inRange, 
._fin .flatpickr-day.selected:focus, 
._fin .flatpickr-day.startRange:focus, 
._fin .flatpickr-day.endRange:focus, 
._fin .flatpickr-day.selected:hover, 
._fin .flatpickr-day.startRange:hover, 
._fin .flatpickr-day.endRange:hover, 
._fin .flatpickr-day.selected.prevMonthDay, 
._fin .flatpickr-day.startRange.prevMonthDay, 
._fin .flatpickr-day.endRange.prevMonthDay, 
._fin .flatpickr-day.selected.nextMonthDay, 
._fin .flatpickr-day.startRange.nextMonthDay, 
._fin .flatpickr-day.endRange.nextMonthDay {
    background: var(--blue);
    border-color: var(--blue);
} */
.ecos-section:where(.rate, .gnipc, .ecos_cpi_rate, .ccsi, .hloan, .mloan, .cloan, .sbloan, .bhld, .bcld, .apt_pincr, .apt_tsale, .apt_lincr, .hprate, .hse_tsale, .exlist-style) .section_body {
    padding: 0 0 50px 0;
}
.ecos-section.hf-modify .section_body {
    padding: 0;
}
.hf-section.listType .table-wrap,
.ecos-section:where(.rate, .gnipc, .ecos_cpi_rate, .ccsi, .hloan, .mloan, .cloan, .sbloan, .bhld, .bcld, .apt_pincr, .apt_tsale, .apt_lincr, .hprate, .hse_tsale, .exlist-style) .table-wrap {
    padding: 50px 0 0 0;
}
.ecos-section[data-type="ecos_exchange"] .table-wrap {
    padding: 0;
}
.hf-list-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: var(--blue-light);
    border: 1px solid var(--grey-ea);
    position: sticky;
    top: 0;
    z-index: 1;
}
.hf-list-title > div {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi, .exlist-style) .hf-list-title {
    /* background-color: var(--white); */
    background-color: var(--grey-f9);
    border: none;
    border-bottom: 2px solid var(--black);
}
/* section.hf-modify .hf-list-title {
    background-color: var(--white);
} */
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi, .exlist-style) .hf-list-title  div {
    border: none !important;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}
.hf-list {
    border-left: 1px solid var(--grey-ea);
    border-right: 1px solid var(--grey-ea);
    border-bottom: 1px solid var(--grey-ea);
}
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi, .exlist-style) .hf-list {
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--grey-ea);
}
.hf-list .item {
    width: 100%;
    height: 50px;
}
.hf-list .item:not(:last-child) {
    border-bottom: 1px solid var(--grey-ea);
}
/* .hf-list .item.back {
    background-color: var(--grey-f9);
} */
/* .hf-list .item:nth-child(even) {
    background-color: var(--grey-fc);
} */
.ecos-section .hf-list .item:nth-child(even) {
    background-color: transparent;
}
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi) .hf-list .item:nth-child(even) {
    background-color: var(--white);
}
.hf-list .item > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: 'pt', 'SDGothicNeo';
    color: var(--grey);
    font-size: 13px;
}
.hf-list-title .currency,
.hf-list .item .currency {
    flex: 2;
}
.hf-list .item .currency :where(.ex_up, .ex_down) {
    padding-left: 25px;
    font-family: 'pt', 'SDGothicNeo';
    color: var(--grey);
    line-height: 16px;
    position: relative;
}
.hf-list-title div:not(:last-child),
.hf-list .item > div:not(:last-child) {
    border-right: 1px solid var(--grey-ea);
}
.hf-list .item .issue {
    flex-direction: column;
}
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi, .exlist-style) .hf-list .item  div,
.hf-list.exit .item  div span {
    border-right: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    font-family: 'pt', 'SDGothicNeo';
}
.hf-list.lenders .item div {
    font-weight: 500;
}
section:where(.exchange, .gnipc, .ecos_cpi_rate, .ccsi, .exlist-style) .hf-list .item .border-right {
    border-right: 1px solid var(--grey-ea);
}
.exit-loan .section_body {
    padding: 20px 40px;
    border-radius: 15px;
    background-color: var(--white);
}
.hf-list-title.exit {
    background-color: var(--white);
    position: unset;
    /* border-bottom: 1px solid var(--black); */
    border-bottom: 1px solid var(--grey-ea);
}
.hf-list-title.exit div {
    font-size: 14px;
}
.hf-list.exit {
    border-bottom: none;
}
.hf-list.exit .item {
    height: 55px;
}
.hf-list.exit .link_item {
    width: 100%;
    height: 100%;
}
.hf-list.exit div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.hf-list.exit div.noneIcon {
    flex: unset;
}
.hf-list-title.exit .local,
.hf-list.exit .local {
    width: 80px;
    flex: unset;
    justify-content: flex-start;
}
.hf-list.exit .item .local span {
    font-weight: 400;
}
.hf-list-title.exit .content,
.hf-list.exit .content {
    flex: 1;
}
.hf-list.exit .content {
    justify-content: flex-start;
    padding: 0 20px;
}
.hf-list.exit .item .content span {
    font-size: 15px;
}
.hf-list.exit .content span.st {
    margin-right: 5px;
    color:var(--green);
}
.hf-list-title.exit .name,
.hf-list.exit .name {
    width: 200px;
    flex: unset;
    justify-content: flex-end;
}
.hf-list.exit .name {
    font-weight: 400;
    color: var(--grey);
}

.exchange .hf-list-title .num,
.exchange .hf-list .num {
    flex: unset;
    width: 80px;
}
:where(.gnipc, .e_growth) .hf-list-title .num,
:where(.gnipc, .e_growth) .hf-list .num {
    flex: 1;
}
.exchange .hf-list-title .name,
.exchange .hf-list .name {
    width: 210px;
    flex: unset;
}
.exchange .hf-list .name {
    padding: 0 20px;
    justify-content: flex-start;
}
.exchange .hf-list-title .currency,
.exchange .hf-list .item .currency {
    flex: 3;
    padding-right: 20px;
}
.exchange .hf-list .item .currency div {
    font-weight: 600;
}
.exchange .hf-list-title .currency .pv {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.exchange .hf-list .item .currency .pv{
    flex: 2;
    padding-right:20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.exchange .hf-list-title .currency :where(.dv, .rv),
.exchange .hf-list .item .currency :where(.dv, .rv){
    flex: unset;
    width: 80px;
    /* padding-right:20px; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.exchange .hf-list-title .currency .dv {
    flex: unset;
    width: 80px;
    justify-content: flex-end;
}
.exchange .hf-list .currency .dv {
    flex: unset;
    width: 80px;
    justify-content: flex-start;
}
.exchange .hf-list-title .currency .rv{
    flex: unset;
    width: 100px;
    text-align: end;
    padding-right: 20px;
}
.exchange .hf-list .currency .rv {
    flex: unset;
    width: 100px;
    text-align: end;
}
.exchange .hf-list .currency .ud-box {
    display: inline-block;
    max-width: 80px;
    width: 80px;
    padding: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    color: var(--white);
    vertical-align: top;
    text-align: center;
    height: auto;
}
.exchange .hf-list .currency .ud-box.ex_box_up {
    background-color: var(--red);
}
.exchange .hf-list .currency .ud-box.ex_box_down {
    background-color: var(--blue);
}
.ecos-section .btn_box .optionBtn.list,
.exlist-style .btn_box .optionBtn.list {
    background-color: var(--blue);
}
.moreDetails-btn {
    -webkit-apperance: none;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    outline: transparent;
    width: 247px;
    height: 50px;
    justify-content: center;
    border-radius: 25px;
    transition: all 0.3s ease;
    gap: 5px;
}
.moreDetails-btn .text {
    font-size: 15px;
    /* line-height: 21px;
    letter-spacing: -.5px; */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: var(--white);
    position: relative;
}
.moreDetails-btn ion-icon {
    color: var(--white);
}
.hf-section.ow-box {
    padding: 60px 50px;
}
.hf-section.ow-box .section_body.fieldset {
    margin-top: 50px;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result {
    max-height: 301px;
    margin-top: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result.on {
    margin: 50px 0;
    height: 301px;
    overflow-y: auto;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result .code {
    width: 20%;
    flex: unset;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result .adress {
    width: 100%;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result .hf-list .adress {
    padding: 0 20px;
    justify-content: flex-start;
}
.hf-section.ow-box .section_body.fieldset .field.adress-result .check {
    width: 10%;
    flex: unset;
    position: relative;
    cursor: pointer;
}
.adress-result .hf-list li {
    cursor:pointer;
}
.adress-result .check .checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px var(--grey-ea);
    background-color: var(--white);
}
.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

.adress-result .check.on .checkmark:after,
.adress-result .check:hover .checkmark:after {
    display: block;
}

.adress-result .check .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all ease 0.2s;
}
.adress-result .check.on .checkmark,
.adress-result .hf-list li:hover .check .checkmark{
    background-color: var(--blue);
    border: solid 1px var(--blue);
}
.adress-result .check~.checkmark:after,
.adress-result .hf-list li:hover .check .checkmark:after {
    display: block;
    border: solid var(--grey-ea);
    border-width: 0 2px 2px 0;
    transition: all ease 0.2s;
}
.hf-inputSection.topSec:not(.hmp) {
    border-top: 1px solid var(--grey-ea);
}
._fin._h_side .hf-inputSection.topSec:not(.hmp) {
    border-top: none;
}
.hf-inputSection .fieldset.condition {
    grid-template-columns: repeat(2,1fr);
    /* gap: 100px 70px; */
}
._h_side .hf-inputSection .fieldset.condition {
    grid-template-columns: repeat(3,1fr);
}
.hf-inputSection .fieldset.condition .field:not(.gpadc) {
    grid-column: span 2;
}
._h_side .hf-inputSection .fieldset.condition .field:not(.gpadc) {
    grid-column: span 3;
}
.hf-inputSection .fieldset.condition .field.houseCnt {
    margin-bottom: 50px;
}
.hf-inputSection .fieldset .field.gpadc.c01 {
    position: relative;
}
.hf-inputSection .fieldset .field .key.position {
    position: absolute;
    top: -30px;
}
body:not(._origin) .hf-inputSection .fieldset .input-box {
    max-width: 100%;
}
.hf-inputSection .fieldset .field.wedd .val {
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}
.hf-inputSection .fieldset .field.type:not(.wedd, .gpadc) .val {
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.hf-inputSection .fieldset .field.gpadc .val {
    grid-template-columns: repeat(1,1fr);
}
/* .form-inputForm .fieldset .field input:-webkit-autofill,
.form-inputForm .fieldset .field input:-webkit-autofill:hover,
.form-inputForm .fieldset .field input:-webkit-autofill:focus,
.form-inputForm .fieldset .field input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
    -webkit-text-fill-color: var(--blue) !important;
} */
.hf-resultSection .sectionSubTitle {
    margin-top: 0;
    padding: 0 0 0 10px;
}
.hf-resultSection .section_body {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
}
._h_side .hf-resultSection .section_body{
    grid-template-columns: repeat(3,1fr);
}
.hf-resultSection .section_body.exchange-area {
    grid-template-columns: repeat(3,1fr);
    gap: 85px 10px;
}
.resultCard {
    margin-top: 50px;
    position: relative;
    padding: 70px 20px 50px 20px;
    width: 100%;
    border-radius: 15px;
    border: 3px solid var(--blue);
    transition: .5s;
    height: fit-content;
}
/* .resultCard::before{
    content: '';
    position: absolute;
    top: 0;   left: 0;
    width: 50%;   height: 100%;
    background: rgba(255,255,255,.1);
} */
.resultCardTitle {
    font-size: 18px;
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.66px;
}

.suggestion_result.fieldset { 
    grid-template-columns: repeat(1, 1fr);
    /* gap: 30px; */
    gap: 20px;
    height: 21px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.suggestion_result.fieldset .field {
    display: flex;
    /* flex-direction: column;
    justify-content: flex-start; */
}

/* .resultCard .rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--red);
    border-radius: 50%;
    margin-left: 15px;
} */

.ribbon {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
}
.ribbon {
    --r: .4em; /* control the ribbon shape (the radius) */
    --c: var(--blue);  
    position: absolute;
    top: -3px;
    left: calc(-1*var(--r));
    line-height: 1.8; 
    padding: 0 .5em calc(2*var(--r));
    border-radius: var(--r) 0 0 var(--r);
    background: 
        radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%)
        100% 0/.5lh calc(100% - 2*var(--r)),
        radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0 100%/var(--r) calc(2*var(--r)),
        conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,var(--c) 0)0 0/calc(101% - .5lh) 100%;
    background-repeat: no-repeat;   
}

.resultCard .fieldset li.field > .key {
    font-size: 15px;
    font-weight: 700;
}
.resultCard .val,
.resultCard .val a {
    font-family: 'pt', 'SDGothicNeo';
    color: var(--grey);
    line-height: 1.5;
    display: flex;
    flex: 1;
    text-align: end;
}
.resultCard .field > .val > a {
    justify-content: end;
}
.resultCard .val a {
    color: var(--blue);
}
.resultCard .field.temp {
    /* grid-column: span 1; */
    flex-direction: column;
}
.resultCard .field.temp .val {
    text-align: start;
}
.resultCard .field.temp .data-list {
    display: grid;
    gap: 20px 10px;
}
.resultCard .field.temp.line3 .data-list {
    /* grid-template-columns: repeat(8,1fr); */
    grid-template-columns: repeat(3,1fr);
}
.resultCard .field.temp.line2 .data-list {
    /* grid-template-columns: repeat(5,1fr); */
    grid-template-columns: repeat(2,1fr);
}
.resultCard .field.temp .data-list dd {
    display: grid;
    gap: 5px;
}
.resultCard .field.temp .data-list .key {
    font-weight: 400;
}
.write_button.cb {
    background-color: var(--blue);
}
.oc-btn {
    border-radius: 25px;
    padding: 5px 35px 5px 15px;
    background-color: var(--blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.005em;
    color: var(--white);
    transition: all 0.3s ease;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    cursor:pointer;
}
.oc-btn .arrow_icon {
    width: 9px;
    height: 5px;
    display: inline-block;
    background-image: url(/res/svg/white_dn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: all ease 0.3s;
}
.resultCard.on .oc-btn .arrow_icon {
    transform: translateY(-50%) rotate(180deg);
}
.exchange-area > .item {
    border-radius: 15px;
    border: 1px solid var(--grey-ea);
    /* height: calc(calc(680px - 20px) / 3); */
}
.exchange-area .simulationContainer .chart-box {
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    /* margin-bottom: 10px; */
}
.exchange-area .simulationContainer .chart-box .simulationTitle {
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0 20px 15px;
}
.exchange-area .simulationContainer .chart-box canvas {
    /* position: absolute;
    bottom: 0; */
    margin: 0 10px 10px 10px;
    /* border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px; */
    /* overflow: hidden; */
}
.exchange-area .legend-container {
    display: flex;
    margin-top: 0;
    padding: 0 20px;
    position: absolute;
    bottom: -65px;
    height: 47px;
}
.exchange-area .legend-container .repay-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.exchange-area .legend-container .repay-list :where(.key, .val) {
    font-size: 11px;
    font-weight: 400;
    color: var(--grey);
    font-family: 'pt', 'SDGothicNeo';
}
.exchange-area .legend-container .repay-list li {
    padding: 0;
    border-radius: unset;
}
.exchange-area .legend-container .repay-list .item.flex-col {
    align-items: flex-start;
    gap: 7px;
}
._origin aside .calc_recent-list li {
    position: relative;
}
._origin aside .tooltip-box {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    overflow: hidden;
    background-color: var(--green);
    padding: 0 20px;
    border-radius: 15px;
    /* transition: all 0.3s ease; */
    width: max-content;
    max-width: 100%;
}
._origin aside .tooltip-box::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin: -60px 0 0 -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--green) transparent;
    transform: rotate(180deg);
}
/* ._origin aside .calc_recent-list li.on .tooltip-box {
    overflow: unset;
    height: auto;
    padding: 20px;
} */
._origin aside .tooltip-box .tooltip-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    gap: 10px;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li{
    border-bottom: none;
    width: auto !important;
    height: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li div {
    width: auto !important;
    color: var(--white);
    text-align: unset;
    font-size: 12px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 500;
    letter-spacing: -0.39px;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li.opt {
    margin-top: 25px;
    position: relative;
    flex-basis: 100%;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li.opt::after {
    content: attr(--title_text);
    font-size: 14px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 500;
    letter-spacing: -0.39px;
    color: var(--white);
    position: absolute;
    top: -23px;
    left: 0;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li.opt dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
._origin aside .calc_recent-list .tooltip-box .tooltip-content li.opt dl .val {
    font-size: 12px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 500;
    letter-spacing: -0.39px;
    color: var(--white);
}
/*************** 핀라이프 hf 끝 ***************/




/*************** ecos 시작 ***************/
.wiki-section.wiki-header.long-search {
    height: 430px;
    margin-bottom: 0;
}
.wiki-section.wiki-header.long-search .wiki-intro-box {
    justify-content: flex-start;
    padding-top: 95px;
}
.wiki-section.wiki-header.long-search .wiki-intro-box::after {
    transform: unset;
    top: 145px;
}
.hf-section.hf-addressFinder {
    padding: 0 50px;
}
.hf-section.ow-box.hf-addressFinder .section_body.fieldset {
    margin-top: 0;
}
.form-adress_finder {
    position: relative;
}
.form-adress_finder .field.adress_keyword {
    position: absolute;
    top: -107px;
    left: -10px;
    width: 500px;

    /* top: -245px;
    right: -50px;
    width: 494px;
    z-index: 1; */
}
.form-adress_finder .field.adress_keyword .key {
    margin-bottom: 10px;
    color: var(--white);
}
.form-adress_finder .field.adress_keyword .val {
    height: 55px;
    padding: 0 40px 0 10px;
    border-bottom: 2px solid var(--white);
}
.form-adress_finder .field.adress_keyword .val input {
    flex: 1;
    border: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: var(--white);
    background-color: transparent;
    padding: 0;
}
.form-adress_finder .field.adress_keyword .val input::placeholder {
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
.form-adress_finder .field.adress_keyword .val input:-webkit-autofill,
.form-adress_finder .field.adress_keyword .val input:-webkit-autofill:hover,
.form-adress_finder .field.adress_keyword .val input:-webkit-autofill:focus,
.form-adress_finder .field.adress_keyword .val input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #06876b inset !important;
    -webkit-text-fill-color: var(--white) !important;
}
.form-adress_finder .field.adress_keyword .val .ow-btn {
    width: 60px;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.form-adress_finder .field.adress_keyword .val .ow-btn .search-icon,
.fieldset .input-box .adr-finder-btn .search-icon {
    width: 20px;
    height: 20px;
    background-image: url(/res/svg/search_w.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.fieldset .input-box input.baseColorBlue::placeholder {
    color: var(--grey-ed);
    font-weight: 600;
    font-size: 30px;
}
.fieldset .input-box input.baseColorBlue:-webkit-autofill,
.fieldset .input-box input.baseColorBlue:-webkit-autofill:hover,
.fieldset .input-box input.baseColorBlue:-webkit-autofill:focus,
.fieldset .input-box input.baseColorBlue:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;
    -webkit-text-fill-color: var(--blue) !important;
}
.fieldset .input-box input.left-align {
    text-align: left;
}
.fieldset .input-box .adr-finder-btn {
    cursor: pointer;
}
.fieldset .input-box .adr-finder-btn .search-icon {
    background-image: url(/res/svg/search_blue.svg);
    display: none;
}
.fieldset .input-box .adr-finder-btn.on .search-icon {
    background-image: url(/res/svg/search_blue.svg);
    display: flex;
}
.fieldset .invisible-box {
    display: grid;
    gap: 15px;
    margin-top: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.fieldset .invisible-box.on {
    height: 78px;
    margin-top: 30px;
}

#Layer .address_popup {
    width: 800px;
    height: 800px;
    border-radius: 35px;
    box-shadow: 0 4px 16px 0 rgba(0, 65, 57, .08);
    background-color: var(--white);
    padding: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#Layer .address_popup .layer_body {
    height: 610px;
}
#Layer .address_popup .hf-list {
    /* height: 560px; */
    overflow-y: scroll;
}
#Layer .address_popup .hf-list::-webkit-scrollbar{
    display:none;
}
#Layer .address_popup .hf-list .item {
    cursor: pointer;
}
._ecos .sectionTitle,
.hf-modify .sectionTitle:not(.wrap-container.product-board .sectionTitle) {
    font-size: 40px;
    margin-top: 80px;
    /* background: linear-gradient(to top, var(--black) 20%, var(--black) 40%, var(--blue) 60%, var(--blue) 80%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: var(--blue);
}
._ecos._snap .sectionTitle,
.hf-modify .sectionTitle {
    margin-top: 30px;
}
/* .ecos-section:not([data-type="ecos_apt_pincr"],[data-type="ecos_apt_lincr"],[data-type="ecos_hprate"],[data-type="ecos_apt_tsale"],[data-type="ecos_hse_tsale"]) .section_body .simulationContainer {
    border-top: 1px solid var(--grey-ea);
} */
.ecos-section[data-type="ecos_exchange"] .section_body,
.ecos-section[data-type="ecos_dic"] .section_body {
    margin-top: 0;
}
.ecos-section[data-type="ecos_exchange"] .section_body .simulationContainer,
.ecos-section[data-type="ecos_dic"] .section_body .simulationContainer {
    border-top: none;
    margin: 0;
}
.ecos-section[data-type="ecos_exchange"] .update {
    position: absolute;
    top: 685px;
    right: 0;
    height: 15px;
}
.none-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 680px;
}
.none-result .none-icon {
    width: 50px;
    height: 50px;
    background-image: url(/res/svg/i_info_grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.none-result .message {
    margin-top: 25px;
}
.none-result .message p {
    font-size: 14px;
    color: var(--grey);
    font-weight: 600;
}
.ecos-section.card .simulationTitle {
    margin-bottom: 30px;
}
.ecos-section.card .simulType {
    margin-bottom: 0;
}
.multi-container {
    padding: 100px 0 50px 0;
}
.multi-container .chart-box {
    padding: 0 0 50px 0;
}
.card-field {
    padding: 50px 0 0 0;
}
.card-field .update-date {
    top: 75px;
}
.chart-wrap.multi-box {
    width: 100%;
    gap: 100px;
    /* height: 1000px; */
    flex-direction: column;
}
.chart-sub-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
}
.ecos-section .chart-scrollWrap {
    margin-top: 50px;
}
.chart-wrap.multi-box .chart-scrollWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 20px;
}
.chart-wrap.multi-box :where(.wrap-box, .chart-scrollWrap, .chart-box) {
    width: 100%;
    height: 100%;
}
.chart-scrollWrap.chart_grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    /* margin-top: 50px; */
    margin-top: 10px;
}
.ecos-section .simulationContainer .chart-box {
    /* padding: 50px 0 50px 0; */
    padding: 60px;
    background-color: var(--white);
    border-radius: 30px;
}
.chart-scrollWrap.chart_grid.span_2 {
    padding: 100px 0 50px 0;
}
.chart-scrollWrap.chart_grid.span_2 .chart-box {
    grid-column: span 2;
}
/* .chart-wrap.multi-box .chart-scrollWrap .chart-box {
    padding: 0;   
} */
.chart-scrollWrap.chart_grid .chart-box {
    padding: 35px;
    background-color: var(--white);
    border-radius: 30px;
}
.hf-modify[data-type="hf_bank"] .chart-scrollWrap.chart_grid .chart-box,
._fin._view .chart-scrollWrap.chart_grid .chart-box {
    border: 1px solid var(--grey-ea);
}
/* .chart-scrollWrap.chart_grid .chart-box.no_update canvas {
    margin-top: 90px;
} */
.chart-scrollWrap .chart-box.scatter_chart svg {
    position: absolute;
    top: 155px;
    left: 109px;
    pointer-events: none;
}
.chart-wrap.multi-box .chart-scrollWrap .chart-box .legend-container {
    margin-top: 0;
}
.ecos-section .update-box {
    /* top: 56px; */
    top: 50px;
    right: 35px;
}
.ecos-section .chart-scrollWrap:not(.chart_grid) .update-box {
    top: 71px;
}
.chart-scrollWrap.chart_grid .simulationTitle,
.expandChart-popup .simulationTitle {
    font-size: 26px;
    margin-bottom: 20px;
}
.ecos-section:where(.exchange, .dic) .section_header .sectionTitle {
    position: relative;
}
.ecos-section:where(.exchange, .dic) .section_header .update {
    position: absolute;
    right: 0;
    bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
}
.chart-scrollWrap.chart_grid .update-box ,
.expandChart-popup .update-box{
    position: unset;
    right: unset;
    bottom: unset;
    margin-bottom: 40px;
}
.expand-btn {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    /* border: 1px solid var(--blue-light); */
    background-image: url(/res/svg/search.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-color: transparent;
    position: absolute;
    top: 30px;
    right: 35px;
}
.expandChart-popup .expand-btn {
    background-image: url(/res/svg/popup_x_b.svg);
}
.expandChart-popup {
    width: 1160px;
    min-height: 700px;
    background-color: var(--white);
    position: relative;
    border-radius: 30px;
    flex-direction: column;
    padding: 60px;
}
.expandChart-popup .chart-box {
    width: 100%;
    height: 100%;
}
.chartInfo-box {
    gap: 10px;
    margin-top: 40px;
    align-items: flex-start;
}
.source-box {
    margin-top: 10px;
}
.source-box.top {
    margin-top: 40px;
}
.chartInfo-box .chartInfo-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.chartInfo-box .chartInfo-list .item {
    text-indent: -12px;
    padding-left: 14px;
}
.chartInfo-box :where(.title, .chartInfo-list .item),
.source-box :where(.title, p) {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--grey-bb);
}
.source-box .title {
    display: flex;
    align-items: center;
}
.source-box .title p:nth-child(1)  {
    margin-left: 10px;
}
.exchange_chart_box {
    min-height: 615px;
    height: 100%;
    position: relative;
    padding: 30px 0 50px 0 !important;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
.exchange_chart_box .exchange_chart_list li {
    height: calc(calc(calc(calc(1230px - 20px) / 4) * 2) + 10px);
}
.exchange_chart_box .exchange_chart_list li .grid-wrap {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* width: calc(1230px - 10px) !important; */
}
.exchange_chart_box .exchange_chart_list .chart-box {
    border-radius: 15px;
    padding: 0;
    height: calc(calc(1230px - 20px) / 4);
    cursor: pointer;
}
.exchange_chart_box .exchange_chart_list .chart-box .simulationTitle {
    /* font-size: 30px; */
    font-size: 22px;
    font-weight: 500;
    padding: 20px 20px 0 20px;
}
.exchange_chart_box canvas {
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    /* overflow: hidden; */
    margin: 0 10px 10px 10px;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price {
    /* font-size: 30px; */
    font-size: 25px;
    font-weight: 800;
    padding: 0 20px;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price .ntext,
.chart_popup .info .ntext,
.stats-card .card-body .card-item .ex_price .ntext {
    padding: 0 15px;
    position: relative;
} 

.exchange_chart_box .exchange_chart_list .legend-container .ex_price .ntext::after,
.chart_popup .info .price .ntext::after,
.hf-list .item .currency .ex_up::after,
.hf-list .item .currency .ex_down::after,
.stats-card .card-body .card-item .ex_price .ntext::after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(0deg) translateY(-50%);
}
.hf-list .item .currency .ex_up::after,
.hf-list .item .currency .ex_down::after {
    left: 11px;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price.per.up .ntext::after,
.chart_popup .info.up .price .ntext::after,
.hf-list .item .currency .ex_up::after,
.stats-card .card-body .card-item .ex_price.per.up .ntext::after {
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent var(--red) transparent;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price.per.down .ntext::after,
.chart_popup .info.down .price .ntext::after,
.hf-list .item .currency .ex_down::after,
.stats-card .card-body .card-item .ex_price.per.down .ntext::after {
    border-width: 10px 5px 0 5px;
    border-color: var(--blue) transparent transparent transparent;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price.per span,
.chart_popup .info .price,
.chart_popup .info .price span {
    /* font-size: 20px; */
    font-size: 16px;
    font-weight: 400;
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price.per.up span,
.chart_popup .info.up .price,
.chart_popup .info.up .price span,
.hf-list .item .currency .ex_up {
    color: var(--red);
}
.exchange_chart_box .exchange_chart_list .legend-container .ex_price.per.down span,
.chart_popup .info.down .price,
.chart_popup .info.down .price span,
.hf-list .item .currency .ex_down {
    color: var(--blue);
}
.table-wrap {
    margin-top: 50px;
}

.swiper-pagination.exchange {
    bottom: unset;
    top: 685px;
    height: 15px;
}
.swiper-button-next.exchange,
.swiper-button-prev.exchange {
    top : 355px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--blue-light);
}
.swiper-button-next.exchange::after,
.swiper-button-prev.exchange::after {
    color: var(--blue);
    font-size: 22px;
}
.swiper-button-next.exchange {
    right: -60px;
}
.swiper-button-prev.exchange {
    left: -60px;
}
.exchange_chart_box .loading {
    width: 100%;
    height: 615px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
} 
.chart_popup {
    width: 1200px;
    height: 850px;
    border-radius: 15px;
    background-color: var(--white);
    padding: 50px;
    position: relative;
    display: grid;
    grid-template-rows: 100px auto;
}
.chart_popup .layer_header {
    height: 100px;
}
.chart_popup h2 {
    height: auto !important;
    padding: 0 !important;
    font-size: 25px !important;
}
#Layer .chart_popup .layer_body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.chart_popup :where(.chart-scrollWrap, .chart-box) {
    width: 100%;
    height: 100%;
    position: relative;
}
.chart_popup .info {
    margin-top: 15px;
    align-items: end;
}
.chart_popup .info .price:not(.per) {
    margin-right: 20px;
    font-size: 35px;
    font-weight: 700
}
.chart_popup .update-box {
    top: 0;
}
.loading-wrap {
    width: 100px;
    position: absolute;
    z-index: 10000;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}
.exchange_calc-wrap {
    padding: 50px 0;
}
.exchange_calc-wrap .ex_calc_title {
    align-items: flex-start;
}
.exchange_calc-wrap .ex_calc-wrap {
    gap: 30px;
    display: grid;
    width: 100%;
    grid-template-columns: 60% auto;
}
.exchange_calc-wrap .ex_calc_box {
    display: grid;
    grid-template-rows: 80px 20px 80px;
    gap: 30px;
    width: 100%;
    place-items: center;
}
.exchange_calc-wrap .ex_calc_box .input-box {
    flex: 1;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid var(--grey-d3);
    background-color: var(--white);
    display: grid;
    grid-template-areas: 'name i_v i_v'
                        'name t_v t_v';
    grid-template-columns: 300px auto auto;
    position: relative;
}
/* .exchange_calc-wrap .national-box {
    grid-area: flag;
    background-color: var(--blue-light);
    padding: 0 10px 0 20px;
    display: flex;
    align-items: center;
} */

.exchange_calc-wrap .ex_calc_box .input-box .nation_box {
    grid-area: name;
    width:300px;
    height: 100%;
    background-color: var(--white);
    font-size: 18px;
    /* padding: 0 20px 0 0; */
    padding: 0 20px;
    border: none;
    border-right: 1px solid var(--grey-ea);
    border-radius: 10px 0 0 10px;
    user-select: none;
    display: flex;
    align-items: center;
}
/* .exchange_calc-wrap .ex_calc_box .input-box .nation_box.active */
.exchange_calc-wrap .ex_calc_box .input-box .nation_box.active {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--blue);
    height: 80px;
    position: absolute;
    z-index: 100;
    top: -2px;
    left: -2px;
}
.exchange_calc-wrap .ex_calc_box .input-box .nation_box .title {
    height: 100%;
    font-size: 18px;
}
.exchange_calc-wrap .ex_calc_box .input-box .nation_box .scroll {
    left: -1px;
    top: 79px;
    border-color: var(--blue);
}
.exchange_calc-wrap .ex_calc_box .input-box .nation_box .scroll ul {
    padding: 0;
    max-height: 300px;
    scroll-behavior: smooth; /* 부드러운 스크롤 */
}
.exchange_calc-wrap .ex_calc_box .input-box .nation_box .scroll ul::-webkit-scrollbar{
    width: 10px;
}
.exchange_calc-wrap .ex_calc_box .input-box .nation_box .scroll li:hover {
    background-color: var(--blue-light);
}
.exchange_calc-wrap .ex_calc_box .input-box input,
.exchange_calc-wrap .ex_calc_box .input-box .text-box {
    position: relative;
    padding: 0 20px 10px 0;
    overflow: hidden;
    font-size: 22px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 700;

}
.exchange_calc-wrap .ex_calc_box .input-box input {
    grid-area: i_v;
    height: 100%;
    outline: none;
    border: none;
    padding-top: 10px;
    border-radius: 0 10px 10px 0;
    text-align: end;
}
.exchange_calc-wrap .ex_calc_box .input-box .text-box {
    grid-area: t_v;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.exchange_calc-wrap .ex_calc_box .input-box .text-box .text-val {
    font-size: 13px;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 400;
    white-space: nowrap;
}
.exchange_calc-wrap .ex_calc_box .input-box .text-box .unit-text {
    font-size: 13px;
    font-weight: 400;
    margin-left: 5px;
    white-space: nowrap;
}
.exchange-icon {
    width: 30px;
    height: 20px;
    cursor: pointer;
}
.exchange_calc-wrap .ex_calc_title .Custom-select {
    width: 150px;
    margin-left: auto;
}
.exchange_calc-wrap .ex_calc_title .Custom-select.active,
.exchange_calc-wrap .ex_calc_title .Custom-select.active .scroll {
    border-color: var(--blue);
}
.market_price-box {
    flex : 1;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    padding: 30px;
}
.market_price_title {
    font-size: 18px;
    font-weight: 700;
}
.market_price-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.market_price-list .item {
    gap: 15px;
}
.market_price-list .key {
    font-weight: 600;
    color: var(--grey-bb);
    font-size: 15px;
    width: 80px;
}
.market_price-list .val {
    flex: 1;
}
.market_price-list .calc_val {
    flex: 2;
}
.market_price-list :where(.val, .calc_val) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.market_price-list :where(.val, .calc_val) .text-val {
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 600;
    font-size: 15px;
}
.market_price-list :where(.val, .calc_val) .unit-text {
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 400;
    font-size: 12px;
}
.stats-wrap {
    padding-top: 150px;
}
.stats-wrap.simulationContainer {
    padding-top: 50px;
}
.stats-wrap .stats_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 40px 0;
}
.stats-title {
    font-size: 35px;
    font-weight: 800;
    line-height: 1.33;
    color: var(--black);
}
.stats-wrap .stats_body {
    display: grid;
    gap: 80px;
    grid-template-columns: repeat(1, 1fr);
    /* columns: 2;
    column-gap: 80px; */
}
.stats-card {
    position: relative;
    break-inside: avoid;
    /* width: 100%;
    margin-bottom: 50px; */
}
.stats-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 65px;
    margin-bottom: 10px;
}
.card-title {
    font-size: 24px;
    font-weight: 700;
}
.card-fixTitle {
    border-bottom: 2px solid var(--black);
    padding-bottom: 15px;
}
.card-fixTitle div {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 800;
    padding: 0 20px;
}
.card-fixTitle .type-name {
    flex: 1;
    width: 100%;
}
.card-fixTitle .rate-box {
    padding: 0;
}
.card-fixTitle .ex_price {
    /* width : 275px;
    padding: 0 25px; */
    justify-content: flex-end;
}
.card-fixTitle .ex_per {
    width : 120px;
    padding: 0 10px;
    justify-content: center;
}
.card-fixTitle .data-value {
    justify-content: flex-end;
    width : 260px;
}
.card-fixTitle .date-quarter {
    justify-content: center;
    width: 120px;
}
/* .stats-card.on .card-title {
    color: var(--blue);
} */
/* .stats-card.on .card-header {
    background-color: transparent;
    background-color: var(--blue-light);
    border-radius: 15px 15px 0 0;
    border-color: var(--grey-ea);
    z-index: 10;
    position: relative;
} */
/* .stats-card .card-header .icon {
    width: 14px;
    height: 10px;
    display: inline-block;
    background-image: url(/res/svg/black_dn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    transition: all ease 0.3s;
} */
/* .stats-card.on .card-header .icon {
    transform: rotate(180deg);
} */
.stats-card .card-body {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0 50px;
    width: 100%;
    border-bottom: 2px solid var(--grey-ea);
}
/* .stats-card.on .card-body {
    padding: 20px 10px;
    background-color: var(--blue-light);
    overflow: unset;
    
} */
/* .stats-card .card-body::after {
    content: '';
    position: absolute;
    top: -66px;
    left: -1px;
    width: 100%;
    height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 15px;
    z-index: -1;
    transition: all 0.2s ease;
}
.stats-card.on .card-body::after {
    height: calc(100% + 65px);
    border-color: var(--blue);
} */
.stats-card .card-body .card-item {
    display: flex;
    align-items: center;
    height: 55px;
    width: 100%;
    justify-content: flex-end;
}
/* .stats-card .card-body .card-item:nth-child(odd) {
    position: relative;
}
.stats-card .card-body .card-item:nth-child(odd)::after {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--grey-ea);
    position: absolute;
    right: -25px;
} */
.stats-card .card-body .card-item:nth-child(n + 2) {
    border-top: 1px solid var(--grey-ea);
}
.stats-card .card-body .card-item > div {
    display: flex;
    align-items: center;
    font-weight: 600;
    padding : 0 20px;
    height: 100%;
    border-right: 1px solid var(--grey-ea);
}
.stats-card .card-body .card-item .type-name {
    justify-content: flex-start;
    flex: 1;
    width: 100%;
}
.stats-card .card-body .card-item .rate-box {
    padding: 0;
}
.stats-card .card-body .card-item .rate-box div {
    height: 100%;
    display: flex;
    align-items: center;
    font-family: 'pt', 'SDGothicNeo';
    font-weight: 600;
}
.stats-card .card-body .card-item .rate-box .ex_price {
    width : 230px;
    padding: 0 10px;
    justify-content: flex-end;
}
.stats-card:where(.card_1, .card_2, .card_5, .card_8, .card_10, .card_11, .card_14, .card_15, .card_16, .card_18, .card_20, .card_23, .card_25, .card_26, .card_27) .card-fixTitle .ex_price,
.stats-card:where(.card_1, .card_2, .card_5, .card_8, .card_10, .card_11, .card_14, .card_15, .card_16, .card_18, .card_20, .card_23, .card_25, .card_26, .card_27) .card-body .card-item .rate-box .ex_price {
    width: 105px
}
.stats-card:where(.card_6, .card_24) .card-fixTitle .ex_price,
.stats-card:where(.card_6, .card_24) .card-body .card-item .rate-box .ex_price {
    width: 235px;
}
.stats-card:where(.card_7, .card_12, .card_22) .card-fixTitle .ex_price,
.stats-card:where(.card_7, .card_12, .card_22) .card-body .card-item .rate-box .ex_price {
    width: 200px;
}
.stats-card:where(.card_3, .card_4, .card_9, .card_17, .card_19, .card_21, .card_28) .card-fixTitle .ex_price,
.stats-card:where(.card_3, .card_4, .card_9, .card_17, .card_19, .card_21, .card_28) .card-body .card-item .rate-box .ex_price {
    width: 150px;
}
.stats-card:where(.card_13) .card-fixTitle .ex_price,
.stats-card:where(.card_13) .card-body .card-item .rate-box .ex_price {
    width: 185px;
}

.stats-card:is(.card_1, .card_2, .card_8, .card_10, .card_11, .card_14, .card_15, .card_16, .card_18, .card_20, .card_23, .card_25, .card_26, .card_27) .card-fixTitle .data-value,
.stats-card:is(.card_1, .card_2, .card_8, .card_10, .card_11, .card_14, .card_15, .card_16, .card_18, .card_20, .card_23, .card_25, .card_26, .card_27) .card-body .card-item .data-value {
    width: 120px;
}
.stats-card:is(.card_3, .card_4) .card-fixTitle .data-value,
.stats-card:is(.card_3, .card_4) .card-body .card-item .data-value {
    width: 200px;
}
.stats-card:is(.card_5, .card_9, .card_17, .card_28) .card-fixTitle .data-value,
.stats-card:is(.card_5, .card_9, .card_17, .card_28) .card-body .card-item .data-value {
    width: 150px;
}
.stats-card:is(.card_9, .card_21, .card_22) .card-fixTitle .data-value,
.stats-card:is(.card_9, .card_21, .card_22) .card-body .card-item .data-value {
    width: 180px;
}
.stats-card:is(.card_6, .card_24) .card-fixTitle .data-value,
.stats-card:is(.card_6, .card_24) .card-body .card-item .data-value {
    width: 260px;
}
.stats-card:is(.card_7, .card_12, .card_13, .card_19) .card-fixTitle .data-value,
.stats-card:is(.card_7, .card_12, .card_13, .card_19) .card-body .card-item .data-value {
    width: 220px;
}


.stats-card .card-body .card-item .ex_price.per .ntext {
    font-size: 12px;
}
.stats-card .card-body .card-item .ex_price.per.up .ntext {
    color: var(--red);
}
.stats-card .card-body .card-item .ex_price.per.down .ntext {
    color: var(--blue);
}
.stats-card .card-body .card-item .ex_price.per.same .ntext {
    color: var(--black);
}
.stats-card .card-body .card-item .ex_price.per.up .ntext::after {
    border-width: 0 4px 8px 4px !important;
}
.stats-card .card-body .card-item .ex_price.per.down .ntext::after {
    border-width: 8px 4px 0 4px !important;
}
.stats-card .card-body .card-item .ex_price.per.same .ntext::after {
    border-width: 2px;
    border-color: var(--black);
    width: 5px;
}
.stats-card .card-body .card-item .rate-box .ex_per {
    width : 120px;
    padding: 0 10px;
    justify-content: center;
}
.stats-card .card-body .card-item .rate-box .ex_per .ud-box {
    display: inline-block;
    min-width: 80px;
    padding: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    color: #fff;
    vertical-align: top;
    text-align: center;
    height: auto;
}
.stats-card .card-body .card-item .rate-box .ex_per.up .ud-box {
    background-color: var(--red);
}
.stats-card .card-body .card-item .rate-box .ex_per.down .ud-box {
    background-color: var(--blue);
}
.stats-card .card-body .card-item .rate-box .ex_per.same .ud-box {
    background-color: var(--grey-d3);
}
.stats-card .card-body .card-item .data-value {
    justify-content: flex-end;
    font-family: 'pt', 'SDGothicNeo';
    width: max-content;   
    width : 260px;
}
.stats-card .card-body .card-item .date-quarter {
    justify-content: flex-end;
    font-family: 'pt', 'SDGothicNeo';
    width: 120px;
    border-right: unset;
}
.form-dic_search {
    margin: 30px 0 0 0;
}
.searchBox-wrap {
    padding: 50px;
    border-radius: 20px;
    /* -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04); */
    background-color: var(--white);
}
.searchBox-wrap .input-box {
    height: 55px;
    border-radius: 6px;
    border: 1px solid var(--grey-ea);
}
.searchBox-wrap .input-box:has(>.Custom-select.active) {
    border-bottom-left-radius: 0;
}
.searchBox-wrap .Custom-select {
    width: 150px;
    height: 100%;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--grey-ea);
}
.searchBox-wrap .Custom-select .title {
    height: 100%;
}
.searchBox-wrap .Custom-select .scroll {
    top: 54px;
    border-color: var(--grey-ea);
}
.searchBox-wrap .Custom-select .scroll li:hover {
    background-color: var(--blue-light);
}
.searchBox-wrap .input-box input {
    border: none;
    outline: none;
    flex: 1;
    height: 100%;
    padding: 0 20px;
}
.searchBox-wrap .input-box button,
.searchBox-wrap .input-box a {
    cursor: pointer;
    outline: none;
    border: none;
    background-color: var(--white);
    width: 55px;
    height: 100%;
    padding: 0;
}
.searchBox-wrap .input-box button .search-icon {
    width: 20px;
    height: 20px;
    background-image: url(/res/svg/search.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
}
.searchBox-wrap .input-box a .reset-icon {
    width: 20px;
    height: 20px;
    background-image: url(/res/svg/reset_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
}
.searchBox-wrap .keyword-wrap {
    margin-top: 50px;
    flex-direction: column;
    gap: 30px;
}
.searchBox-wrap .keyword-wrap .key-box {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 830px;
}
.searchBox-wrap .keyword-wrap .key-box .c-btn {
    width: 50px;
    height: 40px;
    font-weight: 700;
    border: 1px solid var(--grey-ea);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.1s;
}
.searchBox-wrap .keyword-wrap .key-box.kor .c-btn {
    font-weight: 900;
}
/* 버튼 호버 상태 스타일 */
.searchBox-wrap .keyword-wrap .key-box .c-btn:hover {
    background-color: var(--blue-light);
    border-color: var(--blue);
    color: var(--blue);
}

/* 버튼 액티브 상태 스타일 */
.searchBox-wrap .keyword-wrap .key-box .c-btn:active {
    background-color: var(--blue-light);
    color: var(--blue);
    transform: translateY(1px); /* 클릭 시 버튼이 아래로 약간 이동하는 효과 */
}

/* 버튼 포커스 상태 스타일 */
.searchBox-wrap .keyword-wrap .key-box .c-btn:focus,
.searchBox-wrap .keyword-wrap .key-box .c-btn.active {
    outline: none;
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.resultBox-wrap {
    padding: 50px 0 0 0;
}
.resultBox-wrap .dic-count,
.resultBox-wrap .dic-count .count {
    font-size: 21px;
    font-weight: 700;
    word-break: break-all;
}
.resultBox-wrap .dic-count .count {
    font-family: 'pt', 'SDGothicNeo';
    color: var(--red);
}
.resultBox-wrap .description-list {
    margin: 20px 0;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
}
.resultBox-wrap .description-list .item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.resultBox-wrap .description-list .key {
    display: flex;
    align-items: center;
    height: 70px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.48px;
    padding: 0 50px 0 0;
    cursor: pointer;
}
.resultBox-wrap .description-list .item:not(:last-child) .key,
.resultBox-wrap .description-list .item.on:last-child .key {
    border-bottom: 1px solid var(--grey-ea);
}
.resultBox-wrap .description-list .key .alternate {
    margin-left: 10px;
    color: var(--grey);
}
.resultBox-wrap .description-list .key .arrow {
    margin-left: auto;
    width: 9px;
    height: 5px;
    background-image: url(/res/svg/pc_faq_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}
.resultBox-wrap .description-list .item.on .key .arrow {
    transform: rotate(180deg);
}
.resultBox-wrap .description-list .val {
    padding: 0 30px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.59;
    letter-spacing: -0.39px;
    color: var(--grey);
    border-bottom: 1px solid transparent;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.resultBox-wrap .description-list .item.on .val {
    padding: 30px;
    height: auto;
    opacity: 1;
    border-color: var(--grey-ea);
}
/*************** ecos 끝 ***************/




/*************** 등록대부업체 통합조회 fss 시작 ***************/
._fss main:has(.wiki-h1-title) {
    padding: 0;
}
.wiki-section.wiki-header.fss {
    flex-direction: column;
    /* height: 583px; */
    height: 638px;
    padding: 0 40px 40px 40px;
    border-radius: 25px;
    position: relative;
}
.wiki-section.wiki-header.fss .wiki-intro-box {
    height: 350px;
}
.wiki-section.wiki-header.fss .wiki-h1-title {
    margin: 75px 0 162px 0;
}
.form-lendersSearch {
    width: calc(100% - 40px);
    height: auto;
    flex-direction: column;
    position: absolute;
    bottom: 40px;
    left: 40px;
}
.lenders-list .item:not(.h_auto),
.lenders-list .item.h_auto .check-val {
    height: 55px;
}
.lenders-list .item:not(:last-child) {
    /* border-bottom: 1px solid var(--grey-ea); */
    border-bottom: 1px solid rgba(6, 127, 105, 1);
}
.lenders-list :where(.key,.val) {
    height: 100%;
    display: flex;
    align-items: center;
}
.lenders-list .key {
    font-size: 15px;
    font-weight: 700;
    margin-right: 20px;
    color: var(--white);
    width: 80px;
}
.lenders-list .item.h_auto .val {
    flex-direction: column;
    align-items: flex-start;
}
.lenders-list .val {
    margin: 0;
}
.lenders-list .val label {
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    color: var(--white);
}
.lenders-list .val label:not(:last-child) {
    margin-right: 20px;
}
.lenders-list .val label .text {
    color: var(--white);
    font-size: 12px;

}
.lenders-list .val label input:checked~.text {
    /* font-weight: 700; */
    color: var(--green-graph);
    color: var(--green-fin);
    /* color: var(--color-end); */
}
.lenders-list .text-val {
    width: 494px;
    height: 55px;
    padding: 0 40px 0 10px;
    border-bottom: 2px solid var(--white);
    overflow: hidden;
    position: absolute;
    top: -117px;
    right: 0;
    z-index: 10;
}
/* .lenders-list .text-val:has(input:focus) {
    border-color: var(--green);
} */
.lenders-list .text-val input {
    flex: 1;
    height: 100%;
    border: none;
    border-radius: unset;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.48px;
    color: var(--white);
    background-color: transparent;
}
.lenders-list .text-val input::placeholder {
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
.lenders-list .text-val input:-webkit-autofill,
.lenders-list .text-val input:-webkit-autofill:hover,
.lenders-list .text-val input:-webkit-autofill:focus,
.lenders-list .text-val input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #06876b inset !important;
    -webkit-text-fill-color: var(--white) !important;
}
.lenders-list .text-val button {
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    border: none;
    background: none;
}
.lenders-list .text-val button .search-icon {
    width: 20px;
    height: 20px;
    background-image: url(/res/svg/search_w.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* .lenders-list .text-val input:focus~button .search-icon {
    background-image: url(/res/svg/search_green.svg);
} */
.lenders-infoBox {
    margin: 70px 0 0 0;
    padding: 30px;
    background-color: var(--grey-f9);
    border-radius: 15px;
}
/* .lenders-infoBox .info-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.lenders-infoBox .info-list .item {
    flex-direction: column;
    align-items: flex-start;
}
.lenders-infoBox .info-list p {
    line-height: 1.54;
}
.lenders-infoBox .info-list p.no {
    padding-left: 12px;
}
.lenders-infoBox .info-list p span {
    color: var(--green);
} */
.lenders-infoBox.caution_info.on .caution_list.info-list {
    height: 73px;
}
.lenders-infoBox.caution_info .caution_list.info-list .item {
    display: list-item;
}
.lenders-infoBox .info-list span {
    font-weight: 700;
    color: var(--green);
}
.lenders-infoBox .info-list .link-item {
    /* margin: 25px 0 0 0; */
    margin-left: 30px;
    font-weight: 700;
    color: var(--green);
}
.lenders-section.result {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 50px;
}
.lenders-section.result .total-count,
.lenders-section.result .total-count span {
    font-weight: 700;
}
.hf-list-title.lenders {
    background-color: var(--white);
    border-bottom : 1px solid var(--black);
}
.hf-list-title.lenders div {
    font-size: 14px;
    line-height: 1.54;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hf-list.lenders .item {
    height: 100%;
}
/* .hf-list.lenders .item:not(:last-child) {
    border-bottom: 1px solid var(--black);
} */
/* .hf-list-title.lenders {
    display: grid;
    grid-template-areas: 'no1 no2 no2 no3 no3 no4 no4 no5 no5 no6 no6 no7 no7'
                        'no1 no9 no9 no9 no10 no10 no10 no8 no8 no11 no12 no13 no14';
    min-height: 100px;
} */
.hf-list.lenders .linked-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    min-height: 55px;
    /* display: grid;
    grid-template-areas: 'no1 no3 no3 no3 no3 no5 no6 no6 no4 no4 no11 no12 no7 no7'
                        'no1 no2 no2 no2 no2 no8 no10 no10 no10 no10 no9 no9 no13 no14';
    min-height: 100px; */
}
/* .hf-list.lenders {
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
} */
.hf-list.lenders .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    min-height: 55px;
    padding: 0 10px;
}
.hf-list-title.lenders .box.cnum,
.hf-list.lenders .box.cnum{
    width: 235px;
    flex: unset;
    text-align: center;
}
.hf-list-title.lenders .box.name,
.hf-list.lenders .box.name{
    width: 210px;
    flex: unset;
    text-align: center;
}
.hf-list-title.lenders .box.ceo,
.hf-list.lenders .box.ceo {
    width: 90px;
    flex: unset;
    text-align: center;
}
.hf-list.lenders .box.adr {
    padding: 0 20px;
    align-items: flex-start;
    line-height: 1.42;
}
.hf-list-title.lenders .box.dnum,
.hf-list.lenders .box.dnum {
    width: 100px;
    flex: unset;
    word-break: break-all;
    text-align: center;
}
.hf-list.lenders .box.dnum span {
    font-weight: 500;
    color: var(--black);
}
.hf-list-title.lenders .box.status,
.hf-list.lenders .box.status {
    width: 100px;
    flex: unset;
    text-align: center;
} 
.hf-list-title.lenders .box.phone,
.hf-list.lenders .box.phone {
    width: 130px;
    flex: unset;
    text-align: center;
} 
/* .hf-list-title.lenders .box.no_1,
.hf-list.lenders .box.no_1 {
    grid-area: no1;
    width: 50px;
}
.hf-list-title.lenders .box.no_2,
.hf-list.lenders .box.no_2 {
    grid-area: no2;
    width: 260px;
}
.hf-list-title.lenders .box.no_3,
.hf-list.lenders .box.no_3 {
    grid-area: no3;
    width: 260px;
}
.hf-list-title.lenders .box.no_4,
.hf-list.lenders .box.no_4 {
    grid-area: no4;
    width: 140px;
}
.hf-list-title.lenders .box.no_5,
.hf-list.lenders .box.no_5 {
    grid-area: no5;
    width: 90px;
}
.hf-list-title.lenders .box.no_6,
.hf-list.lenders .box.no_6 {
    grid-area: no6;
    width: 180px;
}
.hf-list-title.lenders .box.no_7,
.hf-list.lenders .box.no_7 {
    grid-area: no7;
    width: 190px;
}
.hf-list-title.lenders .box.no_8,
.hf-list.lenders .box.no_8 {
    grid-area: no8;
    width: 90px;
}
.hf-list-title.lenders .box.no_9,
.hf-list.lenders .box.no_9 {
    grid-area: no9;
    width: 250px;
}
.hf-list-title.lenders .box.no_10,
.hf-list.lenders .box.no_10 {
    grid-area: no10;
    width: 320px;
}
.hf-list-title.lenders .box.no_11,
.hf-list.lenders .box.no_11 {
    grid-area: no11;
    width: 125px;
}
.hf-list-title.lenders .box.no_12,
.hf-list.lenders .box.no_12 {
    grid-area: no12;
    width: 125px;
}
.hf-list-title.lenders .box.no_13,
.hf-list.lenders .box.no_13 {
    grid-area: no13;
    width: 95px;
}
.hf-list-title.lenders .box.no_14,
.hf-list.lenders .box.no_14 {
    grid-area: no14;
    width: 95px;
} */
.hf-list.lenders .box .key {
    background-color: var(--grey-f9);
}
/* .hf-list-title.lenders .box:not(.no_7, .no_14), */
/* .hf-list.lenders .box:not(.no_7, .no_14) { */
.hf-list.lenders .box:not(:last-child) {
    border-right: 1px solid var(--grey-ea) !important;
}
/* .hf-list-title.lenders .box:where(.no_3, .no_4, .no_5, .no_6, .no_7, .no_11, .no_12),
.hf-list.lenders .box:where(.no_3, .no_4, .no_5, .no_6, .no_7, .no_11, .no_12) {
    border-bottom: 1px solid var(--grey-ea) !important;
} */

.hf-list.lenders .box .key,
.hf-list.lenders .box .val {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    min-height: 45px;
}
.hf-list.lenders .box .key {
    font-weight: 400;
    height: 45px;
}
.hf-list.lenders .box .val {
    line-height: 1.35;
}
/*************** 등록대부업체 통합조회 fss 끝 ***************/