@charset "utf-8";
/* 2022년 12월 21일 ... 기존 css가 너무 복잡하여 작업시 순차적으로 정리합니다. */


/* ------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 20221220 (서브)변호사 목록 페이지 정리   //////////////////////////////////////
--------------------------------------------------------------------------------------------------------------*/
/* 20200428 변호사소개 페이지 디자인수정*/
.lawyerListWrap {}
.lawyerList ul:after { display:block; clear:both; content:''; }
.lawyerList ul { width:calc(100% + 10px); transform:translateX(-5px); }
.lawyerList ul li  { width:25%; padding:5px; float:left; }
.lawyerList ul li .lawyerCnts { position:relative; overflow:hidden; }
.lawyerList ul li .lawyerCnts a { display:block; width:100%; height:100%; }
.lawyerList ul li .lawyerCnts .lawyerPic { }
.lawyerList ul li .lawyerCnts .lawyerPic img { width:100%; 
		transform:matrix(1, 0, 0, 1, 0, 0); 
		transition:0.2s ease-in; 
		-moz-transition:0.2s ease-in; 
		-webkit-transition:0.2s ease-in; 
		-ms-transition:0.2s ease-in;}
.lawyerList ul li .lawyerCnts .lawyerPic img:hover { transform: matrix(1.05, 0, 0, 1.05, 0, 0); }
.lawyerList ul li .lawyerCnts .lawyerText { position:absolute; width:100%; padding:10px; bottom:0; left:0; background:rgba(0,0,0,0.5); color:#fff; text-align:right; }
.lawyerList ul li .lawyerCnts .lawyerText strong { font-size:17px; }
.lawyerList ul li .lawyerCnts .lawyerText strong .stext { font-size:13px; }
.lawyerList ul li .lawyerCnts .lawyerText .lawyerName { font-size:19px; }
.lawyerList ul li .lawyerCnts .lawyerText .lawyerName span { font-size:28px; font-weight:500; display:inline-block; margin-right:5px; }
.lawyerList.list02 { margin-top:80px; }
.lawyerList.list02  ul li  { width:16.666666%;  }
.lawyerList.list02 ul li .lawyerCnts .lawyerText { padding:5px 10px; text-align:center; }
.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName { font-size:16px; }
.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName span { font-size:22px; }

@media (max-width: 1080px) {
	.lawyerList ul li .lawyerCnts .lawyerText strong { font-size:16px; }
	.lawyerList ul li .lawyerCnts .lawyerText strong .stext { font-size:12px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName { font-size:16px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName span { font-size:24px; }
}

@media (max-width: 959px) {
	.lawyerList ul li  { width:50%;  }
	.lawyerList.list02  ul li  { width:25%;  }
}

@media (max-width: 767px) {
	.lawyerList ul li .lawyerCnts .lawyerText strong { font-size:15px; }
	.lawyerList ul li .lawyerCnts .lawyerText strong .stext { font-size:11px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName { font-size:17px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName span { font-size:25px; }
	.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName { font-size:14px; }
	.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName span { font-size:20px; margin-right:3px; }
}

@media (max-width: 639px) {
	.lawyerList.list02  ul li  { width:33.33333%;  }
	.lawyerList ul li .lawyerCnts .lawyerText { padding:10px 5px; }
	.lawyerList ul li .lawyerCnts .lawyerText strong { font-size:12px; letter-spacing:-0.1em;}
	.lawyerList ul li .lawyerCnts .lawyerText strong .stext { font-size:10px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName { font-size:12px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName span { font-size:16px; }
	.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName { font-size:12px; }
	.lawyerList.list02 ul li .lawyerCnts .lawyerText .lawyerName span { font-size:15px; }
	.lawyerList ul li .lawyerCnts .lawyerPic img:hover { transform: matrix(1.0, 0, 0, 1.0, 0, 0); }
}

/*20200729  변호사 목록 페이지 수정 */
.sub-top-img.lawyerpage { background:url(https://www.ohcrime.com/img/lawyer/lawyer_top_bg.jpg)center bottom no-repeat; height:auto; padding:60px 0 80px 0; }
.sub-top-img.lawyerpage .container { text-align:center; }
.sub-top-img.lawyerpage .container img { width:90%; max-width:739px; margin:0 auto; max-width:915px; }
.lawyerList.newlist ul { width:100%; transform:translateX(-0px); }
.lawyerList.newlist ul li { width:25%; padding:0; margin-top:30px; }
.lawyerList.newlist ul li:nth-child(4n+1) { clear:both; }
.lawyerList.newlist ul li .lawyerCnts .lawyerPic { position:relative; }
.lawyerList.newlist ul li .lawyerCnts .lawyerPic img.pc { display:block; }
.lawyerList.newlist ul li .lawyerCnts .lawyerPic img.mobile { display:none; }
.lawyerList.newlist ul li .lawyerCnts .lawyerPic:after { position:absolute; top:0; left:0; content:''; width:100%; height:100%; display:block; background:rgba(0,0,0,0.15);
transition: all .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);}
.lawyerList.newlist ul li .lawyerCnts .lawyerPic:hover:after { background:rgba(0,0,0,0); transition: all .3s ease-out; }
.lawyerList.newlist ul li .lawyerCnts .lawyerPic:hover img { transform: matrix(1.03, 0, 0, 1.03, 0, 0); }

@media (max-width: 958px) {
	.lawyerList.newlist ul li { width:50%; padding:0; margin-top:20px; }
	.lawyerList.newlist ul li:nth-child(4n+1) { clear:none; }
	.lawyerList.newlist ul li:nth-child(2n+1) { clear:both; }
}

@media (max-width: 598px) {
	.sub-top-img.lawyerpage { padding:30px 0 40px 0; }
	.sub-top-img.lawyerpage .container img { width:96%; }

	.lawyerList.newlist ul li { width:100%; padding:0; margin-top:10px; }
	.lawyerList.newlist ul li .lawyerCnts .lawyerPic img.pc { display:none; }
	.lawyerList.newlist ul li .lawyerCnts .lawyerPic img.mobile { display:block; }
	.lawyerList.newlist ul li .lawyerCnts .lawyerPic:after { display:none; }
	.lawyerList.newlist ul li .lawyerCnts .lawyerText { text-align:center; }
}

/* 변호사 목록 페이지 수정 20201118 */
.lawyerTab .tab {}
.lawyerTab .tab:after { display:block; clear:both; content:''; }
.lawyerTab .tab li { width:50%; float:left; }
.lawyerTab .tab li:nth-child(2){ margin-left:-1px; }
.lawyerTab .tab li a { display:block; width:100%; line-height:56px; text-align:center; font-size:18px; color:#333; border:1px solid #ccc; }
.lawyerTab .tab li a:hover { background:#f1f1f1; }
.lawyerTab .tab li.on a { background:#0d4068; border-color:#0d4068; color:#fff; }
.tabContent { margin-top:30px; }
.lawyerList.newlist ul.col03 li { width:33.3333%; }
.lawyerList ul.col03 li .lawyerCnts .lawyerText strong { background:rgba(254,208,128,0.5); padding:0 10px; border-radius:3px; }
.lawyerList ul li .lawyerCnts .lawyerText strong.bg { background:rgba(254,208,128,0.5); padding:0 10px; border-radius:3px; background:#7c6033; }
.lawyerList ul.col03 li .lawyerCnts .lawyerText strong { margin-top:2px; display:inline-block; }
.lawyerList ul.col03 li .lawyerCnts .lawyerText strong.first { margin-top:0; }
.lawyerList.newlist ul.col03 li:nth-child(4n+1) { clear:none; }
.lawyerList.newlist ul.col03 li:nth-child(3n+1) { clear:both; }
.tabWrap.lawyerTab { display:none; }
#lawyerList02 { display:block; }
.lawyerList.newlist ul.col03.first li { /*margin-top:0;*/ }
.tab_title { margin-top:100px !important; display:block; font-size:34px; font-weight:700; }
.lawyerList.new2022 ul li .lawyerCnts .lawyerText strong.bg { background:#7c6033; border:1px solid #8a6f44; display:inline-block; }

@media (max-width: 959px) {
	.lawyerList.newlist ul li { width:33.3333%; }
	.lawyerList.newlist ul li:nth-child(2n+1) { clear:none; }
	.lawyerList.newlist ul li:nth-child(3n+1) { clear:both; }
	.lawyerList.newlist ul.col03 li:nth-child(2n+1) { clear:none; }
	.tab_title { font-size:28px; margin-bottom:0px; }
}

@media (max-width: 767px) {
	.lawyerTab .tab li a { line-height:40px; font-size:15px; }
	.lawyerList ul li .lawyerCnts .lawyerText { padding:10px 5px; }
	.lawyerList ul li .lawyerCnts .lawyerText strong { font-size:12px; letter-spacing:-0.1em;}
	.lawyerList ul li .lawyerCnts .lawyerText strong .stext { font-size:10px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName { font-size:12px; }
	.lawyerList ul li .lawyerCnts .lawyerText .lawyerName span { font-size:16px; }
	.lawyerList ul li .lawyerCnts .lawyerPic img:hover { transform: matrix(1.0, 0, 0, 1.0, 0, 0); }
}

@media (max-width: 598px) {
	.tabWrap.lawyerTab { display:block; }
	#lawyerList02 { display:none; }
	.tab_title { display:none; }
	.lawyerList.newlist ul li { width:100%; } 
	.lawyerList.newlist ul.col03 li { width:100%; }
	.lawyerList.new2022 ul li .lawyerCnts .lawyerText { padding:0; text-align:left; background:none; }
	.lawyerList.new2022 ul li .lawyerCnts .lawyerText .lawyerName { margin-top:3px; text-align:right; background:rgba(0,0,0,0.6); padding:5px 10px; }
	.lawyerList.new2022 ul li .lawyerCnts .lawyerText .lawyerName span { font-size:19px; font-weight:700; letter-spacing:0.05em; }
	.lawyerList.new2022 ul li .lawyerCnts .lawyerText strong { margin-left:5px; }
	.lawyerList.new2022 ul li .lawyerCnts .lawyerText strong.bg { padding:2px 6px; font-size:15px; }
}

/* 변호사 목록 페이지 수정 20221221 */
.lawyerListWrap.new .tabWrap.lawyerTab { display:block; }
.lawyerListWrap.new .tabWrap.lawyerTab .tab {  display:flex; justify-content:space-between; width:100%; }
.lawyerListWrap.new .tabWrap.lawyerTab li { flex-grow:1; width:33.3333%; }
.lawyerListWrap.new .tab_title { display:none; }
.lawyerListWrap.new #lawyerList02,
.lawyerListWrap.new #lawyerList03 { display:none; }

@media (max-width: 598px) {
	.lawyerListWrap.new .tabWrap.lawyerTab li { width:auto; }
	.lawyerListWrap.new .tabWrap.lawyerTab li a { font-size:13px; }
}

/* ------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 구성원소개 상단부분   //////////////////////////////////////
--------------------------------------------------------------------------------------------------------------*/
#lawHero {
    position: relative;
    width: 100%;
    height: 523px;
    overflow: hidden;
    background: url('https://www.ohcrime.com/images/sub/202603/law-hero-bg.jpg') no-repeat center center;
    background-size: cover;
}

#lawHero .lawHeroInner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 55px 20px 0;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}

#lawHero .lawHeroEyebrow {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.75);
}

#lawHero .lawHeroTitle {
    margin: 0;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    word-break: keep-all;
}

#lawHero .lawHeroTitle strong {
    font-weight: 800;
    color: #fff;
}

#lawHero .lawHeroIcons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 46px;
    margin: 58px 0 0;
    padding: 0;
    list-style: none;
}

#lawHero .lawHeroItem {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    padding: 20px 15px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#lawHero .lawHeroIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 92px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

#lawHero .lawHeroIcon img {
    display: block;
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
}

#lawHero .lawHeroItem p {
    margin: 0;
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    color: #fff;
    word-break: keep-all;
}

/* 반응형 */
@media (max-width: 1200px) {
    #lawHero {
        height: auto;
        padding: 50px 0 60px;
    }

    #lawHero .lawHeroInner {
        height: auto;
        padding-top: 20px;
    }

    #lawHero .lawHeroIcons {
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #lawHero .lawHeroEyebrow {
        font-size: 13px;
        letter-spacing: 3px;
    }

    #lawHero .lawHeroTitle {
        font-size: 24px;
        line-height: 1.4;
    }

    #lawHero .lawHeroIcons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin-top: 35px;
    }

    #lawHero .lawHeroItem {
        width: calc(50% - 7px);
        max-width: none;
        height: 180px;
        padding: 16px 10px 12px;
    }

    #lawHero .lawHeroIcon {
        height: 74px;
        margin-bottom: 12px;
    }

    #lawHero .lawHeroIcon img {
        max-width: 70px;
        max-height: 70px;
    }

    #lawHero .lawHeroItem p {
        min-height: 54px;
        font-size: 14px;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    #lawHero {
        padding: 40px 0 45px;
    }

    #lawHero .lawHeroInner {
        padding-left: 12px;
        padding-right: 12px;
    }

    #lawHero .lawHeroTitle {
        font-size: 20px;
    }

    #lawHero .lawHeroIcons {
        gap: 10px;
    }

    #lawHero .lawHeroItem {
        width: calc(50% - 5px);
        max-width: none;
        height: 165px;
        padding: 14px 8px 10px;
    }

    #lawHero .lawHeroIcon {
        height: 62px;
        margin-bottom: 10px;
    }

    #lawHero .lawHeroIcon img {
        max-width: 58px;
        max-height: 58px;
    }

    #lawHero .lawHeroItem p {
        min-height: 48px;
        font-size: 14px;
        line-height: 1.35;
    }
}

