@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css");

/* Paperlogy 폰트 정의 */
@font-face {
  font-family: "Paperlogy";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.woff") format("woff");
}

/* 기본 스타일 */
html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  overflow-x: hidden;
  height: 100vh;
}

/* CSS Scroll Snap 컨테이너 */
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scroll-section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  /* [수정] 수직 정렬을 중앙(center) 대신 '위쪽(start)'으로 변경합니다. */
  align-items: start; 
  /* [수정] 수평 정렬은 중앙(center)으로 유지합니다. */
  justify-items: center;
  background-color: #fff;
  position: relative;
}

* {
  font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
  color: #303030;
}

p {
  margin: 0;
}

p, ul, div {
  caret-color: transparent;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea {
  caret-color: auto;
}

/* 헤더 스타일 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header .header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3.1rem 6rem 3.6rem;
}

.header .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 3.1rem;
  align-items: center;
}

.header .top .logo {
  font-size: 0;
}

.header .top .logo img {
  width: 10rem;
  height: auto;
}

.header .top a {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.6rem;
  color: #121a1b;
}

button.mobile-menu-btn {
  display: none;
}

button.mobile-close-btn {
  display: none;
}

a.sitemap-btn.mobile {
  display: none;
}

.header .nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header .nav ul {
  display: flex;
  list-style: none;
  width: 50%;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

.header .nav ul li a {
  text-decoration: none;
  color: #1c1c1c;
  transition: color 0.3s ease;
}

.header .nav ul li a:hover {
  color: #0067ce;
}

.header .nav a.nav-big {
  font-size: 3rem;
  font-weight: 900;
  text-decoration: none;
  color: #0067ce;
}

..header .search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header .search-box input {
  border: none;
  border-bottom: 2px solid #121a1b;
  text-align: center;
  width: 23.6rem;
  height: 2.6rem;
  font-size: 1.4rem;
  color: #2d2d2d;
  padding: 0.6rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  transition: border-color 0.3s ease;
}

.header .search-box input:focus {
  outline: none;
  border-color: #0067ce;
}

.header .search-box input::placeholder {
  color: #929292;
}

.header .search-box button {
  border: none;
  background-color: transparent;
  padding: 0;
}

.header .search-box button img {
  width: 2.5rem;
  height: auto;
}

/* 콘텐츠 래퍼 - 네이버 스타일 중앙 정렬 */
.content-wrapper {
  max-width: 1400px;
  margin: 20vh auto; 
  padding: 0 6rem;
  width: 100%;
}

.scroll-container > .scroll-section {
  display: flex; /* grid 대신 flex 사용 */
  flex-direction: column;
  justify-content: center; /* 컨텐츠를 아래로 */
}

/* 2. [추가] 첫 번째 scroll-section 내부의 content-wrapper에만 상단 마진 적용 */
.scroll-container > .scroll-section > .content-wrapper {
  margin-top: 15vh;
  margin-bottom: 0;
}

/* 섹션 내부 콘텐츠 */
.scroll-section > .content-wrapper {
  width: 100%;
}

/* Section 1: 메인 슬라이더 (Grid로 재구성) */
.s1 {
  width: 100%;
  display: grid; /* [수정] Flexbox 대신 Grid 사용 */
  grid-template-columns: minmax(0, 1fr) 400px; /* [수정] 왼쪽(가변)과 오른쪽(400px 고정) 2열 구성 */
  gap: 3.7rem;
  align-items: stretch; /* [유지] Grid에서도 두 열의 높이를 꽉 채우도록 설정 */
}

.s1 .left {
  min-width: 0; /* 내용이 넘칠 경우를 대비한 설정 */
  display: flex; /* 내부 wrapper가 높이를 100% 차지하도록 설정 */
}

.s1 .left .slider-wrapper {
  border-radius: 3.3rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  aspect-ratio: 16 / 9;
  background-color: #000;
  width: 100%;
  height: 100%; /* [추가] Grid 셀을 완전히 채우도록 설정 */
}

.s1 .left .slider-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* [추가] iframe이 wrapper를 가득 채우도록 스타일 추가 */
.s1 .left .slider-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.dot-area {
  width: 25px;
  height: 21px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.s1 .left .slider-wrapper button.dot {
  background-color: rgba(0, 0, 0, 0.45);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
}

.s1 .left .slider-wrapper button.dot.active,
.s1 .left .slider-wrapper .dot-area:hover button.dot {
  background-color: #0087e2;
  width: 21px;
  height: 21px;
  border: 2px solid #fff;
}

.slide-arrow-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 1rem;
  pointer-events: none;
}

.slide-arrow-box button {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 0.8rem;
  pointer-events: all;
  transition: all 0.3s ease;
}

.slide-arrow-box button:hover {
  background-color: #fff;
  transform: scale(1.1);
}

.slide-arrow-box button img {
  width: 3rem;
  height: 3rem;
  display: block;
}

.slide-dot-box {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  justify-content: center;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.slide-control {
  background-color: transparent;
  padding: 0;
}

.slide-control .pause {
  width: 16px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.s1 .right {
  background-color: #ffffff;
  /* width, max-width는 grid-template-columns에서 제어하므로 불필요 */
  padding: 1.5rem;
  border-radius: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex; /* [유지] 내부 콘텐츠를 수직으로 정렬하기 위해 flex 사용 */
  flex-direction: column;
}

.s1 .right img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.s1 .right p.t1 {
  color: #0067ce;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.s1 .right p.t2 {
  color: #0f426d;
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

/* 페이저 스타일 */
.pager-wrapper {
  margin-top: 1rem;
}

.pager-wrapper .pager-img,
.xxx1,
.xxx2 {
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.pager-wrapper .pager-img img,
.xxx1 img,
.xxx2 img {
  width: 100%;
  height: auto;
  max-height: 12vh;
  object-fit: cover;
}

.pager-wrapper .pager-img:hover,
.xxx1:hover,
.xxx2:hover {
  transform: scale(1.02);
}

.pager-nav {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  justify-content: space-between;
}

.pager-nav img {
  width: 8rem;
  height: auto;
}

.pager-nav .pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pager-nav .pager button {
  background-color: transparent;
  border: none;
  padding: 0;
  transition: opacity 0.3s ease;
}

.pager-nav .pager button:hover {
  opacity: 0.7;
}

.pager-nav .pager button img {
  width: 1.5rem;
  height: auto;
}

.pager-nav .pager .pager-num {
  color: #828282;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

div.hr1 {
  background-color: #e5e5e5;
  height: 1px;
  width: 100%;
  margin: 1rem 0;
}

div.hr2 {
  background-color: #e5e5e5;
  height: 1px;
  width: 100%;
  margin: 1.5rem 0;
}

/* Section 1 Sub: 유튜브 콘텐츠 */
.s1_sub {
  width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1_sub .youtube-content {
  display: flex;
  gap: 2rem;
  background-color: #f8f9fa;
  border-radius: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-height: 70vh;
  overflow: visible;
  /* [수정] flex-start -> stretch로 변경하여 컬럼들의 높이를 동일하게 만듭니다. */
  align-items: stretch;
}

.s1_sub .youtube-content .pager-img img {
  max-height: 25vh;
  object-fit: contain;
}

.s1_sub .youtube-content .xxx1 img {
  /* [수정] 높이 제약을 15vh에서 35vh로 늘려 다른 콘텐츠와 균형 맞춤 */
  max-height: 35vh;
  object-fit: cover;
}

.s1_sub .youtube-content .youtube-long {
  flex: 1.5 1 0%; /* 2:1:1 비율 중 2를 차지 */
}

.s1_sub .youtube-content .youtube-short {
  flex: 1 1 0%; /* 2:1:1 비율 중 1을 차지 */
}

/* [추가] xxx1 클래스가 .youtube-content 내부에 있을 때의 스타일 정의 */
.s1_sub .youtube-content .xxx1 {
	flex: 1 1 0%; /* 2:1:1 비율 중 1을 차지 */
}

/* [추가] xxx1 컬럼의 pager-wrapper 스타일이 없으므로 추가 */
.s1_sub .youtube-content .xxx1 .pager-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1.5rem;
}

.s1_sub .youtube-content .xxx1:hover {
	transform: scale(1.02);
}

/* Section 2: 업무 알아보기 */
.s2 {
  position: relative;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.title {
  background-color: #0067ce;
  padding: 1rem 2.5rem 1rem 1.2rem;
  height: auto;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  border-radius: 0 25px 25px 0;
  width: fit-content;
  margin-bottom: 2rem;
}

div.title .yellow-text {
  color: #ffff97;
}

.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}

.s2 .bgimg-1 {
  width: 12rem;
  top: 12rem;
  left: 6rem;
}

.s2 .bgimg-2 {
  width: 35rem;
  top: 12rem;
  right: 6rem;
}

.s2 .bgimg-3 {
  width: 100%;
  bottom: 0;
  left: 0;
}

.bgimg-1 img,
.bgimg-2 img,
.bgimg-3 img {
  width: 100%;
  height: auto;
  display: block;
}

.process-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.process-list .process-item {
  flex: 0 0 calc(33.333% - 1.5rem);
  max-width: 320px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-list .process-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.process-list .process-item img {
  width: 100%;
  height: auto;
  max-height: 20vh;
  object-fit: cover;
  display: block;
}

/* Section 3: 소식 및 자료실 */
.s3 {
  display: flex;
  gap: 3rem;
  width: 100%;
  max-height: 100%;
  overflow: visible;
  align-items: stretch; /* 좌우 높이를 동일하게 */
}

.s3 .left {
  flex: 1;
  overflow: visible;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.s3 .left .bgimg-1 {
  width: 12rem;
  margin-bottom: 1rem;
  flex-shrink: 0; /* 이미지가 줄어들지 않도록 */
}

.s3 .left .title-box {
  flex-shrink: 0; /* 제목이 줄어들지 않도록 */
}

.s3 .left .news-tab {
  flex-shrink: 0; /* 탭이 줄어들지 않도록 */
}

.s3 .right {
  flex: 0 0 32%;
  max-width: 400px;
  padding-left: 2.5rem;
  border-left: 2px solid #e5e5e5;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.s3 .bgimg-1 {
  width: 12rem;
  margin-bottom: 1rem;
}

.s3 .bgimg-2 {
  width: 12rem;
  margin-bottom: 1rem;
}

.title-box {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.title-box.space-between {
  justify-content: space-between;
}

.plus-btn {
  transition: transform 0.3s ease;
}

.plus-btn:hover {
  transform: rotate(90deg);
}

.plus-btn img {
  width: 3.5rem;
  height: auto;
}

.news-tab {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.news-tab button {
  font-size: 1.3rem;
  font-weight: 900;
  border: none;
  background-color: #e8eef0;
  color: #03447a;
  border-radius: 0.8rem;
  padding: 0.6rem 1.4rem;
  transition: all 0.3s ease;
}

.news-tab button:hover {
  background-color: #d0dce0;
}

.news-tab button.active {
  background-color: #0f426d;
  color: #fff;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  flex-grow: 1; /* 남은 공간을 모두 차지 */
  overflow-y: auto; /* 내용이 많으면 스크롤 */
  max-height: none; /* max-height 제거 */
}

.news-list .news-item {
  position: relative;
  padding: 1.2rem 1rem;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.news-list .news-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
}

.news-list .news-item .bg-news {
  display: none;
}

.news-list .news-item .more-btn {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transition: transform 0.3s ease;
}

.news-list .news-item .more-btn:hover {
  transform: scale(1.1);
}

.news-list .news-item .more-btn img {
  width: 100%;
}

.news-list .news-item h1 {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.4rem 0;
}

.news-list .news-item h2 {
  color: #303030;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.8rem 0;
  line-height: 1.3;
}

.news-list .news-item .news-item-content .img-wrapper {
  width: 100%;
  border-radius: 0.8rem;
  overflow: hidden;
  max-height: 8vh;
}

.news-list .news-item .news-item-content .img-wrapper img {
  width: 100%;
  height: auto;
  max-height: 8vh;
  object-fit: cover;
}

.text-wrapper {
  color: #555;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 0.5rem;
  max-height: 7vh;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.library {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.library .pager-wrapper .pager-img {
  background: #f8f9fa;
  padding: 0.8rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.2rem;
  max-height: 28vh;
  overflow: hidden;
}

.library .pager-wrapper .pager-img img {
  width: 100%;
  height: auto;
  max-height: 25vh;
  object-fit: contain;
}

.library .pager-wrapper .pager-img a {
  display: block;
  border-radius: 0.8rem;
  overflow: hidden;
}

.xxx2 {
  border: 1px solid #e5e5e5;
  border-radius: 1.2rem;
  overflow: hidden;
  max-height: 16vh;
}

.xxx2 img {
  width: 100%;
  height: auto;
  max-height: 16vh;
  object-fit: cover;
}

/* 사이트맵 */
.sitemap {
  background-color: #fff;
  padding: 6rem 0;
  min-height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  overflow-y: auto;
}

.sitemap.active {
  display: block;
}

.sitemap-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6rem;
}

.sitemap-close-btn {
  position: fixed;
  top: 3rem;
  right: 4rem;
  width: 4rem;
  height: 4rem;
  background: #0067ce;
  color: #fff;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 3001;
  transition: all 0.3s ease;
}

.sitemap-close-btn:hover {
  background: #004a94;
  transform: rotate(90deg);
}

.sitemap h1 {
  font-size: 4rem;
  font-weight: 900;
  margin: 2rem 0;
}

.sitemap h1.blue {
  color: #0067ce;
}

.hr3 {
  height: 1px;
  background-color: #e5e5e5;
  margin: 3rem 0;
}

.sitemap-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding-left: 4rem;
}

.sitemap-list .sitemap-item {
  min-height: 50px;
}

.sitemap-list li {
  list-style: none;
}

.sitemap-list a {
  font-size: 2rem;
  text-decoration: none;
  font-weight: 700;
  color: #03447a;
  transition: color 0.3s ease;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.sitemap-list a:hover {
  color: #0087e2;
}

.sitemap-list ul {
  padding-left: 2rem;
  margin-top: 1rem;
}

.sitemap-list ul a {
  color: #4c4c4c;
  font-size: 1.8rem;
}

.sitemap-list ul ul {
  padding-left: 3rem;
  margin-top: 0.8rem;
}

.sitemap-list ul ul a {
  color: #707070;
  font-size: 1.6rem;
}

.sitemap-list a img {
  width: 2rem;
  margin-left: 1rem;
  vertical-align: middle;
}

/* 오버레이 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 페이지 네비게이션 (fullPage.js 대체) */
.page-navigation {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nav-dot {
  width: 12px;
  height: 12px;
  display: block;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.nav-dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 103, 206, 0.4);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.nav-dot:hover span,
.nav-dot.active span {
  background-color: #0067ce;
  border-color: #0067ce;
  width: 12px;
  height: 12px;
}

.nav-dot.active span {
  border-color: #fff;
}

/* 스크롤바 스타일 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #0067ce;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #004a94;
}

/* 오른쪽 콘텐츠 내부 높이 채우기 (기존 유지 및 강화) */
.s1 .right .pager-wrapper {
  margin-top: 1rem;
  flex-grow: 1; /* 제목을 제외한 모든 수직 공간 차지 */
  display: flex;
  flex-direction: column;
}

.s1 .right .pager-wrapper .pager-img {
  flex-grow: 1; /* 네비게이션을 제외한 모든 수직 공간 차지 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1 .right .pager-wrapper .pager-img img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 3개 컬럼의 공통 카드 스타일 추가 */
.s1_sub .youtube-content > .youtube-long,
.s1_sub .youtube-content > .youtube-short,
.s1_sub .youtube-content > .xxx1 {
  background-color: #fff; /* 각 컬럼에 흰색 배경 추가 */
  padding: 1.5rem; /* 내부 여백 추가 */
  border-radius: 1.2rem; /* 모서리를 둥글게 */
  border: 1px solid #e9ecef; /* 옅은 테두리 추가로 구분감 부여 */
  
  /* 컬럼 내부 요소를 세로로 정렬하기 위해 flex 설정 */
  display: flex;
  flex-direction: column;
}

/* 컬럼 내부의 pager-wrapper가 부모 높이를 꽉 채우도록 설정 */
.s1_sub .youtube-content .pager-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 부모(컬럼)의 높이를 꽉 채우도록 설정 */
  gap: 1.5rem; /* 제목(pager-nav)과 이미지(pager-img) 사이 간격 추가 */
}

/* 컬럼 내부의 이미지 영역이 남는 공간을 모두 차지하도록 설정 */
.s1_sub .youtube-content .pager-wrapper .pager-img {
  flex-grow: 1; /* pager-wrapper 내에서 남는 공간을 차지 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* xxx1 컬럼의 이미지도 높이를 꽉 채우도록 설정 */
.s1_sub .youtube-content > .xxx1,
.s1_sub .youtube-content > .xxx1 a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

/* 이미지들이 부모 영역을 넘지 않도록 재조정 */
.s1_sub .youtube-content .pager-img img,
.s1_sub .youtube-content .xxx1 img {
    max-height: 100%; /* 부모 높이에 맞춤 */
    object-fit: contain; /* 이미지 비율 유지 */
}

/* =============================================== */
/* [추가] 인스타그램 로고 및 페이저 크기 확대 (가로 배치 유지) */
/* =============================================== */

/* 1. 인스타그램 로고(#insta-logo-link img) 크기를 확대합니다. */
/* (기존 .pager-nav img의 8rem을 덮어씁니다) */
#insta-logo-link img {
  width: 15rem; /* 기존 8rem에서 11rem으로 크기 증가 */
  height: auto;
}

/* 2. 페이저(.pager) 내부 요소들의 간격을 조정합니다. */
.s1 .right .pager-nav .pager {
  gap: 0.8rem; /* 기존 0.5rem에서 0.8rem으로 간격 증가 */
}

/* 3. 페이저 화살표 버튼(#insta-prev-btn, #insta-next-btn) 이미지 크기 확대 */
#insta-prev-btn img,
#insta-next-btn img {
  width: 2rem; /* 기존 1.5rem에서 2rem으로 크기 증가 */
  height: auto;
}

/* 4. 페이저 번호(#insta-pager-num) 폰트 크기 확대 */
#insta-pager-num {
  font-size: 1.6rem; /* 기존 1rem에서 1.6rem으로 폰트 크기 증가 */
  font-weight: 700;
  color: #555;
  padding: 0 0.3rem; /* 좌우 여백 살짝 추가 */
}

/* 5. 로고와 페이저 영역의 하단 간격을 살짝 늘려 이미지와 분리합니다. */
.s1 .right .pager-nav {
  margin-bottom: 1.2rem; /* 기존 0.8rem에서 1.2rem으로 증가 */
}
/* [추가] S1 (인스타그램) .pager-wrapper의 상단 마진 제거 */
.s1 .right .pager-wrapper {
  margin-top: 0; /* 기존 1rem을 0으로 덮어씁니다. */
}

/* =============================================== */
/* [추가] S3 (자료실) 레이아웃 및 스타일 수정        */
/* =============================================== */

/* 1. 자료실의 .pager-nav를 인스타그램(.s1)과 동일하게 flex로 설정 */
.s3 .right .library .pager-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem; /* 하단 이미지와의 간격 */
}

/* 2. .pager-nav 안으로 이동한 .title-box의 불필요한 하단 여백 제거 */
.s3 .right .library .pager-nav .title-box {
  margin-bottom: 0;
}

/* 3. .title-box 안의 .title의 불필요한 하단 여백도 제거 */
.s3 .right .library .pager-nav .title-box .title {
  margin-bottom: 0;
}

/* 4. title-box의 .space-between 클래스로 인한 정렬 문제를 바로잡습니다. */
/* (원래 .title-box는 '제목'과 '더보기 버튼'을 양끝 정렬하기 위함이었으나, 
   여기서는 '제목'만 있으므로 flex-start로 정렬합니다.) */
.s3 .right .library .pager-nav .title-box.space-between {
  justify-content: flex-start;
}

/* 1. 페이저(.pager) 내부 요소들의 간격을 인스타그램과 동일하게 조정 */
.s3 .right .library .pager-nav .pager {
  gap: 0.8rem; /* 0.8rem으로 간격 증가 */
}

/* 2. 페이저 화살표 버튼 이미지 크기 확대 */
.s3 .right .library .pager-nav .pager button img {
  width: 2rem; /* 1.5rem에서 2rem으로 크기 증가 */
  height: auto;
}

/* 3. 페이저 번호 폰트 크기 확대 */
.s3 .right .library .pager-nav .pager .pager-num {
  font-size: 1.6rem;   /* 1rem에서 1.6rem으로 폰트 크기 증가 */
  font-weight: 700;  /* 폰트 굵게 */
  color: #555;        /* 폰트 색상 진하게 */
  padding: 0 0.3rem; /* 좌우 여백 추가 */
}

/* 1. 탭 컨테이너가 줄바꿈(wrap)되지 않도록 설정 */
.s3 .left .news-tab {
  flex-wrap: nowrap; /* 버튼이 한 줄에 강제로 배치되도록 함 */
}

/* 2. 탭 버튼 스타일 수정 */
.s3 .left .news-tab button {
  flex: 1; /* [중요] 모든 버튼이 동일한 비율로 꽉 채우도록 함 */
  
  font-size: 1.6rem; /* 기존 1.3rem에서 1.6rem으로 폰트 크기 증가 */
  padding: 1rem 0.5rem; /* 상하 여백을 늘려 버튼 크기 확보 */
  
  text-align: center; /* 텍스트 중앙 정렬 */
  white-space: nowrap; /* "공지사항" 등이 줄바꿈되지 않도록 설정 */
}

/* =============================================== */
/* [추가] S2 (업무 알아보기) 섹션 크기 및 정렬 수정  */
/* =============================================== */

/* 1. S2 타이틀 폰트 크기 및 여백 증가 */
.s2 .title {
  font-size: 3.2rem; /* 기존 2.4rem에서 3.2rem으로 증가 */
  padding: 1.2rem 3rem 1.2rem 1.5rem; /* 패딩을 늘려 타이틀 박스 자체를 키움 */
  margin-bottom: 4rem; /* 기존 2rem에서 4rem으로 하단 여백 증가 */
}

/* 2. '업무 알아보기' 아이템(관측, 분석, 통보) 리스트 간격 증가 */
.s2 .process-list {
  gap: 3rem;           /* 기존 2rem에서 3rem으로 아이템 간 간격 증가 */
  margin-bottom: 4rem; /* 기존 2rem에서 4rem으로 하단 여백 증가 */
}

/* 3. 개별 아이템 최대 너비 증가 (가장 큰 영향) */
.s2 .process-list .process-item {
  max-width: 400px; /* 기존 320px에서 400px으로 너비 증가 */
}

/* 4. 아이템 내부 이미지의 최대 높이 제한을 제거 (이미지 비율대로 커지도록) */
.s2 .process-list .process-item img {
  max-height: none; /* 기존 20vh 제한을 해제 */
}

.s2 .title {
  align-self: flex-start; /* 부모(.s2)의 align-items: center 설정을 덮어쓰고 왼쪽 정렬 */
}

/* =============================================== */
/* [추가] S1_sub (유튜브) 페이저 스타일 통일         */
/* =============================================== */

/* 1. 유튜브 섹션(s1_sub)의 모든 페이저 타이틀 아이콘 크기 통일 */
/* (ytlong.png, ytshort.png) */
.s1_sub .pager-nav img {
  width: 15rem; /* 인스타그램 로고와 동일한 크기 */
  height: auto;
}

/* 2. 모든 페이저(pager) 컨트롤의 간격 통일 */
.s1_sub .pager-nav .pager {
  gap: 0.8rem; /* 인스타그램과 동일한 간격 */
}

/* 3. 모든 페이저 화살표 버튼 크기 통일 */
.s1_sub .pager-nav .pager button img {
  width: 2rem; /* 인스타그램과 동일한 크기 */
  height: auto;
}

/* 4. 모든 페이저 번호 폰트 스타일 통일 */
.s1_sub .pager-nav .pager .pager-num {
  font-size: 1.6rem;   /* 인스타그램과 동일한 크기 */
  font-weight: 700;
  color: #555;
  padding: 0 0.3rem;
}

/* =============================================== */
/* [추가] S1_sub 'xxx1' 스탠드얼론 이미지 수정       */
/* =============================================== */

/* 1. .xxx1 내부 <a> 태그를 flex로 만들고 수직/수평 중앙 정렬 */
.s1_sub .youtube-content > .xxx1 a {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 수직 중앙 정렬 (기존) */
  align-items: center;     /* [추가] 수평 중앙 정렬 */
  height: 100%;            /* 부모(.xxx1) 높이를 꽉 채움 */
}

/* 2. .xxx1 내부 이미지 스타일 (잘림 방지) */
.s1_sub .youtube-content > .xxx1 a img {
  width: 100%;           /* 컨테이너 너비에 맞춤 */
  max-height: 100%;      /* 컨테이너 높이를 넘지 않음 */
  object-fit: contain; /* [중요] 이미지가 잘리지 않고 비율대로 축소됨 */
}

/* 1. 부모 컨테이너 (.youtube-content) 설정 */
.s1_sub .youtube-content {
    /* [복원] 70vh 높이 제한을 다시 적용합니다. 
       이 높이가 자식 컬럼들의 세로 스크롤 기준이 됩니다. */
    max-height: 70vh; 

    /* [유지] 가로 스크롤은 유지합니다. */
    overflow-x: auto;
    
    /* [수정] 부모 자체의 세로 스크롤은 숨깁니다. (자식에서 개별 제어) */
    overflow-y: hidden; 

    /* [유지] 가로 스크롤바를 위한 하단 여백 */
    padding-bottom: 1.5rem; 
}

/* 2. 첫 번째 '롱폼' 컬럼 (.youtube-long) - 세로 스크롤 O */
.s1_sub .youtube-content > .youtube-long {
    /* [유지] 찌그러짐 방지 및 최소 너비 */
    flex-shrink: 0;
    min-width: 450px;

    /* [유지] 이 컬럼만 세로 스크롤(auto)을 허용합니다. */
    overflow-y: auto;
    overflow-x: hidden; /* 컬럼 내부 가로 스크롤 방지 */
}

/* 4. 세 번째 'xxx1' 컬럼 - 세로 스크롤 X */
.s1_sub .youtube-content > .xxx1 {
    /* [유지] 찌그러짐 방지 및 최소 너비 */
    flex-shrink: 0;
    min-width: 300px;

    /* [추가] 이 컬럼도 세로 스크롤을 숨깁니다. */
    overflow-y: hidden;
}

/* 5. 'xxx1' 컬럼 내부 이미지 잘림 방지 (원복) */
.s1_sub .youtube-content > .xxx1 a {
    flex-grow: 1;
    justify-content: center;
}
.s1_sub .youtube-content > .xxx1 a img {
    max-height: 100%;
    object-fit: contain;
}

/* =============================================== */
/* [수정] 유튜브 롱폼 세로 스크롤 개선               */
/* =============================================== */

/* 1. 롱폼 컬럼의 높이를 부모에 맞추고 스크롤 활성화 */
.s1_sub .youtube-content > .youtube-long {
    flex-shrink: 0;
    min-width: 450px;
    
    /* 부모(.youtube-content)의 max-height(70vh)에 맞춰 높이 설정 */
    height: 100%;
    max-height: 69vh;
    
    /* 세로 스크롤 활성화 */
    overflow-y: auto;
    overflow-x: hidden;
}

/* 2. 롱폼 내부 pager-wrapper들이 세로로 쌓이도록 설정 */
.s1_sub .youtube-content > .youtube-long {
    display: flex;
    flex-direction: column;
}

/* 3. 롱폼 내부 각 pager-wrapper의 높이를 자동으로 설정 */
.s1_sub .youtube-content > .youtube-long .pager-wrapper {
    flex-shrink: 0; /* 스크롤 시 압축되지 않도록 */
    min-height: fit-content; /* 콘텐츠 크기에 맞춤 */
}

/* 4. 롱폼 내부 이미지가 원래 비율을 유지하도록 설정 */
.s1_sub .youtube-content > .youtube-long .pager-img img {
    width: 100%;
    height: auto; /* 높이를 자동으로 설정하여 비율 유지 */
    max-height: none; /* 최대 높이 제한 해제 */
    object-fit: contain;
}

/* 5. 롱폼 내부 hr2 구분선 스타일 */
.s1_sub .youtube-content > .youtube-long .hr2 {
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    background-color: #e9ecef;
    margin: 1rem 0;
}

/* 6. 롱폼 내부 xxx1 요소도 flex-shrink: 0 설정 */
.s1_sub .youtube-content > .youtube-long .xxx1 {
    flex-shrink: 0;
}


/* =============================================== */
/* [수정] 유튜브 숏츠 세로 형식으로 변경 (9:16 비율) */
/* =============================================== */

/* 1. 숏츠 컬럼의 너비를 좁게 조정 */
.s1_sub .youtube-content > .youtube-short {
    flex-shrink: 0;
    min-width: 280px; /* 기존 300px에서 280px로 축소 */
    max-width: 320px; /* 최대 너비 제한 추가 */
    
    overflow-y: hidden;
}

/* 2. 숏츠 pager-wrapper의 이미지 영역을 세로로 길게 설정 */
.s1_sub .youtube-content > .youtube-short .pager-img {
    /* 9:16 비율의 세로 형식 컨테이너 */
    aspect-ratio: 9 / 16; 
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    overflow: hidden; /* 이미지가 컨테이너를 넘지 않도록 */
    border-radius: 1rem; /* 모서리를 둥글게 */
    background-color: #000; /* 배경을 검은색으로 */
}

/* 3. 숏츠 이미지를 세로로 길게 자르기 */
.s1_sub .youtube-content > .youtube-short .pager-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 컨테이너에 맞춰 자르기 */
    object-position: center; /* 중앙 부분을 표시 */
}

/* 4. 숏츠 링크가 전체 영역을 차지하도록 */
.s1_sub .youtube-content > .youtube-short .pager-img a {
    display: block;
    width: 100%;
    height: 100%;
}


/* =============================================== */
/* [추가] 스크롤바 스타일 개선 (선택사항)            */
/* =============================================== */

/* 롱폼 컬럼의 스크롤바를 깔끔하게 스타일링 */
.s1_sub .youtube-content > .youtube-long::-webkit-scrollbar {
    width: 8px;
}

.s1_sub .youtube-content > .youtube-long::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.s1_sub .youtube-content > .youtube-long::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.s1_sub .youtube-content > .youtube-long::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* =============================================== */
/* [추가] 반응형 조정 (선택사항)                    */
/* =============================================== */

/* 화면이 작을 때 숏츠 컬럼 너비 추가 조정 */
@media (max-width: 1200px) {
    .s1_sub .youtube-content > .youtube-short {
        min-width: 240px;
        max-width: 280px;
    }
}

.library-list-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬 */
    padding: 20px;
    height: 300px; /* 적절한 높이 설정 */
}

a.library-card {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    text-decoration: none;
    color: #2d3748;
    background: #ffffff; 
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    width: 90%; 
    max-width: 350px;
    /* 슬라이더 전환 시 애니메이션 효과를 위해 CSS 트랜지션을 추가할 수 있습니다. */
}

.library-img {
    width: 100%;
    max-width: 150px; /* 썸네일 크기 */
    height: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.library-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 5px;
}

.library-meta {
    font-size: 13px;
    color: #a0aec0;
}