@charset "utf-8";

/* ============================================================
   서초 중앙 법률사무소 — 메인 페이지
   ============================================================ */

:root {
  --blue: #3697de;
  --navy: #0d2e56;
  --pale: #f1f6fb;
  --ink: #333;
  --ink-2: #555;
  --ink-3: #999;
  --overlay: rgba(9, 37, 70, .8);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
b, strong { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.overflow-h { overflow: hidden; }

.area {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 18px;
}

.main-sec { padding: 70px 0; }

.br-lg, .br-md, .br-xl { display: none; }

/* ---------- 공통 버튼 ---------- */

.btn-more {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--blue);
  transition: .2s linear;
}

.btn-more .icon-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: var(--blue);
}

.btn-more .icon-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  transform: translate(-3px, -5.5px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'%3E%3Cpath d='M.9.9 5 5.5.9 10.1' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/cover no-repeat;
}

.btn-more.btn-white { color: #fff; }
.btn-more.btn-white .icon-wrap { background: transparent; border-color: #fff; }

/* ============================================================
   헤더
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: 65px;
  z-index: 800;
}

.header-inner {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: 65px;
  padding: 0 18px;
  transition: background-color .3s, height .3s;
}

.site-header.fixed .header-inner { background: #fff; }

.logo { width: 163px; height: 65px; flex: 0 0 auto; }

.logo-img {
  display: block;
  width: 100%;
  height: 100%;
  background: url("assets/logo-white.svg") 50% 50%/100% no-repeat;
}

.site-header.fixed .logo-img { background-image: url("assets/logo-navy.svg"); }

.pc-nav { display: none; }

.header-right-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
  height: 100%;
}

.btns-wrap { display: none; }

.header-right-wrap .btn-sns {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 19px;
  color: #fff;
  transition: color .3s;
}

.header-right-wrap .btn-sns + .btn-sns { margin-left: 11.5px; }

.header-right-wrap .btn-sns::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 7.5 7.5 1.5M2.6 1.5h4.9v4.9' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.site-header.fixed .header-right-wrap .btn-sns { color: var(--ink); }

.site-header.fixed .header-right-wrap .btn-sns::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 7.5 7.5 1.5M2.6 1.5h4.9v4.9' fill='none' stroke='%23333' stroke-width='1.1'/%3E%3C/svg%3E");
}

.menu-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 30px;
  height: 65px;
  margin-left: 20px;
  z-index: 900;
  position: relative;
}

.menu-btn { position: relative; display: block; width: 30px; height: 18px; }

.menu-btn .line {
  position: absolute;
  right: 0;
  height: 2px;
  background: #fff;
  transition: background-color .3s, transform .3s, opacity .3s, width .3s;
}

.menu-btn .line:nth-child(1) { top: 0; width: 30px; }
.menu-btn .line:nth-child(2) { top: 8px; width: 19px; }
.menu-btn .line:nth-child(3) { top: 16px; width: 30px; }

.site-header.fixed .menu-btn .line { background: var(--ink); }

.site-header.nav-open .menu-btn .line { background: #fff; width: 30px; }
.site-header.nav-open .menu-btn .line:nth-child(1) { top: 8px; transform: rotate(45deg); }
.site-header.nav-open .menu-btn .line:nth-child(2) { opacity: 0; }
.site-header.nav-open .menu-btn .line:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* 전체 메뉴 오버레이 */

.open-nav-wrap {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
  overflow: auto;
}

.site-header.nav-open .open-nav-wrap { opacity: 1; visibility: visible; }

.open-nav-wrap .inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  padding: 130px 50px 60px;
}

.open-nav-wrap .menu-list-wrap { display: block; }

.open-nav-wrap .menu-list > a {
  display: flex;
  align-items: center;
  height: 35px;
  font-size: 24px;
  font-weight: 600;
  line-height: 35px;
  color: #fff;
}

.open-nav-wrap .menu-list + .menu-list { margin-top: 20px; }

.open-nav-wrap .menu-list > a.has-sub::after {
  content: "";
  width: 13px;
  height: 13px;
  margin-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s;
}

.open-nav-wrap .menu-list.is-open > a.has-sub::after { transform: rotate(45deg); }

.open-nav-wrap .sub-list { display: none; padding: 6px 0 4px; }
.open-nav-wrap .menu-list.is-open .sub-list { display: block; }

.open-nav-wrap .sub-list a {
  display: block;
  padding: 5px 0;
  font-size: 16px;
  color: rgba(255, 255, 255, .8);
}

.open-nav-sns { margin-top: 40px; }

.open-nav-sns a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

.open-nav-sns a + a { margin-left: 0; }
.open-nav-sns a { display: flex; margin-bottom: 12px; }

.open-nav-sns a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 7.5 7.5 1.5M2.6 1.5h4.9v4.9' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   히어로
   ============================================================ */

.visual-sec {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-wrap { position: absolute; inset: 0; overflow: hidden; }

.hero-media {
  position: absolute;
  top: 0;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background: #26404f url("assets/hero.jpg") 42% 50%/116% auto no-repeat;
  animation: heroDrift 28s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes heroDrift {
  0%   { background-position: 42% 50%; }
  100% { background-position: 58% 46%; }
}

.visual-sec .text-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  z-index: 2;
}

.visual-sec .line { display: flex; align-items: center; }

.visual-sec .line-1 { margin-left: 45px; }
.visual-sec .line-2 { margin-right: 111px; }
.visual-sec .line-3 { margin-left: 79px; }
.visual-sec .line-4 { margin-top: 30px; }

.visual-sec .title {
  font-size: 38px;
  font-weight: 400;
  line-height: 55.9968px;
  color: #fff;
  white-space: nowrap;
  transform: translateY(100px);
  opacity: 0;
}

.visual-sec .desc-wrap { display: none; }

.visual-sec .line-4 {
  transform: translateY(30px);
  opacity: 0;
}

.visual-sec .desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.visual-sec.is-in .title { transform: translateY(0); opacity: 1; }
.visual-sec.is-in .line-4,
.visual-sec.is-in .desc-wrap { transform: translateY(0); opacity: 1; }

.visual-sec .line-1 .title { transition: transform 1s cubic-bezier(.25,.46,.45,.94) .83s, opacity 1s cubic-bezier(.25,.46,.45,.94) .83s; }
.visual-sec .line-2 .title { transition: transform 1s cubic-bezier(.25,.46,.45,.94) 1.03s, opacity 1s cubic-bezier(.25,.46,.45,.94) 1.03s; }
.visual-sec .line-3 .title { transition: transform 1s cubic-bezier(.25,.46,.45,.94) 1.23s, opacity 1s cubic-bezier(.25,.46,.45,.94) 1.23s; }
.visual-sec .desc-wrap,
.visual-sec .line-4 { transition: transform 1s cubic-bezier(.25,.46,.45,.94) 1.62s, opacity 1s cubic-bezier(.25,.46,.45,.94) 1.62s; }

.scroll-icon {
  display: none;
  position: absolute;
  top: 88%;
  left: 50px;
  width: 1px;
  height: 70px;
  background: #fff;
  z-index: 2;
}

.scroll-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  animation: scrollDownAni 1.5s linear infinite;
}

@keyframes scrollDownAni {
  0%   { top: -6px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}

/* ============================================================
   성공사례
   ============================================================ */

.story-sec { padding-top: 70px; overflow: hidden; }

.story-sec .inner-left { padding: 0 18px; }

.story-sec .title-wrap { margin-bottom: 50px; }

.story-sec .title {
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 400;
  line-height: 37.96px;
  color: var(--ink);
}

.story-sec .btn-line { margin-top: 0; }

.list-wrap { background: var(--pale); padding: 70px 0; }

.marquee { display: flex; }

.marquee-list { display: flex; flex: 0 0 auto; }

.marquee-item {
  flex: 0 0 auto;
  width: 186px;
  margin-right: 20px;
}

.marquee-item .label-pc { display: none; }

.marquee-item img {
  display: block;
  width: 100%;
  height: 262px;
  object-fit: cover;
}

.marquee-item .label-mo { margin-top: 14.3px; }

.marquee-item .label-mo p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  line-height: 17.25px;
  color: var(--ink);
}

/* ============================================================
   구성원
   ============================================================ */

.members-sec { overflow: hidden; }

.members-sec .area-left { padding: 0 18px; }

.members-sec .flex-row { display: flex; flex-wrap: wrap; }

.members-sec .text-area { width: 100%; }

.members-sec .inner { display: flex; flex-direction: column; height: 100%; }

.members-sec .title-wrap { margin-bottom: 20px; }

.members-sec .title {
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 600;
  line-height: 37.96px;
  color: var(--ink);
}

.members-sec .desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ink-2);
}