/* ------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 20260420 (서브)로펌 소개 페이지   //////////////////////////////////////
--------------------------------------------------------------------------------------------------------------*/


/* =========================================================
   오현 리뉴얼 페이지
========================================================= */

#oh-renew-page {
    --oh-blue: #14508c;
    --oh-text: #333;
    --oh-light-text: #555;
    --oh-line: #9b9b9b;
    --oh-section-gap: 120px;
    --oh-title-gap: 70px;

    background: #fff;
    padding: 0 0 80px;
    color: #222;
}

#oh-renew-page * {
    box-sizing: border-box;
}

#oh-renew-page .oh-renew-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   공통 섹션 간격
========================================================= */

#oh-renew-page .oh-renew-container > section {
    margin-top: var(--oh-section-gap);
}

/* sub-top-title 바로 다음 첫 섹션은 상단 여백 제거 */
#oh-renew-page .oh-renew-container > .sub-top-title + section {
    margin-top: 0;
}

/* =========================================================
   공통 타이틀
========================================================= */

#oh-renew-page .oh-section-title {
    margin-bottom: var(--oh-title-gap);
}

#oh-renew-page .oh-section-title:before {
    content: "";
    display: block;
    width: 78px;
    height: 1px;
    background: var(--oh-blue);
    margin: 0 0 55px 0;
}

