@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ==========================================================================
_header.php - sub-visual2 (1레벨 메뉴에 따라 텍스트가 바뀌는 서브 비주얼: 인사말/노인복지 등)
========================================================================== */
.sub-visual2 {
    width: 100%;
    padding: 34px 0;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    margin-top: 100px;
    padding: 140px 0px 40px 0px;
}

.sub-visual2 .visual-inner {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sub-visual2 .eyebrow {
    display: block;
    margin-bottom: 6px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #333;
}

.sub-visual2 h1 {
    margin: 0;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.3;
    color: #003e2f;
}

@media (max-width: 1200px) {
    .sub-visual2 {
        padding: 26px 0;
    }

    .sub-visual2 h1 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sub-visual2 {
        padding: 20px 0;
    }

    .sub-visual2 .visual-inner {
        padding: 0 16px;
    }

    .sub-visual2 .eyebrow {
        font-size: 11px;
    }

    .sub-visual2 h1 {
        font-size: 24px;
    }
}

/* ==========================================================================
   _header.php - sub-visual2 하단 이미지 (business_process_1/2 ...)
   $gr_id 분기마다 이미지 경로만 다르고(busi_process_1.png, busi_process_2.png ...) 레이아웃은 공통
   ========================================================================== */
.sub-visual2 .process-top-img {
    margin-top: 30px;
    margin-left: 310px;
    width: calc(100% - 310px);
    aspect-ratio: 1920 / 320;
    overflow: hidden;
}

.sub-visual2 .process-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1200px) {
    .sub-visual2 .process-top-img {
        margin-left: 120px;
        width: calc(100% - 120px);
    }
}

@media (max-width: 768px) {
    .sub-visual2 .process-top-img {
        margin-top: 16px;
        margin-left: 0;
        width: 100%;
        aspect-ratio: 3 / 1;
    }
}

/* ==========================================================================
   business_process_2.php - 피의자/피해자 탭 (클릭 시 process-tab-panel 전환)
   ========================================================================== */
.sub-conts-wrap .process-tab-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.sub-conts-wrap .process-tab {
	display: flex;
}

.sub-conts-wrap .process-tab-btn {
	flex: 1;
	padding: 18px 0;
	background: none;
	border: none;
	border-bottom: 1px solid #e5e5e5;
	font-family: 'Pretendard', sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #aaa;
	cursor: pointer;
}

.sub-conts-wrap .process-tab-btn.is-active {
	font-weight: 700;
	color: #003e2f;
	border-bottom: 3px solid #003e2f;
}

.sub-conts-wrap .process-tab-panel {
	display: none;
}

.sub-conts-wrap .process-tab-panel.is-active {
	display: block;
}

@media (max-width: 768px) {
	.sub-conts-wrap .process-tab-btn {
		padding: 14px 0;
		font-size: 16px;
	}
}

/* ==========================================================================
   business_process_1.php - sub-conts-wrap (업무 프로세스 6단계 + 하단 안내문)
   ========================================================================== */
.sub-conts-wrap .process-steps-wrap {
    max-width: 1280px;
    margin: 48px auto 0;
    box-sizing: border-box;
}

.sub-conts-wrap .process-steps {
    position: relative;
    list-style: none;
}

.sub-conts-wrap .process-steps::before {
    content: '';
    position: absolute;
    left: 56px;
    top: 72px;
    bottom: 70px;
    width: 1px;
    background: #d9d9d9;
}