.members-sec .btn-wrap { margin-bottom: 50px; }

.members-swiper-controller { display: none; }

.members-col { width: 100%; }

.members-swiper { overflow: hidden; }

.members-list {
  display: flex;
  gap: 15px;
  transition: transform .3s ease-out;
  will-change: transform;
}

.member-card { flex: 0 0 calc((100% - 9.45px) / 1.63); }

.member-card .inner { display: block; }

.member-card .img {
  position: relative;
  width: 100%;
  padding-top: 123.24%;
  border-radius: 10px;
  overflow: hidden;
  background: #d9dee3 50% 50%/cover no-repeat;
}

.member-card .img::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(rgba(38, 158, 244, 0), rgba(38, 158, 244, .5));
  opacity: 0;
  transition: opacity .4s;
}

.member-card:hover .img::after { opacity: 1; }

.member-card .text-wrap { margin-top: 15px; }

.member-card .name { font-size: 18px; font-weight: 500; line-height: 25.92px; color: var(--ink); }
.member-card .phone { margin-bottom: 10px; font-size: 15px; font-weight: 400; line-height: 24px; color: var(--ink-3); }
.member-card .subtitle { font-size: 15px; font-weight: 400; line-height: 24px; color: var(--ink-2); }

/* ============================================================
   전문센터
   ============================================================ */