#oh-renew-page .oh-section-title h2 {
    margin: 0;
    padding: 0;
    color: var(--oh-blue);
    font-size: 45px;
    line-height: 1.25;
    letter-spacing: -0.06em;
	word-break:keep-all;
}

#oh-renew-page .oh-section-title h2 strong {
    display: block;
    font-weight: 700;
}

#oh-renew-page .oh-section-title h2 span {
    display: block;
    font-weight: 300;
}

/* =========================================================
   공통 설명 문단
========================================================= */

#oh-renew-page .oh-system-intro,
#oh-renew-page .oh-spectrum-intro,
#oh-renew-page .oh-shield-intro {
    margin: -35px 0 60px;
    color: #444;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-system-intro p,
#oh-renew-page .oh-spectrum-intro p,
#oh-renew-page .oh-shield-intro p {
    margin: 0 0 6px;
}

/* 공통 이미지 */
#oh-renew-page picture {
    display: block;
}

#oh-renew-page img {
    max-width: 100%;
}

/* 공통 라인 */
#oh-renew-page .oh-system-line,
#oh-renew-page .oh-shield-line {
    width: 100%;
    height: 1px;
    background: var(--oh-line);
}

/* =========================================================
   1. 인트로 섹션
========================================================= */

#oh-renew-page .oh-career-grid {
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 34px;
    row-gap: 38px;
    text-align: center;
}

