/* 언어설정 */
@charset 'utf-8';

@font-face {
  font-family: 'SUIT-Regular';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KCCHyerim-Regular';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/KCCHyerim-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* 전체설정 */
* {
  margin: 0;
  padding: 0;
  font-family: 'SUIT-Regular';
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--main-text);
}

img {
  vertical-align: bottom;
}

html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth;

}

.body {
  max-width: 100%;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
  /* 스크롤 막기 */
  touch-action: none;
  /* 터치 시 흔들림 방지 (모바일 UX 향상) */
}

/* 색상설정 */
:root {
  --main-navi: #204B62;
  --main-text: #333;
  --main-white: #fff;
}

/* 상세설정 ---------------------------------------------------------------------------- */

/* 스크롤 효과 */

.snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(3.75rem);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* 메인 콘텐츠 */

.main-visual {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
}

/* 동영상 */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 어두운 오버레이 */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); /* ← 어두움 정도 조절 가능 */
  z-index: 2;
}

/* 텍스트 + 검색박스 */
.main-overlay {
  position: relative;
  z-index: 3;
  text-align: center;
  top: 50%; /* ← 중간보다 위쪽 */
  transform: translateY(-40%);
  padding: 0 1.25rem;
}

.main-overlay .typeTarget {
  font-size: 3.125rem;
  color: var(--main-white);
}


