@import "common.css";

/***************************************************************** 
| #header.member
*****************************************************************/
#header.member {background-color: transparent;}
#header.member.scrolled {background-color: #fff;}

/***************************************************************** 
| 회사소개 - 인사말
*****************************************************************/
.intro-container {position: relative;}
.intro-container .inner {display: flex; margin-top: 75px;  align-items: center; gap: 5%; position: relative;}

.intro-box-left {width: 38%; height: 1018px;}
.president-img {
    background: url(../img/intro_president.webp) no-repeat; 
    display: inline-block; 
    background-size: 100%; 
    width: 499px; 
    height: 1018px;
}

.intro-box-right {display: flex; flex-direction: column; gap: 60px; text-align: center; color: #2a2a2a;}
.intro-item-top {margin-bottom: 50px; margin-top: -200px;}
.intro-item-top strong {
    display: block;
    margin-top: var(--clamp-60px-w1300); 
    font-size: var(--font-size-lg-xx);
    font-weight: var(--font-weight-bold); 
    line-height: var(--line-height-5); 
    word-break: keep-all;
}
.intro-item-top strong span {
    background: linear-gradient(to right, var(--color-green-02), var(--color-blue-03));
    color: transparent;
    -webkit-background-clip: text;
}
.intro-item-top p {
    margin-top: 15px;
    padding: 0 var(--header-padding-base);
    font-size: var(--font-size-lg-ss); 
    font-weight: var(--font-weight-semi-bold); 
    line-height: var(--line-height-3); 
    word-break: keep-all;
}
.intro-item-bottom {display: flex; flex-direction: column; gap: 25px;}
.intro-item-bottom p {
    font-size: var(--font-size-default); 
    line-height: var(--line-height-5); 
    word-break: keep-all;
}
.intro-container::after {
    content: ''; display: block; bottom: 0; left: 0; width: 100%; position: absolute; background: #fafafa; height: 53%; z-index: -1;
}
.intro-item-bottom p span {font-weight: var(--font-weight-bold);}
.intro-name {font-size: 26px; margin-right: 12px;}

@media (max-width: 1330px) {
    .intro-container {background: radial-gradient(#fafafa 50%, #fff 70%);}
    .intro-container .inner {
        position: relative;
        margin-top: 0px;
    }
    .intro-item-top {
        position: absolute;
        top: 220px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%; z-index: 2;
    }
    .intro-box-left {
        width: 420px;
        height: 805px; 
    }
    .intro-item-top img {max-width: 810px; width: 90%;}
    .intro-container::after {content: none;}
    .president-img {
        background: url(../img/intro_president_mb.webp) no-repeat; 
        margin-top: clamp(440px, 37.5vw, 480px); 
        width: 420px; 
        height: 511px;
    }
    .intro-item-bottom {
        margin-top: clamp(100px, 12.03vw, 160px);
        margin-bottom: 85px; 
    }
}
@media screen and (max-width: 770px) {
    .intro-item-bottom p br {display: none;}
}
@media (max-width: 695px) {
    .intro-container {
        background: radial-gradient(#fafafa 58%, #fff 90%);

        &.intro {padding: 0;}
    }
    .intro-item-top {
        margin-top: -220px; 
        margin-bottom: 50px; 
        padding-top: 50px;
    }
    .intro-item-top::before {
        z-index: -1;
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: radial-gradient(#fff 58%, #fafafa 80%, #fff 100%); 
        content: ''; 
    } 
    .president-img {margin-top: clamp(380px, 65.625vw, 420px);}
    .intro-item-bottom {margin-top: 80px;}
}
@media screen and (max-width: 640px) {
    .intro-item-top img {width: 60%;}
    .intro-item-top strong {font-size: var(--font-size-lg-sx);}
    .intro-item-bottom {margin-top: clamp(40px, 6.25vw, 80px);}
}
@media screen and (max-width: 520px) {
    .president-img {margin-top: clamp(340px, 79.167vw, 380px);}
    .intro-item-bottom {margin-top: 0;}
}
@media (max-width: 400px) {
    .intro-item-top strong {font-size: var(--font-size-lg-m);}
    .president-img {margin-top: clamp(300px, 80vw, 320px);}
    .intro-item-top p {font-size: var(--font-size-default);}
}


/***************************************************************** 
| 회사소개 - 오시는 길
*****************************************************************/
.map-tit-box {display: flex; justify-content: space-between;  align-items: end;}
.map-tit-box h4 {font-size: var(--font-size-lg-sx); line-height: var(--line-height-3);}
.map-tit-box h4 strong {font-weight: var(--font-weight-bold);}
.map-tit-box h4 strong span {    
    background: linear-gradient(to right, var(--color-green-02), var(--color-blue-03));
    color: transparent;
    -webkit-background-clip: text;
}

/* 카테고리 선택 버튼 */
.map-nav {
    display: flex; 
    padding: 5px;
    background: #fafafa; 
    border-radius: 7px; 
}
.map-nav :where(.button, .button > a) { 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92px; 
    height: 34px; 
    border-radius: 7px; 
    font-size: var(--font-size-default);
    color: #acb1ba; 
}
@media screen and (max-width: 1000px) {
    #bo_cate {width: 100%;}
    .map-tit-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .map-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        width: 100%;
        margin-top: var(--clamp-30px-w640);
        padding: 0;
        background: transparent;
    }
    .map-nav :where(.button, .button > a) {
        width: 100%;
        background: #fafafa;
    }
}
@media screen and (max-width: 640px) {
    .map-tit-box h4 {font-size: var(--font-size-lg-s);}
}


.sub-container .map-nav :where(.button.view, .button #bo_cate_on) {
    background: #2e3542;
    color: #fff; 
}

/* 오시는 길 지도 */
.map-info-box {
    overflow: hidden;
    margin-top: var(--clamp-80px-w1300); 
    position: relative;
}
#map-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: silver;
}
.map-info-item {
    width: 100%;
    height: 650px;
}
.root_daum_roughmap {
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: inherit !important;
}
.root_daum_roughmap .wrap_map {height: inherit !important;}
.root_daum_roughmap .wrap_controllers {display: none;}

.map-info-way {
    z-index: 1; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: 10%;
    padding: var(--clamp-40px-w640); 
    width: 495px; 
    border-radius: 7px; 
    background: #383e4b; 
    color: #fff; 
    box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.2);
}
.map-info-way strong {
    display: block; 
    padding-bottom: var(--clamp-20px-w640); 
    border-bottom: 1px solid #70757d;
    font-size: var(--font-size-lg-b); 
    font-weight: var(--font-weight-bold); 
    color: #fff; 
}
.map-info-address {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    font-size: 18px;
}
.map-info-address em {
    display: block;
    margin-bottom: 15px;
    font-size: var(--font-size-default); 
    font-weight: var(--font-weight-bold); 
    color: #697b9c; 
}
.map-address {
    margin-bottom: 15px;
    font-size: var(--font-size-default);
    line-height: var(--line-height-3);
}

.address-box {
    margin-bottom: var(--gap-10);
    line-height: var(--line-height-3);
}
.map-address {display: inline;}
.address-copy {
    display: inline;
    border-radius: var(--border-radius-default);
    padding: 4px 10px;
    background-color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-black-01);
}
.map-app-btn {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: var(--clamp-95px-w500); 
    aspect-ratio: 1 / 0.362;
    border: 1px solid var(--color-gray-02);
    border-radius: var(--border-radius-20);
    background: #fff;
    font-size: var(--font-size-xsm);
    color: #666666;
}
.grid {display: grid;width: 100%;}

.branch-map-app.grid.col-3 {
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    gap: var(--clamp-10px-w640);
}
:where(.address-icon, .address-item button, .map-icon) img {
    width: 100%;
    object-fit: contain;
}
.address-icon, .map-icon {
    flex-shrink: 0;
    width: 12px;
}
.address-icon {margin-right: 6px;}
.map-icon {margin-right: 2px;}
.map-info-tel {
    font-size: var(--font-size-lg-b);
    font-weight: var(--font-weight-bold);
}
a.map-app-btn:hover {color: #666666;}

.map-info-public {
    max-width: 1280px; 
    margin: var(--clamp-80px-w1300) auto var(--clamp-100px-w1400); 
}
.map-info-row {display: flex; gap: 160px; padding: 35px 0;color: #2a2a2a; border-bottom: 1px solid #dddddd; padding-left: 10px;}
.map-info-row:last-child {border-bottom: 0;}
.map-place-sub {
    display: flex;
    align-items: center;
    width: 170px;
    gap: var(--clamp-10px-w640);
}
.map-place-sub i {width: 20px; background-repeat: no-repeat;}
.map-place-sub span {
    font-size: var(--font-size-lg-sm); 
    font-weight: var(--font-weight-bold); 
    line-height: var(--line-height-5); 
}
.map-place-sub-icon {width: 16px; height: 22px; display: inline-block; background: url(/sub/img/map-place-sub-icon.webp);}
.map-place-bus-icon1 {width: 16px; height: 17px; display: inline-block; background: url(/sub/img/map-place-bus-icon1.webp);}
.map-place-bus-icon {width: 20px; height: 15px; display: inline-block; background: url(/sub/img/map-place-bus-icon.webp);}
.map-account {font-size: var(--font-size-default);}
.map-account > p {
    margin-top: 15px; 
    font-size: var(--font-size-default);
    line-height: var(--line-height-5);
}
.map-account-exit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-5);
}
.map-account-exit em {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 20px; 
}
.map-account-exit em::after {position: absolute; content: ''; background: #2a2a2a; width: 1px; height: 13px; right: -10px; top: 50%; transform: translatey(-50%); }
.map-account-exit em:last-child::after {content: none;}
.map-account-exit span {
    display: inline-flex;
    justify-content: center;
    align-items: center; 
    width: var(--font-size-lg-s); 
    height: var(--font-size-lg-s);
    margin-right: 2px;
    border-radius: 50%; 
    font-size: var(--font-size-mid);
    color: #fff; 
    text-align: center; 
}
.map-account-o {background: #ff7300;}
.map-account-g {background: #3cb44a;}
.map-account-exit p {display: inline-block; margin-left: 5px;    vertical-align: text-bottom;}

.map-account-bus-big-inner {
    display: flex; 
    flex-direction: column; 
    gap: var(--clamp-15px-w640);
}
.map-account-bus-big-inner span.bus-num {
    display: inline-flex;
    justify-content: center;
    align-items: center; 
    width: 48px; 
    height: 23px; 
    margin-right: 8px;
    font-size: 15px; 
    color: #fff; 
    text-align: center; 
}
.back-b {background: #3658ab;}
.back-g {background: #50a232;}
.back-r {background: #dd1119;}
.map-account-bus-big-inner p,
.map-account-bus-big strong {
    display: flex;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold); 
}
.map-account-bus-big-inner strong {
    display: block; 
    margin-top: var(--clamp-20px-w640);
}
.map-account-bus-big-inner strong span {font-weight: var(--font-weight-bold);}

.map-account-bus-big ul {
    display: flex; 
    flex-direction: column; 
    gap: var(--clamp-10px-w640); 
    margin-top: var(--clamp-20px-w640);
    font-size: var(--font-size-default);
}
.map-account-bus-big ul span {font-weight: var(--font-weight-bold); color: #de4444;}

.map-account-r { background: #c2273c;}
.map-account-br {background: #d4a556;}
.map-account-b {background: #415bc7;}
.map-account-s {background: #6f99d0;}
.map-account-e {background: #7cc4a5;}
.map-account-bus-big strong {line-height: var(--line-height-5);}
.map-account-bus-big-inner span.bus-num {min-width:48px;}
.map-account-bus-big-inner {line-height: var(--line-height-5);}

@media (max-width: 1320px) {
    .map-info-row {gap: 58px; padding-left: 0;}
    .map-place-sub {min-width: 170px;}
    .map-place-sub span {font-size: var(--font-size-lg-ss);}
}
@media (max-width: 1090px) {
    :root {
        --map-height-base: clamp(150px, 31.25vw, 200px);
    }
    #map-container {
        height: calc(var(--map-height-base) * 8) !important;
        transform: translateY(calc(var(--map-height-base) * -3));
    }
    .map-info-item {height: calc(var(--map-height-base) * 2);}
    .root_daum_roughmap {
        overflow: visible !important;
    }
    .map-info-way {
        position: relative;
        right: auto; 
        top: auto;
        margin: -40px auto 0; 
        transform: translateY(0);
    }
    .map-info-public {margin-top: 30px; word-break: keep-all;}
    .map-info-row {gap: 15px;flex-direction: column;}
    .map-account-bus-big ul {
        font-size: var(--font-size-mid);
        line-height: var(--line-height-5);
    }
}
@media screen and (max-width: 640px) {
    .map-nav :where(.button, .button > a) {font-size: var(--font-size-mid);}
    .map-account-bus-big-inner p,
    .map-account-bus-big strong,
    .map-account > p {font-size: var(--font-size-mid);}
    .map-address { 
        font-size: var(--font-size-mid);
        word-break: keep-all;
    }
}
@media (max-width: 560px) {
    .map-info-way {width: 90%;}
}    
@media (max-width: 390px) {
    .branch-map-app.grid.col-3 {gap: 5px;}
    .map-info-address {padding-top: 20px; gap: 25px;}
    .map-info-row {padding: 20px 0;}
}
/***************************************************************** 
| 변호사 소개
*****************************************************************/
.lawyer-ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--clamp-20px-w640);
    margin-top: clamp(40px, 7.5vw, 75px); 
    color: #2a2a2a; 
}
.lawyer-ul li {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 1/1.163;
    background-color: #fafafa;
    /* border: 1px solid red; */
}
.lawyer-ul li .lawyer-name-box {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: clamp(20px, 2.5vw, 25px);
    font-weight: 500;
}
.lawyer-ul li a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: url(/sub/img/lawyer-hover.webp) no-repeat;
    background-position: center;
    background-size: auto;    
    background-color: rgba(0,0,0,0.7);
}
.lawyer-ul li a:hover:after {opacity: 1; }

.lawyer-img-box {
    width: 70%;
    aspect-ratio: 3/4;
    margin: 0 auto;
    /* border: 1px solid black; */
}
.lawyer-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}
.lawyer-name-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lawyer-name {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.lawyer-name strong {
    font-size: var(--font-size-lg-m); 
    font-weight: var(--font-weight-bold); 
}
.lawyer-name em {font-size: var(--font-size-default);}

.lawyer-area {
    font-size: var(--font-size-mid); 
    color: #888888; 
}

.list_area {margin: 85px 0; text-align: center; }
.list_area a {margin-right: 25px; font-size: 16px;color: #acb1ba; }
.list_area a.on {color: #2e3542;}

@media screen and (max-width: 1000px) {
    .lawyer-ul {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 640px) {
    .lawyer-ul {
        display: flex;
        flex-direction: column;
    }
}


/***************************************************************** 
| 개인회생
*****************************************************************/
.individual-container section {padding: 90px 0;border-bottom: 1px solid #dddddd; }
.individual-container {position: relative; color: #2a2a2a;}
.individual-container .bg {content: ''; position: absolute; top: 0; left: 0; background: url(../img/individual-bg.webp) no-repeat; width: 1252px; height: 507px; z-index: -1;}

.define-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.individual-tit-box {
    display: flex;
    /* gap:290px; */
    justify-content: space-between;
} 
.individual-tit-box :where(strong, em) {
    flex-shrink: 0;
    display: block;
    font-size: var(--font-size-lg-x); 
    font-weight: var(--font-weight-bold); 
}
.individual-tit-box strong {color: #3c5faf;}
.individual-tit-box p {font-size: 18px; line-height: var(--line-height-5);}

.individual-effect-tit {
    position: relative; 
    display: block; 
    margin: var(--clamp-30px-w640) 0 15px; 
    padding-left: var(--clamp-15px-w640); 
    font-size: var(--font-size-lg-sm); 
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-3);
    word-break: keep-all; 
}
.individual-effect-tit:before {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 0;   
    width: 3px; 
    height: 90%; 
    background: #3c60af; 
    content: ''; 
}

.individual-effect-box {
    display: flex; 
    flex-direction: column; 
    gap: var(--clamp-20px-w640);
}
.individual-effect-item h5 {
    font-size: var(--font-size-lg-sm); 
    color: #3c5faf; 
    font-weight: var(--font-weight-bold); 
    background: #fafafa; 
    padding: 33px; 
    border: 1px solid #dddddd; 
    position: relative; 
    display: flex; 
    gap: 5px;
    word-break: keep-all; 
    line-height: var(--line-height-5); 
}
.individual-effect-item h5:after {
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);  
    right: 20px; 
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 18px; 
    height: 18px;
    padding-bottom: 4px;
    font-size: 30px;
    line-height: 1;
    content: '+'; 
}
.individual-effect-answer-box {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0 clamp(40px, 4.687vw, 60px);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    font-size: clamp(16px, 1.4vw, 18px);
    color: transparent;
    line-height: var(--line-height-5);
    transform: translateY(-7px);
    transition: opacity 0s ease, visibility 0.3s ease, max-height 0.5s ease, color 0.3s ease, transform 0.5s ease;
    word-break: keep-all;

}
.individual-effect-item.open .individual-effect-answer-box {
    opacity: 1;
    visibility: visible;
    max-height: fit-content;
    padding: 33px;
    transform: translateY(0);
    border: 1px solid #ddd; 
    border-top: 0;
    transition: opacity 0.8s ease, visibility 0.8s ease, max-height 0.8s ease, color 0.8s ease, transform 0.8s ease;
    font-size: var(--font-size-default);
    color: #2a2a2a;
}

.individual-qualified-list {margin: var(--clamp-70px-w1300) 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 25px; }
.individual-qualified-list li {background: #fafafa; padding: var(--clamp-30px-w640); display: flex;display: flex; gap: 65px; line-height: var(--line-height-5); flex-direction: column; }
.individual-qualified-list li i {
    display: block;
    width: clamp(40px, 4.6vw, 60px);
    aspect-ratio: 1/1;
}
.individual-qualified-list li:nth-child(1) i {background: url(../img/icon-plus-qualified1.webp) no-repeat center/cover;}
.individual-qualified-list li:nth-child(2) i {background: url(../img/icon-plus-qualified2.webp) no-repeat center/cover;}
.individual-qualified-list li:nth-child(3) i {background: url(../img/icon-plus-qualified3.webp) no-repeat center/cover;}
.individual-qualified-list li:nth-child(4) i {background: url(../img/icon-plus-qualified4.webp) no-repeat center/cover;}
.individual-qualified-textbox strong {font-weight: var(--font-weight-bold);}
.individual-qualified-textbox p {color: #999;}

.individual-right-list {
    display: flex;
    flex-direction: column; 
    gap: var(--clamp-25px-w640);
    max-width: 948px; 
    margin: 0 auto; 
}
.individual-right-list li {min-height: 72px; position: relative;display: flex;line-height: var(--line-height-5); box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);}
.individual-right-list li div {
    flex-shrink: 0;
    display: flex;
    width: 72px;
    height: auto;
    align-items: center;
    background: #3c5faf;
}
.individual-right-list li div i {
    display: block; 
    width: 28px; 
    height: 28px; 
    margin: 0 auto; 
    background: url(../img/icon-check-new.webp) no-repeat center/80%; 
}
.individual-right-list li span.individual-noone {display: block; font-size: var(--font-size-mid); color: #999;}
.individual-right-list li p {margin-left: 5%; display: flex; align-items: center;}

.individual-right-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--clamp-20px-w640);
}
.individual-right-container .individual-effect-item h5 {color: #2a2a2a;}

.individual-step-ul {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: var(--clamp-60px-w1300);
}
.individual-step-ul li {    
    flex-direction: column;
    grid-column-gap: 25px;
    align-items: center;
    display: grid;
    grid-template-columns: clamp(80px, 19.5vw, 250px) auto;
    gap: clamp(20px, 4.65vw, 60px);
    padding: 0 30px;
}
.individual-step-strong {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    font-size: var(--font-size-lg-bb);
    font-weight: var(--font-weight-bold);
    color: #3c5faf;
}
.individual-step-strong:before {    
    position: absolute;
    top: clamp(2px, 0.39vw, 5px);
    right: 0;
    width: 1px;
    height: 120%;
    background: linear-gradient(to bottom, #ddd 50%, transparent 50%);
    background-size: 1px 10px;
    content: '';
}
.individual-step-strong:after {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: calc(clamp(14px, 3.43vw, 22px) * -1);
    width: clamp(14px, 3.43vw, 22px);
    aspect-ratio: 1/1;
    border: clamp(4px, 1.09vw, 7px) solid #3c5faf;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    content: '';
}
.individual-step-box {
    background: #fafafa;
    display: flex;
    align-items: center; 
    min-height: 105px;
    padding: 20px 23px;
    border-radius: 7px; 
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    color: #000;
    line-height: var(--line-height-5); 
}
.individual-step-box span {color: #999; font-weight: 400;}
.individual-effect-item.open h5 {color: #3c5faf;}
.individual-right-inner {
    display: flex;
    flex-direction: column;
    gap: var(--clamp-20px-w640);
    margin-top: var(--clamp-40px-w640);
}
.individual-right-inner .individual-effect-item.open .individual-effect-answer-box {padding: 0 var(--clamp-30px-w640);}
.individual-right-inner .individual-effect-answer-box ul li {
    padding: var(--clamp-25px-w640) 0; 
    border-bottom: 1px solid #ddd; 
    font-weight: var(--font-weight-bold);
    word-break: keep-all;
}
.individual-effect-answer-box ul li:last-child {border-bottom: 0;}


/***************************************************************** 
| 개인파산
*****************************************************************/
.bankrupt-container .bg {background: url(../img/bankrupt-bg.webp) no-repeat;}
.bankrupt-container .individual-tit-box strong {width: 238px; color: var(--color-green-03);}
.bankrupt-container .individual-effect-container > span {
    display: block; 
    margin: var(--clamp-15px-w640) 0 var(--clamp-40px-w640); 
    font-size: var(--font-size-default);
    color: #999;
    line-height: var(--line-height-5);
}
.bankrupt-container .individual-effect-item h5 {color: var(--color-green-03); display: flex; gap:5px;word-break: keep-all; line-height: var(--line-height-5);}
.bankrupt-container .individual-effect-item h5 span{color: var(--color-green-03);}
.bankrupt-container .individual-effect-item h5:after {color: var(--color-green-03);}
.bankrupt-container .individual-qualified-list li:nth-child(1) i {background: url(../img/icon-bankrupt-qualified1.webp) no-repeat center/cover;}
.bankrupt-container .individual-qualified-list li:nth-child(2) i {background: url(../img/icon-bankrupt-qualified2.webp) no-repeat center/cover;}
.bankrupt-container .individual-qualified-list li:nth-child(3) i {background: url(../img/icon-bankrupt-qualified3.webp) no-repeat center/cover;}
.bankrupt-container .individual-qualified-list li:nth-child(4) i {background: url(../img/icon-bankrupt-qualified4.webp) no-repeat center/cover;}
.bankrupt-container .individual-right-list li div {background: var(--color-green-03);}
.bankrupt-container .individual-right-container .individual-effect-item h5 {color: #2a2a2a;}
.bankrupt-container .individual-step-strong {color: var(--color-green-03);}
.bankrupt-container .individual-step-strong:after {border-color: var(--color-green-03);}
.bankrupt-container .individual-effect-item.open h5 {color: var(--color-green-03);}

@media screen and (max-width: 640px) {
    .individual-right-container {
        display: flex;
        flex-direction: column;
    }
    .bankrupt-container .individual-effect-container > span {font-size: var(--font-size-mid);}
}

/***************************************************************** 
| 법인회생
*****************************************************************/

.corporate-r-container .bg {background: url(../img/corporate-r-bg.webp) no-repeat;}
.corporate-r-container .individual-tit-box strong {color: #0080ed;}
.corporate-r-container .individual-effect-item h5 {display: flex; color: #0080ed; gap: 5px; word-break: keep-all; line-height: var(--line-height-5);}

.corporate-r-container .individual-qualified-list li:nth-child(1) i {background: url(../img/icon-plus-corporate-r2.webp) no-repeat center/cover;}
.corporate-r-container .individual-qualified-list li:nth-child(2) i {background: url(../img/icon-plus-corporate-r3.webp) no-repeat center/cover;}
.corporate-r-container .individual-qualified-list li:nth-child(3) i {background: url(../img/icon-plus-corporate-r4.webp) no-repeat center/cover;}
.corporate-r-container .individual-qualified-list li:nth-child(4) i {background: url(../img/icon-plus-corporate-r5.webp) no-repeat center/cover;}
.individual-qualified-list li:nth-child(1) i.corporate-r-icon {background: url(../img/icon-plus-corporate-r1.webp) no-repeat center/cover;}
.corporate-r-point {
    font-size: var(--font-size-default);
    color: #999; 
    line-height: var(--line-height-5);
}
.individual-qualified-textbox em {font-size: var(--font-size-mid); color: #0080ed; display: block; }
.corporate-r-container .individual-right-list li div {background: #0080ed;}
.corporate-r-container .individual-right-container .individual-effect-item h5 { color: #2a2a2a;}
.corporate-r-container .individual-effect-item.open h5 {color: #0080ed;}
.corporate-r-tit-box {margin-bottom: var(--clamp-80px-w1300);}

/***************************************************************** 
| 법인파산
*****************************************************************/
.corporate-b-container .bg {background: url(../img/corporate-b-bg.webp) no-repeat;}
.corporate-b-container .individual-effect-tit {margin-top: 70px;}
.corporate-b-container .individual-tit-box strong { color: #009683;}
.corporate-b-container .individual-qualified-list {margin-top: 15px;}
.corporate-b-tit-box {margin-bottom: 80px;}
.corporate-b-container .individual-qualified-list li:nth-child(1) i.corporate-r-icon {background: url(../img/icon-plus-corporate-b1.webp) no-repeat center/contain;}
.corporate-b-container .individual-qualified-list li:nth-child(2) i.corporate-r-icon {background: url(../img/icon-plus-corporate-b2.webp) no-repeat center/contain;}
.corporate-b-container .individual-qualified-list li:nth-child(3) i.corporate-r-icon {background: url(../img/icon-plus-corporate-b3.webp) no-repeat center/contain;}
.corporate-b-container .individual-qualified-list li:nth-child(4) i.corporate-r-icon {background: url(../img/icon-plus-corporate-b4.webp) no-repeat center/contain;}
.individual-qualified-textbox { word-break: keep-all;}
.individual-qualified-textbox strong {margin-bottom: 15px;display: block;}
.corporate-b-qualified-list {grid-template-columns: 1fr 1fr;}
.corporate-b-qualified-list li:nth-child(1) i {background: url(../img/icon-plus-corporate-b5.webp) no-repeat center/contain;}
.corporate-b-qualified-list li:nth-child(2) i {background: url(../img/icon-plus-corporate-b6.webp) no-repeat center/contain;}
.corporate-b-container .individual-effect-item h5 {color: #3e958a;}
.corporate-b-container .individual-right-list li div {background: #3e958a;}
.corporate-b-container .individual-effect-item.open h5 {color: #3e958a;}
/* .corporate-b-container .individual-effect-item h5:after {background: url(../img/icon-plus-g1.webp) no-repeat;} */

@media (max-width: 1330px) {
    .individual-container section {padding: var(--clamp-60px-w1300) 0px;}
    .individual-tit-box {gap: 20px;flex-direction: column;}
    .individual-tit-box :where(strong, em) {font-size: var(--font-size-lg-bb);}
}
@media (max-width: 800px) {
    :root {
        --individual-step-ul-li-padding-left: var(--clamp-40px-w640);
    }
    .individual-container .bg {background: url(../img/individual-bg_mb.webp) no-repeat;width: 100%;background-size: contain;}
    .bankrupt-container .bg {background: url(../img/bankrupt-bg_mb.webp) no-repeat;width: 100%;background-size: contain;}
    .corporate-r-container .bg {background: url(../img/corporate-r-bg-mb.webp) no-repeat; width: 100%;background-size: contain;}
    .individual-tit-box p {font-size: var(--font-size-mid); word-break: keep-all;}
    .individual-tit-box p br {display: none;}
    .individual-effect-item h5 {padding: 12px 34px 12px 10px;font-size: var(--font-size-mid);}
    .individual-qualified-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; 
        margin: var(--clamp-40px-w640) 0;
    }
    .individual-qualified-list li {gap: var(--clamp-30px-w1000);}
    .individual-qualified-textbox {font-size: var(--font-size-mid); word-break: keep-all; line-height: var(--line-height-3); }
    .individual-effect-item.open .individual-effect-answer-box {
        max-height: 1500px;
        padding: 15px;
        font-size: var(--font-size-mid);
    } 
    .individual-right-list li div {min-width: 72px;}
    .individual-right-list li p {padding: 10px; font-size: var(--font-size-mid); margin-left: 2%; word-break: keep-all;}

    .individual-effect-item h5:after {right: 10px;}
    .individual-step-ul::before {
        position: absolute;
        top: 2px;
        left: calc(var(--individual-step-ul-li-padding-left) / 4);
        width: 1px;
        height: 140%;
        background-image: linear-gradient(
            to bottom,
            #ddd,
            #ddd 75%,
            transparent 75%,
            transparent 100%
        );
        background-size: 1px 8px;
        content: '';
    }
    .individual-step-ul li {
        padding: 0; 
        grid-template-columns: 1fr;
        gap: var(--clamp-15px-w640);
        padding-left: var(--individual-step-ul-li-padding-left);
    }
    .individual-step-box {
        min-height: var(--clamp-60px-w1300); 
        height: auto; 
        padding: 10px; 
        font-size: var(--font-size-mid);
        word-break: keep-all; 
    }
    .individual-step-strong:before {display: none;}
    .individual-step-strong:after {
        right: auto;
        left: calc(var(--individual-step-ul-li-padding-left) * -1);
        transform: translate(0, -50%);
    }
    .individual-effect-tit {font-size: var(--font-size-lg-ss);}
    .individual-qualified-textbox strong {margin-top: 5px;}
}
@media screen and (max-width: 640px) {
    .individual-tit-box :where(strong, em),
    .individual-step-strong {font-size: var(--font-size-lg-s);}
    .corporate-r-point {font-size: var(--font-size-mid);}
}
@media (max-width: 400px) {
    .individual-right-list li div {min-width: 55px; width: 55px;}
}


/***************************************************************** 
| 자가진단
*****************************************************************/
:root {
    --individual-list-box-input-height: clamp(40px, 5.7vw, 60px);
}
.self-container .map-tit-box {
    display: flex;
    flex-direction: column;
    align-items: baseline; 
    gap: var(--clamp-25px-w640);
}
.self-container .map-tit-box > p {font-size: var(--font-size-default);}
.self-container form {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1); 
    padding: clamp(15px, 3.63vw, 40px); 
    margin: var(--clamp-60px-w1300) 0 var(--clamp-100px-w1400);
    color: #2a2a2a;
}
.self-list-tit {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}
.self-list-tit em {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--font-size-lg-m); 
    aspect-ratio: 1/1;
    border-radius: 4px; 
    background: #2e3542; 
    font-size: var(--font-size-mid); 
    color: #fff; 
}
.self-list-tit span {
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold); 
}
.self-list-box {display: flex; flex-direction: column; gap: 40px;}
.self-list-item {
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    grid-column-gap: 20px; 
    text-align: center; 
}
:where(.self-list-item, .individual-list-item) li label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 1px solid #dddddd; 
    border-radius: 7px; 
    padding: var(--clamp-20px-w640) 0;
    cursor: pointer;
}
:where(.self-list-item, .individual-list-item) li input[type='radio'] {display: none;}
:where(.self-list-item, .individual-list-item) li input:checked+label {
    background-color: var(--color-blue-06);
    color: #fff;
}

.private-list-box {display: flex; flex-direction: column; gap: 20px;}
.private-list-box li {
    background: #fafafa; 
    padding: var(--clamp-25px-w640); 
    border-radius: 7px;
}
.private-list-box li strong {
    display: block;
    margin-bottom: var(--clamp-15px-w640); 
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold); 
}
.private-list-box li input[type="radio"] {
    accent-color: #2e3542;
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.sum-list-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sum-list-box div {
    flex: 1;
    display: flex; 
    align-items: center;
    gap: 6px;
    user-select: none;
}
.sum-list-box input {
    height: 32px; 
    border: 1px solid #dddddd; 
    border-radius: 7px; 
}
.sum-list-box label {cursor: pointer;}

.sum-list-besides input {
    height: var(--individual-list-box-input-height);
    border: 1px solid #dddddd;
    border-radius: 7px;
    padding: 0 var(--clamp-20px-w640);
    width: 100%;
    font-size: var(--font-size-mid);
}

.individual-list-box {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px 20px; 
    margin: 40px 0; 
    padding-bottom: 40px;
    border-bottom: 1px solid #000000; 
}
.individual-list-item {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--clamp-20px-w640);
    text-align: center; 
}
.individual-list-box select {
    width: 100%;
    height: var(--individual-list-box-input-height); 
    padding: 0 var(--clamp-20px-w640);  
    border: 1px solid #dddddd;
    border-radius: 7px; 
    background:url('../img/icon_select_arrow.webp') no-repeat 95% 50%/14px;
    font-size: var(--font-size-mid);
    appearance:none;
}
.individual-list-box input {
    width: 100%; 
    height: var(--individual-list-box-input-height); 
    padding-left: var(--clamp-20px-w640);  
    border: 1px solid #dddddd;
    border-radius: 7px; 
    font-size: var(--font-size-mid);
}
.self-tel {display: flex; align-items: center;}
.self-tel span {display: inline-block; margin: 0 5px;}

.self-personal-tit {display: flex; justify-content: space-between;}
.self-personal-tit strong {font-weight: var(--font-weight-bold);}
.self-personal-tit a {color: #777; font-size: 14px; }
.self-personal-tit a i {width: 9px; height: 14px; display: inline-block; background: url(../img/icon-personal-arrow.webp); margin-left: 10px;vertical-align: bottom; }
.self-personal-text {
    overflow-y: scroll;
    max-height: 300px;
    margin: var(--clamp-20px-w640) 0 var(--clamp-35px-w640); 
    border-radius: 7px;   
    padding: 25px 0 25px 22px;
    background: #fafafa;  
    font-size: var(--font-size-mid);
    line-height: var(--line-height-5);
}
.self-personal-text p {
    overflow-y: scroll;
    height: 190px;    
    font-size: var(--font-size-default);
    line-height: var(--line-height-5); 
}
.self-personal-text p::-webkit-scrollbar {
    width: 6px;
}
.self-personal-text p::-webkit-scrollbar-thumb {
    background: #555555; /* 스크롤바 막대 색상 */
    border: 2px solid #555555; /* 스크롤바 막대 테두리 설정  */
    border-radius: 7px;
}
.self-personal-check {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--clamp-30px-w640) 0; 
    font-weight: var(--font-weight-bold);
}
.self-personal-check-inner {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.56vw, 10px);
    width: max-content;
    font-size: var(--font-size-default);
    transform: translateX(-6px);
}
.self-personal-checkbox-label {
    width: var(--font-size-lg-m);
    aspect-ratio: 1/1;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
#self-personal-checkbox:checked + .self-personal-checkbox-label {
    background: url(../img/icon_checkbox_v.webp) no-repeat center / 55%;
}
.self-personal-submit-box {
    display: flex; 
    align-items: center; 
    gap: var(--clamp-20px-w640); 
    max-width: 488px;
    margin: 0 auto; 
}
.personal-btn {
    all: unset; max-width: 488px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--clamp-20px-w640);
    border-radius: 7px;
    font-size: var(--font-size-default);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.personal-btn.submit {background-color: #2e3542;}
.personal-btn.cancel {color: #777;background-color: #fafafa;}

@media (max-width: 1330px) {
    .self-list-item {
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px;
    }
    .sum-list-box{
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }
    .self-list-tit em {font-size: var(--font-size-sm);}
}
@media (max-width: 1050px) {
    .individual-list-box {grid-template-columns: 1fr;}
    .individual-list-box select {background:url('../img/icon_select_arrow.webp') no-repeat 96% 50%/14px;}
}
@media (max-width: 690px) {
    .self-list-item li {font-size: var(--font-size-mid);}
    .sum-list-box {gap: 8px 5px;}
    .sum-list-box div {font-size: var(--font-size-mid);}
    .individual-list-item li {font-size: var(--font-size-mid);}
    .self-personal-text {padding: 13px;}
    .self-personal-text p {
        font-size: 14px;
        line-height: var(--line-height-3);
    }
}
@media screen and (max-width: 640px) {
    .self-container .map-tit-box > p {font-size: var(--font-size-mid);}
    .self-list-tit em {font-size: var(--font-size-sm);}
    .self-personal-check {padding-top: 0;}
}
@media (max-width: 570px) {
    .sum-list-box {grid-template-columns: repeat(2, 1fr);}
    .individual-list-item,
    .self-list-item {gap: 5px;}
    .map-tit-box > p > span {display: block; margin: 5px 0;}
}
@media (max-width: 400px) {
    .self-list-item li {font-size: var(--font-size-sm); word-break: keep-all; }
    .self-personal-check-inner {font-size: var(--font-size-mid);}
    .personal-btn {font-size: var(--font-size-mid);}
}


/***************************************************************** 
| 구성원 소개 - 세부
*****************************************************************/
:root {
    --btn-back-padding-base: var(--clamp-15px-w640);
    --btn-back-gap: 10px;
    --right-item-padding-base: clamp(12px, 2.3vw, 30px);
}
.btn-back-member {
    z-index: 10;
    position: absolute;
    right: var(--header-padding-base);
    bottom: var(--header-padding-base);
    padding: var(--btn-back-padding-base) calc(var(--btn-back-padding-base) * 2) var(--btn-back-padding-base) calc(var(--btn-back-padding-base) * 2 + calc(var(--btn-back-gap) * 2));
    border-radius: 25px;
    background-color: #fff;
    font-size: var(--font-size-mid-s);
    font-weight: var(--font-weight-bold);
    box-shadow: 1px 0 13px rgba(0, 0, 0, 0.14);
}
.btn-back-member::before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: calc(var(--btn-back-padding-base) * 2);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #fafafa url('/img/common/icon-arrow-down-gray.webp') no-repeat center/40%;
    transform: translateY(-50%) rotate(90deg);
    content: '';
}
.sub-container.member {
    position: relative;
}
.sub-container.member::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* background-color: #fafafa; */
    background: url('/sub/img/bg_member.webp') no-repeat center/cover;
    content: '';
}
.sub-container.member .inner {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: var(--header-state-sub-height);
}
.sub-container.member .inner::after {
    content: '';
    position: absolute;
    top: 330px;
    right: -100px;
    width: 600px;
    aspect-ratio: 1/0.165;
    background: url('/sub/img/bg_haeram.webp') no-repeat center/contain;
}

.member-section {width: 100%;}

/* 섹션 왼쪽 */
.member-img-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.member-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}

/* 섹션 오른쪽 */
.member-section.right {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.member-section.right::-webkit-scrollbar {display: none;}

.right-item {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-20);
    margin-left: 40px;
    padding: calc(var(--right-item-padding-base) * 2) var(--right-item-padding-base);
    border-bottom: 1px solid #ddd;
    font-size: var(--font-size-default);
}
.right-item:nth-child(1) {padding-top: 0;}
.right-item:last-child {border-bottom: 0;}
.right-item.instance {padding: 0;}
.name-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--gap-10);
}
.member-name-box {gap: var(--gap-10);}
.right-item p.member {
    font-size: var(--font-size-default);
    line-height: 1;
}

h3.member {
    font-size: var(--font-size-lg-xx);
    line-height: 1;
}
h4.member {
    font-size: var(--font-size-lg-ss);
    font-weight: var(--font-weight-bold);
}
h4.member.instance {padding: calc(var(--right-item-padding-base) * 2) var(--right-item-padding-base) 0;}

p.member {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-06);
}
.right-item ul {
    display: flex;
    flex-direction: column;
    gap: var(--clamp-20px-w640);
}
.right-item ul li {
    position: relative;
    padding-left: 10px;
    line-height: var(--line-height-3);
}
.right-item ul li::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-black-01);
    content: '';
}
:root {
    --swiper-button-instance-size: clamp(30px, 3.33vw, 40px);
}
.swiper-button-prev.instance, 
.swiper-button-next.instance {
    z-index: 10;
    width: var(--swiper-button-instance-size);
    height: var(--swiper-button-instance-size);
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    color: var(--color-black-01);
}
.instance-button-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.swiper-button-next.instance {right: 0;}
.swiper-button-prev.instance {left: 0;}

.swiper-button-prev.instance::after, 
.swiper-button-next.instance::after {
    font-size: clamp(10px, 1.16vw, 14px);
    font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 1600px) {
    .sub-container.member .inner {padding-top: var(--header-height);}
}
@media screen and (max-width: 1330px) {
    :root {
        --member-section-padding-top: 40px;
    }
    .btn-back-member {
        top: calc(var(--header-state-sub-height) + var(--member-section-padding-top));
        left: var(--header-padding-base);
        right: auto;
        bottom: auto;
    }
    .sub-container.member {
        height: auto;
        background-color: #fff;
    }
    .sub-container.member::before,
    .sub-container.member .inner::after {display: none;}
    .member-section.left {
        z-index: 1;
        position: relative;
        padding-top: var(--member-section-padding-top);
    }
    .member-section.left::before {
        z-index: -1;
        position: absolute;
        top: 0;
        left: calc(var(--header-padding-base) * -2);
        width: calc(100% + calc(var(--header-padding-base) * 4));
        height: 100%;
        background: url('/sub/img/bg_member.webp') no-repeat 50% 80%/cover;
        content: '';
    }
    .member-img-box {width: 40%;}
    .member-section.right {padding-top: var(--member-section-padding-top);}
    .right-item {margin-left: 0;}

    .instance-button-box {
        top: var(--swiper-button-instance-size);
        right: var(--right-item-padding-base);
        height: var(--swiper-button-instance-size);
    }
    .swiper-button-next.instance {right: 0;}
    .swiper-button-prev.instance {
        left: auto;
        right: calc(var(--swiper-button-instance-size) + clamp(5px, 1vw, 10px));
    }
}
@media screen and (max-width: 640px) {
    .btn-back-member {top: calc(var(--header-height) + 15px);}
    .member-section.left {padding-top: calc(var(--member-section-padding-top) + 20px);}
    .member-img-box {width: 60%;}
    h3.member {font-size: var(--font-size-lg-sx);}
    h4.member {font-size: var(--font-size-default);}
    .right-item ul li,
    p.speciality,
    p.member {font-size: var(--font-size-mid);}
}


/***************************************************************** 
| 성공사례 - 목록
*****************************************************************/

/* 관리자 콘솔 */
#bo_btn_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.gall_chk {margin-right: 5px;}
.btn_bo_user {
    display: flex;
    align-items: center;
}
/* .more_opt {display: none;} */


.gall_box.instance {border-bottom: 1px solid #ddd;}
.gall_box.instance:last-child {border-bottom: 0;}

.gall_box.instance .gall_con {padding: var(--right-item-padding-base);}

#gall_ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: var(--clamp-60px-w1300);
}
.gall_li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
}
.gall_li:nth-last-of-type(-n+2) {border-bottom: 0;}
.gall_info {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-mid);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-06);
}
.gall_cate {margin-right: auto;}
.gall_text_href {
    display: flex;
    flex-direction: column;
    gap: var(--gap-10);
    padding-bottom: 40px;
}
.bo_tit {
    width: 100%;
    height: 58px;
    font-size: var(--font-size-lg-ss);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-5);

    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
        
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}
.gall_box.instance .bo_tit {
    height: 100%;
    --webkit-line-clamp: 1;
}

.bo_cnt {
    overflow: hidden;
    font-size: var(--font-size-mid);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-5);
    color: var(--color-gray-06);

    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
        
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.instance-result-label-box {
    overflow-x: scroll;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.instance-result-label-box::-webkit-scrollbar {display: none;}
.instance-result-label {
    flex-shrink: 0;
    padding: 10px 8px;
    font-size: var(--font-size-mid);
    font-weight: var(--font-weight-semi-bold);
    color: #fff;
}
.instance-result-label:nth-child(1) {background: var(--color-blue-02);}
.instance-result-label:nth-child(2) {background: var(--color-blue-06);}
.instance-result-label:nth-child(n+3) {
    background: linear-gradient(to right, var(--color-green-02), var(--color-blue-03));
}

/* 검색기능 */
.bo_sch_wrap {
    display: flex;
    justify-content: baseline;
    align-items: center;
    margin-top: var(--clamp-20px-w640);
}
.bo_sch_wrap form {
    display: flex;
    align-items: center;
    gap: var(--clamp-30px-w640);
}
#sfl {
    width: 100%;
    max-width: 100px;
    background-color: #fff;
    color: var(--color-black-01);
}
.sch_bar {
    display: flex;
    align-items: center;
}
.bo_sch_cls i {color: var(--color-black-01);}
@media screen and (max-width: 640px) {
    #gall_ul {
        display: flex;
        flex-direction: column;
    }
    .bo_sch_wrap {justify-content: center;}
    .bo_sch_wrap form {font-size: var(--font-size-mid-s);}
    #sfl {max-width: 80px;}
    .sch_bar input {width: 100%;}
}


/***************************************************************** 
| 성공사례 - 글쓰기
*****************************************************************/
:root {
    --lawyer-select-box-gap: 20px;
    --lawyer-idx-list-width: 200px;
    --lawyer-idx-list-height: 60px;
    --lawyer-idx-list-padding-base: 10px;
    /* --lawyer-idx-img-box-width: 34px; */
    --lawyer-idx-img-box-width: 28px;
    --instance-result-item-padding: clamp(20px, 3.84vw, 50px);
}

h4.case-title {
    font-size: var(--font-size-lg-m);
    font-weight: var(--font-weight-bold);
}
.bo_cnt h4.case-title {font-size: inherit; font-weight: inherit;}

.bo_w_select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lawyer-select-box-gap);
    height: var(--lawyer-idx-list-height);
}
.bo_w_select select {
    padding-right: 10px;
    font-size: var(--font-size-mid);
    color: var(--color-gray-06);
}
#wr_subject {
    width: 100%;
    padding: 10px 0 20px;
    border-bottom: 1px solid #ddd;
    font-weight: var(--font-weight-bold);
}

/* 변호사 선택 섹션 */
.lawyer-section {
    display: block;
    margin-top: 20px;
}
.laywer-idx-wrapper {
    display: flex;
    align-items: center;
    gap: var(--lawyer-select-box-gap);
    margin-right: auto;
}

#lawyer-idx-list-box {
    z-index: 100;
    position: relative;
    width: var(--lawyer-idx-list-width);
    /* height: var(--lawyer-idx-list-height); */
    user-select: none;
    cursor: pointer;
}
#lawyer-idx-list-box.close {display: none;}
#selected-lawyer-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--lawyer-idx-list-padding-base) calc(var(--lawyer-idx-list-padding-base) * 2);
    background: #fafafa;
}
#lawyer-idx-list-box-inner {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
#lawyer-idx-list-box.active #selected-lawyer-box::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    content: '';
}
#lawyer-idx-list-box.active #lawyer-idx-list-box-inner {display: block;}

.lawyer-idx-list {
    width: 100%;
    padding: var(--lawyer-idx-list-padding-base) calc(var(--lawyer-idx-list-padding-base) * 2);
    background-color: #fafafa;
    cursor: pointer;
}
.lawyer-idx-list.list {padding: calc(var(--lawyer-idx-list-padding-base) * 1.5) calc(var(--lawyer-idx-list-padding-base) * 2);}
#bo_v .lawyer-idx-list.list {margin-top: var(--clamp-100px-w1400);}

.lawyer-idx-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lawyer-idx-img-box {
    overflow: hidden;
    width: var(--lawyer-idx-img-box-width);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
}
.lawyer-idx-img-box img {
    width: 100%;
    height: max-content;
    object-fit: contain;
    object-position: 50% 0%;
}
.lawyer-idx-name-box {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-06);
}
.lawyer-idx-name-box strong {font-size: var(--font-size-mid);}
.lawyer-idx-name-box em {font-size: var(--font-size-mid-s);}


/* 사례 결과 섹션 */
.instance-result-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 30px auto;
    font-size: var(--font-size-mid);
}
#bo_v_atc .instance-result-wrapper {
    margin: 0 auto var(--clamp-80px-w1300);
    font-size: var(--font-size-default);
}