#oh-renew-page .oh-career-item {
    opacity: 0;
    transform: translateY(18px);
    animation: ohRenewFadeUp 0.7s ease forwards;
}

#oh-renew-page .oh-career-item:nth-child(1) { animation-delay: 0.05s; }
#oh-renew-page .oh-career-item:nth-child(2) { animation-delay: 0.12s; }
#oh-renew-page .oh-career-item:nth-child(3) { animation-delay: 0.19s; }
#oh-renew-page .oh-career-item:nth-child(4) { animation-delay: 0.26s; }
#oh-renew-page .oh-career-item:nth-child(5) { animation-delay: 0.33s; }
#oh-renew-page .oh-career-item:nth-child(6) { animation-delay: 0.40s; }
#oh-renew-page .oh-career-item:nth-child(7) { animation-delay: 0.47s; }
#oh-renew-page .oh-career-item:nth-child(8) { animation-delay: 0.54s; }
#oh-renew-page .oh-career-item:nth-child(9) { animation-delay: 0.61s; }
#oh-renew-page .oh-career-item:nth-child(10) { animation-delay: 0.68s; }

#oh-renew-page .oh-career-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto 13px;
}

#oh-renew-page .oh-career-item p {
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.06em;
    word-break: keep-all;
}

#oh-renew-page .oh-quote-box {
    margin: 70px 0 55px;
    border: 1px solid #d8d8d8;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 30px;
}

