/* index.html page-specific styles */
/* 메인 비주얼: 왼쪽 슬로건+나머지 변호사 슬라이더, 오른쪽 곽윤서 고정 */
.visual .visual_two_col {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
box-sizing: border-box;
}
.visual .visual_left {
flex: 1 1 54%;
min-width: 0;
}
.visual .visual_right {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 900px) {
/* 2열 1행: 좌측 스택(슬로건 위 + 롤링 아래)이 min-height 안에서 space-between으로 롤링을 히어로 하단에 붙임 */
.visual .visual_two_col {
display: grid !important;
/* 좌측 롤링 열 비중↑·우측 히어로 max 살짝 축소 — PC에서 슬라이드 가로 여유 */
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 600px);
/* 디자인 1 히어로: +20% 적용분 대비 세로 10% 축소(=원본 대비 약 +8%) */
grid-template-rows: minmax(clamp(calc(58rem * 1.08), calc(70vh * 1.08), calc(82rem * 1.08)), auto);
align-items: end;
align-content: stretch;
gap: 0 1rem;
min-height: clamp(calc(58rem * 1.08), calc(70vh * 1.08), calc(82rem * 1.08));
}
.visual .visual_left_stack {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
align-self: stretch;
min-width: 0;
width: 100%;
min-height: 100%;
overflow-x: visible;
}
.visual .visual_left {
flex: 0 0 auto;
min-width: 0;
padding-bottom: 0;
}
.visual .visual_right {
grid-column: 2;
grid-row: 1;
width: 100%;
max-width: 600px;
min-width: 0;
justify-self: end;
align-self: end;
overflow: visible;
}
/* 디자인1만: #jr-hero-design-divorce 로 격리 — .jr-hero-fixed .hero-fixed-img 등과 분리 */
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo {
--jr-duo-img-w: min(336px, 52.8vw);
--jr-duo-img-h: min(80.4vh, 720px);
--jr-duo-overlap: clamp(1.4rem, calc(var(--jr-duo-img-w) * 0.16 + 0.2rem), 2.8rem);
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
width: 100%;
max-width: 100%;
position: relative;
pointer-events: auto;
overflow: visible;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
flex: 0 0 auto;
width: var(--jr-duo-img-w);
max-width: var(--jr-duo-img-w);
position: relative;
align-self: flex-end;
overflow: visible;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner {
z-index: 1;
margin-right: calc(-1 * var(--jr-duo-overlap));
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed--primary {
z-index: 2;
margin-left: calc(-1 * var(--jr-duo-overlap));
}
/* 동일 프레임 + cover(타 스타일의 height:auto·max-height 덮어씀) */
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .hero-fixed-img,
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .hero-fixed-img--partner {
width: 100% !important;
max-width: 100% !important;
height: var(--jr-duo-img-h) !important;
max-height: var(--jr-duo-img-h) !important;
min-height: 0 !important;
object-fit: contain !important;
object-position: bottom center !important;
display: block;
margin: 0;
border-radius: 0 0 8px 8px;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner {
border-radius: 0 0 0 8px;
filter: drop-shadow(0 4px 14px rgba(40, 28, 18, 0.18));
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed--primary .hero-fixed-img {
border-radius: 0 0 8px 0;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .lawyer-info--partner {
padding: 0.85rem 0.6rem 2.75rem 0.75rem !important;
align-items: flex-start !important;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(32, 22, 14, 0.55) 42%,
rgba(28, 18, 12, 0.82) 100%
) !important;
border-radius: 0 0 0 8px !important;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .lawyer-info--partner .jr-hero-partner-name {
font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.65rem);
font-weight: 800;
color: #fffaf6;
margin: 0 0 0.2rem 0;
padding-left: 0 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
#jrMember.visual #jr-hero-design-divorce .visual_right .lawyer-info--partner .jr-hero-partner-tag {
font-size: clamp(1.1rem, 0.95rem + 0.35vw, 1.25rem);
font-weight: 600;
color: rgba(255, 248, 240, 0.95);
margin: 0;
padding-left: 0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* 디자인1 기본형 복원: 디자인3/4가 아닐 때는 우측 단일 프로필만 사용 */
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo {
display: block !important;
width: min(420px, 100%) !important;
max-width: min(420px, 100%) !important;
margin-left: auto !important;
margin-right: 0 !important;
transform: none !important;
padding: 0 !important;
overflow: hidden !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--partner {
display: none !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
transform: none !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary
.hero-fixed-img {
width: 100% !important;
max-width: min(420px, 100%) !important;
height: auto !important;
max-height: min(72vh, 640px) !important;
object-fit: cover !important;
object-position: center 8% !important;
border-radius: 0 0 8px 8px !important;
}
.visual .lawyer-slider-container {
flex: 0 0 auto;
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-top: 0;
}
/* 디자인4: 롤링/듀오 대신 전원 고정 배치 */
#jrMember.visual #jr-hero-design-divorce .jr-design4-lineup[hidden] {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-lineup {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
width: 100%;
align-content: start;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card {
position: relative;
border-radius: 12px;
overflow: hidden;
background: rgba(44, 34, 27, 0.16);
border: 1px solid rgba(255, 248, 241, 0.17);
cursor: pointer;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__img-wrap {
position: relative;
width: 100%;
padding-top: 128%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(26, 18, 14, 0.42) 100%);
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
transform: scale(1.02);
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.6rem 0.7rem 0.75rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(23, 15, 11, 0.68) 72%, rgba(23, 15, 11, 0.82) 100%);
text-align: left;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__name {
margin: 0;
color: #fff6ef;
font-size: clamp(1.18rem, 0.85rem + 0.48vw, 1.45rem);
font-weight: 700;
line-height: 1.25;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__tag {
margin: 0.2rem 0 0;
color: rgba(245, 233, 222, 0.94);
font-size: clamp(1rem, 0.8rem + 0.24vw, 1.14rem);
font-weight: 500;
line-height: 1.28;
}
@media (max-width: 1200px) {
#jrMember.visual #jr-hero-design-divorce .jr-design4-lineup {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
}
@media (max-width: 899px) {
#jrMember.visual #jr-hero-design-divorce .jr-design4-lineup {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
padding: 0.4rem 0.65rem 0.7rem;
box-sizing: border-box;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__img-wrap {
padding-top: 122%;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-card__info {
padding: 0.5rem 0.55rem 0.62rem;
}
}
/* 롤링 트랙 — 부모 열 너비 전부 사용(불필요한 max 캡 제거) */
.visual .lawyer-slider-container .swiper {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.visual .lawyer-slider-container.lawyer-slider-others {
padding-bottom: 0;
margin-bottom: 0;
}
/* PC: 왼쪽 innerWrap 패딩을 더 먹여 트랙 확대(5열 여유) — L 위주, R은 소폭 */
#jrMember.visual .visual_left_stack > .lawyer-slider-container.lawyer-slider-others {
--jr-lawyer-bleed-l: clamp(3rem, 9vw, 11rem);
--jr-lawyer-bleed-r: clamp(0.75rem, 1.8vw, 2rem);
margin-left: calc(-1 * var(--jr-lawyer-bleed-l));
margin-right: calc(-1 * var(--jr-lawyer-bleed-r));
width: calc(100% + var(--jr-lawyer-bleed-l) + var(--jr-lawyer-bleed-r));
max-width: none;
box-sizing: border-box;
}
#jrMember.visual #jr-hero-design-divorce .visual_left_stack > .lawyer-slider-container.lawyer-slider-others {
--jr-lawyer-bleed-l: clamp(11rem, 20vw, 23rem);
--jr-lawyer-bleed-r: clamp(10rem, 18vw, 18rem);
margin-left: calc(-1 * var(--jr-lawyer-bleed-l) + 50px) !important;
width: calc((100% + var(--jr-lawyer-bleed-l) + var(--jr-lawyer-bleed-r)) * 1.12);
}
@media (min-width: 900px) {
#jrMember.visual #jr-hero-design-divorce .visual_left_stack > .lawyer-slider-container.lawyer-slider-others {
transform: translate(calc(10.5rem + (100% / 7) - 20px), -3rem) !important;
}
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide {
min-height: 232px;
}
/* 롤링: 트랙은 항상 hidden — 가로 스크롤바·넘침 방지 */
#jrMember.visual .lawyer-slider-container {
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
#jrMember.visual .lawyer-slider-container::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
#jrMember.visual .lawyer-slider-container .swiper {
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
overflow: hidden;
}
.visual .lawyer-slider-others .swiper-slide {
box-sizing: border-box;
}
.visual .title .subtxt .jr-subtxt-nowrap-pc {
white-space: nowrap;
}
.visual .title .subtxt .jr-subtxt-nowrap-pc .jr-subtxt-br-mo {
display: none;
}
}
.visual .lawyer-slider-container.lawyer-slider-others {
position: relative;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper {
overflow: hidden;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper {
display: flex;
align-items: stretch;
gap: 0.45rem;
transform: none !important;
transition: none !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide {
flex: 0 0 calc((100% - (0.45rem * 6)) / 7);
width: calc((100% - (0.45rem * 6)) / 7) !important;
max-width: calc((100% - (0.45rem * 6)) / 7) !important;
margin-right: 0 !important;
}
@media (max-width: 899px) {
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper {
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper::-webkit-scrollbar {
display: none;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper {
width: max-content;
min-width: 100%;
gap: 0.5rem;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide {
flex: 0 0 min(40vw, 10rem);
}
}
/* 파트너 교체 시 과한 확대 없이 우측에서 밀려 들어오는 느낌 */
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner .jr-partner-ghost {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--primary .jr-partner-ghost {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
/* 들어오는 방향(오른쪽) 체감 강화를 위해 파트너 프레임 안에서 슬라이드 */
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner {
overflow: hidden !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--primary {
overflow: hidden !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner .jr-partner-ghost .hero-fixed-img--partner {
width: 100% !important;
height: 100% !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed--partner.jr-partner-updating .hero-fixed-img--partner {
filter: brightness(1.06) saturate(1.04);
}
/* 디자인4: 첨부 시안처럼 듀오만 고정 크게 노출 (롤링 없음) */
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .lawyer-slider-container.lawyer-slider-others {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static {
--jr-design4-card-h: calc((100vh - 64px) * 0.9);
overflow: visible !important;
}
#jrMember.visual #jr-hero-design-divorce .jr-design4-left-lineup[hidden] {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_two_col {
display: block !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
align-items: end !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_left_stack {
display: none !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: visible !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
overflow: visible !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: none !important;
overflow: visible !important;
}
/* 디자인4: 요청사항 - 상단 문구/설명/버튼 제거 */
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_left .slogan_wrap {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-lineup {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: end !important;
gap: 0.16rem !important;
width: 100% !important;
margin-top: 0.75rem;
overflow: hidden;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
position: relative;
border-radius: 0;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
cursor: pointer;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__img-wrap {
position: relative;
width: 100%;
height: min(34vh, 305px);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.45rem 0.34rem 0.62rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(23, 15, 11, 0.68) 72%, rgba(23, 15, 11, 0.82) 100%);
text-align: left;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__name {
margin: 0;
color: #fff6ef;
font-size: clamp(0.78rem, 0.62rem + 0.16vw, 0.9rem);
font-weight: 800;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__tag {
margin: 0.2rem 0 0;
color: rgba(245, 233, 222, 0.94);
font-size: clamp(0.66rem, 0.54rem + 0.12vw, 0.76rem);
font-weight: 500;
line-height: 1.18;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo {
transform: none !important;
width: 100% !important;
max-width: none !important;
justify-content: flex-start !important;
align-items: flex-end !important;
}
/* 디자인4: 좌측 5명 라인업은 비표시, 듀오 컨테이너에 전원을 동일 카드로 배치 */
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-lineup {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0 !important;
align-items: stretch !important;
overflow: hidden !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: var(--jr-design4-card-h) !important;
margin: 0 !important;
transform: none !important;
overflow: hidden !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img {
height: var(--jr-design4-card-h) !important;
max-height: var(--jr-design4-card-h) !important;
object-fit: cover !important;
object-position: center top !important;
border-radius: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner {
border-radius: 0 !important;
padding: 0.5rem 0.3rem 0.65rem !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-name {
font-size: clamp(0.8rem, 0.66rem + 0.16vw, 0.94rem) !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-tag {
font-size: clamp(0.64rem, 0.56rem + 0.1vw, 0.74rem) !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--primary {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
transform: none !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .hero-fixed-img--partner {
height: var(--jr-design4-card-h) !important;
max-height: var(--jr-design4-card-h) !important;
object-fit: cover !important;
object-position: center top !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner {
border-radius: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--primary .hero-fixed-img {
border-radius: 0 !important;
}
@media (max-width: 899px) {
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static {
--jr-design4-card-h: calc((100svh - 56px) * 0.9);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_two_col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-lineup {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
margin-top: 0.65rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card {
flex: 0 0 44% !important;
max-width: 44% !important;
min-width: 44% !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__img-wrap {
height: var(--jr-design4-card-h);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed--primary {
width: 100% !important;
max-width: 100% !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner {
padding: 0.42rem 0.24rem 0.52rem !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img {
height: var(--jr-design4-card-h) !important;
max-height: var(--jr-design4-card-h) !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .visual_right .hero-fixed-img--partner {
height: var(--jr-design4-card-h) !important;
max-height: var(--jr-design4-card-h) !important;
object-fit: cover !important;
object-position: center top !important;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__info {
padding: 0.75rem 0.55rem 1.45rem;
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__name {
font-size: clamp(1.2rem, 0.96rem + 0.42vw, 1.45rem);
}
#jrMember.visual #jr-hero-design-divorce.jr-hero-design4-static .jr-design4-left-card__tag {
font-size: clamp(1rem, 0.82rem + 0.26vw, 1.15rem);
}
}
/* style.css 구 슬라이더 규칙(음수 마진·active bottom) 해제 — 롤링 하단 정렬 */
.visual .lawyer-slider-others .swiper-slide {
margin-bottom: 0 !important;
}
.visual .lawyer-slider-others .swiper-slide img {
margin-bottom: 0 !important;
}
@media (max-width: 899px) {
/* 모바일: 스택 래퍼 제거 → 슬로건·롤링·곽윤서 순 flex order 유지 */
.visual .visual_left_stack {
display: contents;
}
.visual .title .subtxt .jr-subtxt-nowrap-pc .jr-subtxt-br-mo {
display: block;
content: "";
}
.visual .visual_two_col {
flex-direction: column;
align-items: stretch !important;
gap: 0 !important;
row-gap: 0 !important;
}
.visual .jr-hero-fixed {
margin-top: 0 !important;
}
.visual .innerWrap {
padding-left: 0 !important;
}
.visual .slogan_wrap {
text-align: center !important;
margin-left: 0 !important;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.visual .title {
margin-left: 0 !important;
width: 100%;
text-align: center !important;
}
.visual .title h1,
.visual .title .subtxt {
text-align: center !important;
}
/* 풀블리드·마진은 max-width:1024px 공통 규칙 참고 — 여기서는 좁은 화면 전용 간격만 */
.visual .btn_group {
gap: 1rem;
padding-top: 1.2rem !important;
}
.visual .btn_group .btncs {
padding: 0.8rem 2rem !important;
}
.visual .lawyer-slider-container {
order: 3;
background: #f5f2ee;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px))
max(0.25rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px));
box-sizing: border-box;
overflow-x: hidden;
}
}
.jr-hero-fixed {
position: relative;
text-align: right;
margin-top: 2rem;
}
.jr-hero-fixed {
cursor: pointer;
outline: none;
border: none;
}
.jr-hero-fixed:focus {
outline: none;
}
.jr-hero-fixed .hero-fixed-img {
width: 100%;
max-width: 420px;
height: auto;
min-height: 280px;
display: block;
margin-left: auto;
object-fit: cover;
object-position: center top;
border-radius: 0 0 8px 8px;
transition: transform 0.3s ease;
}
@media (min-width: 900px) {
.jr-hero-fixed {
margin-top: 0;
}
.jr-hero-fixed .hero-fixed-img {
max-width: min(420px, 100%);
max-height: min(72vh, 640px);
min-height: 0;
width: 100%;
object-fit: cover;
object-position: center 8%;
}
/* 곽윤서+동반 변호사: 디자인1 레이어만 — img 단독 transform 금지 */
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo {
transform: translateX(12ch);
transition: transform 0.3s ease;
}
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
transform: none;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right {
max-width: 700px;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo {
transform: translate(4.25rem, -5.4rem) !important;
}
/* 강상용(파트너): 곽윤서 쪽으로 살짝 오른쪽 이동 */
#jrMember.visual #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner {
transform: translateX(calc(clamp(1rem, 2.1vw, 2.4rem) + 40px));
}
}
/* 곽윤서 히어로: 배경 그라데이션 없음 — 글자는 그림자로 대비 */
.jr-hero-fixed {
overflow: visible;
}
.jr-hero-fixed--primary .jr-hero-primary-badge {
position: absolute;
left: max(20px, env(safe-area-inset-left, 0px));
top: 1.8rem;
bottom: auto;
transform: translateX(-10px);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.56rem;
min-height: 4rem;
padding: 0.34rem 1.12rem 0.34rem 0.38rem;
border: 1px solid rgba(132, 101, 71, 0.18);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 249, 241, 0.34) 0%, rgba(245, 234, 220, 0.22) 100%);
box-shadow: 0 8px 20px rgba(72, 51, 31, 0.1);
pointer-events: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #5e4532;
font-size: 1.24rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
white-space: nowrap;
}
.jr-hero-fixed--primary .jr-hero-primary-badge::before {
content: "";
display: inline-block;
width: 3.18rem;
height: 3.18rem;
flex: 0 0 3.18rem;
border-radius: 999px;
background:
url("/images/hero-role-badge.png") center / 74% no-repeat,
linear-gradient(180deg, rgba(255, 250, 244, 0.68) 0%, rgba(242, 231, 216, 0.48) 100%);
border: 1px solid rgba(125, 98, 70, 0.12);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.36),
0 2px 8px rgba(90, 66, 43, 0.08);
}
.jr-hero-fixed .lawyer-info {
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
box-sizing: border-box;
width: 100%;
opacity: 1;
background: none;
border-radius: 0 0 8px 8px;
padding: 2rem 0 4rem max(20px, env(safe-area-inset-left, 0px));
margin: 0;
text-align: left;
}
/* 태블릿: 좌우 여백 유지 */
@media (max-width: 1024px) and (min-width: 900px) {
.jr-hero-fixed .lawyer-info {
align-items: stretch !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
padding: 1.5rem 0 3.25rem max(20px, env(safe-area-inset-left, 0px)) !important;
border-radius: 0 0 8px 8px;
}
.jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
transform: none !important;
align-self: center !important;
}
}
/* 모바일: 밴드 가로 끝, 텍스트는 왼쪽 20px(+safe-area)만 */
@media (max-width: 899px) {
.jr-hero-fixed--primary .jr-hero-primary-badge {
top: 1.25rem;
min-height: 3.5rem;
gap: 0.42rem;
font-size: 1.08rem;
padding: 0.28rem 0.88rem 0.28rem 0.34rem;
}
.jr-hero-fixed--primary .jr-hero-primary-badge::before {
width: 2.78rem;
height: 2.78rem;
flex-basis: 2.78rem;
}
.jr-hero-fixed .lawyer-info {
align-items: stretch !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
padding: 1.35rem 0 3rem max(20px, env(safe-area-inset-left, 0px)) !important;
border-radius: 0 !important;
}
.jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
transform: none !important;
align-self: center !important;
}
}
/* 와이드 PC만 좌측 타이포 오프셋(ch) 유지 */
@media (min-width: 1025px) {
.jr-hero-fixed .lawyer-info {
top: auto !important;
bottom: 0 !important;
padding: 1.4rem 0 1.2rem max(20px, env(safe-area-inset-left, 0px)) !important;
background: none !important;
}
.jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
transform: translateX(-2ch) !important;
}
}
.jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
position: static;
left: auto;
top: auto;
transform: translateX(-5ch);
align-self: center;
margin: 0 0 0.55rem 0;
padding: 0.75rem 1.5rem;
background: rgba(58, 46, 38, 0.88);
backdrop-filter: blur(6px);
color: #fffaf6;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.3;
border-radius: 10px;
border: 1px solid rgba(255, 245, 235, 0.32);
box-shadow: 0 4px 20px rgba(48, 36, 28, 0.22);
text-shadow: 0 1px 2px rgba(32, 22, 16, 0.35);
white-space: nowrap;
opacity: 1;
transition: box-shadow 0.28s ease;
pointer-events: auto;
cursor: pointer;
z-index: auto;
}
@media (max-width: 899px) {
.jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
font-size: 1.35rem;
padding: 0.65rem 1.3rem;
}
}
.jr-hero-fixed .lawyer-info > p {
align-self: stretch;
text-align: left;
/* rem으로 통일 — 5ch는 제목(큰 글자)과 경력(작은 글자)마다 폭이 달라 이탈이 생김 */
padding-left: 2.75rem;
box-sizing: border-box;
}
.jr-hero-fixed .lawyer-info > p:first-of-type {
font-size: 2.4rem;
color: #fffefb !important;
margin: 0 0 0.3rem 0;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(20, 14, 10, 0.55);
}
.jr-hero-fixed .lawyer-info h3 {
font-size: 1.8rem;
font-weight: 700;
color: #fffefb;
margin: 0 0 0.35rem 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82), 0 0 16px rgba(0, 0, 0, 0.42);
}
.jr-hero-fixed .lawyer-info h3 + p,
.jr-hero-fixed .lawyer-info p:last-of-type {
font-size: 1.4rem;
color: rgba(255, 250, 244, 0.98);
margin: 0;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.4);
}
/* PC에서도 전화상담/상담신청 버튼 모두 노출 */
@media (min-width: 951px) {
.visual .btn_group .btnCall {
display: flex !important;
}
}
/* 롤링: 슬라이드 하단 정렬(히어로 베이스라인) + 활성 시 아래 고정·위로만 확대 */
.visual .lawyer-slider-others .swiper-wrapper {
align-items: flex-end !important;
}
/* 5명 사진: 비율 박스 유지, 이미지는 프레임 하단 기준 */
.visual .lawyer-slider-others .swiper-slide {
min-height: 200px;
min-width: 0;
flex-shrink: 0;
align-self: flex-end;
position: relative;
box-sizing: border-box;
/* 카드: 어두운 갈색 + 높은 투명도 — 뒤 배경이 비치며 전체 톤 유지 */
background: rgba(42, 34, 28, 0.12) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 250, 245, 0.16);
box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.visual .lawyer-slider-others .swiper-slide-active {
bottom: auto !important;
background: rgba(48, 38, 32, 0.2) !important;
border-color: rgba(255, 252, 248, 0.22);
box-shadow: 0 6px 22px rgba(40, 32, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.visual .lawyer-slider-others .swiper-slide::before {
content: "";
display: block;
padding-top: 143%;
width: 100%;
}
.visual .lawyer-slider-others .swiper-slide img {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100% !important;
min-height: 0;
object-fit: cover;
object-position: center bottom;
transform: scale(0.9);
transform-origin: bottom center;
filter: opacity(55%) brightness(0.9);
transition: transform 0.35s ease, filter 0.35s ease;
}
.visual .lawyer-slider-others .swiper-slide-active img {
filter: grayscale(0%) brightness(1);
transform: scale(calc(1.12 * 0.9));
transform-origin: bottom center !important;
}
/* PC: contain 여백도 동일 반투명 톤 */
@media (min-width: 900px) {
#jrMember.visual .lawyer-slider-others .swiper-slide {
background: rgba(42, 34, 28, 0.12) !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active {
background: rgba(48, 38, 32, 0.2) !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide::before {
padding-top: 95%;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide::before {
padding-top: 112%;
}
#jrMember.visual .lawyer-slider-others .swiper-slide img {
object-fit: contain;
object-position: bottom center;
transform: scale(1);
transform-origin: bottom center;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active img {
transform: scale(1);
transform-origin: bottom center !important;
}
}
/* 텍스트 밴드: 배경·그라데이션 없음 — text-shadow로만 대비(활성 동일) */
.visual .lawyer-slider-others .lawyer-info {
position: absolute;
left: 50%;
right: auto;
bottom: 0;
top: auto;
transform: translateX(-50%);
width: max-content;
max-width: 92%;
min-height: 0;
height: auto;
padding: 0.45rem 1rem 0.55rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
background: transparent !important;
background-image: none !important;
opacity: 1;
transition: opacity 0.3s ease;
}
.visual .lawyer-slider-others .lawyer-info::before,
.visual .lawyer-slider-others .lawyer-info::after {
display: none !important;
content: none !important;
}
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info {
padding: 0.75rem 1.15rem 0.65rem;
border-radius: 0;
background: transparent !important;
background-image: none !important;
box-shadow: none;
}
/* 비활성: 글자만 그림자로 대비 */
.visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.8);
}
.visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info h3 {
visibility: hidden;
opacity: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
}
/* 대기 상태: pro 한 줄만 — 좁은 박스에 맞게 보정 */
.visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info p:first-child {
margin-top: -1em !important;
}
.visual .lawyer-slider-others .lawyer-info p,
.visual .lawyer-slider-others .lawyer-info h3 {
padding-left: 0;
overflow: visible;
white-space: normal;
color: #c4b8a8 !important; /* 어두운 따뜻한 베이지 */
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
text-align: center;
}
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info p,
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3 {
color: #f2ebe3 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info p:first-child {
color: #fff !important;
text-align: center;
margin-top: 0;
}
.visual .lawyer-slider-others .lawyer-info p:first-child {
color: #c4b8a8 !important;
font-size: 2rem !important;
font-weight: 600;
text-align: center;
margin-top: 0;
}
/* pro 아래 과거 경력 한 줄 (각 프로필 페이지와 맞춤) */
.visual .lawyer-slider-others .jr-lawyer-career-one {
font-size: clamp(0.88rem, 2vw, 1.08rem) !important;
font-weight: 500 !important;
margin: 0.2rem 0 0 !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: #aea090 !important;
text-align: center;
}
.visual .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one {
color: #e4d9cc !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* 효과(활성) 시: 경력 한 줄을 이름(h3) 아래로 */
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info > p:first-of-type {
order: 1;
}
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info > h3 {
order: 2;
margin-top: 0.25rem !important;
margin-bottom: 0 !important;
}
.visual .lawyer-slider-others .swiper-slide-active .lawyer-info > .jr-lawyer-career-one {
order: 3;
margin-top: 0.35rem !important;
}
.visual .lawyer-slider-others .lawyer-info h3 {
font-size: 1.4rem; /* pro와 크기 맞바꿈 */
text-align: center;
}
.visual .lawyer-slider-others .lawyer-info h3 + p,
.visual .lawyer-slider-others .lawyer-info p:last-of-type {
color: #b5a898 !important; /* 더 어두운 베이지 */
font-weight: 500;
font-size: 1.05rem;
text-align: center;
}
/* 디자인1 활성 카드: 컬러 강조 + 이름/경력 노출 */
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active {
background: linear-gradient(180deg, rgba(118, 78, 34, 0.34) 0%, rgba(74, 48, 24, 0.52) 100%) !important;
border-color: rgba(244, 214, 170, 0.46) !important;
box-shadow: 0 10px 28px rgba(56, 36, 18, 0.24), inset 0 1px 0 rgba(255, 240, 214, 0.22) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active img {
filter: grayscale(0%) brightness(1.02) !important;
transform: scale(1.03) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info {
padding: 0.7rem 1.1rem 0.85rem !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info h3 {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: 0.18rem 0 0 !important;
padding: 0 !important;
font-size: 1.42rem !important;
line-height: 1.28 !important;
color: #fff4e4 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info p:first-child {
color: #ffd39c !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one {
display: block !important;
color: #f0dfca !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
font-size: 0.96rem !important;
}
/* 요청사항: 맨 왼쪽(active) 카드 단독 강조 제거 */
#jrMember.visual .lawyer-slider-others .swiper-slide-active {
background: rgba(42, 34, 28, 0.12) !important;
border-color: rgba(255, 250, 245, 0.16) !important;
box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active img {
filter: opacity(55%) brightness(0.9) !important;
transform: scale(0.9) !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active .lawyer-info {
padding: 0.45rem 1rem 0.55rem !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3 {
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
#jrMember.visual .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one {
display: block !important;
color: #aea090 !important;
text-shadow: none !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active {
background: linear-gradient(180deg, rgba(118, 78, 34, 0.34) 0%, rgba(74, 48, 24, 0.52) 100%) !important;
border-color: rgba(244, 214, 170, 0.46) !important;
box-shadow: 0 10px 28px rgba(56, 36, 18, 0.24), inset 0 1px 0 rgba(255, 240, 214, 0.22) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active img {
filter: grayscale(0%) brightness(1.02) !important;
transform: scale(1.03) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info {
padding: 0.7rem 1.1rem 0.85rem !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info h3 {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: 0.18rem 0 0 !important;
padding: 0 !important;
font-size: 1.42rem !important;
line-height: 1.28 !important;
color: #fff4e4 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info p:first-child {
color: #ffd39c !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one {
display: block !important;
color: #f0dfca !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.28 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) {
background: rgba(42, 34, 28, 0.12) !important;
border-color: rgba(255, 250, 245, 0.16) !important;
box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img {
filter: opacity(55%) brightness(0.9) !important;
transform: scale(1) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info {
padding: 0.45rem 1rem 0.55rem !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3 {
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info p:first-child {
color: #c4b8a8 !important;
margin-top: -1em !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one {
color: #aea090 !important;
text-shadow: none !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak {
background: linear-gradient(180deg, rgba(118, 78, 34, 0.34) 0%, rgba(74, 48, 24, 0.52) 100%) !important;
border-color: rgba(244, 214, 170, 0.46) !important;
box-shadow: 0 10px 28px rgba(56, 36, 18, 0.24), inset 0 1px 0 rgba(255, 240, 214, 0.22) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 46%;
background: linear-gradient(180deg, rgba(29, 20, 13, 0) 0%, rgba(29, 20, 13, 0.24) 24%, rgba(29, 20, 13, 0.78) 100%);
pointer-events: none;
z-index: 1;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak img {
filter: grayscale(0%) brightness(1) !important;
transform: scale(1) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info {
z-index: 2;
padding: 0.7rem 1.1rem 0.85rem !important;
display: flex !important;
flex-direction: column !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82), 0 1px 2px rgba(0, 0, 0, 0.6);
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3 {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: 0.18rem 0 0 !important;
padding: 0 !important;
font-size: 1.42rem !important;
line-height: 1.28 !important;
color: #fff8ef !important;
font-weight: 800 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info p:first-child {
color: #ffe2b3 !important;
margin-top: 0 !important;
font-weight: 800 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78), 0 1px 2px rgba(0, 0, 0, 0.52) !important;
order: 1;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak .jr-lawyer-career-one {
display: block !important;
color: #fff1df !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 1px 2px rgba(0, 0, 0, 0.58) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
font-size: 0.96rem !important;
order: 3;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3 {
order: 2;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) {
background: rgba(42, 34, 28, 0.12) !important;
border-color: rgba(255, 250, 245, 0.16) !important;
box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active)::after {
display: none !important;
content: none !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) img {
filter: opacity(55%) brightness(0.9) !important;
transform: scale(1) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info {
z-index: auto;
padding: 0.45rem 1rem 0.55rem !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.8) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info h3 {
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info p:first-child {
color: #c4b8a8 !important;
margin-top: -1em !important;
font-weight: 600 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .jr-lawyer-career-one {
display: block !important;
color: #aea090 !important;
text-shadow: none !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3 !important;
}
/* 디자인1: 현재 active인 카드는 누구든 동일하게 컬러 강조 */
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) {
background: linear-gradient(180deg, rgba(118, 78, 34, 0.34) 0%, rgba(74, 48, 24, 0.52) 100%) !important;
border-color: rgba(244, 214, 170, 0.46) !important;
box-shadow: 0 10px 28px rgba(56, 36, 18, 0.24), inset 0 1px 0 rgba(255, 240, 214, 0.22) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img {
filter: grayscale(0%) brightness(1.02) !important;
transform: scale(1.03) !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info {
padding: 0.7rem 1.1rem 0.85rem !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3 {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: 0.18rem 0 0 !important;
padding: 0 !important;
font-size: 1.42rem !important;
line-height: 1.28 !important;
color: #fff4e4 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info p:first-child {
color: #ffd39c !important;
margin-top: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one {
color: #f0dfca !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
font-size: 0.96rem !important;
}
/* 첫 카드 포함 전체 카드 이미지 스케일 통일 */
#jrMember.visual .lawyer-slider-others .swiper-slide {
--jr-lawyer-card-img-scale: 0.9;
}
@media (min-width: 900px) {
#jrMember.visual .lawyer-slider-others .swiper-slide {
--jr-lawyer-card-img-scale: 1;
}
}
#jrMember.visual .lawyer-slider-others .swiper-slide img,
#jrMember.visual .lawyer-slider-others .swiper-slide-active img {
transform: scale(var(--jr-lawyer-card-img-scale)) !important;
}
@media (max-width: 899px) {
.visual .lawyer-slider-others .jr-lawyer-career-one {
color: rgba(255, 255, 255, 0.88) !important;
}
.visual .lawyer-slider-others .lawyer-info p,
.visual .lawyer-slider-others .lawyer-info h3 {
color: #fff !important; /* 모바일: 이혼전략센터장과 동일 */
}
.visual .lawyer-slider-others .lawyer-info p:first-child,
.visual .lawyer-slider-others .lawyer-info h3 + p,
.visual .lawyer-slider-others .lawyer-info p:last-of-type {
color: #fff !important;
}
}
/* 디자인1 카드 경력 문구: 항상 한 줄 + 말줄임 */
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .jr-lawyer-career-one,
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .lawyer-info p.jr-lawyer-career-one,
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one,
#jrMember.visual #jr-hero-design-divorce .lawyer-slider-others .swiper-slide-active .lawyer-info p.jr-lawyer-career-one {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.18 !important;
font-size: 1.26rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* 방송 출연 영상 섹션 - 다른 섹션과 동일한 높이감 */
.jr-broadcast-section { padding: 8rem 0; background: #fff; min-height: 50vh; }
.jr-broadcast-section .innerWrap { gap: 5.5rem !important; }
.jr-broadcast-header { text-align: center; margin-bottom: 0; margin-top: 0; }
.jr-broadcast-header .jr-broadcast-title { margin-bottom: 0.35rem; }
.jr-broadcast-header .jr-broadcast-desc { margin: 0; }
.jr-broadcast-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 6px; background: #050505; color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; }
.jr-broadcast-title { font-size: var(--jr-type-title); font-weight: 700; color: #050505; }
.jr-broadcast-desc { font-size: var(--jr-type-section-desc); color: var(--brown700, #050505); font-weight: 400; }
/* 섹션 desc 공통: PC는 한 줄 흐름, 모바일·태블릿(≤1199px)에서만 br 표시 */
.jr-broadcast-desc br.jr-desc-br-mo,
.jr-press-desc br.jr-desc-br-mo,
.jr-blog-desc br.jr-desc-br-mo,
.jr-instagram-desc br.jr-desc-br-mo,
.jr-naver-reviews-desc br.jr-desc-br-mo {
display: none;
}
@media (max-width: 1199px) {
.jr-broadcast-desc br.jr-desc-br-mo,
.jr-press-desc br.jr-desc-br-mo,
.jr-blog-desc br.jr-desc-br-mo,
.jr-instagram-desc br.jr-desc-br-mo,
.jr-naver-reviews-desc br.jr-desc-br-mo {
display: block;
}
}
.jr-media-width { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
.jr-broadcast-section .jr-media-width { margin-top: 0 !important; padding-top: 0; margin-bottom: 2rem; }
.jr-broadcast-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; }
@media (min-width: 768px) { .jr-broadcast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jr-broadcast-grid { grid-template-columns: repeat(3, 1fr); } }
.jr-broadcast-card { background: #fff; border: 1px solid transparent; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; text-align: left; }
.jr-broadcast-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,0.12), 0 0 0 2px rgba(255, 140, 0, 0.45); border-color: rgba(255, 140, 0, 0.6); }
.jr-video-wrap { position: relative; aspect-ratio: 16/9; background: #e5e7eb; overflow: hidden; border-radius: 12px 12px 0 0; }
.jr-video-thumb { position: absolute; inset: 0; }
.jr-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jr-channel-badge { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 4px; background: #000000; color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }
.jr-duration-badge { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; background: #000000; color: #fff; font-size: 1.1rem; }
.jr-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6.5rem; height: 6.5rem; min-width: 6.5rem; min-height: 6.5rem; border-radius: 50%; background: rgba(51, 51, 51, 0.65); border: 3px solid #B87C48; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, border-width 0.3s ease; }
.jr-play-btn svg { width: 2.6rem; height: 2.6rem; fill: #B87C48; transition: fill 0.3s ease; margin-left: 0.15rem; }
.jr-broadcast-card:hover .jr-play-btn { background: #333333; border: 5px solid #CD834E; transform: translate(-50%, -50%) scale(1.06); }
.jr-broadcast-card:hover .jr-play-btn svg { fill: #CD834E; }
.jr-video-iframe-wrap { position: absolute; inset: 0; }
.jr-video-iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
.jr-broadcast-card-body { padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.jr-broadcast-card-body h3 { font-size: 1.6rem; font-weight: 700; color: #000000; margin: 0; line-height: 1.3; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; }
.jr-broadcast-card:hover .jr-broadcast-card-body h3 { color: #000000; }
.jr-broadcast-card-body p { font-size: 1.4rem; color: #000000; margin: 0; line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-broadcast-meta { display: flex; align-items: center; justify-content: space-between; font-size: 1.2rem; color: #666666; margin-top: auto; gap: 0.5rem; flex-wrap: wrap; }
.jr-broadcast-meta .jr-meta-date { display: inline-flex; align-items: center; gap: 0.35rem; }
.jr-broadcast-meta .jr-meta-views { display: inline-flex; align-items: center; gap: 0.35rem; }
.jr-broadcast-meta svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.jr-section-more-wrap { margin-top: 2.5rem; display: flex; justify-content: center; width: 100%; }
.jr-press-section .jr-section-more-wrap { margin-bottom: 15em; }
.jr-section-more-btn { display: inline-flex; align-items: center; gap: 0.75rem 1rem; padding: 0.85rem 1.75rem; border-radius: 9999px; background: #3d352b; border: 1px solid #6b5d52; color: #fff; font-size: 1.35rem; font-weight: 500; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; }
.jr-section-more-btn:hover { background: #4a4035; border-color: #8b7355; color: #fff; transform: translateY(-1px); }
.jr-section-more-btn svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; stroke: currentColor; fill: none; }
/* 신문/온라인 보도 섹션 - 방송 섹션과 동일한 제목·표 간격 */
.jr-press-section { padding: 5rem 0; }
.jr-press-section .jr-media-width { margin-top: 4rem !important; }
.jr-press-section .innerWrap { gap: 0 !important; }
.jr-press-header { text-align: center; margin-bottom: 0; }
.jr-press-header .jr-press-desc { margin: 0; }
/* 메인 #jrPress: 모바일·태블릿(≤1199px) 목록은 최대 3건 */
@media (max-width: 1199px) {
#jrPress .jr-press-list > .jr-press-card:nth-child(n + 4) {
display: none !important;
}
}
.jr-press-badge { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 9999px; background: var(--brown200, #e8c7a7); color: var(--brown800); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.8rem; }
.jr-press-title { font-size: var(--jr-type-title); color: var(--brown900); margin-bottom: 0.5rem; }
.jr-press-desc { font-size: var(--jr-type-section-desc); color: var(--brown700); }
.jr-press-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.jr-press-card { display: flex; flex-wrap: wrap; border: 1px solid #eee; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.jr-press-card:hover { transform: translateY(-2px); border-color: var(--brown800); box-shadow: 0 10px 15px rgba(0,0,0,0.08); }
.jr-press-card { cursor: pointer; }
.jr-press-card.hidden { display: none !important; }
.jr-press-card-left { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 1rem 1.25rem; min-width: 0; width: 100%; background: #fafaf9; border-bottom: 1px solid #eee; }
@media (min-width: 640px) { .jr-press-card-left { flex-direction: column; align-items: flex-start; min-width: 12rem; width: auto; border-bottom: none; border-right: 1px solid var(--gray100); } }
.jr-press-cat { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 9999px; background: #66BB6A; color: #fff; font-size: 1.2rem; font-weight: 600; width: fit-content; }
.jr-press-cat svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; stroke: #fff; fill: none; }
.jr-press-source { font-size: 1.35rem; color: #333; font-weight: 500; text-align: left; }
.jr-press-card-center { flex: 1; padding: 1rem; min-width: 0; text-align: left; }
.jr-press-section .jr-press-card-center h3 { font-size: 2.3rem; font-weight: 600; color: var(--brown900); margin: 0 0 0.75rem 0 !important; text-align: left; }
.jr-press-section .jr-press-card-center p { font-size: 1.4rem; color: var(--brown700); margin: 0; margin-top: 0.75rem !important; line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.jr-press-card-right { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid #eee; width: 100%; }
@media (min-width: 640px) { .jr-press-card-right { flex-direction: column; align-items: stretch; justify-content: center; border-top: none; border-left: 1px solid var(--gray100); min-width: 12rem; width: auto; } }
@media (min-width: 640px) { .jr-press-card-right .jr-press-date { text-align: left; } }
@media (min-width: 640px) { .jr-press-card-right .jr-press-link { align-self: flex-end; } }
.jr-press-date { font-size: 1.2rem; color: #333; }
.jr-press-link { font-size: 1.4rem; color: var(--brown700); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; }
.jr-press-link:hover { color: var(--brown500); }
.jr-press-empty { text-align: center; padding: 2rem; color: var(--gray600); font-size: 1.4rem; }
/* 기사 보기 모달 */
.jr-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); padding: 1rem; }
.jr-modal-content { position: relative; width: 100%; max-width: 56rem; max-height: 90vh; background: transparent; }
.jr-modal-close { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 10; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: none; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.jr-modal-close:hover { background: #000; }
.jr-modal-iframe-wrap { position: relative; width: 100%; height: 70vh; background: #fff; border-radius: 12px; overflow: hidden; }
.jr-modal-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jr-modal-caption { margin-top: 0.75rem; color: #fff; font-size: 1.4rem; }
.jr-modal-title { font-weight: 600; margin: 0 0 0.25rem 0; }
.jr-modal-meta { margin: 0; font-size: 1.2rem; color: rgba(255,255,255,0.8); }
.jr-press-modal-panel { width: 100%; max-height: 80vh; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.jr-press-modal-caption { margin: 0; padding: 1rem 1.25rem 0.75rem; color: #2d2419; border-bottom: 1px solid #eee; background: #fff; }
.jr-press-modal-title { font-weight: 700; margin: 0.5rem 0 0; font-size: 1.7rem; line-height: 1.35; color: #2d2419; }
.jr-press-modal-meta { margin: 0; font-size: 1.2rem; color: #666; }
.jr-press-modal-body { padding: 1rem 1.25rem; overflow-y: auto; color: #2d2419; font-size: 1.35rem; line-height: 1.75; background: #fff; }
.jr-press-modal-image-wrap { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; background: #f5f5f5; }
.jr-press-modal-image { width: 100%; height: auto; display: block; }
.jr-press-modal-body p { margin: 0.75rem 0 0; }
.jr-press-modal-footer { padding: 0.85rem 1.25rem 1rem; border-top: 1px solid #eee; font-size: 1.2rem; color: #666; background: #fff; }
.jr-press-modal-source-link { color: #B87C48; word-break: break-all; text-decoration: none; }
.jr-press-modal-source-link:hover { text-decoration: underline; }
/* 네이버 이혼 블로그 (Downloads index 동기화) */
.jr-blog-section { padding: 5rem 0; }
.jr-blog-section .jr-media-width { margin-top: 4rem !important; }
.jr-blog-section .innerWrap { gap: 0 !important; }
.jr-blog-header { text-align: center; margin-bottom: 0; margin-top: 0; }
.jr-blog-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 1rem;
border-radius: 6px;
background: #2d2419;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
width: fit-content;
min-width: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.8rem;
text-transform: uppercase;
}
.jr-blog-title { font-size: var(--jr-type-title); font-weight: 700; color: var(--brown900, #050505); margin: 0; }
.jr-blog-desc { font-size: var(--jr-type-section-desc); color: var(--brown700, #050505); font-weight: 400; margin-top: 0.45rem; }
.jr-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; }
@media (min-width: 768px) { .jr-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199px) { .jr-blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .jr-blog-grid { grid-template-columns: repeat(4, 1fr); } }
.jr-blog-card { background: #fff; border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(45,36,25,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: inherit; appearance: none; -webkit-appearance: none; display: block; width: 100%; text-align: left; cursor: pointer; padding: 0; }
.jr-blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); }
.jr-blog-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f1ece6; }
.jr-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-blog-body { padding: 0.9rem 1rem 1rem; }
.jr-blog-body h3 { margin: 0; font-size: 1.55rem; color: #1f1711; line-height: 1.35; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.1rem; }
.jr-blog-date { margin-top: 0.6rem; font-size: 1.2rem; color: #6d6357; }
.jr-blog-empty { text-align: center; padding: 2rem; color: #6d6357; font-size: 1.4rem; }
/* crime index.html 동일 마크업 — 정적 카드(키워드·썸네일 16:9) */
#jrBlog .jr-blog-grid--static .jr-blog-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
text-align: left;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #f1ece6;
overflow: hidden;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.9rem 1rem 1rem;
flex: 1 1 auto;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__keywords {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.4rem;
margin: 0;
line-height: 1.3;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__keyword {
font-size: 1.2rem;
font-weight: 700;
color: var(--brown700, #6d4c32);
}
#jrBlog .jr-blog-grid--static .jr-blog-card__keyword-sep {
color: #a89888;
font-weight: 400;
font-size: 1.2rem;
user-select: none;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__title {
margin: 0;
font-size: 1.55rem;
font-weight: 700;
color: #1f1711;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#jrBlog .jr-blog-grid--static .jr-blog-card__desc {
margin: 0;
font-size: 1.35rem;
color: var(--brown700, #4e4438);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 상황별 맞춤변호사 검색 (메인 히어로 아래) */
/* .sect .innerWrap 기본 gap 덮어쓰기: 헤드 · 검색박스 · CTA 사이 30px */
section.lawyer-search-wrap .innerWrap {
gap: 30px !important;
}
.lawyer-search-wrap .lawyer-search-head {
text-align: center;
margin-bottom: 0;
}
.lawyer-search-sect {
margin-bottom: 0;
min-height: 180px;
box-sizing: border-box;
padding: 1.25rem 1.25rem;
background: linear-gradient(135deg, #faf8f5 0%, #f3f0eb 100%);
border-radius: 12px;
border: 1px solid rgba(184,115,51,0.2);
box-shadow: 0 2px 12px rgba(45,36,24,0.06);
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.lawyer-search-sect .lawyer-search-controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 0.85rem;
align-items: flex-end;
justify-content: center;
width: 100%;
}
.lawyer-search-sect .lawyer-search-controls label { font-size: clamp(1.55rem, 2.2vw, 1.9rem); font-weight: 600; color: #4a4035; display: block; margin-bottom: 0.35rem; }
.lawyer-search-sect .lawyer-search-wrap { flex: 0 1 280px; min-width: 0; max-width: 100%; }
.lawyer-search-sect select, .lawyer-search-sect input[type="text"] { width: 100%; padding: 0.65rem 1rem; font-size: clamp(1.55rem, 2.2vw, 1.9rem); border: 1px solid rgba(45,36,24,0.25); border-radius: 8px; background: #fff; color: #1a1612; box-sizing: border-box; text-align: center; }
.lawyer-search-sect input[type="text"]::placeholder { text-align: center; }
.lawyer-search-sect select:focus, .lawyer-search-sect input[type="text"]:focus { outline: none; border-color: #B87333; box-shadow: 0 0 0 2px rgba(184,115,51,0.2); }
.lawyer-search-sect .lawyer-search-results {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(45,36,24,0.1);
width: 100%;
text-align: center;
}
.lawyer-search-sect .lawyer-search-results h3 { font-size: clamp(1.55rem, 2.2vw, 1.9rem); font-weight: 600; color: #2d2419; margin: 0 0 0.6rem 0; }
.lawyer-search-sect .lawyer-search-results-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.lawyer-search-results-list { list-style: none; margin: 0; padding: 0; }
.lawyer-search-results-list li { margin-bottom: 0.5rem; }
.lawyer-search-results-list a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid rgba(184,115,51,0.3); border-radius: 8px; color: #B87333; font-weight: 600; text-decoration: none; font-size: clamp(1.55rem, 2.2vw, 1.9rem); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.lawyer-search-results-list a:hover { background: #B87333; color: #fff; border-color: #A06528; }
.lawyer-search-sect .lawyer-search-empty { font-size: clamp(1.55rem, 2.2vw, 1.9rem); color: #6b5b4f; margin: 0; }
/* 맞춤변호사 검색 섹션 하단 CTA (Downloads jr-why-credibility-next) — .sect 패딩은 건드리지 않음 */
.lawyer-search-wrap .jr-why-credibility-next {
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.65rem;
}
.lawyer-search-wrap .jr-why-credibility-next-tagline {
margin: 0;
max-width: 36rem;
color: #34291f;
font-size: 1.52rem;
font-weight: 600;
line-height: 1.55;
}
.lawyer-search-wrap .jr-why-credibility-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: auto;
max-width: 100%;
padding: 0.88rem 1.55rem;
border-radius: 999px;
background: #2f251a;
color: #fff;
border: 1px solid #2f251a;
box-shadow: 0 10px 22px rgba(45, 36, 25, 0.22);
font-size: 1.38rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lawyer-search-wrap .jr-why-credibility-link:hover {
transform: translateY(-1px);
background: #3b3024;
box-shadow: 0 12px 26px rgba(45, 36, 25, 0.28);
}
@media (max-width: 767px) {
.lawyer-search-wrap .jr-why-credibility-next {
gap: 0.55rem;
}
.lawyer-search-wrap .jr-why-credibility-next-tagline {
font-size: 1.42rem;
padding: 0 0.5rem;
}
.lawyer-search-wrap .jr-why-credibility-link {
width: 100%;
max-width: 26rem;
}
}
.footer .footer-region-links { font-size: 0.075em; color: #c5a67d; text-align: right; width: 100%; margin-top: 0.5rem; }
.footer .footer-region-links a { font-size: 1em; color: #c5a67d; }
/* moved from #jr-broadcast-spacing-override */
/* 방송: 섹션 제목과 영상 카드 행 간격 */
section.jr-broadcast-section .innerWrap { gap: 5.5rem !important; }
section.jr-broadcast-section .jr-media-width { margin-top: 0 !important; }
/* 방송 카드: 영상-제목 간격 최소화 */
section.jr-broadcast-section .jr-broadcast-card .jr-broadcast-card-body {
padding: 0 1rem 1rem 1rem !important;
gap: 0.25rem !important;
}
/* moved from #jr-visual-mobile-left */
@media screen and (max-width: 950px) {
section.visual .visual_two_col { align-items: stretch !important; }
/* 세로로 쌓일 때(899px 이하)만 visual_left·visual_right 사이 여백 제거 — 그리드(900px~) 가로 gap 은 유지 */
section.visual .jr-hero-fixed {
margin-top: 0 !important;
}
section.visual .visual_left {
margin-bottom: 0 !important;
}
section.visual .innerWrap { padding-left: 0 !important; }
section.visual .visual_left { padding-left: 0 !important; margin-left: 0 !important; max-width: 100% !important; }
section.visual .slogan_wrap { padding-left: 0 !important; margin-left: 0 !important; text-align: center !important; width: 100%; display: flex; flex-direction: column; align-items: center; }
section.visual .title { margin-left: 0 !important; padding-left: 0 !important; width: 100%; text-align: center !important; }
section.visual .title h1,
section.visual .title .subtxt { text-align: center !important; }
.visual .btn_group .btnCall.btncs,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn {
margin: 0 !important;
padding: 0.78rem 1.9rem !important;
font-size: 1.55rem !important;
min-height: 4.3rem;
}
.visual .btn_group .btnCall.btncs i,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn i {
width: 1.9rem;
height: 1.9rem;
}
}
@media screen and (max-width: 640px) {
.visual .btn_group {
gap: 0.8rem !important;
padding-top: 0.8rem !important;
}
.visual .btn_group .btnCall.btncs,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn {
padding: 0.72rem 1.45rem !important;
font-size: 1.4rem !important;
min-height: 4rem;
}
.visual .btn_group .btnCall.btncs i,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn i {
width: 1.7rem;
height: 1.7rem;
}
}
@media screen and (max-width: 480px) {
.visual .btn_group {
gap: 0.65rem !important;
padding-top: 0.65rem !important;
}
.visual .btn_group .btnCall.btncs,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn {
padding: 0.65rem 1.2rem !important;
font-size: 1.28rem !important;
min-height: 3.6rem;
border-radius: 999px;
}
.visual .btn_group .btnCall.btncs i,
.visual .btn_group .btnRsv.btncs.modal-trigger-btn i {
width: 1.5rem;
height: 1.5rem;
}
}
/* —— RISK CHECK (#jrRiskUrgency) —— 다운로드판 index.html 동기화 */
.jr-risk-section {
padding: 8rem 0;
}
#jrRiskUrgency .innerWrap {
gap: 0 !important;
}
.jr-risk-head {
text-align: center;
margin-bottom: 4.8rem;
}
.jr-risk-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 1rem;
border-radius: 6px;
background: #2d2419;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 0.8rem;
}
.jr-risk-head h2 {
margin: 0;
color: #2d2419;
font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem);
line-height: 1.3;
}
/* h2 줄바꿈: 모바일·태블릿만 (데스크톱은 한 줄) */
.jr-risk-head h2 br.jr-risk-title-br-mo {
display: none;
}
@media (max-width: 1199px) {
.jr-risk-head h2 br.jr-risk-title-br-mo {
display: block;
}
}
.jr-risk-head p {
margin: 0.6rem 0 0;
color: #555;
font-size: 1.55rem;
line-height: 1.75;
}
.jr-risk-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.45rem;
counter-reset: riskCard;
}
.jr-risk-card {
background: #fff;
border: 1px solid #b0a090;
border-radius: 12px;
padding: 2.2rem 1.8rem;
text-align: left;
box-shadow: 0 2px 10px rgba(45, 36, 24, 0.07);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.jr-risk-card:hover {
border-color: #9a8a78;
box-shadow: 0 8px 20px rgba(45, 36, 24, 0.1);
transform: translateY(-1px);
}
.jr-risk-card::before {
content: none;
}
.jr-risk-card h3 {
margin: 0 0 1.05rem;
color: #2d2419;
font-size: clamp(1.62rem, 1.28rem + 0.82vw, 2.05rem);
line-height: 1.38;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.75rem;
}
.jr-risk-card h3::before {
counter-increment: riskCard;
content: "0" counter(riskCard);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.2rem;
height: 2.2rem;
padding: 0 0.7rem;
border-radius: 999px;
background: #f4ede4;
color: #8a6a49;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.jr-risk-card p {
margin: 0;
color: #534a43;
font-size: clamp(1.62rem, 1.45rem + 0.36vw, 1.8rem);
line-height: 1.82;
letter-spacing: -0.01em;
word-break: keep-all;
}
.jr-risk-card .jr-risk-scenario {
margin-top: auto;
padding: 1.05rem 1.1rem;
border-radius: 8px;
background: #faf6f0;
border: 1px solid #efe5d8;
color: #6a5d50;
font-size: clamp(1.56rem, 1.4rem + 0.32vw, 1.72rem);
line-height: 1.84;
}
#jrRiskUrgency.jr-risk-section {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f6 50%, #f5f5f4 100%) !important;
}
#jrRiskUrgency.jr-risk-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.045;
background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg");
background-repeat: no-repeat, no-repeat;
background-position: 90% 18%, 6% 88%;
background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto;
}
#jrRiskUrgency.jr-risk-section .innerWrap {
position: relative;
z-index: 1;
}
@media (max-width: 1100px) {
.jr-risk-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jr-why-core-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.jr-risk-section {
padding: 6rem 0;
}
.jr-risk-grid {
grid-template-columns: 1fr;
gap: 0.9rem;
}
.jr-risk-head p br {
display: none;
}
#jrRiskUrgency.jr-risk-section::before {
opacity: 0.035;
background-position: 92% 12%, 4% 92%;
background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto;
}
}
@media (max-width: 390px) {
#jrRiskUrgency .innerWrap {
width: min(100%, calc(100vw - 2.4rem));
margin-left: auto;
margin-right: auto;
}
#jrRiskUrgency .jr-risk-grid {
gap: 0.7rem;
}
}
/* RISK 섹션: 다운로드판과 동일한 제목·본문 스케일 */
:root {
--jr-type-title: clamp(2.42rem, 1.87rem + 1.45vw, 3.32rem);
/* 방송/보도/블로그 섹션 설명: 최소 16px(1.6rem), 본문 스케일과 동일 계열 */
--jr-type-section-desc: clamp(1.6rem, 1.45rem + 0.34vw, 1.82rem);
--jr-type-subtitle: clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem);
--jr-type-card-title: clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem);
--jr-type-body: clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem);
}
#jrRiskUrgency .jr-risk-head h2 {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
margin: 0 !important;
}
#jrRiskUrgency .jr-risk-head p {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
margin-top: 0.45rem !important;
}
#jrRiskUrgency .jr-risk-card h3 {
font-size: var(--jr-type-card-title) !important;
line-height: 1.4;
}
#jrRiskUrgency .jr-risk-card p,
#jrRiskUrgency .jr-risk-card .jr-risk-scenario {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
/* 맞춤변호사 검색: 제목·설명은 RISK CHECK(.jr-risk-head)와 동일 스케일 */
.lawyer-search-wrap .lawyer-search-head h2 {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
margin: 0 !important;
font-weight: 700;
}
.lawyer-search-wrap .lawyer-search-head .lawyer-search-desc {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
margin: 0.45rem 0 0 !important;
}
/* —— WHY JR (#jrWhyCredibility) —— Downloads index 동기화 */
.jr-why-credibility-section {
position: relative;
overflow: hidden;
padding: 7.6rem 0;
background: linear-gradient(180deg, #f9f5ef 0%, #f5efe7 100%);
}
.jr-why-credibility-section::before,
.jr-why-credibility-section::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.jr-why-credibility-section::before {
width: 34rem;
height: 34rem;
right: -10rem;
top: -10rem;
background: radial-gradient(circle, rgba(201, 168, 106, 0.24) 0%, rgba(201, 168, 106, 0) 70%);
}
.jr-why-credibility-section::after {
width: 26rem;
height: 26rem;
left: -9rem;
bottom: -10rem;
background: radial-gradient(circle, rgba(45, 36, 25, 0.09) 0%, rgba(45, 36, 25, 0) 72%);
}
.jr-why-credibility-section .innerWrap {
position: relative;
z-index: 1;
gap: 0 !important;
}
.jr-why-credibility-head {
text-align: center;
max-width: 88rem;
margin: 0 auto;
}
.jr-why-credibility-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.42rem 1.1rem;
border-radius: 999px;
background: rgba(45, 36, 25, 0.92);
color: #fffdf8;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 10px 20px rgba(45, 36, 25, 0.14);
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 0.8rem;
}
.jr-why-credibility-head h2 {
margin: 0;
color: #1f1711;
font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem);
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
}
.jr-why-credibility-head p {
margin: 1.35rem 0 0;
color: #4e4438;
font-size: 1.62rem;
line-height: 1.85;
}
.jr-why-credibility-head .jr-why-mobile-break {
display: none;
}
.jr-why-core-cards {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
counter-reset: whyCore;
}
.jr-why-core-cards article {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid #b0a090;
border-radius: 14px;
padding: 1.95rem 1.65rem 1.75rem;
box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.jr-why-core-cards article::before {
counter-increment: whyCore;
content: "0" counter(whyCore);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3rem;
height: 2.2rem;
padding: 0 0.7rem;
margin-bottom: 0.85rem;
border-radius: 999px;
background: #f3ebe1;
color: #7f5f3f;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.jr-why-core-cards article::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, #8e6a45 0%, #c9a86a 100%);
opacity: 0.78;
}
.jr-why-core-cards article:hover {
transform: translateY(-3px);
border-color: #9a8a78;
box-shadow: 0 10px 22px rgba(45, 36, 25, 0.11);
}
.jr-why-core-cards h3 {
margin: 0;
color: #2d2419;
font-size: clamp(1.62rem, 1.28rem + 0.82vw, 2.05rem);
letter-spacing: -0.01em;
}
.jr-why-core-cards p {
margin: 0.7rem 0 0;
color: #4b4035;
font-size: 1.4rem;
line-height: 1.78;
}
.jr-why-core-cards p strong {
color: #7a5833;
font-weight: 800;
}
#jrWhyCredibility .jr-why-credibility-head h2 {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
margin: 0 !important;
}
#jrWhyCredibility .jr-why-credibility-head p {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
margin-top: 0.45rem !important;
}
#jrWhyCredibility .jr-why-core-cards h3 {
font-size: var(--jr-type-card-title) !important;
line-height: 1.4;
}
#jrWhyCredibility .jr-why-core-cards p {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
@media (max-width: 767px) {
#jrWhyCredibility.jr-why-credibility-section {
padding: 5.6rem 0;
}
#jrWhyCredibility .jr-why-credibility-head p br:not(.jr-why-mobile-break) {
display: none;
}
#jrWhyCredibility .jr-why-credibility-head .jr-why-mobile-break {
display: inline;
}
#jrWhyCredibility .jr-why-credibility-head h2 {
font-size: clamp(2.35rem, 2rem + 0.8vw, 2.95rem) !important;
line-height: 1.24;
}
#jrWhyCredibility .jr-why-credibility-head p {
font-size: 1.48rem !important;
line-height: 1.78;
}
#jrWhyCredibility .jr-why-core-cards {
grid-template-columns: 1fr;
margin-top: 1.45rem;
gap: 0.95rem;
}
#jrWhyCredibility .jr-why-core-cards article {
padding: 1.45rem 1.2rem 1.2rem;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(45, 36, 25, 0.08);
text-align: left;
}
#jrWhyCredibility .jr-why-core-cards article::before {
content: none;
}
#jrWhyCredibility .jr-why-core-cards h3 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.55rem;
font-size: 1.92rem !important;
line-height: 1.35;
}
#jrWhyCredibility .jr-why-core-cards h3::before {
counter-increment: whyCore;
content: "0" counter(whyCore);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.9rem;
height: 2rem;
padding: 0 0.65rem;
border-radius: 999px;
background: #f3ebe1;
color: #7f5f3f;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: 0.03em;
flex-shrink: 0;
}
#jrWhyCredibility .jr-why-core-cards p {
margin-top: 0.6rem;
font-size: 1.36rem !important;
line-height: 1.62;
color: #4e4338;
}
}
@media (max-width: 390px) {
#jrWhyCredibility .jr-why-core-cards article {
padding: 1.05rem 0.95rem 0.95rem;
}
}
/* 업무사례 미리보기 #jrCasesPreview — Downloads index 동기화 */
#jrCasesPreview.jr-cases-preview-section {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f6 50%, #f5f5f4 100%) !important;
}
#jrCasesPreview.jr-cases-preview-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.045;
background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg");
background-repeat: no-repeat, no-repeat;
background-position: 90% 18%, 6% 88%;
background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto;
}
#jrCasesPreview.jr-cases-preview-section .innerWrap {
position: relative;
z-index: 1;
gap: 5.5rem !important;
}
#jrCasesPreview .jr-why-credibility-head h2 {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
margin: 0 !important;
}
#jrCasesPreview .jr-why-credibility-head p {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
margin-top: 0.45rem !important;
}
#jrCasesPreview .jr-cases-preview-card-title {
font-size: var(--jr-type-card-title) !important;
line-height: 1.4;
}
#jrCasesPreview .jr-cases-preview-card-summary {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
#jrCasesPreview .jr-section-more-btn {
display: inline-flex !important;
width: 24rem !important;
min-width: 24rem !important;
max-width: 24rem !important;
min-height: 4.5rem !important;
padding: 0.85rem 1.35rem !important;
justify-content: center !important;
align-items: center !important;
gap: 0.6rem !important;
box-sizing: border-box !important;
}
#jrCasesPreview .jr-section-more-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#jrCasesPreview .jr-section-more-btn svg {
width: 1.35rem !important;
height: 1.35rem !important;
flex-shrink: 0 !important;
}
#jrCasesPreview .jr-why-credibility-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.42rem 1.1rem !important;
border-radius: 999px !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
line-height: 1 !important;
margin-bottom: 0.8rem !important;
}
@media (max-width: 767px) {
#jrCasesPreview.jr-cases-preview-section::before {
opacity: 0.035;
background-position: 92% 12%, 4% 92%;
background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto;
}
#jrCasesPreview .jr-cases-preview-track-wrap {
width: min(100%, calc(100vw - 2.4rem)) !important;
max-width: min(100%, calc(100vw - 2.4rem)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0.75rem 0 1.1rem !important;
box-sizing: border-box;
}
#jrCasesPreview .jr-cases-preview-card {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
#jrCasesPreview .jr-cases-preview-btn--prev {
left: -0.4rem !important;
}
#jrCasesPreview .jr-cases-preview-btn--next {
right: -0.4rem !important;
}
}
@media (max-width: 1199px) and (min-width: 951px) {
/* 태블릿: 뷰포트에 3장 — JS visibleCount()와 동기화 */
#jrCasesPreview .jr-cases-preview-track {
gap: 1.6rem;
}
#jrCasesPreview .jr-cases-preview-card {
flex: 0 0 calc((100% - 3.2rem) / 3) !important;
width: calc((100% - 3.2rem) / 3) !important;
max-width: calc((100% - 3.2rem) / 3) !important;
}
#jrCasesPreview .jr-cases-preview-btn--prev {
left: -0.4rem !important;
}
#jrCasesPreview .jr-cases-preview-btn--next {
right: -0.4rem !important;
}
}
@supports (width: 1cqw) {
@media (max-width: 1199px) and (min-width: 951px) {
#jrCasesPreview .jr-cases-preview-card {
flex: 0 0 calc((100cqw - 3.2rem) / 3) !important;
width: calc((100cqw - 3.2rem) / 3) !important;
max-width: calc((100cqw - 3.2rem) / 3) !important;
}
}
}
@media (max-width: 390px) {
#jrCasesPreview .jr-cases-preview-track-wrap {
padding: 0.6rem 0 1rem !important;
}
#jrCasesPreview .jr-cases-preview-btn {
width: 3.2rem;
height: 3.2rem;
font-size: 1.55rem;
}
#jrCasesPreview .jr-cases-preview-btn--prev {
left: -0.4rem !important;
}
#jrCasesPreview .jr-cases-preview-btn--next {
right: -0.4rem !important;
}
}
/* 네이버 플레이스 방문자 후기 — 뷰포트 + 가로 슬라이드 (Downloads index 동기화) */
.jr-naver-reviews-section {
padding-top: clamp(3rem, 2vw, 5rem);
padding-bottom: clamp(4rem, 5vw, 6rem);
}
.jr-naver-reviews-section .jr-naver-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 1rem;
border-radius: 6px;
background: #2d2419;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
width: fit-content;
min-width: 0;
margin-left: auto;
margin-right: auto;
margin-top: 1.2rem;
margin-bottom: 0.8rem;
text-transform: uppercase;
}
.jr-naver-reviews-section .innerWrap {
gap: 0;
}
.jr-naver-reviews-section > .innerWrap > h2:first-of-type {
margin-top: 0;
margin-bottom: 0;
line-height: 1.2;
text-align: center;
}
.jr-naver-reviews-section .jr-naver-reviews-desc {
font-size: clamp(1.1rem, 1rem + 0.25vw, 1.35rem);
color: var(--brown700);
line-height: 1.55;
max-width: 38rem;
margin: 0.35rem auto 0;
text-align: center;
}
.jr-naver-reviews-section .innerWrap > .cont {
margin-top: clamp(2.5rem, 3.5vw, 5rem);
}
.jr-naver-reviews-section .cont.jr-naver-reviews-stage-wrap {
width: 100%;
max-width: 100%;
display: flex;
justify-content: center;
}
.jr-naver-reviews-stage {
position: relative;
width: 100%;
max-width: calc(1200px + 7rem);
padding: 0 clamp(2.75rem, 4vw, 3.5rem);
box-sizing: border-box;
}
.jr-naver-reviews-fade-root {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.jr-naver-reviews-viewport {
overflow: hidden;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 2px;
margin-bottom: -2px;
}
.jr-naver-reviews-grid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: clamp(1.25rem, 2.5vw, 2rem);
width: max-content;
min-width: 100%;
max-width: none;
margin: 0;
transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1);
will-change: transform;
}
.jr-naver-reviews-grid.jr-naver-slide--no-trans {
transition: none;
}
.jr-naver-reviews-grid--single {
display: grid;
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
max-width: 28rem;
margin: 0 auto;
transition: none;
will-change: auto;
}
.jr-naver-grid-cell {
display: flex;
min-width: 0;
min-height: 0;
flex: 0 0 var(--jr-naver-cell, min(100%, 320px));
box-sizing: border-box;
}
.jr-naver-reviews-grid--single .jr-naver-grid-cell {
flex: 1 1 auto;
max-width: 100%;
}
.jr-naver-grid-cell--empty {
visibility: hidden;
pointer-events: none;
}
.jr-naver-fade-controls {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 3;
margin: 0;
}
.jr-naver-fade-btn {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
width: clamp(3rem, 5vw, 3.5rem);
height: clamp(3rem, 5vw, 3.5rem);
border-radius: 50%;
border: 1px solid rgba(45, 36, 24, 0.12);
background: rgba(255, 255, 255, 0.96);
color: var(--brown800);
box-shadow: 0 4px 14px rgba(45, 36, 24, 0.1);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.jr-naver-fade-btn:hover {
background: var(--brown800);
color: #fff;
border-color: var(--brown800);
box-shadow: 0 6px 20px rgba(45, 36, 24, 0.18);
transform: scale(1.05);
}
.jr-naver-fade-btn svg {
flex-shrink: 0;
}
@media (max-width: 767px) {
.jr-naver-grid-cell--empty {
display: none;
}
}
#jrNaverReviews .review-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
transform: none !important;
opacity: 1 !important;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #b0a090;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(45, 36, 25, 0.06);
}
#jrNaverReviews .review-card__profile {
flex-shrink: 0;
}
#jrNaverReviews .review-card__profile .jr-naver-review-idline {
margin-top: 0;
margin-bottom: 0.5rem;
}
#jrNaverReviews .review-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
text-align: left;
}
#jrNaverReviews .review-card__text {
color: #7d6e65;
font-size: 2rem;
line-height: 1.65;
text-align: left;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding-bottom: 0.12em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
}
.jr-naver-reviews-grid--single .review-card__text {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
#jrNaverReviews .jr-naver-place-link {
margin-top: auto;
padding-top: 1rem;
flex-shrink: 0;
display: inline-block;
align-self: center;
font-size: 1.45rem;
font-weight: 600;
color: #03a84d;
text-decoration: none;
}
#jrNaverReviews .jr-naver-place-link:hover {
text-decoration: underline;
color: #038a3d;
}
#jrNaverReviews .jr-section-more-wrap {
margin-top: 2.5rem;
margin-bottom: 0;
}
#jrNaverReviews.jr-naver-reviews-section,
#jrNaverReviews.jr-naver-reviews-section .innerWrap,
#jrReview.jr-naver-reviews-section,
#jrReview.jr-naver-reviews-section .innerWrap,
#jrInstagram.jr-instagram-section,
#jrInstagram.jr-instagram-section .innerWrap {
background: linear-gradient(180deg, #f9f5ef 0%, #f5efe7 100%) !important;
}
#jrNaverReviews > .innerWrap > h2:first-of-type,
#jrReview > .innerWrap > h2:first-of-type,
#jrInstagram .jr-instagram-title {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
margin: 0 !important;
}
#jrNaverReviews .jr-naver-reviews-desc,
#jrReview .jr-naver-reviews-desc,
#jrInstagram .jr-instagram-desc {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
}
#jrNaverReviews .review-card__name {
font-size: var(--jr-type-card-title) !important;
line-height: 1.4;
}
#jrNaverReviews .jr-naver-badge,
#jrNaverReviews .review-card__category,
#jrNaverReviews .review-card__text,
#jrNaverReviews .jr-naver-place-link {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
#jrNaverReviews .jr-section-more-btn {
display: inline-flex !important;
width: 24rem !important;
min-width: 24rem !important;
max-width: 24rem !important;
min-height: 4.5rem !important;
padding: 0.85rem 1.35rem !important;
justify-content: center !important;
align-items: center !important;
gap: 0.6rem !important;
box-sizing: border-box !important;
}
#jrNaverReviews .jr-section-more-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#jrNaverReviews .jr-section-more-btn svg {
width: 1.35rem !important;
height: 1.35rem !important;
flex-shrink: 0 !important;
}
#jrNaverReviews .jr-naver-badge,
#jrReview .jr-naver-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.42rem 1.1rem !important;
border-radius: 999px !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
line-height: 1 !important;
margin-bottom: 0.8rem !important;
margin-top: 0 !important;
}
@media (max-width: 767px) {
#jrNaverReviews .jr-naver-reviews-stage {
padding: 0 !important;
}
#jrNaverReviews .jr-naver-reviews-viewport {
width: min(100%, calc(100vw - 2.4rem)) !important;
max-width: min(100%, calc(100vw - 2.4rem)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
#jrNaverReviews .jr-naver-fade-controls {
left: -0.8rem !important;
right: -0.8rem !important;
}
}
@media (max-width: 390px) {
#jrNaverReviews .jr-naver-reviews-stage {
padding: 0 !important;
}
#jrNaverReviews .jr-naver-fade-btn {
width: 3.2rem;
height: 3.2rem;
}
}
/* JR 인스타그램 (#jrInstagram) */
.jr-instagram-section {
padding: 6rem 0;
}
.jr-instagram-section .jr-media-width {
margin-top: 4rem !important;
}
.jr-instagram-header {
text-align: center;
margin-bottom: 0;
margin-top: 0;
}
.jr-instagram-badge {
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
border-radius: 6px;
background: #2d2419;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 0.8rem;
}
.jr-instagram-title {
font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem);
font-weight: 700;
color: #050505;
margin: 0;
}
.jr-instagram-desc {
font-size: clamp(1.1rem, 1rem + 0.2vw, 1.25rem);
color: #050505;
font-weight: 400;
margin-top: 0.45rem;
}
#jrInstagram .innerWrap {
gap: clamp(1.2rem, 2.2vw, 2rem) !important;
}
.jr-instagram-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
width: 100%;
}
@media (min-width: 640px) {
.jr-instagram-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) and (max-width: 1199px) {
.jr-instagram-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.jr-instagram-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* 모바일만: 인스타 게시물 3개를 한 줄에 동시 노출(스크립트는 1200px 미만에서 3개 슬라이스) */
@media (max-width: 899px) {
.jr-instagram-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.45rem, 2.2vw, 0.85rem);
}
}
.jr-instagram-card {
display: block;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid #b0a090;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.jr-instagram-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
border-color: rgba(184, 124, 72, 0.45);
}
.jr-instagram-thumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #f1ece6;
overflow: hidden;
}
.jr-instagram-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jr-instagram-card p {
margin: 0;
padding: 0.85rem 0.95rem 1rem;
font-size: 1.25rem;
color: #2d2419;
line-height: 1.5;
text-align: left;
min-height: 4.8rem;
}
#jrInstagram .jr-instagram-card p {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
.jr-instagram-card .jr-instagram-card-text {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.62;
min-height: calc(1.62em * 2 + 0.12em);
}
#jrInstagram .jr-instagram-card .jr-instagram-card-text {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
white-space: normal !important;
word-break: keep-all;
overflow: hidden !important;
text-overflow: ellipsis;
line-height: 1.62 !important;
min-height: calc(1.62em * 2 + 0.12em) !important;
}
.jr-instagram-empty {
text-align: center;
padding: 2rem;
color: #6d6357;
font-size: 1.4rem;
}
.jr-section-more-btn .jr-instagram-more-icon {
width: 1.35rem;
height: 1.35rem;
flex-shrink: 0;
object-fit: contain;
}
/* —— 이혼센터 FAQ (#faq) —— Downloads index 동기화 */
#jrReview.section2,
#jrInstagram.jr-instagram-section,
#jrLocation.section3,
#faq.jr-faq-section {
border-top: 1px solid rgba(176, 160, 144, 0.33);
}
.jr-faq-section {
position: relative;
padding: clamp(4rem, 5vw, 7rem) 0;
background: linear-gradient(180deg, #faf8f5 0%, #f3ece4 100%) !important;
text-align: left;
}
.jr-faq-section .jr-faq-inner {
gap: clamp(2.25rem, 5vw, 3.75rem) !important;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.jr-faq-head {
text-align: center;
}
.jr-faq-badge {
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
border-radius: 6px;
background: #2d2419;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 0.85rem;
}
.jr-faq-title {
font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem);
font-weight: 700;
color: #050505;
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.jr-faq-lead {
margin: 1rem auto 0;
max-width: 40rem;
font-size: clamp(1.15rem, 1.02rem + 0.35vw, 1.3rem);
line-height: 1.65;
color: #3d352b;
text-align: center;
}
.jr-faq-lead strong {
color: #1f1711;
font-weight: 700;
}
.jr-faq-body {
display: grid;
gap: 2.5rem;
}
@media (min-width: 900px) {
.jr-faq-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.25rem 2.5rem;
align-items: start;
}
}
.jr-faq-cat-title {
font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.55rem);
font-weight: 700;
color: #1f1711;
margin: 0 0 1rem;
padding-bottom: 0.65rem;
border-bottom: 2px solid rgba(45, 36, 25, 0.12);
letter-spacing: -0.02em;
}
.jr-faq-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.jr-faq-item {
border: 1px solid #b0a090;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(45, 36, 25, 0.06);
overflow: hidden;
}
.jr-faq-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.5rem;
padding: 1.15rem 1.2rem 1.15rem 1.35rem;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.2s ease;
}
.jr-faq-trigger:hover,
.jr-faq-trigger:focus-visible {
background: rgba(245, 239, 230, 0.55);
}
.jr-faq-trigger:focus-visible {
outline: 2px solid rgba(205, 131, 78, 0.65);
outline-offset: -2px;
}
.jr-faq-q {
font-size: clamp(1.28rem, 1.15rem + 0.35vw, 1.48rem);
font-weight: 700;
color: #15100c;
line-height: 1.45;
flex: 1;
min-width: 0;
}
.jr-faq-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(45, 36, 25, 0.06);
color: #2d2419;
}
.jr-faq-icon svg {
display: block;
transition: transform 0.35s ease;
}
.jr-faq-item.is-open .jr-faq-icon svg {
transform: rotate(180deg);
}
.jr-faq-panel-inner {
max-height: 0;
overflow: hidden;
transition: max-height 0.45s ease;
}
.jr-faq-item.is-open .jr-faq-panel-inner {
max-height: 48rem;
}
.jr-faq-answer {
padding: 0 1.35rem 1rem;
border-top: 1px solid rgba(176, 160, 144, 0.35);
background: linear-gradient(180deg, rgba(250, 248, 245, 0.9) 0%, #fff 40%);
}
.jr-faq-answer p {
margin: 0;
font-size: clamp(1.32rem, 1.18rem + 0.35vw, 1.48rem);
line-height: 1.65;
color: #2d2419;
}
.jr-faq-answer p + p {
margin-top: 0.85rem;
}
.jr-faq-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 1rem 1.35rem 1.25rem;
padding: 0.75rem 1.2rem;
border-radius: 9999px;
background: linear-gradient(180deg, #4a4035 0%, #2d2419 100%);
color: #fff !important;
font-size: clamp(1.22rem, 1.1rem + 0.3vw, 1.35rem);
font-weight: 600;
text-decoration: none !important;
line-height: 1.35;
box-shadow: 0 4px 14px rgba(45, 36, 25, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jr-faq-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(45, 36, 25, 0.22);
color: #fff !important;
}
.jr-faq-cta:focus-visible {
outline: 2px solid #cd834e;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.jr-faq-panel-inner,
.jr-faq-icon svg,
.jr-faq-cta {
transition: none !important;
}
.jr-faq-item.is-open .jr-faq-panel-inner {
max-height: none;
}
}
#faq .jr-faq-title {
font-size: var(--jr-type-title) !important;
line-height: 1.32;
letter-spacing: -0.02em;
color: var(--brown900) !important;
}
#faq .jr-faq-lead,
#faq .jr-faq-cat-title,
#faq .jr-faq-q {
font-size: var(--jr-type-subtitle) !important;
line-height: 1.68;
letter-spacing: -0.006em;
color: var(--brown700) !important;
}
#faq .jr-faq-lead strong {
color: var(--brown700) !important;
}
#faq .jr-faq-answer p {
font-size: var(--jr-type-body) !important;
line-height: 1.72;
letter-spacing: -0.004em;
}
#faq .jr-faq-trigger--soft .jr-faq-q {
font-size: clamp(1.46rem, 1.31rem + 0.31vw, 1.64rem) !important;
font-weight: 500 !important;
color: var(--brown900) !important;
}
/* 히어로: ~899px 이하만 세로 풀뷰포트 — 900px 이상은 .visual_two_col 그리드 유지 */
@media screen and (max-width: 899px) {
/* 모바일: 그리드 해제 → 곽윤서 히어로 가로 풀뷰포트 */
#jrMember .visual_two_col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
min-height: 0 !important;
}
#jrMember .visual_left {
width: 100% !important;
max-width: 100% !important;
order: 1;
}
/* 변호사 슬라이더: 베이지 배경을 뷰포트 가로 끝까지 (태블릿에서 우측 main_visual 비침 방지) */
#jrMember .lawyer-slider-container.lawyer-slider-others,
#jrMember .lawyer-slider-container {
order: 3;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px))
max(0.25rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px)) !important;
box-sizing: border-box !important;
background: #f5f2ee !important;
overflow-x: hidden !important;
position: relative;
z-index: 2;
}
#jrMember .lawyer-slider-container .swiper {
max-width: 100% !important;
overflow: hidden !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#jrMember .visual_right {
order: 2;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
position: relative !important;
flex: 0 0 auto !important;
align-self: stretch !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo {
--jr-duo-img-w: min(50.4vw, 264px);
--jr-duo-img-h: min(64.8vh, 600px);
--jr-duo-overlap: clamp(1rem, calc(var(--jr-duo-img-w) * 0.14 + 0.1rem), 2rem);
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
transform: translateX(0) !important;
padding: 0 max(0px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px));
box-sizing: border-box !important;
overflow: visible !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
flex: 0 0 auto !important;
width: var(--jr-duo-img-w) !important;
max-width: var(--jr-duo-img-w) !important;
overflow: visible !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner {
margin-right: calc(-1 * var(--jr-duo-overlap)) !important;
z-index: 1 !important;
transform: translateX(calc(clamp(0.7rem, 1.8vw, 1.6rem) + 40px)) !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
margin-left: calc(-1 * var(--jr-duo-overlap)) !important;
z-index: 2 !important;
}
#jrMember .visual_right .jr-hero-fixed.jr-lawyer-profile-trigger,
#jrMember .visual_right .jr-hero-fixed {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
/* 모바일: 좌측 공백 제거(translate 제거로 풀블리드에 맞춤) */
transform: translateX(0) !important;
transition: transform 0.3s ease !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed.jr-lawyer-profile-trigger,
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
width: auto !important;
}
/* 태블릿·모바일: PC용 max-width/max-height(380px·66vh) 제거 → 컨테이너 너비에 맞게 비율 유지 */
#jrMember .visual_right .jr-hero-fixed .hero-fixed-img {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block !important;
border-radius: 0 !important;
object-fit: contain !important;
object-position: center top !important;
}
/* 위 일반 규칙보다 뒤 — 디자인1 듀오만 크기·cover 고정 */
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed .hero-fixed-img {
width: 100% !important;
max-width: 100% !important;
height: var(--jr-duo-img-h) !important;
max-height: var(--jr-duo-img-h) !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: bottom center !important;
border-radius: 0 0 8px 8px !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner .hero-fixed-img--partner {
border-radius: 0 0 0 8px !important;
}
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img {
border-radius: 0 0 8px 0 !important;
}
#jrMember
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo {
width: min(380px, 92%) !important;
max-width: min(380px, 92%) !important;
margin-left: auto !important;
margin-right: 0 !important;
justify-content: flex-end !important;
transform: translateY(-7rem) !important;
overflow: visible !important;
}
#jrMember
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary {
width: min(380px, 100%) !important;
max-width: min(380px, 100%) !important;
margin-left: auto !important;
}
#jrMember
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary
.hero-fixed-img {
width: 100% !important;
max-width: min(380px, 100%) !important;
max-height: min(60vh, 520px) !important;
height: auto !important;
object-fit: contain !important;
object-position: center top !important;
}
#jrMember .slogan_wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* 슬로건 블록은 가로 가운데 배치, 글자만 왼쪽 정렬 */
#jrMember .slogan_wrap > .title {
align-self: center !important;
width: 100% !important;
max-width: min(36rem, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#jrMember .slogan_wrap > .title h1,
#jrMember .slogan_wrap > .title .subtxt {
text-align: left !important;
}
#jrMember .btn_group,
.visual .btn_group {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
align-items: center !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
position: relative;
left: auto;
box-sizing: border-box !important;
transform: none !important;
padding-left: max(0px, env(safe-area-inset-left, 0px));
padding-right: max(0px, env(safe-area-inset-right, 0px));
}
}
/* 다운로드판 index 동기화: #jrMember 슬로건·버튼 (모바일) */
@media screen and (max-width: 899px) {
#jrMember .visual_two_col {
gap: 0 !important;
}
#jrMember .visual_left {
margin-bottom: 0 !important;
}
/* 고정 헤더(64px) + 노치 safe-area — 상단 패딩에 합산 */
#jrMember .slogan_wrap {
padding: calc(clamp(5.6rem, 9vw, 6.7rem) + env(safe-area-inset-top, 0px)) 1rem 0.65rem 1rem !important;
text-align: left !important;
align-items: center !important;
}
#jrMember .slogan_wrap > .title {
align-self: center !important;
width: 100% !important;
max-width: min(36rem, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
box-sizing: border-box !important;
}
#jrMember .title,
#jrMember .title h1,
#jrMember .title .subtxt {
text-align: left !important;
}
#jrMember .btn_group {
margin-top: 2em;
margin-top: 2lh;
}
#jrMember .btn_group .btnCall.btncs,
#jrMember .btn_group .btnRsv.btncs.modal-trigger-btn {
font-size: clamp(1.42rem, 4.1vw, 1.82rem) !important;
min-height: 4.55rem;
padding: 0.82rem 2rem !important;
}
#jrMember .btn_group .btnCall.btncs i,
#jrMember .btn_group .btnRsv.btncs.modal-trigger-btn i {
width: 2rem;
height: 2rem;
}
/* 히어로 곽윤서: innerWrap 패딩 무시하고 뷰포트 가로 끝까지 */
#jrMember .visual_right {
margin-bottom: 0;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
position: relative;
}
#jrMember .visual_right .jr-hero-fixed {
overflow: hidden !important;
position: relative !important;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 0;
}
/* 듀오(디자인1): 위 overflow:hidden 이 얼굴·어깨를 잘라내지 않도록 예외 */
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo,
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
overflow: visible !important;
}
#jrMember .visual_right .jr-hero-fixed .hero-fixed-img {
position: relative;
z-index: 0;
display: block;
vertical-align: bottom;
margin-bottom: 0;
max-width: none;
width: 100%;
border-radius: 0;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info {
position: absolute !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: stretch !important;
line-height: 1.45 !important;
border-radius: 0 !important;
width: 100% !important;
padding: 1rem max(20px, env(safe-area-inset-right, 0px))
calc(3.5rem + env(safe-area-inset-bottom, 0px))
max(20px, env(safe-area-inset-left, 0px)) !important;
box-sizing: border-box !important;
margin: 0 !important;
background: none !important;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info > p:first-of-type {
margin-bottom: 0.2rem !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(20, 14, 10, 0.55) !important;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info p:last-of-type {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.4) !important;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
align-self: center !important;
margin: 0 auto 0.5rem auto !important;
width: fit-content !important;
max-width: calc(100% - 0.5rem) !important;
text-align: center !important;
z-index: auto !important;
}
}
/* index 히어로 lawyer-info: 태블릿·모바일 뷰포트 가로 풀사이즈 (그리드 컬럼·innerWrap 밖으로) */
@media screen and (max-width: 1024px) {
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo,
#jrMember #jr-hero-design-divorce .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
overflow: visible !important;
}
#jrMember .visual_right .jr-hero-fixed {
overflow-x: visible !important;
overflow-y: hidden !important;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info {
width: 100vw !important;
max-width: 100vw !important;
left: 0 !important;
right: auto !important;
/* 부모(.jr-hero-fixed) 기준 뷰포트 가로 풀블리드 — 그라데이션 좌·우 끝 정렬 */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
box-sizing: border-box !important;
}
#jrMember .visual_right .jr-hero-fixed .lawyer-info .jr-hero-profile-hint {
transform: none !important;
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: fit-content !important;
max-width: calc(100% - 0.5rem) !important;
text-align: center !important;
}
}
/* 독립 레이어: 디자인3 전용(듀오 + 파트너 교체) */
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo {
--jr-duo-img-w: min(336px, 52.8vw);
--jr-duo-img-h: min(80.4vh, 720px);
--jr-duo-overlap: clamp(1.4rem, calc(var(--jr-duo-img-w) * 0.16 + 0.2rem), 2.8rem);
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
width: 100%;
max-width: 100%;
position: relative;
pointer-events: auto;
overflow: visible;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
flex: 0 0 auto;
width: var(--jr-duo-img-w);
max-width: var(--jr-duo-img-w);
position: relative;
align-self: flex-end;
overflow: visible;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner {
z-index: 1;
margin-right: calc(-1 * var(--jr-duo-overlap));
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--primary {
z-index: 2;
margin-left: calc(-1 * var(--jr-duo-overlap));
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .hero-fixed-img,
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .hero-fixed-img--partner {
width: 100% !important;
max-width: 100% !important;
height: var(--jr-duo-img-h) !important;
max-height: var(--jr-duo-img-h) !important;
min-height: 0 !important;
object-fit: contain !important;
object-position: bottom center !important;
display: block;
margin: 0;
border-radius: 0 0 8px 8px;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner {
border-radius: 0 0 0 8px;
filter: drop-shadow(0 4px 14px rgba(40, 28, 18, 0.18));
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--primary .hero-fixed-img {
border-radius: 0 0 8px 0;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .lawyer-info--partner {
padding: 0.85rem 0.6rem 2.75rem 0.75rem !important;
align-items: flex-start !important;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(32, 22, 14, 0.55) 42%, rgba(28, 18, 12, 0.82) 100%) !important;
border-radius: 0 0 0 8px !important;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .lawyer-info--partner .jr-hero-partner-name {
font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.65rem);
font-weight: 800;
color: #fffaf6;
margin: 0 0 0.2rem 0;
padding-left: 0 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .lawyer-info--partner .jr-hero-partner-tag {
font-size: clamp(1.1rem, 0.95rem + 0.35vw, 1.25rem);
font-weight: 600;
color: rgba(255, 248, 240, 0.95);
margin: 0;
padding-left: 0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner .jr-partner-ghost {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner {
overflow: hidden !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner .jr-partner-ghost .hero-fixed-img--partner {
width: 100% !important;
height: 100% !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed--partner.jr-partner-updating .hero-fixed-img--partner {
filter: brightness(1.06) saturate(1.04);
}
@media (min-width: 900px) {
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo {
transform: translateX(12ch);
transition: transform 0.3s ease;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
transform: none;
}
#jrMember.visual #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner {
transform: translateX(calc(clamp(1rem, 2.1vw, 2.4rem) + 40px));
}
}
@media screen and (max-width: 899px) {
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo {
--jr-duo-img-w: min(50.4vw, 264px);
--jr-duo-img-h: min(64.8vh, 600px);
--jr-duo-overlap: clamp(1rem, calc(var(--jr-duo-img-w) * 0.14 + 0.1rem), 2rem);
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
transform: translateX(0) !important;
padding: 0 max(0px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px));
box-sizing: border-box !important;
overflow: visible !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
flex: 0 0 auto !important;
width: var(--jr-duo-img-w) !important;
max-width: var(--jr-duo-img-w) !important;
overflow: visible !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner {
margin-right: calc(-1 * var(--jr-duo-overlap)) !important;
z-index: 1 !important;
transform: translateX(calc(clamp(0.7rem, 1.8vw, 1.6rem) + 40px)) !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary {
margin-left: calc(-1 * var(--jr-duo-overlap)) !important;
z-index: 2 !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed.jr-lawyer-profile-trigger,
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed {
width: auto !important;
}
#jrMember #jr-hero-design-divorce-copy .visual_right .jr-hero-fixed-duo .jr-hero-fixed .hero-fixed-img {
width: 100% !important;
max-width: 100% !important;
height: var(--jr-duo-img-h) !important;
max-height: var(--jr-duo-img-h) !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: bottom center !important;
border-radius: 0 0 8px 8px !important;
}
}
/* 독립 레이어: 디자인4 전용(정적 전원 배치) */
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .lawyer-slider-container.lawyer-slider-others {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static {
--jr-design4-card-h: calc((100vh - 64px) * 0.9);
overflow: visible !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2 .jr-design4-left-lineup[hidden],
#jrMember.visual #jr-hero-design-divorce-copy2 .jr-design4-lineup[hidden] {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_two_col {
display: block !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
align-items: end !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_left_stack {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
overflow: visible !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_left .slogan_wrap {
display: none !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo {
transform: none !important;
width: 100% !important;
max-width: none !important;
justify-content: flex-start !important;
align-items: flex-end !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0 !important;
align-items: stretch !important;
overflow: hidden !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: var(--jr-design4-card-h) !important;
margin: 0 !important;
transform: none !important;
overflow: hidden !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img,
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img {
height: var(--jr-design4-card-h) !important;
max-height: var(--jr-design4-card-h) !important;
object-fit: cover !important;
object-position: center top !important;
border-radius: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner {
border-radius: 0 !important;
padding: 0.5rem 0.3rem 0.65rem !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-name {
font-size: clamp(0.8rem, 0.66rem + 0.16vw, 0.94rem) !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-tag {
font-size: clamp(0.64rem, 0.56rem + 0.1vw, 0.74rem) !important;
}
@media (max-width: 899px) {
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static {
--jr-design4-card-h: calc((100svh - 56px) * 0.9);
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_two_col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#jrMember.visual #jr-hero-design-divorce-copy2.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner {
padding: 0.42rem 0.24rem 0.52rem !important;
}
}
/* 초소형 모바일: 히어로 슬로건·버튼 정렬 (다운로드판) */
@media (max-width: 390px) {
/* visual_right 는 100vw 풀블리드 유지 — translate 시 화면 끝 정렬이 어긋남 */
#jrMember .visual_left {
transform: translateX(-2rem) !important;
}
/* visual_left 좌측 이동만큼 btn_group 을 되돌려 화면 기준 가운데 정렬 유지 */
#jrMember .btn_group {
transform: translateX(2rem) !important;
}
#jrMember .slogan_wrap > .title {
max-width: min(30.5rem, 100%) !important;
}
#jrMember .title h1 {
word-break: keep-all;
line-break: strict;
text-wrap: balance;
line-height: 1.22 !important;
}
#jrMember .title h1 > br {
display: none;
}
#jrMember .title .subtxt {
word-break: keep-all;
line-break: strict;
line-height: 1.55 !important;
}
#jrMember .title .subtxt > br,
#jrMember .title .subtxt .jr-subtxt-br-mo {
display: none;
}
}
/* 히어로 제목: lawfirmjr 참고 — Pretendard ExtraBold(800) + 브라운
common.css * { font-weight:400 } 가 h1 내부 span 에 적용되어 굵기가 사라짐 → h1·span 모두 800 고정 */
#jrMember .title h1 {
font-weight: 800 !important;
color: #4a3c31;
}
#jrMember .title h1 span#jr-hero-l1,
#jrMember .title h1 span#jr-hero-l2 {
font-weight: 800 !important;
color: inherit;
}
/* 고정 헤더(64px)·노치: 앵커·스크롤 스냅 시 히어로 h1이 가려지지 않게 */
#jrMember.visual {
scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px));
overflow-x: hidden;
}
/* PC: 롤링 네거티브 마진·확장 폭이 섹션에서 잘리지 않게 */
@media (min-width: 900px) {
#jrMember.visual {
overflow-x: visible;
}
}
/* 디자인1 큰 사진 최종 고정값: 다른 중간 규칙 간섭 차단 */
@media (min-width: 900px) {
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-end !important;
overflow: visible !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo {
width: min(360px, 88%) !important;
max-width: min(360px, 88%) !important;
margin: 0 0 0 auto !important;
transform: translateY(-26rem) !important;
justify-content: flex-end !important;
overflow: visible !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary {
width: min(360px, 100%) !important;
max-width: min(360px, 100%) !important;
margin-left: auto !important;
}
#jrMember.visual
#jr-hero-design-divorce:not(.jr-hero-design-divorce-copy):not(.jr-hero-design-divorce-copy2)
.visual_right
.jr-hero-fixed-duo
.jr-hero-fixed--primary
.hero-fixed-img {
width: 100% !important;
max-width: min(360px, 100%) !important;
max-height: min(50vh, 420px) !important;
height: auto !important;
object-fit: contain !important;
object-position: center top !important;
}
}