.instance-result-item {
    display: flex;
    align-items: center;
    gap: var(--clamp-20px-w640);
}
.instance-result-item:not(:nth-child(1)) {background-color: #fafafa;}
.instance-result-item:nth-child(1) {
    grid-column: 1/4;
    grid-row: 1/2;
    background-color: var(--color-blue-06);
    color: #fff;
}
.instance-result-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
#bo_v_atc .instance-result-item {padding: var(--instance-result-item-padding) 0;}

/* label */
.instance-result-item .instance-label {
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}
h3.instance-label, .instance-result-txt {font-size: var(--font-size-lg-ss);}
.instance-result-item:not(:nth-child(1)) .instance-label {color: var(--color-gray-06);}

/* input */
.instance-result-item input {
    width: 100%;
    padding: 5px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black-01);
}
.instance-result-item:not(:nth-child(1)) input {
    background-color: transparent;
    border-bottom: 1px solid #ddd;
}

.instance-result-list {
    display: flex;
    align-items: center;
    gap: 8px;
}
.instance-result-list li {
    padding: 10px;
    background-color: #fff;
    font-size: var(--font-size-lg-ss);
    font-weight: var(--font-weight-bold);
    color: var(--color-black-01);
}
.instance-result-txt {font-weight: var(--font-weight-bold);}