#oh-renew-page .oh-quote-box p {
    position: relative;
    margin: 0;
    padding: 0 42px;
    color: #555;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: -0.05em;
    word-break: keep-all;
}

#oh-renew-page .oh-quote-box p:before,
#oh-renew-page .oh-quote-box p:after {
    position: absolute;
    top: -14px;
    color: #333;
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    font-family: Arial, sans-serif;
}

#oh-renew-page .oh-quote-box p:before {
    content: "“";
    left: 0;
}

#oh-renew-page .oh-quote-box p:after {
    content: "”";
    right: 0;
}

#oh-renew-page .oh-intro-text {
    color: #565656;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-intro-text p {
    margin: 0 0 26px;
}

#oh-renew-page .oh-intro-text p:last-child {
    margin-bottom: 0;
}

#oh-renew-page .oh-intro-text strong {
    color: #222;
    font-weight: 700;
}

#oh-renew-page .oh-intro-text .blue {
    color: #104f86;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 700;
    margin-top: 26px;
    margin-bottom: 4px;
}

/* =========================================================
   2. 기록 섹션
========================================================= */

#oh-renew-page .oh-record-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#oh-renew-page .oh-record-item {
    min-height: 330px;
    padding: 0 42px;
    border-left: 1px solid #d6d6d6;
}

#oh-renew-page .oh-record-item:first-child {
    border-left: 0;
    padding-left: 0;
}

#oh-renew-page .oh-record-item:last-child {
    padding-right: 0;
}

#oh-renew-page .oh-record-num {
    margin-bottom: 10px;
    color: var(--oh-blue);
    font-size: 54px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#oh-renew-page .oh-record-num .oh-count {
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
}

#oh-renew-page .oh-record-num em {
    font-style: normal;
    font-weight: 800;
}

#oh-renew-page .oh-record-item h3 {
    margin: 0 0 24px;
    padding: 0;
    color: var(--oh-blue);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -0.06em;
}

#oh-renew-page .oh-record-item p {
    margin: 0 0 20px;
    color: #555;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.05em;
    word-break: keep-all;
}

#oh-renew-page .oh-record-item a {
    display: inline-block;
    color: #111;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.04em;
}

#oh-renew-page .oh-record-item a span {
    position: relative;
    top: -1px;
    margin-left: 4px;
}

#oh-renew-page .oh-record-bottom {
    margin-top: 75px;
    color: #333;
    font-size: 19px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

/* =========================================================
   3. 통합 대응 시스템 섹션
========================================================= */