.criminal-wrap .flex-row { display: flex; flex-wrap: wrap; }

.criminal-wrap .img-col { width: 100%; }

.criminal-wrap .img {
  width: 100%;
  padding-top: 64%;
  background: #cfd4d8 url("assets/center-main.jpg") 50% 50%/cover no-repeat;
}

.criminal-wrap .text-col {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--blue);
}

.criminal-wrap .text-col .area { padding: 0 18px; }
.criminal-wrap .inner { padding: 70px 0; text-align: center; }

.criminal-wrap .caption {
  font-size: 16px;
  font-weight: 600;
  line-height: 18.4px;
  color: #fff;
  margin-bottom: 15px;
}

.criminal-wrap .title {
  margin-bottom: 30px;
  font-size: 26px;
  font-weight: 400;
  line-height: 37.96px;
  color: #fff;
}

.criminal-wrap .btn-more {
  display: flex;
  justify-content: center;
}

.center-wrap { padding: 70px 0; }

.center-wrap .flex-row { display: flex; flex-wrap: wrap; }

.center-wrap .item { width: 100%; }
.center-wrap .item + .item { margin-top: 70px; }

.center-wrap .inner { display: flex; flex-direction: column; }

.center-wrap .common-sub-title-wrap { margin-bottom: 40px; text-align: center; }

.center-wrap .title { margin-bottom: 10px; font-size: 26px; font-weight: 400; line-height: 37.96px; color: var(--ink); }

.center-wrap .desc {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-2);
}

.center-wrap .btn-wrap { margin-top: 0; }

.center-wrap .img { display: block; width: 100%; height: auto; }

/* ============================================================
   업무분야
   ============================================================ */

.service-sec { background: var(--pale); }

.service-sec .inner { display: flex; flex-wrap: wrap; }

.service-sec .left-wrap { width: 100%; text-align: center; }

.service-sec .title { font-size: 26px; font-weight: 400; line-height: 37.96px; color: var(--ink); }

.service-sec .left-wrap .btn-wrap { margin-top: 10px; margin-bottom: 50px; }

.service-sec .right-wrap { width: 100%; }

.service-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 -10px -10px;
}

.service-list .item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px 10px;
  padding: 10px 15px;
  border-radius: 100px;
  background: var(--blue);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
}

/* ============================================================
   상담
   ============================================================ */

.contact-sec .flex-row { display: flex; flex-wrap: wrap; }

.contact-sec .list-col { width: 100%; order: 2; }
.contact-sec .title-area { width: 100%; order: 1; }

.contact-sec .caption {
  position: relative;
  margin-bottom: 10px;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
}

.contact-sec .caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--blue);
}

.contact-list { margin-top: 0; }

.contact-list .item + .item { margin-top: 5px; }

.contact-list .item .inner {
  position: relative;
  padding: 14px 49px 13px 15px;
  background: var(--pale);
}

.contact-list .item .inner::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.2' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.contact-list .date-wrap { margin-bottom: 5px; }
.contact-list .num { display: none; }
.contact-list .date-wrap .date { display: none; }

.contact-list .mobile-wrap { text-align: left; }
.contact-list .mobile-wrap .status { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--blue); }
.contact-list .mobile-wrap .date { font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink-3); }

.contact-list .title { min-width: 0; }
.contact-list .title .pc-status { display: none; }

.contact-list .title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  line-height: 18.4px;
  color: var(--ink-2);
}

.contact-list .writer { display: none; }

.contact-sec .title-area .title {
  font-size: 26px;
  font-weight: 400;
  line-height: 37.96px;
  color: var(--ink);
}

.contact-sec .title-area .btn-wrap { margin-top: 10px; margin-bottom: 50px; }

/* ============================================================
   오시는 길
   ============================================================ */

.location-sec { padding: 70px 0; }

.location-sec .area > .title {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-2);
}