.write-input-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.bo_w_link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}
/* .frm_input {width: 100%;} */

.file_wr {
    display: flex;
    align-items: center;
    gap: 10px;
}
.file_wr input::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 5px 10px;
    border: 0;
    background-color: var(--color-blue-06);
    font-size: var(--font-size-sm);
    color: #fff;
}
.file_wr input {font-size: var(--font-size-sm);}
.cke_sc {
    position: relative;
    margin: 10px 0;
}
.cke_sc_def {
    position: absolute;
    background-color: #fff;
}
.btn_confirm.write_div {
    display: flex;
    justify-content: baseline;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.btn_confirm.write_div :where(.btn_cancel, #btn_submit) {
    padding: 10px 20px;
    border: 1px solid black;
}
.btn_confirm.write_div #btn_submit {
    background-color: var(--color-blue-07);
    color: #fff;
}
@media screen and (max-width: 800px) {
    .instance-result-wrapper {grid-template-columns: repeat(2, 1fr);}
    .instance-result-item:nth-child(1) {grid-column: 1/3;}
    .instance-result-item:nth-child(2) {
        grid-column: 1/3;
        grid-row: 2/3;
    }
    h3.instance-label, .instance-result-txt, .instance-result-list li {font-size: var(--font-size-default);}
}
@media screen and (max-width: 400px) {
    .bo_w_select {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        height: auto;
        margin-bottom: 20px;
    }
    h3.instance-label, .instance-result-txt, .instance-result-list li {font-size: var(--font-size-mid);}
}