.sub-conts-wrap .process-steps li {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sub-conts-wrap .process-step-num {
    position: relative;
    z-index: 1;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #003e2f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.sub-conts-wrap .process-step-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sub-conts-wrap .process-steps li:last-child .process-step-row {
    border-bottom: none;
}

.sub-conts-wrap .process-step-icon {
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-conts-wrap .process-step-icon img {
    max-width: 100%;
    max-height: 80px;
}

.sub-conts-wrap .process-step-title {
    flex: 0 0 260px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #003e2f;
}

.sub-conts-wrap .process-step-desc {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

.sub-conts-wrap .process-note {
    max-width: 1280px;
    margin: 70px auto 0;
    padding: 36px 40px;
    box-sizing: border-box;
    background: #f5f5f5;
    border-radius: 12px;
    text-align: center;
}

.sub-conts-wrap .process-note p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1200px) {
    .sub-conts-wrap .process-step-row {
        gap: 20px;
        padding: 28px 0;
    }

    .sub-conts-wrap .process-step-icon {
        flex-basis: 100px;
    }

    .sub-conts-wrap .process-step-icon img {
        max-height: 60px;
    }

    .sub-conts-wrap .process-step-title {
        flex-basis: 200px;
        font-size: 22px;
    }

    .sub-conts-wrap .process-step-desc {
        font-size: 18px;
    }

    .sub-conts-wrap .process-note {
        margin-top: 48px;
        padding: 28px 24px;
    }

    .sub-conts-wrap .process-note p {
        font-size: 15px;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .sub-conts-wrap .process-steps-wrap {
        margin-top: 32px;
    }

    .sub-conts-wrap .process-steps::before {
        left: 51px;
        top: 85px;
        bottom: 100px;
    }

    .sub-conts-wrap .process-step-num {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .sub-conts-wrap .process-steps li {
        gap: 14px;
    }

    .sub-conts-wrap .process-step-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 10px 0px 0px;
    }

    .sub-conts-wrap .process-step-icon {
        flex-basis: auto;
        justify-content: flex-start;
    }

    .sub-conts-wrap .process-step-icon img {
        max-height: 48px;
    }

    .sub-conts-wrap .process-step-title {
        flex-basis: auto;
        font-size: 19px;
    }

    .sub-conts-wrap .process-step-desc {
        font-size: 15px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .sub-conts-wrap .process-note {
        margin-top: 32px;
        padding: 20px 16px;
    }

    .sub-conts-wrap .process-note p {
        font-size: 13px;
    }
}

/* ==========================================================================
   greetings.php - sub-conts-wrap
   ========================================================================== */
.sub-conts-wrap {
    font-family: 'Pretendard', sans-serif;
    color: #333;
}

.sub-conts-wrap .greeting-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 타이틀: 여러분의 기댈 언덕이 되어 드리겠습니다 */
.sub-conts-wrap .greeting-title {
    margin: 48px 0 64px;
    padding: 0 20px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 54px;
    line-height: 1.3;
    font-weight: 400;
    color: #003e2f;
    text-align: center;
}

.sub-conts-wrap .greeting-title span {
    display: block;
}

.sub-conts-wrap .greeting-title strong {
    font-weight: 800;
}

/* 상단 이미지 */
.sub-conts-wrap .greeting-img {
    width: 100%;
    aspect-ratio: 1920 / 320;
    overflow: hidden;
}

.sub-conts-wrap .greeting-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 초록빛 나무가... 서브 타이틀 */
.sub-conts-wrap .greeting-sub-title {
    margin-top: 72px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 38px;
    line-height: 1.3;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.sub-conts-wrap .greeting-sub-title .point {
    color: #003e2f;
}

/* 본문 인사말 텍스트 */
.sub-conts-wrap .greeting-text {
    margin-top: 68px;
    font-size: 28px;
    line-height: 1.57;
    font-weight: 400;
    color: #333;
    text-align: center;
}

.sub-conts-wrap .greeting-text p+p {
    margin-top: 44px;
}

.sub-conts-wrap .greeting-text strong {
    font-weight: 700;
}

/* 서명: 법률사무소 더숲 대표변호사 임미진 */
.sub-conts-wrap .greeting-sign {
    margin-top: 112px;
    padding-bottom: 120px;
    text-align: center;
}

.sub-conts-wrap .greeting-sign-role {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.sub-conts-wrap .greeting-sign-name {
    margin-left: 8px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 44px;
    font-weight: 700;
    color: #333;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1200px) {
    .sub-conts-wrap .greeting-title {
        margin: 40px 0 52px;
        font-size: 44px;
    }

    .sub-conts-wrap .greeting-sub-title {
        margin-top: 56px;
        font-size: 32px;
    }

    .sub-conts-wrap .greeting-text {
        margin-top: 52px;
        font-size: 24px;
    }

    .sub-conts-wrap .greeting-text p+p {
        margin-top: 36px;
    }

    .sub-conts-wrap .greeting-sign {
        margin-top: 88px;
        padding-bottom: 90px;
    }

    .sub-conts-wrap .greeting-sign-role {
        font-size: 18px;
    }

    .sub-conts-wrap .greeting-sign-name {
        font-size: 38px;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .sub-conts-wrap .greeting-inner {
        padding: 0 16px;
        word-break:keep-all;
        overflow-wrap: break-word;
    }

    .sub-conts-wrap .greeting-title {
        margin: 0px 0 36px;
        padding: 0 16px;
        font-size: 28px;
        line-height: 1.4;
    }

    .sub-conts-wrap .greeting-sub-title {
        word-break:keep-all;
        overflow-wrap: break-word;
        margin-top: 40px;
        font-size: 23px;
    }

    .sub-conts-wrap .greeting-text {
        word-break:keep-all;
        overflow-wrap: break-word;
        margin-top: 36px;
        font-size: 17px;
    }

    .sub-conts-wrap .greeting-text p+p {
        margin-top: 26px;
    }

    .sub-conts-wrap .greeting-sign {
        margin-top: 56px;
        padding-bottom: 60px;
    }

    .sub-conts-wrap .greeting-sign-role {
        font-size: 16px;
    }

    .sub-conts-wrap .greeting-sign-name {
        font-size: 30px;
    }
}

/* ==========================================================================
   Small Mobile (500px 이하)
   ========================================================================== */
@media (max-width: 500px) {
    /* PC/태블릿용으로 박아둔 <br> 강제 줄바꿈을 해제하고
       word-break: keep-all로 자연스럽게 흐르도록 함 */
    .sub-conts-wrap .greeting-title br,
    .sub-conts-wrap .greeting-sub-title br,
    .sub-conts-wrap .greeting-text br {
        display: none;
    }

    .sub-conts-wrap .greeting-title {
        margin: 0px 0 28px;
        padding: 0 12px;
        font-size: 24px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .sub-conts-wrap .greeting-title span {
        display: inline;
    }

    .sub-conts-wrap .greeting-sub-title {
        margin-top: 32px;
        font-size: 19px;
    }

    .sub-conts-wrap .greeting-text {
        margin-top: 28px;
        font-size: 15px;
        line-height: 1.6;
    }

    .sub-conts-wrap .greeting-text p+p {
        margin-top: 20px;
    }

    .sub-conts-wrap .greeting-sign {
        margin-top: 44px;
        padding-bottom: 48px;
    }

    .sub-conts-wrap .greeting-sign-role {
        font-size: 14px;
    }

    .sub-conts-wrap .greeting-sign-name {
        font-size: 24px;
    }
}

/* ==========================================================================
   business1.php - sub-conts-wrap (주요업무)
   ========================================================================== */
.sub-conts-wrap .business-head {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.sub-conts-wrap .business-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.sub-conts-wrap .business-heading {
    margin-top: 13px;
    margin-bottom: 54px;
    font-size: 54px;
    font-weight: 700;
    color: #003e2f;
}

.sub-conts-wrap .business-list {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
}

.sub-conts-wrap .business-item {
    display: flex;
    align-items: center;
}

.sub-conts-wrap .business-item:nth-child(even) {
    flex-direction: row-reverse;
}

.sub-conts-wrap .business-item-img {
    flex: 0 0 50%;
    width: 50%;
    height: 420px;
    overflow: hidden;
}

.sub-conts-wrap .business-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sub-conts-wrap .business-item-cont {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 60px;
}

.sub-conts-wrap .business-item:nth-child(even) .business-item-cont {
    padding-left: 0;
    padding-right: 60px;
}

.sub-conts-wrap .business-item-cont h3 {
    margin-bottom: 22px;
    font-size: 32px;
    font-weight: 700;
    color: #003e2f;
}

.sub-conts-wrap .business-item-note {
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.sub-conts-wrap .business-item-cont ul {
    list-style: none;
}

.sub-conts-wrap .business-item-cont li {
    position: relative;
    padding-left: 17px;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    color: #333;
}

.sub-conts-wrap .business-item-cont li::before {
    content: '.';
    position: absolute;
    left: 0;
    font-size: 14px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1200px) {
    .sub-conts-wrap .business-heading {
        margin-bottom: 40px;
        font-size: 44px;
    }

    .sub-conts-wrap .business-item {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 24px;
        padding: 40px 0;
    }

    .sub-conts-wrap .business-item-img {
        width: 100%;
        height: auto;
        aspect-ratio: 640 / 420;
    }

    .sub-conts-wrap .business-item-cont,
    .sub-conts-wrap .business-item:nth-child(even) .business-item-cont {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .sub-conts-wrap .business-item-cont h3 {
        margin-bottom: 16px;
        font-size: 26px;
    }

    .sub-conts-wrap .business-item-note {
        margin-bottom: 16px;
        font-size: 17px;
    }

    .sub-conts-wrap .business-item-cont li {
        font-size: 16px;
        line-height: 28px;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {

    .sub-conts-wrap .business-head,
    .sub-conts-wrap .business-list {
        padding: 0 16px;
    }

    .sub-conts-wrap .business-heading {
        margin-bottom: 28px;
        font-size: 32px;
    }

    .sub-conts-wrap .business-item {
        padding: 28px 0;
    }

    .sub-conts-wrap .business-item-cont h3 {
        font-size: 22px;
    }

    .sub-conts-wrap .business-item-cont li {
        font-size: 15px;
        line-height: 24px;
    }
}