.location-sec .top-wrap { display: flex; flex-wrap: wrap; margin-bottom: 50px; }

.location-sec .text {
  width: 100%;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  color: var(--ink);
}

.map-list { display: flex; }

.map-list .item + .item { margin-left: 25px; }

.map-list .inner {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-2);
}

.map-list .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: center/contain no-repeat;
}

.map-list .icon-naver { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 3.4h4.1l3.7 5.6V3.4H16v13.2h-4.1L8.2 11v5.6H4z' fill='%2303c75a'/%3E%3C/svg%3E"); }
.map-list .icon-kakao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.2c-4 0-7.2 2.5-7.2 5.6 0 2 1.4 3.8 3.4 4.8l-.8 3 3.4-2a9 9 0 0 0 1.2.1c4 0 7.2-2.5 7.2-5.9S14 3.2 10 3.2z' fill='%23fae100'/%3E%3C/svg%3E"); }
.map-list .icon-google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 10.2c0-.6 0-1.2-.2-1.8H10v3.4h4.5a3.9 3.9 0 0 1-1.7 2.5v2.1h2.8c1.6-1.5 2.4-3.7 2.4-6.2z' fill='%234285f4'/%3E%3Cpath d='M10 18.4c2.3 0 4.2-.8 5.6-2.1l-2.8-2.1c-.8.5-1.7.8-2.8.8-2.2 0-4-1.4-4.7-3.4H2.4v2.1A8.4 8.4 0 0 0 10 18.4z' fill='%2334a853'/%3E%3Cpath d='M5.3 11.6a5 5 0 0 1 0-3.2V6.3H2.4a8.4 8.4 0 0 0 0 7.4z' fill='%23fbbc05'/%3E%3Cpath d='M10 5c1.3 0 2.4.4 3.3 1.3l2.5-2.5A8.4 8.4 0 0 0 2.4 6.3l2.9 2.1C6 6.4 7.8 5 10 5z' fill='%23ea4335'/%3E%3C/svg%3E"); }

.map-wrap { margin-top: 0; }

.mapCanvas {
  position: relative;
  width: 100%;
  padding-top: 59.17%;
  background: #f8f9fa;
  overflow: hidden;
}

.mapCanvas .map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   푸터
   ============================================================ */

#footer { background: var(--navy); }

.footer-content-wrap { padding: 50px 0; }

.footer-top { display: flex; flex-wrap: wrap; margin-bottom: 50px; }

.footer-logo-col { width: 100%; }

.footer-logo img { display: block; width: 161.9px; height: auto; }

.family-wrap { width: 100%; }

.family-wrap .title { display: none; }

.family-list { margin-top: 30px; }
.family-list .item { min-height: 30px; padding-left: 5px; margin-bottom: 15px; }
.family-list .item:last-child { margin-bottom: 0; }

.family-list a {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.family-list a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 7.5 7.5 1.5M2.6 1.5h4.9v4.9' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.footer-content { margin-top: 0; }

.top-content { display: flex; flex-direction: column; }
.footer-link-wrap { display: flex; align-items: center; order: 2; margin-bottom: 5px; }

.footer-link-wrap .link-txt {
  font-size: 14px;
  line-height: 1.68;
  color: #f8f8f8;
}

.footer-link-wrap .link-txt + .link-txt { margin-left: 23px; position: relative; }

.footer-link-wrap .link-txt + .link-txt::before {
  content: "·";
  position: absolute;
  left: -13px;
  color: #bbb;
}

.info-items { order: 1; margin-bottom: 30px; }

.info-items .item {
  display: flex;
  align-items: center;
  margin: 0 20px 5px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: #ddd;
}

.info-items .item dt { color: #bbb; }
.info-items .item dd { margin: 0 0 0 10px; }

.copyright {
  display: block;
  margin-top: 0;
  font-size: 15px;
  line-height: 17.25px;
  color: var(--ink-3);
}

/* ============================================================
   퀵 버튼
   ============================================================ */

.footer-btns {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 500;
}

.footer-btns .btn-sns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  transition: background-color .3s, border-color .3s;
}

.footer-btns .btn-sns + .btn-sns { margin-top: 5px; }

.footer-btns.addColor .btn-sns { background: var(--navy); border-color: var(--navy); }

.footer-btns .text {
  position: relative;
  display: block;
  width: 100%;
  height: 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 18.4px;
}

.footer-btns .label { display: none; }

.footer-btns .text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: center/contain no-repeat;
}

.footer-btns .btn-call .text::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 2.2 7 5.4 5.5 7c-.3.3-.3.6-.2.9.9 2 2 3.1 4 4 .3.1.6.1.9-.2l1.6-1.5 3.2 1.8c.4.2.5.6.4 1a4 4 0 0 1-3.6 2.7C8.2 15.7 2.3 9.8 2.1 5.4a4 4 0 0 1 2.7-3.6c.4-.1.8 0 1 .4z' fill='%23fff'/%3E%3C/svg%3E"); }
.footer-btns .btn-kakao .text::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3C5.4 3 2.5 5.3 2.5 8.1c0 1.8 1.2 3.4 3 4.3l-.7 2.7 3.1-1.8 1.1.1c3.6 0 6.5-2.3 6.5-5.3S12.6 3 9 3z' fill='%23fae100'/%3E%3C/svg%3E"); }
.footer-btns .btn-contact .text::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='3.5' y='2' width='11' height='14' rx='1.5' fill='%23fff'/%3E%3Cpath d='M6 5.5h6M6 8.5h6M6 11.5h4' stroke='%230d2e56' stroke-width='1.3'/%3E%3C/svg%3E"); }

/* ============================================================
   팝업
   ============================================================ */

.popup {
  position: absolute;
  top: 10px;
  left: 2.5%;
  width: 95%;
  max-width: 600px;
  z-index: 1001;
  background: #f6f6f6;
}

.popup.is-hidden { display: none; }

.popup .bg-img {
  position: relative;
  width: 100%;
  padding-top: 80.894%;
  background: #05070d url("assets/popup.png") 50% 50%/cover no-repeat;
}

.popup-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 6% 8%;
}