/***************************************************************** 
| 성공사례 - 보기
*****************************************************************/
.success-view-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: var(--clamp-40px-w640);
    border-bottom: 1px solid #ddd;
}
.title-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.view-category, .view-profile {
    font-size: var(--font-size-mid);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-06);
}
.view-title {
    font-size: var(--font-size-lg-b);
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
        
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.view-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.view-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}
.view-profile .writer {
    position: relative;
}
.view-profile .writer::after {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 2px;
    height: 14px;
    background-color: var(--color-gray-06);
    transform: translateY(-50%);
    content: '';
}

.view-content-section {padding: var(--clamp-60px-w1300) 0 var(--clamp-100px-w1400);}
.view-content > h4.case-title {margin-bottom: 20px;}

.view-content > h4.case-title:where(:nth-of-type(2), :nth-of-type(3)), 
.view-img-box {margin-top: var(--clamp-70px-w1300);}

.view-content > div {
    margin-bottom: 10px;
    line-height: var(--line-height-5);
}

.bo_v_com {
    display: flex;
    align-items: center;
    gap: 10px;
}
.more_opt {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.more_opt.open {
    flex-shrink: 0;
    display: flex;
}
.more_opt.open li {
    flex-shrink: 0;
    display: flex;
}
.more_opt a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.more_opt button {flex-shrink: 0;}

.btn_bo_user {
    display: flex;
    align-items: center;
    gap: 15px;
}
.bo_v_nb > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--clamp-40px-w640);
    padding: var(--clamp-20px-w640);
    border-width: 1px 0;
    border-style: solid;
    border-color: #ddd;
    font-size: var(--font-size-mid);
}
.bo_v_nb > li:nth-child(2) {border-top: 0;}
.bo_v_nb > li > span {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.bo_v_nb > li > a {
    max-width: 1000px;
    margin-right: auto;

    display:-webkit-box; 
    word-wrap:break-word; 
    -webkit-line-clamp:1; 
    -webkit-box-orient:vertical; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
.fa-chevron-up:before,
.fa-chevron-down:before {color: #aaa;}

.view-back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: var(--clamp-100px-w1400) auto 0;
    padding: var(--clamp-25px-w640) var(--clamp-60px-w1300);
    background-color: var(--color-blue-06);
    color: #fff;
}

.empty-list {
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
}

@media screen and (max-width: 1300px) {
    h4.case-title {font-size: var(--font-size-default);}
    .view-content > div {font-size: var(--font-size-mid);}
}


/***************************************************************** 
| 개인정보처리방침
*****************************************************************/
.personal-section p {
    font-size: var(--font-size-mid);
    line-height: var(--line-height-5);
}