#oh-renew-page .oh-system-diagram {
    width: 100%;
}

/* 통합 대응 시스템 - 다이어그램 재정렬 */
#oh-renew-page .oh-system-figure {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(420px, 642px) minmax(200px, 1fr);
    grid-template-areas:
        ". systemTop ."
        "systemLeft1 systemImg systemRight1"
        "systemLeft2 systemImg systemRight2";
    column-gap: 28px;
    row-gap: 16px;
    align-items: center;
    min-height: 0;
    padding: 38px 0 35px;
}

#oh-renew-page .oh-system-img {
    grid-area: systemImg;
    width: 100%;
    max-width: 642px;
    margin: 0 auto;
}

#oh-renew-page .oh-system-img img {
    display: block;
    width: 100%;
    height: auto;
}

#oh-renew-page .oh-system-text {
    position: static;
    width: auto;
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-system-text.text-top {
    grid-area: systemTop;
    text-align: center;
}

#oh-renew-page .oh-system-text strong { display:none; color: var(--oh-blue); font-weight:700; }

#oh-renew-page .oh-system-text.text-left-1 {
    grid-area: systemLeft1;
    text-align: right;
}

#oh-renew-page .oh-system-text.text-left-2 {
    grid-area: systemLeft2;
    text-align: left;
}

#oh-renew-page .oh-system-text.text-right-1 {
    grid-area: systemRight1;
    text-align: left;
}

#oh-renew-page .oh-system-text.text-right-2 {
    grid-area: systemRight2;
    text-align: left;
}

#oh-renew-page .oh-system-summary {
    margin-top: 44px;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-system-summary p {
    margin: 0 0 4px;
}

#oh-renew-page .oh-system-summary strong {
    color: #222;
    font-weight: 700;
}

#oh-renew-page .oh-system-ending {
    margin-top: 58px;
    color: #333;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

/* =========================================================
   4. 형사 스펙트럼 섹션
========================================================= */

#oh-renew-page .oh-lawyer-visual {
    width: 100%;
    margin: 0 auto 62px;
    text-align: center;
}

#oh-renew-page .oh-lawyer-visual img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

#oh-renew-page .oh-spectrum-list {
    width: 100%;
}

#oh-renew-page .oh-spectrum-item {
    margin-bottom: 40px;
}

#oh-renew-page .oh-spectrum-item:last-child {
    margin-bottom: 0;
}

#oh-renew-page .oh-spectrum-item h3 {
    margin: 0 0 10px;
    padding: 0;
    color: var(--oh-blue);
    font-size: 21px;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: -0.06em;
}

#oh-renew-page .oh-spectrum-item h3 span {
    margin-right: 4px;
}

#oh-renew-page .oh-spectrum-item p {
    margin: 0;
    color: #555;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

/* =========================================================
   5. 단계별 방패 섹션
========================================================= */

#oh-renew-page .oh-step-visual {
    width: 100%;
    margin: 58px auto 30px;
    text-align: center;
}

#oh-renew-page .oh-step-visual img {
    display: block;
    width: 100%;
    max-width: 1166px;
    height: auto;
    margin: 0 auto;
}

#oh-renew-page .oh-step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 44px;
    margin-bottom: 58px;
}

#oh-renew-page .oh-step-item h3 {
    margin: 0 0 20px;
    padding: 0;
    color: var(--oh-blue);
    font-size: 26px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.06em;
}

#oh-renew-page .oh-step-item h3 span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.06em;
}

#oh-renew-page .oh-step-item p {
    margin: 0 0 18px;
    color: #444;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-step-item p:last-child {
    margin-bottom: 0;
}

#oh-renew-page .oh-step-item em {
    font-style: normal;
}

#oh-renew-page .oh-shield-bottom {
    margin-top: 54px;
    color: #333;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    letter-spacing: -0.055em;
    word-break: keep-all;
}

#oh-renew-page .oh-shield-bottom p {
    margin: 0 0 8px;
}

#oh-renew-page .oh-shield-bottom strong {
    display: block;
    color: #222;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 700;
}

/* =========================================================
   Animation
========================================================= */

@keyframes ohRenewFadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Tablet
========================================================= */