/* 검색창 */
.search-box{
  margin-top: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;

  /* ✅ 검색창 전체 배경 박스에 스타일 주고 싶을 때 */

  padding: 0.625rem;
  border-radius: 2.5rem;
  width: 31.25rem;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.search-box input {
  padding: 0.875rem 1.25rem;
  width: 100%;
  font-size: 1.125rem;
  border: none;
  border-radius: 1.875rem 0 0 1.875rem;
  outline: none;
  background-color: rgba(255, 255, 255, 0.6); /* input 자체도 반투명 */
  color: #333;
}

.search-box button {
  padding: 0.875rem 1.5rem;
  background-color: var(--main-navi);
  border: none;
  border-radius: 0 1.875rem 1.875rem 0;
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
}

.search-box button i {
  font-size: 1.125rem;
}

/* 업무분야 */
.field-section {
  max-width: 81.25rem;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
  scroll-snap-align: start;
  height: 100vh;
}

.field-title {
  font-size: 2.1875rem;
  color: var(--main-navi);
  font-weight: bold;
  display: inline-block;
  padding: 0.3125rem 0;
  margin-bottom: 2.5rem;
}


.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.field-card {
  display: flex;                     /* ✅ 가로 정렬 */
  align-items: center;
  justify-content: flex-start;
  border: 0.0625rem solid #ccc;
  border-radius: 0.625rem;
  padding: 0.3125rem 0.5rem;
  background-color: #fff;
  gap: 0.625rem;                         /* 이미지와 텍스트 간격 */
  transition: 0.2s;
  min-height: 3.75rem;                 /* 카드 높이 균일하게 */
}

.field-card:hover {
  box-shadow: 0 0 0.5rem rgba(0,0,0,0.08);
  transform: translateY(-0.1875rem);
}

.card-img {
  width: 5.0rem;
  height: 7.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;         /* 이미지 영역 줄어들지 않게 */
}

.card-img img {
  width: 100%;
  height: auto;
}

.card-label {
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  margin-left: 1.125rem;
}

/* 하단 영역 */
.field-bottom {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.field-more-card {
  width: 17.1875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: 0.2s;
  text-decoration: none;
  color: #333;
}

.field-more-card:hover {
  box-shadow: 0 0 0.5rem rgba(0,0,0,0.08);
  transform: translateY(-0.1875rem);
  color: var(--main-white);
  background-color: var(--main-navi);
}

.field-more-card .more-icon {
  width: 5.0rem;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.field-more-card .more-text {
  font-size: 1.125rem;
  font-weight: 500;
  margin-left: 1.25rem;
}

.field-more-card i {
  font-size: 0.875rem;
  margin-left: auto;
  color: var(--main-navi);
}

.field-intro {
  flex: 1;
  background-color: var(--main-navi);
  color: white;
  border-radius: 0.9375rem;
  padding: 1.875rem 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field-intro strong {
  font-size: 1.5625rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.625rem;
}

.field-intro p {
  font-size: 1.0rem;
  line-height: 1.5;
}

.intro-icon img {
  width: 6.25rem;
  height: auto;
}


/* 전문가소개 */

.expert-section {
  max-width: 81.25rem;
  margin: 2.5rem auto 0.0rem;
  padding: 0 1.25rem;
  scroll-snap-align: start;
  height: 100vh;
}

.expert-title {
  font-size: 2.1875rem;
  color: #333;
  font-weight: bold;
  display: inline-block;
  padding: 0.3125rem 0;

  margin-bottom: 2.5rem;
}

.expert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-between; /* ✅ 전문가 카드 간격 조정 */
}

.expert-card {
  flex: 1 1 calc(20% - 1.25rem); /* 5개씩 한 줄 */
  max-width: calc(20% - 1.25rem);
  overflow: hidden; /* 이미지 튀어나오는 것 방지 */
}

.expert-card img {
  width: 100%;
  height: 20.0rem;
  object-fit: cover;
  object-position: center top; /* ✅ 인물 얼굴 쪽에 포커스 */
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.expert-card:hover img {
  transform: scale(1.05);           /* ✅ 확대 효과도 함께 */
}

.expert-card a {
  display: block;
  text-decoration: none;
  text-align: right; /* 텍스트 정렬도 유지 */
}
.expert-list li.expert-card:nth-child(1),
.expert-list li.expert-card:nth-child(3),
.expert-list li.expert-card:nth-child(5) {
  margin-top: 5.0rem;
}

.expert-card strong {
  display: block;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 0.9375rem;
  color: var(--main-navi);
}

.expert-card span {
  display: block;
  font-size: 1.0rem;
  color: #555;
  margin-top: 0.3125rem;
}

/* 흐르는 슬라이드 */
.lawyer-slide-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 1.25rem 0;
  margin-top: 3.75rem;
}


.lawyer-slide-track {
  display: flex;
  gap: 1.25rem;
  animation: slideLoop 10s linear infinite; /* ✅ 무한 반복 */
  transition: margin-left 0.5s ease;
}

.lawyer-slide-track img {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(100%);
  transition: filter 0.3s ease;

}

.lawyer-slide-track img:hover {
  filter: grayscale(0%);
}

/* 애니메이션 */
@keyframes slideLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 성공사례 */

.success-section {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden; /* 내부가 잘려보이지 않도록 대응 */
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  opacity: 0.15; /* ✅ 투명도 조절 */
  z-index: -1;
}

.success-section .inner_txt {
  position: relative;
  z-index: 1;
  max-width: 81.25rem;
  margin: 2.5rem auto 2.5rem auto; /* ✅ 중앙 정렬 + 위쪽 여백 통일 */
  margin-left: calc((100% - 83.75rem) / 2 + 1.25rem); /* 왼쪽 여백 포함해서 정확히 정렬 */
  margin-right: auto;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.success-section .inner_txt .success-title {
  font-size: 2.1875rem;
  color: var(--main-navi);
  font-weight: bold;
  display: inline-block;
  padding: 0.3125rem 0;
  text-align: left;         /* ← 추가 */
  width: 100%;              /* ← 전체 너비 차지 */
}

.success-content {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  max-width: 75.0rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}


.success_left img {
  width: auto;
  height: 100%;
  max-height: 34.375rem; /* 세로 길이 조절 가능 */
  display: block;
  border: #C4E5FF 0.625rem solid;
  margin-left: -3.125rem;
}

.success_right {
  display: flex;
  flex-direction: column;
}

.success-button {
  display: flex;
  margin-bottom: 2.5rem;
  justify-content: space-between;
  align-items: center;
}

.success-button .arrow-buttons {}

.success-button .arrow-buttons .arrow {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  margin-right: 0.9375rem;
  color: var(--main-white);
  font-size: 1.5625rem;
  font-weight: bold;
}

.success-button .arrow-buttons .left {
  background-color: #2883C9;
}
.success-button .arrow-buttons .right {
  background-color: #08426E;
}

.more-btn {
  display: inline-block;
  padding: 0.625rem 1.5625rem;
  border: 0.125rem solid var(--main-navi); /* 네이비색 테두리 */
  border-radius: 1.875rem;                /* 둥근 형태 */
  color: var(--main-navi);
  font-weight: bold;
  font-size: 1.0rem;
  background-color: transparent;
  text-decoration: none;
  transition: all 0.3s ease;
}

.more-btn:hover {
  background-color: var(--main-navi);
  color: white;
}


.success-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  width: 75.0rem;
  overflow: hidden;
  position: relative;
  overflow-y: visible; /* ✅ 수정됨 */
  max-height: none;    /* ← 제한 풀어도 좋고, 필요시 유지 */
  margin-left: -9.375rem;
  padding-top: 0.625rem;   /* ✅ 카드가 위로 올라가도 공간 확보 */
  box-sizing: border-box;
}

.success-list {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.4s ease;
  will-change: transform;
}

.success-card {
  background-color: #f7fbff; /* 연한 파랑 배경 */
  border: 0.0625rem solid #c5dbe7;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 1.2;
  transition: transform 0.3s ease;
  position: relative; /* ✅ z-index를 적용하려면 필요 */
  flex: 0 0 calc(100% / 3 - 1.25rem); /* 카드 3개만 보이도록 */
  max-width: calc(100% / 3 - 1.25rem);
}

.success-card:hover {
  transform: translateY(-0.25rem);
  z-index: 2;
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.625rem;
  color: var(--main-navi);
}

.tag {
  display: inline-block;
  background-color: #204B62;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

.card-divider {
  border: none;
  border-top: 0.0625rem solid #ccc;
  margin: 0.9375rem 0;
  width: 100%;
}


.card-summary {
  font-size: 1.0rem;
  color: #333;
  line-height: 1.5625rem;
}

/* 고객후기 ------------------------------------------------------------------------- */
.review-section {
  padding: 6.25rem 0 0 0;
  scroll-snap-align: start;
  height: 100vh;
}

.review-header {
  max-width: 81.25rem;
  margin: 0 auto 2.5rem auto;
  padding: 0 1.25rem;
}

.review-title-box {
  margin-bottom: 0.9375rem;
}

.review-title {
  font-size: 2.1875rem;
  color: #333;
  font-weight: bold;
  display: inline-block;
}

.review-btn-box {
  margin-top: 2.625rem;
}

.review-more-btn {
  display: inline-block;
  padding: 0.625rem 1.5625rem;
  border: 0.125rem solid var(--main-navi);
  border-radius: 1.875rem;
  color: var(--main-navi);
  font-weight: bold;
  font-size: 1.0rem;
  background-color: transparent;
  transition: all 0.3s ease;
  text-decoration: none;
}

.review-more-btn:hover {
  background-color: var(--main-navi);
  color: white;
}

/* 후기 카드 리스트 배경 */

.review_bg {
  background-color: #e9f3fa;
  padding: 2.5rem 0;
}

.review-list-wrap {
  max-width: 91.25rem;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 1.875rem;
}

.review-slider {}


.review-list {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
  will-change: transform;
}

.review-card {
  width: 21.75rem;
  flex: 0 0 auto; /* 고정 너비 */
  margin-right: 1.25rem;
  border-radius: 1.25rem;
  padding: 1.25rem;
  background-color: #fff;
  border: 0.0625rem solid #ccc;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-top {
  margin-bottom: 0.9375rem;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.review-user img {
  width: 1.875rem;
  height: 1.875rem;
  object-fit: cover;
  border-radius: 50%;
}

.review-category {
  font-size: 1.25rem;
  margin-bottom: 0.625rem;
  color: #333;
}

.review-box img {
  width: 100%;
  height: 15rem;
}

.review-hashtag {
  font-size: 1.0rem;
  color: #204B62;
  margin: 0.3125rem 0;
}

.review-hashtag i {
  color: red;
  margin-right: 0.3125rem;
}

.review-lawyer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 0.625rem;
  margin-left: 3.5rem;
}

.lawyer-img {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: contain;
  border: 0.125rem solid #ddd;
}
.lawyer-info-text {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  color: #333;
}

.lawyer-info-text strong {
  font-weight: bold;
  font-size: 1.0rem;
}

.lawyer-specialty {
  color: #0b3c5d;
  font-weight: 500;
}


/* 언론보도 */

.media-section {
  height: 100vh;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  align-items: center;  /* 콘텐츠 수직 중앙 정렬 */
  scroll-snap-align: start;
}


.media-right-bg {
  position: absolute;
  top: 0;
  right: -0.625rem;
  width: 60vw;
  height: 100%;
  z-index: 0;
}


.media-inner {
  max-width: 81.25rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  width: 100%;
  gap: 2.5rem;
  align-items: flex-start;
}

.media-left {
  width: 40%;
}

.media-title-box {
  margin-top: 2.5rem;
  position: relative; /* ← 이게 반드시 필요합니다 */
  z-index: 99;
}

.media-title {
  font-size: 2.1875rem;
  font-weight: bold;
  color: var(--main-navi);
  display: inline-block;
  margin-bottom: 0.9375rem; /* ✅ 아래 버튼과의 간격 */
}

.media-more {
  display: block;           /* 줄바꿈 유도 */
  width: fit-content;       /* ❗ 내용만큼만 가로 너비 */
  margin-top: 0.75rem;
  padding: 0.625rem 1.5625rem;
  border: 0.125rem solid var(--main-navi);
  border-radius: 1.875rem;
  color: var(--main-navi);
  font-weight: bold;
  font-size: 1.0rem;
  background-color: transparent;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.media-more:hover {
  background-color: var(--main-navi);
  color: white;
}

.notice-box {
  width: 100%;
  max-width: 28.125rem;
  padding: 1.25rem;
  background-color: #d8f0ff;
  border-left: 0.3125rem solid var(--main-navi);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05);
}

.notice-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--main-navi);
  margin-bottom: 0.625rem;
  display: block;
}

.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li {
  margin-bottom: 0.625rem;
}

.notice-list li a {
  font-size: 1.0rem;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}

.notice-list li a:hover {
  color: var(--main-navi);
  text-decoration: underline;
}


.media-slide-double {
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  margin-left: 8.125rem;
}

.slide-column {
  width: 21.25rem;
  height: 63.75rem;
  overflow: hidden;
  position: relative;
}

.media-slide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.6s ease;
}

.media-card {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
  margin-bottom: 1.25rem;
  width: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}

.media-card img {
  width: 120%;
  height: 8.75rem;
  object-fit: contain;
  border-radius: 0.375rem 0.375rem 0 0;
}

.media-content {
  padding: 0.75rem 0.9375rem;
}

.media-headline {
  color: #1b4d64;
  font-size: 0.9375rem;
  font-weight: bold;
  margin-bottom: 0.3125rem;
}

.media-date {
  font-size: 0.75rem;
  color: #777;
}

.up-slide {
  margin-right: 1.25rem;
}


/* 공통 슬라이드 설정 */
.slide-column {
  width: 15.625rem;
  height: 63.75rem;
  overflow: hidden;
  position: relative;

}

.media-slide-list {
  display: flex;
  flex-direction: column;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 위로 흐르기 */
.up-slide .media-slide-list {
  animation-name: scroll-up;
  animation-duration: 10s;       /* 속도 조절 포인트! */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 아래로 흐르기 */
.down-slide .media-slide-list {
  animation-name: scroll-down;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 애니메이션 키프레임 */
@keyframes scroll-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scroll-down {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}


/* 오시는길 --------------------------------------------------------------- */

.map-section {
  padding: 6.25rem 0;
  background-color: #f9f9f9;
  height: 100vh;
  scroll-snap-align: start;
  align-items: center;
}

.map-inner {
  max-width: 81.25rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.map-title {
  font-size: 2.1875rem;
  font-weight: bold;
  color: #204B62;
  margin-bottom: 2.5rem;
  box-shadow: inset 0 -1.25rem 0 rgba(225, 238, 244, 1);
  display: inline-block;
}

.map-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
}

.map-image {
  flex: 1;
  position: relative;
}

.map-image img {
  width: 90%;
  height: auto;
}

.map-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.map-card {
  display: flex;
  gap: 0.9375rem;
  padding: 1.25rem 1.5625rem;
  border: 0.125rem solid #204B62;
  border-radius: 0.9375rem;
  background-color: #fff;
  cursor: pointer;
}

.map-card.active {
  border: 0.125rem solid #007bff;
  background-color: #f0f8ff; /* 강조용 배경 */
}

.map-icon {
  font-size: 1.5rem;
  color: #204B62;
}

.map-info {}

.map-info strong {
  font-size: 1.25rem;
  color: #204B62;
  display: block;
  margin-bottom: 0.375rem;
}

.map-info p {
  margin-bottom: 0.25rem;
  color: #333;
  font-size: 1.0625rem;
}

.map-info p span {
  color: #C70000;
}





/*메인 페이지 검색 css */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-suggestions li {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.search-suggestions li:hover {
  background-color: #eee;
}


/* 미디어 쿼리 구간------------------------------------------------------------------------------------- */


/* PC 전용 */
@media screen and (min-width: 90.0rem) {

  .field-card{
    height: 6.75rem;
  }

}

/* 노트북 전용 */
@media screen and (min-width: 64.0625rem) and (max-width: 89.9375rem) {

  /*업무 분야 영역 */
  .field-grid {
    height: 28.125rem;
  }

  /*전문가 소개 영역 */
  .expert-card img {}









  /* 대세소개 */
  .media-title {
    font-size: 1.875rem;
  }

  .media-more {
    font-size: 0.9375rem;
    padding: 0.5rem 1.25rem;
  }

  .notice-box {
    margin-left: 0.0rem;
    max-width: 26.25rem;
    padding: 1.125rem;
  }

  .slide-column {
    width: 17.5rem;
    height: 56.25rem;
  }

  .media-card img {
    height: 8.125rem;
  }


  /* 오시는길 */
  .map-title {
    font-size: 1.875rem;
  }

  .map-info strong {
    font-size: 1.125rem;
  }

  .map-info p {
    font-size: 0.9375rem;
  }

  .map-btn {
    font-size: 0.8125rem;
    margin-left: 1.25rem;
  }

  /* 마커 전용 */

  .map-marker[data-location="seoul"] {
    top: 9.6875rem;
    left: 8.75rem;
  }

  .map-marker[data-location="daejeon"] {
    top: 20.9375rem;
    left: 11.875rem;
  }

  .map-marker[data-location="incheon"] {
    top: 10.3125rem;
    left: 6.5625rem;
  }
}

/* 태블릿 전용 */
@media screen and (min-width: 48.0rem) and (max-width: 64.0rem) {

  /*업무 분야 영역 */
  .field-section {
    height: 67vh;
  }

  .field-grid {
    height: 40vh;
  }

  .card-label {
    font-size: 0.75rem;
    font-weight: bold;
  }

  .card-img {
    width: 4.0625rem;
  }

  .field-more-card {
    height: 15vh;
  }

  .field-more-card .more-icon {
    width: 4.375rem;

  }

  .field-more-card .more-text {
    font-weight: bold;
  }

  .field-intro {
    height: 10vh;
  }

  .field-intro p {
    font-size: 0.875rem;
  }











  /* 대세소개 */

  .media-left-bg {
    margin-left: 0.625rem;
  }

  .media-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.875rem;
  }

  .media-left {
    width: 40%;
  }

  .media-title {
    font-size: 1.75rem;
  }

  .media-more {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
  }

  .notice-box {
    margin-left: 0.0rem;
    padding: 0.875rem;
    max-width: 21.875rem;
  }

  .notice-list li a {
    font-size: 0.9375rem;
  }

  .media-slide-double {
    flex-direction: row;
    margin-left: 0.0rem;
    gap: 1.25rem;
  }

  .slide-column {
    width: 15.625rem;
    height: 50.0rem;
  }


  .media-card img {
    height: 7.5rem;
  }

  .media-headline {
    font-size: 0.8125rem;
  }

  .media-date {
    font-size: 0.6875rem;
  }



  /* 오시는길 */
  .map-title {
    font-size: 1.875rem;
  }

  .map-content {
    flex-direction: row;
    /* 노트북과 동일하게 유지 */
    gap: 1.875rem;
  }

  .map-image {
    flex: 1;
  }

  .map-image img {
    width: 80%;
    /* 지도 축소 */
  }

  .map-cards {
    flex: 1;
  }

  .map-card {
    padding: 1.125rem 1.25rem;
    gap: 0.75rem;
  }

  .map-info strong {
    font-size: 1.125rem;
  }

  .map-info p {
    font-size: 0.9375rem;
  }

  .map-btn {
    font-size: 0.8125rem;
    margin-left: 1.25rem;
  }

  .map-info.with-button {
    gap: 0.9375rem;
  }

  /* 마커 전용 */

  .map-marker[data-location="seoul"] {
    top: 6.25rem;
    left: 5.625rem;
  }

  .map-marker[data-location="daejeon"] {
    top: 13.75rem;
    left: 7.8125rem;
  }

  .map-marker[data-location="incheon"] {
    top: 6.5625rem;
    left: 4.0625rem;
  }
}

/* 모바일 전용 */
@media screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {

  /*업무 분야 영역 */
  .field-grid {
    height: 40vh;
    gap: 0.625rem;
    display: grid;
    margin-bottom: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .field-bottom {
    gap: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 21.7375rem;
    flex-direction: column;
  }

  .card-label {
    font-size: 0.8125rem;
    font-weight: bold;
    color: #333;
  }

  .card-img {
    width: 4.0625rem;
  }

  .field-more-card {
    height: 23vh;
    width: auto;
  }

  .field-more-card .more-icon {
    width: 6.0rem;
    height: 4.8rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .field-more-card .more-text {
    font-weight: bold;
  }

  .field-intro {
    height: 10vh;
  }

  .field-intro p {
    font-size: 0.9375rem;
  }

  .expert-card strong {
    font-size: 0.73rem;
  }

  .expert-card span {
    font-size:0.82rem;
  }

  /* 전문가 소개 */
  .expert-section {
    opacity: 1;
    margin-top: 25.625rem;
    transform: translateY(0);
  }


  /* 대세소개 */

  .media-right-bg {
    width: 50%;
  }


  .media-left-bg {
    width: 50%;
  }

  .media-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.875rem;
  }

  .media-left {
    width: 50%;
  }

  .media-title {
    font-size: 1.75rem;
  }

  .media-more {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
  }

  .notice-box {
    margin-left: 0.0rem;
    padding: 0.875rem;
    max-width: 18.75rem;
  }

  .notice-list li a {
    font-size: 0.8125rem;
  }

  .media-slide-double {
    flex-direction: row;
    margin-left: 1.25rem;
    gap: 1.25rem;
  }

  .slide-column {
    width: 15.625rem;
    height: 50.0rem;
  }

  .down-slide {
    display: none;
    /* 슬라이드 1개만 */
  }

  .media-card img {
    height: 7.5rem;
  }

  .media-headline {
    font-size: 0.8125rem;
  }

  .media-date {
    font-size: 0.6875rem;
  }

  /* 오시는길 */

  .map-section {
    padding: 3.75rem 0;
    height: auto;
  }

  .map-title {
    font-size: 1.625rem;
    margin-bottom: 1.875rem;
    box-shadow: inset 0 -0.625rem 0 rgba(225, 238, 244, 1);
  }

  .map-content {
    flex-direction: column;
    gap: 1.25rem;
  }

  .map-image {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .map-img-wrapper {
    width: 100%;
    max-width: 21.875rem;
    position: relative;
  }

  .map-img-wrapper img {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-left: 1.25rem;
  }


  .map-cards {
    width: 100%;
    gap: 0.9375rem;
  }

  .map-card {
    padding: 0.9375rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .map-info strong {
    font-size: 1.125rem;
  }

  .map-info p {
    font-size: 0.875rem;
  }

  /* 오시는길 - 인천 버튼 아래로 정렬 */
  .map-info.with-button {
    display: flex;
    flex-direction: column;
    /* ✅ 세로 정렬로 변경 */
    align-items: flex-start;
    gap: 0.625rem;
  }

  .map-btn {
    margin-left: 0;
    /* ✅ 기존 왼쪽 여백 제거 */
    margin-top: 0.625rem;
    /* ✅ 위쪽 여백 추가 */
  }

  /* 마커 전용 */

  .map-marker[data-location="seoul"] {
    top: 20%;
    left: 29%;
  }

  .map-marker[data-location="daejeon"] {
    top: 44%;
    left: 38%;
  }

  .map-marker[data-location="incheon"] {
    top: 20%;
    left: 23%;
  }


}

@media screen and (max-width: 30.0rem) and (orientation: portrait) {

  .main-overlay .typeTarget{
    font-size: 2.125rem;
  }

  /*업무 분야 영역 */

  .field-section{
    margin: 5.0rem auto;
  }

  .field-grid {
    height: 40vh;
    gap: 0.625rem;
    display: grid;
    margin-bottom: 1.25rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .field-bottom {
    gap: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 21.9375rem;
  }

  .card-label {
    font-size: 0.5625rem;
    font-weight: bold;
    color: #333;
  }

  .card-img {
    width: 4.0625rem;
  }

  .field-more-card {
    height: 15vh;
    width: 26.875rem;
    margin-top: 0.625rem;
  }

  .field-more-card .more-text {
    font-weight: bold;
  }

  .field-more-card .more-icon {
    width: 4.375rem;
    height: 4.6rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .field-intro {
    height: 10vh;
  }

  .field-intro p {
    font-size: 0.6874rem;
  }

  .field-intro strong {
    font-size: 1.25rem;
    padding-top: 1.25rem;
  }

  .expert-card strong {
    font-size: 0.5825rem;
  }
  .expert-card span {
    font-size: 0.6825rem;
  }


  /* 전문가 소개 */
  .expert-section {
    opacity: 1;
    margin-top: 21.75rem;
    transform: translateY(0);
  }

  .your-section {
    height: calc(var(--vh) - 3.5rem);
    /* 필요시 상단바/하단바 고려 */
  }
}