.popup-copy .eyebrow { font-size: 3.1%; font-size: min(2.2vw, 13px); letter-spacing: .35em; color: #cfd6e0; }
.popup-copy .brand { margin-top: 3.5%; font-size: min(9vw, 54px); font-weight: 700; letter-spacing: .18em; }
.popup-copy .head { margin-top: 3%; font-size: min(6vw, 36px); font-weight: 700; }
.popup-copy .sub { position: relative; margin-top: 1%; font-size: min(6vw, 36px); font-weight: 700; color: #d9c7a0; }

.popup-copy .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  font-size: min(2vw, 12px);
  font-weight: 500;
  vertical-align: super;
  letter-spacing: .05em;
}

.popup-copy .cta {
  margin-top: 5%;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .78);
  color: #1b2331;
  font-size: min(2.6vw, 15px);
  font-weight: 600;
}

.popup-bottom-wrap {
  display: flex;
  padding: 1px;
  background: #fff;
}

.popup-bottom-wrap .btn-txt {
  flex: 1 1 0;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1.15;
  color: var(--ink);
}

.popup-bottom-wrap .btn-txt + .btn-txt { border-left: 1px solid #e5e5e5; }

/* ============================================================
   544px 이상
   ============================================================ */

@media screen and (min-width: 544px) {
  .members-list { gap: 20px; }
  .member-card { flex: 0 0 calc((100% - 30px) / 2.5); }
}

/* ============================================================
   768px 이상
   ============================================================ */

@media screen and (min-width: 768px) {
  .area { padding: 0 60px; }
  .header-inner { padding: 0 60px; }
  .story-sec .inner-left { padding: 0 60px; }
  .members-sec .area-left { padding: 0 60px; }
  .criminal-wrap .text-col .area { padding: 45px 60px; }

  .visual-sec .title { font-size: 7.0893vw; line-height: 1.4117; }
  .visual-sec .line-1,
  .visual-sec .line-2,
  .visual-sec .line-3 { margin: 0; }
  .visual-sec .line-4 { display: none; }
  .visual-sec .text-wrap { padding: 0 60px; }
  .visual-sec .desc-wrap { display: block; }

  .visual-sec .line-2 .desc-wrap { width: 29.14vw; text-align: center; }
  .visual-sec .desc { font-size: 16px; line-height: 1.6; }

  .service-list .item { padding: 1.4176vw 4.17vw; line-height: 1.6; }
  .service-list { justify-content: center; margin: 0 0 -10px; }
  .service-list .item { margin: 0 .938vw 10px; }

  .footer-logo img { width: 20.3vw; }
}

/* ============================================================
   992px 이상 — 데스크톱 레이아웃
   ============================================================ */

@media screen and (min-width: 992px) {
  .main-sec { padding: 180px 0; }
  .br-lg { display: inline; }

  .btn-more { font-size: 18px; line-height: 1.4; }
  .btn-more .icon-wrap { width: 35px; height: 35px; }

  /* 히어로 */
  .scroll-icon { display: block; }

  /* 성공사례 */
  .story-sec { padding-top: 0; }
  .story-sec .inner-left { padding: 11.257vw 60px 0; }
  .story-sec .title-wrap { margin-bottom: 80px; text-align: center; }
  .story-sec .title { margin-bottom: 0; font-size: 3.4375vw; line-height: 1.4699; }
  .story-sec .btn-line { margin-top: 30px; }

  .list-wrap { padding: 80px 0; }
  .marquee-item { width: 210px; margin-right: min(5vw, 80px); padding-bottom: 4.4px; }

  .marquee-item .label-mo { display: none; }

  .marquee-item .label-pc {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20.7px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marquee-item img { height: 296px; }

  /* 구성원 */
  .members-sec .area-left { padding: 0 0 0 60px; max-width: 1860px; }
  .members-sec .flex-row { flex-wrap: nowrap; justify-content: space-between; margin: 0 -10px; }
  .members-sec .text-area { width: 33.3333%; padding: 0 10px; }
  .members-col { width: 58.3333%; padding: 0 10px; margin-top: 0; }

  .members-sec .title { font-size: 2.625vw; line-height: 1.46; }
  .members-sec .desc { font-size: 20px; line-height: 1.6; }
  .members-sec .title-wrap { margin-bottom: 0; }
  .members-sec .title { margin-bottom: 0; }
  .members-sec .desc { margin-top: 20px; }
  .members-sec .btn-wrap { margin-top: 30px; margin-bottom: 0; }

  .members-swiper-controller { display: flex; margin-top: auto; }

  .members-swiper-controller button {
    position: relative;
    width: 35px;
    height: 35px;
    border: 1px solid var(--blue);
    border-radius: 50%;
  }

  .members-swiper-controller button + button { margin-left: 20px; }

  .members-swiper-controller button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 11px;
    margin: -5.5px 0 0 -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'%3E%3Cpath d='M.9.9 5 5.5.9 10.1' fill='none' stroke='%233697de' stroke-width='1.5'/%3E%3C/svg%3E") center/cover no-repeat;
  }

  .members-swiper-controller .swiper-button-prev::after { transform: rotate(180deg); }

  .members-list { gap: 22px; }
  .member-card { flex: 0 0 calc((100% - 26.4px) / 2.2); }
  .member-card .text-wrap { margin-top: 30px; }
  .member-card .name { font-size: 24px; line-height: 35px; }
  .member-card .phone { margin-bottom: 10px; font-size: 15px; line-height: 24px; }
  .member-card .subtitle { font-size: 18px; line-height: 1.44; }

  /* 전문센터 */
  .criminal-wrap .flex-row { flex-wrap: nowrap; }
  .criminal-wrap .img-col { width: 50%; order: 2; }
  .criminal-wrap .text-col { width: 50%; order: 1; }
  .criminal-wrap .img { padding-top: 88.54%; }
  .criminal-wrap .text-col .area { padding: 0 12.5%; max-width: none; }
  .criminal-wrap .inner { padding: 0; text-align: left; }
  .criminal-wrap .caption { font-size: 20px; line-height: 23px; margin-bottom: 20px; }
  .criminal-wrap .title { margin-bottom: 0; font-size: 2.625vw; line-height: 1.48; }
  .criminal-wrap .btn-more { margin-top: 60px; }

  .center-wrap { padding: 168px 0 180px; }
  .center-wrap .flex-row { flex-wrap: nowrap; margin: 0 -20px; }
  .center-wrap .item { width: 50%; padding: 0 20px; }
  .center-wrap .item + .item { margin-top: 0; }
  .center-wrap .common-sub-title-wrap { margin-bottom: 0; padding: 0 8.571%; }
  .center-wrap .title { margin-bottom: 20px; font-size: 2.625vw; line-height: 1.48; }
  .center-wrap .desc { margin-bottom: 0; font-size: 20px; line-height: 1.6; }
  .center-wrap .btn-wrap { margin-top: 30px; }
  .center-wrap .img { margin-top: 60px; }

  /* 업무분야 */
  .service-sec .title { font-size: 2.625vw; line-height: 1.48; }
  .service-sec .left-wrap .btn-wrap { margin-top: 27px; margin-bottom: 50px; }
  .service-sec .title { line-height: 1.48; }
  .service-list { width: 100%; margin: 0 0 -10px; }

  .service-list .item {
    margin: 0 .938vw 31.5px;
    padding: 14.065px 41.368px;
    font-size: 2.0017vw;
    line-height: 3.2vw;
  }

  /* 상담 */
  .contact-sec .flex-row { flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 0 -5px; }
  .contact-sec .list-col { width: 58.3333%; order: 1; padding: 0 5px; }
  .contact-sec .title-area { width: 33.3333%; order: 2; padding: 0 5px; margin-bottom: 0; }

  .contact-sec .caption { margin-bottom: 0; font-size: 18px; line-height: 25.92px; }
  .contact-list { margin-top: 15px; }

  .contact-list .item .inner { display: flex; align-items: center; padding: 11px 64px 10px 30px; height: 80px; }
  .contact-list .item .inner::after { right: 30px; }
  .contact-list .date-wrap { flex: 0 0 auto; width: 63.2px; margin-bottom: 0; text-align: center; }
  .contact-list .mobile-wrap { display: none; }
  .contact-list .num { display: block; font-size: 24px; font-weight: 500; line-height: 35px; color: var(--ink-3); }
  .contact-list .date-wrap .date { display: block; font-size: 15px; font-weight: 600; line-height: 24px; color: var(--ink-3); }

  .contact-list .title { flex: 1 1 auto; margin-left: 27px; }
  .contact-list .title .pc-status { display: block; font-size: 13px; font-weight: 600; line-height: 24px; color: var(--blue); }
  .contact-list .title p { font-size: 18px; line-height: 20.7px; }

  .contact-list .writer { display: block; flex: 0 0 auto; margin-left: 20px; font-size: 18px; font-weight: 600; line-height: 26px; color: var(--ink-3); }

  .contact-sec .title-area .title { font-size: 2.375vw; line-height: 1.48; }
  .contact-sec .title-area .btn-wrap { margin-top: 30px; margin-bottom: 0; }

  /* 오시는 길 */
  .location-sec { padding: 140px 0 200px; }
  .location-sec .area > .title { margin-bottom: 0; font-size: 18px; line-height: 1.6; }
  .location-sec .top-wrap { display: flex; flex-wrap: nowrap; align-items: center; margin-top: 15px; margin-bottom: 0; }
  .location-sec .text { width: auto; margin-bottom: 0; font-size: 20px; line-height: 1.42; }
  .map-list { margin: 0 0 0 auto; }
  .map-list .inner { font-size: 18px; line-height: 1.44; }
  .map-wrap { margin-top: 60px; }
  .mapCanvas { padding-top: 32.14%; }

  /* 푸터 */
  .footer-content-wrap { padding: 100px 0; }
  .footer-top { margin-bottom: 0; }
  .footer-logo-col { width: 50%; }
  .footer-logo img { width: 201px; }
  .family-wrap { width: 50%; margin-top: 0; text-align: right; }
  .family-wrap .title { display: block; font-size: 16px; font-weight: 600; line-height: 18.4px; color: #bbb; }
  .family-list { margin-top: 20px; }
  .family-list .item { min-height: 0; }
  .family-list .item { padding-left: 0; margin-bottom: 10px; }
  .footer-content { margin-top: 16px; }
  .family-list a { font-size: 18px; line-height: 26px; }

  .footer-content { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; }
  .top-content { width: 60.6%; }
  .footer-link-wrap .link-txt { font-size: 16px; line-height: 26.88px; }
  .top-content { display: block; }
  .footer-link-wrap { order: 0; margin-bottom: 0; }
  .info-items { order: 0; margin-top: 30px; margin-bottom: -10px; }
  .info-items .item { display: inline-flex; margin: 0 28.8px 10px 0; font-size: 16px; font-weight: 400; line-height: 19px; }
  .copyright { margin: 0; font-size: 16px; line-height: 18.4px; text-align: right; }
  .info-items .item dd { margin-left: 8px; }

  /* 퀵 버튼 */
  .footer-btns { right: 60px; bottom: 50px; }

  .footer-btns .btn-sns {
    width: 140px;
    height: 42px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .footer-btns .label { display: block; }
  .footer-btns .text { text-align: left; }
  .footer-btns .text::after { left: auto; right: 0; margin-left: 0; }

  /* 팝업 */
  .popup { position: fixed; top: 150px; left: 150px; width: 600px; }
}

/* ============================================================
   1200px 이상
   ============================================================ */

@media screen and (min-width: 1200px) {
  .br-md { display: inline; }
  .br-xl { display: inline; }

  .site-header, .header-inner { height: 100px; }
  .site-header.fixed .header-inner { height: 80px; }
  .logo { width: 213px; }
  .btns-wrap { display: block; }
  .menu-btn-wrap { width: 40px; height: 100%; margin-left: 37.5px; }
  .menu-btn { width: 40px; height: 22px; }
  .menu-btn .line:nth-child(1) { width: 40px; }
  .menu-btn .line:nth-child(2) { top: 10px; width: 27px; }
  .menu-btn .line:nth-child(3) { top: 20px; width: 40px; }
  .site-header.nav-open .menu-btn .line { width: 40px; }
  .site-header.nav-open .menu-btn .line:nth-child(1),
  .site-header.nav-open .menu-btn .line:nth-child(3) { top: 10px; }

  .pc-nav {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .pc-nav .menu-list-wrap { display: flex; }

  .pc-nav .menu-list { position: relative; display: flex; padding: 0 20.6px; }

  .pc-nav .menu-list > a {
    display: flex;
    align-items: center;
    height: 24.5px;
    font-size: 17px;
    font-weight: 500;
    line-height: 24.48px;
    color: #fff;
    white-space: nowrap;
    transition: color .3s;
  }

  .site-header.fixed .pc-nav .menu-list > a { color: var(--ink); }

  .pc-nav .sub-menu-list-wrap {
    position: absolute;
    top: calc(100% + 16.5px);
    left: 50%;
    width: 151px;
    margin-left: -75.5px;
    padding: 15px 0;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
  }

  .pc-nav .menu-list:hover .sub-menu-list-wrap,
  .pc-nav .menu-list:focus-within .sub-menu-list-wrap { opacity: 1; visibility: visible; }

  .pc-nav .sub-menu-list-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 10px 0;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
  }

  /* 전체 메뉴 오버레이 (데스크톱) */
  .open-nav-wrap .inner-wrap {
    justify-content: center;
    padding: 130px 60px 100px;
  }

  .open-nav-wrap .menu-list-wrap {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .open-nav-wrap .menu-list { margin: 0 5.628vw 0 0; }
  .open-nav-wrap .menu-list:last-child { margin-right: 0; }
  .open-nav-wrap .menu-list + .menu-list { margin-top: 0; }

  .open-nav-wrap .menu-list > a {
    display: block;
    height: auto;
    margin-bottom: 3.752vw;
    font-size: 2.375vw;
    line-height: 1.4736;
    white-space: nowrap;
  }

  .open-nav-wrap .menu-list > a.has-sub::after { display: none; }

  .open-nav-wrap .sub-list { display: block; padding: 0; }

  .open-nav-wrap .sub-list li { height: 35px; margin-bottom: 20px; }
  .open-nav-wrap .sub-list li:last-child { margin-bottom: 0; }
  .open-nav-wrap .sub-list.is-compact li:nth-child(n+3) { height: 24.8556px; }

  .open-nav-wrap .sub-list a {
    display: block;
    padding: 0;
    font-size: 1.5009vw;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
  }

  .open-nav-sns { display: none; }

  /* 히어로 */
  .visual-sec .text-wrap { height: 360px; }
  .visual-sec .line { height: 120px; }
  .visual-sec .title { font-size: 85px; }
  .visual-sec .line-2 .desc-wrap { width: 349.6px; }
  .visual-sec .desc { font-size: 20px; line-height: 32px; }

  /* 전문센터 */
  .center-wrap .flex-row { margin: 0 -30px; }
  .center-wrap .item { padding: 0 30px; }

  /* 업무분야 */
  .service-list .item { padding: 14px 40px; font-size: 24px; line-height: 38.4px; }

  /* 오시는 길 */
  .location-sec .text { font-size: 1.75vw; }
}

/* ============================================================
   1600px 이상
   ============================================================ */

@media screen and (min-width: 1600px) {
  .story-sec .inner-left { padding-top: 180px; }
  .story-sec .title { font-size: 55px; }
  .marquee-item { margin-right: 80px; }

  .members-sec .text-area { width: 25%; }
  .members-col { width: 66.6667%; }
  .members-list { gap: 30px; }
  .member-card { flex: 0 0 calc((100% - 36px) / 2.2); }
  .members-sec .title { font-size: 42px; }

  .criminal-wrap .title { font-size: 42px; }
  .center-wrap .title { font-size: 42px; }
  .center-wrap .flex-row { margin: 0 -60px; }
  .center-wrap .item { padding: 0 60px; }

  .service-sec .inner { flex-wrap: nowrap; align-items: center; }
  .service-sec .left-wrap { width: 41.6667%; }
  .service-sec .right-wrap { width: 58.3333%; }
  .service-sec .title { font-size: 42px; }
  .service-list { margin: 0 0 -10px; }
  .service-list .item { margin: 0 16px 31.5px; }

  .contact-sec .flex-row { margin: 0 -12px; }
  .contact-sec .list-col, .contact-sec .title-area { padding: 0 12px; }
  .contact-sec .title-area .title { font-size: 38px; }

  .location-sec .text { font-size: 28px; }
}

/* ============================================================
   모션 최소화
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
  .scroll-icon::after { animation: none; }
  .visual-sec .title,
  .visual-sec .desc-wrap,
  .visual-sec .mobile-desc-wrap { transition: none; transform: none; opacity: 1; }
  .members-list { transition: none; }
}