@media all and (max-width: 1024px) {
    #oh-renew-page {
        --oh-section-gap: 90px;
        --oh-title-gap: 55px;
        padding: 60px 0 80px;
    }

    #oh-renew-page .oh-renew-container {
        padding: 0 20px;
    }

    #oh-renew-page .oh-section-title h2 {
        font-size: 38px;
    }

    #oh-renew-page .oh-system-intro,
    #oh-renew-page .oh-spectrum-intro,
    #oh-renew-page .oh-shield-intro {
        margin: -25px 0 50px;
        font-size: 16px;
    }

    #oh-renew-page .oh-career-grid {
        max-width: 760px;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 34px;
    }

    #oh-renew-page .oh-quote-box {
        margin: 60px 0 45px;
    }

    #oh-renew-page .oh-record-item {
        padding: 0 28px;
    }

    #oh-renew-page .oh-record-num {
        font-size: 46px;
    }

    #oh-renew-page .oh-record-item p {
        font-size: 15px;
    }

    #oh-renew-page .oh-system-figure {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "systemImg"
            "systemTop"
            "systemLeft1"
            "systemRight1"
            "systemLeft2"
            "systemRight2";
        row-gap: 0;
        min-height: 0;
        padding: 35px 0;
    }

    #oh-renew-page .oh-system-img {
        width: 100%;
        max-width: 642px;
        margin: 0 auto 28px;
    }

    #oh-renew-page .oh-system-text {
        position: static;
        width: auto;
        margin: 0;
        padding: 14px 0;
        color: #333;
        font-size: 15px;
        line-height: 1.65;
        text-align: left;
        border-bottom: 1px solid #e5e5e5;
    }
	
	#oh-renew-page .oh-system-text .is_pc { display:none !important; }
	#oh-renew-page .oh-system-text strong{ display:inline-block; margin-right:5px; }
	
	#oh-renew-page .oh-system-text.text-top,
    #oh-renew-page .oh-system-text.text-left-1,
    #oh-renew-page .oh-system-text.text-left-2,
    #oh-renew-page .oh-system-text.text-right-1,
    #oh-renew-page .oh-system-text.text-right-2 {
        text-align: left;
    }

    #oh-renew-page .oh-system-img + .oh-system-text {
        margin-top: 0px;
    }

    #oh-renew-page .oh-system-summary {
        margin-top: 36px;
    }

    #oh-renew-page .oh-system-ending {
        margin-top: 45px;
        font-size: 18px;
    }

    #oh-renew-page .oh-lawyer-visual {
        margin-bottom: 50px;
    }

    #oh-renew-page .oh-spectrum-item h3 {
        font-size: 19px;
    }

    #oh-renew-page .oh-spectrum-item p {
        font-size: 16px;
    }

    #oh-renew-page .oh-step-visual {
        margin-top: 45px;
        margin-bottom: 38px;
    }

    #oh-renew-page .oh-step-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 34px;
        row-gap: 38px;
    }

    #oh-renew-page .oh-step-item h3 {
        font-size: 23px;
    }

    #oh-renew-page .oh-step-item p {
        font-size: 15px;
    }

    #oh-renew-page .oh-shield-bottom strong {
        font-size: 19px;
    }
}

/* =========================================================
   Mobile
========================================================= */

@media all and (max-width: 767px) {
    #oh-renew-page {
        --oh-section-gap: 70px;
        --oh-title-gap: 40px;
        padding: 45px 0 60px;
    }

    #oh-renew-page .oh-renew-container {
        padding: 0 18px;
    }

    #oh-renew-page .oh-section-title:before {
        width: 64px;
        margin-bottom: 36px;
    }

    #oh-renew-page .oh-section-title h2 {
        font-size: 24px;
    }

    #oh-renew-page .oh-section-title h2 span {
        line-height: 1.35;
    }

    #oh-renew-page .oh-system-intro,
    #oh-renew-page .oh-spectrum-intro,
    #oh-renew-page .oh-shield-intro {
        margin: -20px 0 35px;
        font-size: 15px;
        line-height: 1.7;
    }

    #oh-renew-page .oh-career-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 18px;
        row-gap: 30px;
    }

    #oh-renew-page .oh-career-item img {
        width: 92px;
        height: 92px;
        margin-bottom: 10px;
    }

    #oh-renew-page .oh-career-item p {
        font-size: 14px;
        line-height: 1.35;
    }

    #oh-renew-page .oh-quote-box {
        margin: 45px 0 35px;
        min-height: auto;
        padding: 18px 12px;
    }

    #oh-renew-page .oh-quote-box p {
        padding: 0 24px;
        font-size: 16px;
        line-height: 1.55;
    }

    #oh-renew-page .oh-quote-box p:before,
    #oh-renew-page .oh-quote-box p:after {
        font-size: 32px;
        top: -8px;
    }

    #oh-renew-page .oh-intro-text {
        font-size: 15px;
        line-height: 1.75;
    }

    #oh-renew-page .oh-intro-text .blue {
        font-size: 17px;
        line-height: 1.55;
    }

    #oh-renew-page .oh-record-grid {
        display: block;
    }

    #oh-renew-page .oh-record-item {
        min-height: auto;
        padding: 0 0 34px;
        margin-bottom: 34px;
        border-left: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    #oh-renew-page .oh-record-item:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }

    #oh-renew-page .oh-record-num {
        font-size: 42px;
    }

    #oh-renew-page .oh-record-item h3 {
        font-size: 17px;
        margin-bottom: 16px;
    }

    #oh-renew-page .oh-record-item p {
        font-size: 15px;
        line-height: 1.7;
    }

    #oh-renew-page .oh-record-bottom {
        margin-top: 45px;
        font-size: 16px;
        line-height: 1.75;
    }
	
	#oh-renew-page .oh-system-figure {
        padding: 28px 0;
    }

    #oh-renew-page .oh-system-img {
        margin-bottom: 24px;
    }

    #oh-renew-page .oh-system-text {
        font-size: 14px;
        line-height: 1.65;
        padding: 13px 0;
    }

    #oh-renew-page .oh-system-text.text-top {
        font-size: 14px;
        line-height: 1.6;
    }
	

    #oh-renew-page .oh-system-summary {
        margin-top: 30px;
        font-size: 14px;
        line-height: 1.75;
    }

    #oh-renew-page .oh-system-ending {
        margin-top: 38px;
        font-size: 16px;
        line-height: 1.75;
    }

    #oh-renew-page .oh-lawyer-visual {
        margin-bottom: 38px;
    }

    #oh-renew-page .oh-spectrum-item {
        margin-bottom: 32px;
    }

    #oh-renew-page .oh-spectrum-item h3 {
        font-size: 17px;
        line-height: 1.45;
        margin-bottom: 9px;
    }

    #oh-renew-page .oh-spectrum-item p {
        font-size: 14px;
        line-height: 1.7;
    }

    #oh-renew-page .oh-step-visual {
        margin: 35px auto 35px;
    }

    #oh-renew-page .oh-step-visual img {
        max-width: 612px;
    }

    #oh-renew-page .oh-step-list {
        display: block;
        margin-bottom: 40px;
    }

    #oh-renew-page .oh-step-item {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e0e0e0;
    }

    #oh-renew-page .oh-step-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    #oh-renew-page .oh-step-item h3 {
        margin-bottom: 14px;
        font-size: 22px;
    }

    #oh-renew-page .oh-step-item h3 span {
        font-size: 15px;
    }

    #oh-renew-page .oh-step-item p {
        margin-bottom: 14px;
        font-size: 14px;
        line-height: 1.7;
    }

    #oh-renew-page .oh-shield-bottom {
        margin-top: 38px;
        font-size: 15px;
        line-height: 1.7;
    }

    #oh-renew-page .oh-shield-bottom strong {
        font-size: 17px;
        line-height: 1.65;
    }
}

/* =========================================================
   Small Mobile
========================================================= */

@media all and (max-width: 420px) {
    #oh-renew-page .oh-career-grid {
        column-gap: 12px;
    }

    #oh-renew-page .oh-career-item img {
        width: 82px;
        height: 82px;
    }

    #oh-renew-page .oh-career-item p {
        font-size: 13px;
    }
}