/* Basic reset */
* {
  box-sizing: borbit-svgder-box;
  margin: 0;
  padding: 0
}

html,
body {
  height: 100%
}

body {
  font-family: Pretendard, Poppins, Notos, system-ui, -apple-system, "Helvetica Neue", "Segoe UI", Roboto;
  background: #080808;
  color: #fff;
  overflow: hidden;
}


/* 메뉴 스타일 */
.nav-menu a {
  color: #fff;
  margin-left: 24px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.nav-menu a:hover {
  opacity: 1;
}


/* Progress bar (top) */
#progress-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.06);
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00e5ff, #7b6cff);
  transition: width .12s linear
}

@media (max-width:1024px) {
  #progress-wrap { 
  height: 5px;  
  }
  #progress-bar {  
  background: linear-gradient(90deg, #fff200, #f4014a);
  
  }
}

/* Left dot nav */
#dot-nav {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

#dot-nav button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02) inset;

  transition: all .28s;
}

#dot-nav button.active {
  transform: scale(1.35);
  background: linear-gradient(180deg, #7b6cff, #00e5ff);
  box-shadow: 0 6px 18px rgba(123, 108, 255, 0.18);
  border: 2px solid #fff;
  /* 🔹 흰색 테두리 1px */
}

@media (max-width:1024px) {
  #dot-nav {
    display: none
  }
}


/* Header */



.global-header {
  font-family: 'Inter', sans-serif;
  position: fixed;
  top: 4vh;
  left: 4vw;
  right: 8vw;
  width: 60vw;
  padding: 18px 32px;
  display: flex;
  border-radius: 40px;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
  z-index: 100;

  /* 🔹 글라스모피즘 효과 */
  background: rgba(255, 255, 255, 0.08);
  /* 아주 은은한 유리 느낌 */
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);

  /* 🔹 부드러운 그림자 */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.08);

  pointer-events: auto;

  /* 🔹 Hover 애니메이션 지원 */
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    background-color 0.45s ease,
    border-radius 0.45s ease,
    border-color 0.45s ease;

  transform: translateX(400px);
  /* 오른쪽에서 들어오게 */
  opacity: 0;

  animation: headerSlideIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 빛 레이어 */
.global-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  /* ⬅ 더 왼쪽에서 시작 */
  width: 35%;
  height: 100%;

  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.45) 40%,
      rgba(255, 255, 255, 0.0) 100%);

  transform: skewX(-25deg);
  transition: left 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover 시 빛이 좌→우 이동 */
.global-header:hover::after {
  left: 200%;
}

/* 🔥 Hover 시 1.5% 확대 → 약 2px 커지는 느낌 */
.global-header:hover {
  transform: scale(1.015);
  border-radius: 12px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1px solid rgb(255, 255, 255);
  background-color: rgba(157, 255, 0, 0.489);
}

@keyframes headerSlideIn {
  0% {
    transform: translateX(400px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


.global-header .logo {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width:1024px) {
  global-header .logo {
    font-size: 1.0rem;
  }
}



.nav-menu a {
  margin-left: 18px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  height: 20px;
  /* 텍스트 높이에 맞게 조절 */
  transition: color 0.3s ease;
}

/* 내부 텍스트를 span처럼 취급 */
.nav-menu a::before,
.nav-menu a::after {
  content: attr(data-target-text);
  /* 나중에 JS로 실제 텍스트 넣어줌 */
  position: absolute;
  left: 0;
  width: 100%;
  transition: transform 0.5s ease;
}

/* 현재 텍스트 (위로 사라질 텍스트) */
.nav-menu a::before {
  content: attr(data-label);
  /* 원래 텍스트 */
  top: 0;
}

/* 밑에서 올라오는 텍스트 */
.nav-menu a::after {
  content: attr(data-label);
  top: 100%;
}

/* hover 시 */
.nav-menu a:hover::before {
  transform: translateY(-100%);
}

.nav-menu a:hover::after {
  transform: translateY(-100%);
}

/*************햄버거***************************************************/
/* 햄버거 버튼 공통 */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 200;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #000000;
  border-radius: 3px;
  transition: all .35s ease;
}

/* 모바일 전체메뉴 오버레이 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(10, 10, 10, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility .45s ease;
  z-index: 999;
}

.mobile-menu-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* 닫기 버튼 */
.close-btn {
  position: absolute;
  top: 3vh;
  right: 6vw;
  background: transparent;
  border: none;
  font-size: 2.6rem;
  color: #fff;
  cursor: pointer;
}

/* 모바일 nav 스타일 */
.mobile-nav a {
  display: block;
  font-size: 2rem;
  margin: 24px 0;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}



/* 반응형 조건 */
@media (max-width: 1024px) {
  .desktop-nav {
    display: none;
    /* 기존 메뉴 숨김 */
  }

  .global-header {
    width: auto;
    left: 4vw;
    right: 4vw;
    top:1vh   
  }
  .hamburger {
    display: flex;
    /* 햄버거 보이기 */
  }
}

/* 햄버거 → X 애니메이션 */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* 오버레이 슬라이드 + 페이드 */
.mobile-menu-overlay {
  transform: translateY(30px);
}

.mobile-menu-overlay.active {
  transform: translateY(0);
}

/* 모바일 메뉴 콘텐츠 살짝 위로 떠오르기 */
.mobile-nav a {
  opacity: 0;
  transform: translateY(20px);
  transition: all .45s ease;
}

.mobile-menu-overlay.active .mobile-nav a {
  opacity: 1;
  transform: translateY(0);
}



/* Scroll container: snap behavior */
.scroll-container {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Section */
.section {
  position: relative;
  min-height: 100vh;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 🔥 가운데 → 좌측정렬 */

  scroll-snap-align: start;
  overflow: hidden;
}

@media (max-sidth:1024px) {
  section {  
  min-height: auto;
  height: auto;
  }
  .scroll-container {  
  height: auto;  
  }
}

/* 🔥 좌측 여백 4vw */
.section .content {
  margin-left: 4vw;
  text-align: left;
  /* 혹시 정렬 깨지는 것 대비 */
  color: #ffffff;
  z-index: 50;
  /* 패럴랙스 레이어보다 위에 보이도록 */
}

/* 🔥 좌측 여백 4vw */
.section .content2 {
  margin-left: 4vw;
  text-align: left;
  /* 혹시 정렬 깨지는 것 대비 */
  color: #ffffff;
  z-index: 50;
  /* 패럴랙스 레이어보다 위에 보이도록 */
}

/* 🔥 좌측 여백 4vw */
.section .content3 {
  margin-left: 4vw;
  text-align: left;
  /* 혹시 정렬 깨지는 것 대비 */
  color: #ffffff;
  z-index: 50;
  /* 패럴랙스 레이어보다 위에 보이도록 */
}

/* 🔥 좌측 여백 4vw */
.section .content4 {
  margin-left: 4vw;
  
  text-align: left;
  /* 혹시 정렬 깨지는 것 대비 */
  color: #ff0180;
  z-index: 50;
  /* 패럴랙스 레이어보다 위에 보이도록 */
}

@media (max-width:1024px) {
  .section .content, .section .content2, .section .content3, .section .content4 {
    margin-left: 2vw;
    margin-right: 2vw;
  }
}

.section .content4 h2 {
  font-size: clamp(1.8rem, 4vw, 4rem);

  /* 🔹 모던한 서체 */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 900;

  /* 🔹 행간을 약간 좁게 */
  line-height: 0.92;

  /* 🔹 자간 조절 */
  letter-spacing: -2px;

  /* 🔹 초기 상태(안 보임) */
  opacity: 0;
  transform: translateY(20px);

  /* 애니메이션 */
  animation: fadeInH1 3s ease-out forwards;
}

.section .content h1,
.section .content2 h1,
section .content3 h1,
.content4 h1 {
  font-size: clamp(2.4rem, 6vw, 8rem);

  /* 🔹 모던한 서체 */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 900;

  /* 🔹 행간을 약간 좁게 */
  line-height: 0.92;

  /* 🔹 자간 조절 */
  letter-spacing: -2px;

  /* 🔹 초기 상태(안 보임) */
  opacity: 0;
  transform: translateY(20px);

  /* 애니메이션 */
  animation: fadeInH1 3s ease-out forwards;
}

.section .content2 h2 {
  /* 🔹 행간을 약간 좁게 */
  line-height: 1.1;
}

@media (min-width:1800px) {

  .section .content h1,
  .section .content2 h1,
  .section .content3 h1,
  .content4 h1 {
    font-size: 6.5rem;
  }
}

@keyframes fadeInH1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.side-panel {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 40vw;
  /* 🔹 화면 가로 기준 30% */
  height: auto;
  z-index: 50;
  /* 다른 요소 위로 */
}

.side-panel img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:1024px) {
  .side-panel {
    display: none;
  }
}


.sign {
  position: absolute;
  right: 0;
  bottom: 1vh;

  width: 35vw;
  /* 🔹 화면 가로 기준 30% */
  height: auto;
  z-index: 500;
  /* 다른 요소 위로 */
}

.sign img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:1024px) {
  .sign {
    display: none;
  }
}

.sign2 {
  position: absolute;
  right: 0;
  bottom: 0vh;

  width: 100vw;
  /* 🔹 화면 가로 기준 30% */
  height: auto;
  z-index: 1;
  /* 다른 요소 위로 */
}

.sign2 img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:1024px) {
  .sign2 {
    display: none;
  }
}

@media (min-width:2048px) {
  .sign2 {
    display: none;
  }
}

.sign3 {
  position: absolute;
  right: 0;
  bottom: 0vh;

  width: 100vw;
  /* 🔹 화면 가로 기준 30% */
  height: auto;
  z-index: 1;
  /* 다른 요소 위로 */
}

.sign3 img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:2048px) {
  .sign3 {
    display: none;
  }
}



/* 우측 글라스 패널 */
.side-glass-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 10vw;
  /* 🔥 화면 가로폭의 15% */
  height: 100%;
  pointer-events: none;
  /* 클릭 방해 X */

  /* 🔹 글라스모피즘 효과 */
  background: rgba(255, 255, 255, 0.0);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0);

  /* 🔹 부드러운 그림자 (옵션) */
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel2 {
  position: absolute;
  top: 0;
  right: 11vw;
  width: 10vw;
  /* 🔥 화면 가로폭의 15% */
  height: 100%;
  pointer-events: none;
  /* 클릭 방해 X */

  /* 🔹 글라스모피즘 효과 */
  background: rgba(255, 255, 255, 0.0);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0);

  /* 🔹 부드러운 그림자 (옵션) */
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel3 {
  position: absolute;
  top: 0;
  right: 22vw;
  width: 10vw;
  /* 🔥 화면 가로폭의 15% */
  height: 100%;
  pointer-events: none;
  /* 클릭 방해 X */

  /* 🔹 글라스모피즘 효과 */
  background: rgba(255, 255, 255, 0.0);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0);

  /* 🔹 부드러운 그림자 (옵션) */
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel4 {
  position: absolute;
  top: 0;
  right: 33vw;
  width: 10vw;
  /* 🔥 화면 가로폭의 15% */
  height: 100%;
  pointer-events: none;
  /* 클릭 방해 X */

  /* 🔹 글라스모피즘 효과 */
  background: rgba(255, 255, 255, 0.0);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0);

  /* 🔹 부드러운 그림자 (옵션) */
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

@media (max-width:1024px) {

  .side-glass-panel,
  .side-glass-panel2,
  .side-glass-panel3,
  .side-glass-panel4 {
    display: none;
  }
}

@media (min-width:2048px) {

  .side-glass-panel4,
  .side-glass-panel2,
  .side-glass-panel3 {
    display: none;
  }

  .side-glass-panel {
    width: 18vw;
  }
}

/********************************* 🔹 카드 기본 구조 **********************************************/
/* =========================================
      ⬆ PC / Tablet (1024px 이상) 기본 스타일
========================================= */

.info-card {
  position: relative;
  width: 40vw;
  height: 40vh;
  margin-top: 40px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

/* 🔹 카드 이미지 */
.info-card .card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s ease, filter 0.9s ease;
}

/* 🔹 마우스 오버 시 확대 + 어둡게 */
.info-card:hover .card-image {
  transform: scale(1.3);
  filter: brightness(0.85);
}

/* 🔹 텍스트 기본 - 숨김 */
.info-card .card-text00 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 18px 22px;
  color: #fff;

  opacity: 0;
  transform: translateY(15px);

  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 🔹 hover → 텍스트 표시 */
.info-card:hover .card-text00 {
  background-color: #000000a4;
  opacity: 1;
  transform: translateY(0);
}

/* 🔹 타이틀 스타일 */
.info-card .card-text00 h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.3px;
}



/* =========================================
      ⬇ Mobile (1024px 이하) 전면 재정렬
========================================= */
@media (max-width: 1024px) {

  /* 🔹 카드 자체 크기 변경 */
  .info-card {
    width: 85vw;       /* 모바일 화면에 맞게 넓게 */
    height: auto;      /* 세로로 자동 확장 */
    cursor: default;   /* hover 없음 */
  }

  /* 🔹 이미지: 가로 100%, 세로는 자동 */
  .info-card .card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;

  background-size: cover;
  background-position: top 50%;  /* ← 여기! 세로 기준 75% */
  
  transform: none !important;
  filter: none !important;
}


  /* 🔹 텍스트: 이미지 아래로 이동 + 항상 보이기 */
  .info-card .card-text00 {
    position: static !important; /* absolute 제거 */
    width: 100%;
    padding: 16px 14px;

    opacity: 1 !important;
    transform: none !important;

    background: transparent !important;
    color: #fff;
  }

  /* hover 효과 완전 제거 */
  .info-card:hover .card-text00,
  .info-card:hover .card-image {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* ⭐ 가로 100px, 높이 2px 정도의 밝은 직사각형 */
.moving-line {
  width: 100px;
  height: 2px;
  background: rgba(183, 255, 0, 0.9);
  margin-bottom: 20px;
  animation: slideLine 2.2s linear infinite;
}

.moving-line2 {
  width: 100px;
  height: 2px;
  background: rgba(255, 123, 0, 0.9);
  margin-bottom: 20px;
  animation: slideLine 2.2s linear infinite;
}

.moving-line3 {
  width: 100px;
  height: 2px;
  background: rgba(255, 0, 119, 0.9);
  margin-bottom: 20px;
  animation: slideLine 2.2s linear infinite;
}

/* ⭐ 좌 → 우 → 다시 좌로 무한 반복 */
@keyframes slideLine {
  0% {
    transform: translateX(-20px);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(-20px);
  }
}


/* 🔹 본문 설명 */
/* 더 구체적인 선택자 — 우선 적용해보세요 */
.section .info-card .card-text00 p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;

  background: transparent !important;
  /* 투명 배경 확실히 강제 */
  padding: 0 !important;
  /* 패딩 제거 강제 (필요 시 삭제) */

  color: rgba(255, 255, 255, 0.9) !important;
  /* 글자색 강제 적용 */
  display: block;
  /* 혹시 inline 이면 보장 */
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.info-card {
  position: relative;
  overflow: hidden;
}



/* 🔹 More 버튼 스타일 */
.more-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


  padding: 12px 22px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;

  background: rgba(255, 255, 255, 0.6);
  /* 글라스 느낌 */
  backdrop-filter: blur(12px);
  border-radius: 30px;

  color: #000;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);

  transition: background 0.3s ease, transform 0.3s ease;
}

.more-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -52%);
  opacity: 0%;
}

/* 🔹 기본값: 버튼 숨김 */
.more-btn {
  display: none;
}

/* 🔹 1440px 이상일 때만 표시 */
@media (min-width: 1440px) {
  .more-btn {
    display: inline-flex;
  }
}








.section .content p {
  font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

  /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 300;
  /* Light */

  /* 🔹 행간을 약간 좁게 */

  max-width: fit-content;

  /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
  letter-spacing: -0.5px;
  background-color: rgba(30, 85, 8, 0.75);
  border-radius: 8px;
  margin-top: 2vh;

  color: #ffffff;
  padding: 10px 14px;
}

@media (max-width:1024px) {
  .section .content p {
    background-color: transparent;
    padding: 0px 4px;
  }
}

.section .content2 p,
.section .content4 p {
  font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

  /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 300;
  /* Light */

  /* 🔹 행간을 약간 좁게 */

  max-width: fit-content;

  /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
  letter-spacing: -0.5px;
  background-color: rgba(0, 127, 246, 0.65);
  border-radius: 8px;
  margin-top: 2vh;

  color: #ffffff;
  padding: 10px 14px;
}

@media (max-width:1024px) {

  .section .content2 p,
  .section .content4 p {
    background-color: transparent;
    padding: 0px 4px;
  }
}


.section .content3 p {
  font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

  /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 300;
  /* Light */

  /* 🔹 행간을 약간 좁게 */

  max-width: fit-content;

  /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
  letter-spacing: -0.5px;
  background-color: rgb(15, 56, 4);
  border-radius: 8px;
  margin-top: 2vh;

  color: #ffffff;
  padding: 10px 14px;
}

.section .content4 p {
  font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

  /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 300;
  /* Light */

  /* 🔹 행간을 약간 좁게 */

  max-width: fit-content;

  /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
  letter-spacing: -0.5px;
  background-color: rgb(255, 0, 98);
  border-radius: 8px;
  margin-top: 2vh;

  color: #ffffff;
  padding: 10px 14px;
}

@media (max-width:1024px) {

  .section .content3 p,
  .section .content4 p {
    background-color: transparent;
    padding: 0px 4px;
  }
}




/************************************************************************/

/* === 카드 컨테이너 === */
/* =========================================================
   GLOBAL SAFE SETTINGS
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* =========================================================
   FEATURE CARDS GRID
========================================================= */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1vw;
  width: 100%;
  margin: 4vh auto 0;
}



/* =========================================================
   CARD FRAME (container)
========================================================= */
.feature-cards .card {
  position: relative;         /* 오버레이 기준 */
  width: 100%;
  aspect-ratio: 7 / 10;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  z-index: 300;
}



/* =========================================================
   CARD IMAGE LAYER
   → transform/blur/brightness는 여기만 적용
========================================================= */
.card-img {
  position: absolute;
  inset: 0;                   /* 이미지가 카드 전체 채움 */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform 0.45s ease, filter 0.45s ease;
  transform-origin: center center; /* 확대 중심 고정 */
  z-index: 1;
}



/* =========================================================
   OVERLAY TEXT (always perfect center!)
========================================================= */
.card-text {
  position: absolute;
  left: 0;
  bottom: -100%;              /* 숨겨진 상태 */
  width: 100%;

  padding: 15px 20px;

  display: flex;
  justify-content: center;    /* 가로 중앙 */
  align-items: center;        /* 세로 중앙 */
  text-align: center;

  font-size: 12px;
  font-weight: 600;
  color: #fbff00;

  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);

  opacity: 0;
  transition: bottom 0.9s cubic-bezier(.2, .9, .2, 1), opacity 0.45s ease;
  z-index: 3;
  pointer-events: none;       /* 오버레이가 클릭 잡지 않도록 */
}



/* =========================================================
   DESKTOP HOVER EFFECTS
========================================================= */

/* 기본 밝기 초기화 */
.feature-cards:hover .card {
  filter: brightness(100%);
}

/* hover 안 된 이미지 흐림 */
.feature-cards:hover .card:not(:hover) .card-img {
  filter: brightness(70%) blur(3px);
}

/* hover 된 카드 이미지 강조 */
.card:hover .card-img {
  filter: brightness(135%);
  transform: scale(1.04);
}

/* overlay 텍스트 등장 */
.card:hover .card-text {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
  text-shadow: 0 0 15px rgba(1,51,15,0.9);
}



/* =========================================================
   MOBILE (1024px 이하)
========================================================= */
@media (max-width: 1024px) {

  .feature-cards {
    width: 55vw;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
    justify-items: start;
    margin: 0 auto 0 0;
  }

  .feature-cards .card {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;

    pointer-events: none; /* hover 기능 제거 */
    filter: none !important;
    transform: none !important;
  }

  /* hover 관련 전체 해제 */
  .feature-cards:hover .card,
  .feature-cards:hover .card:not(:hover),
  .card:hover,
  .card-img,
  .card:hover .card-text {
    filter: none !important;
    transform: none !important;
  }

  /* 모바일에서는 overlay 감춤 */
  .card-text {
    display: none;
    bottom: 0;
    opacity: 1;
  }
}



/* =========================================================
   4K ULTRA WIDE
========================================================= */
@media (min-width: 2048px) {
  .feature-cards {
    width: 100%;
  }
}




/************************************************************************/
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 배경 꽉 채우기 */
  z-index: -3;
  /* 가장 뒤로 */
  opacity: 1;
  /* 투명도 조절 가능 */
}

/* multi-layer background layers */
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  z-index: 1;
  /* 🔹 content 아래 */
}

/* upper overlay layer for tint/glass */
.bg-layer.overlay {
  mix-blend-mode: overlay;
  opacity: 0.95;
  filter: contrast(1.05) saturate(1.05);
  z-index: 2;
}

@media (max-width:1024px) {
  .bg-layer, .bg-layer.overlay {
    display:none !important;
  }
}



/* Content area */
.content {
  position: relative;
  z-index: 1000;
  padding: 120px 28px;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: auto;
}

.content2 {
  position: relative;
  z-index: 1000;
  padding: 120px 28px;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: auto;
}

.content3 {
  position: relative;
  z-index: 1000;
  padding: 120px 28px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
}

.content4 {
  position: relative;
  z-index: 1000;
  padding: 120px 28px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
}

/* Fade transition: we'll toggle .visible on content children */
.content>* {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, 1, .3, 1);
  opacity: 0;
  transform: translateY(30px)
}

.content.visible>* {
  opacity: 1;
  transform: translateY(0)
}

/* Gallery grid */
/* 기본: 화면 크기에 따라 자동 조정 (2~3개) */
.grid22 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}

/* 2048px 이상: 가로 3개 고정 */
@media (min-width: 1024px) {
  .grid22 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 2048px 이상: 가로 3개 고정 */
@media (min-width: 2048px) {
  .grid22 {
    grid-template-columns: repeat(3, 1fr);
  }
}


.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
}

@media (max-width:1024px) {
  .gallery-item {
    border-radius: 8px;
  }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 비율 유지하며 꽉 채움 */
  object-position: center;
  display: block;
  transition: filter .35s ease;
}

/* 이미지에 부드러운 확대 애니메이션 적용 */
.grid22 .gallery-item img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* 호버 시 약간 확대 효과(옵션) */
.grid22 .gallery-item:hover img {
  transform: scale(1.5);
  transition: opacity 0.6s ease, transform 0.6s ease;

}

/* 앞의 2개 이미지에만 Hover 효과 적용 */
.grid22 .gallery-item:nth-child(-n+2):hover img {
  filter: brightness(35%);
  transform: scale(1.5);
  transition: opacity 0.6s ease, transform 0.6s ease;

}

.grid22 .gallery-item:nth-child(-n+2):hover .item-text {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 기본적으로 텍스트 숨김 */
/* 모든 item-text 공통 */
.item-text {
  position: absolute;
  top: 50%;
  /* 세로 중앙 */
  left: 50%;
  /* 가로 중앙 */
  transform: translate(-50%, -50%);
  /* 정확한 중앙 */

  color: #fff;
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 500;

  text-align: center;
  /* 글자 중앙 정렬 */
  white-space: nowrap;
  /* 필요 시 줄바꿈 방지 */

  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 500;
}


/* 🔥 앞의 2개만 효과 */
.hover-target:hover img {
  filter: brightness(35%);
}

/* 🔥 hover 시: 위치가 중앙으로 올라오고 opacity 1 */
.gallery-item:hover .item-text,
.img-box:hover .item-text,
.item:hover .item-text {
  opacity: 1;
  transform: translate(-50%, -50%);
  /* 중앙으로 이동 */
}

.gallery-item,
.img-box,
.item {
  position: relative;
  overflow: hidden;
  /* 필요하면 사용 */
}


/* Motion target — will be transformed by JS for advanced image motion */
.motion {
  will-change: transform;
}

/* small responsive tweaks */
@media (max-width:900px) {
  #dot-nav {
    left: 8px
  }

  .content {
    padding: 90px 18px
  }

  .gallery-item {
    height: auto
  }
}

/* Accessibility focus */
button:focus,
a:focus {
  outline: 2px solid rgba(123, 108, 255, 0.3);
  outline-offset: 3px
}



/********************** more ***********************************/
/* 기본 버튼 스타일 */
.btn-more {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  gap: 10px;

  /* 🔹 여백(패딩) 추가 */
  padding: 10px 18px;
  /* 위아래 10px, 좌우 18px */

  /* 🔹 모서리 라운드 강화 */
  border-radius: 16px;

  background: rgba(0, 0, 0, 0.781);
  color: rgb(187, 187, 187);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;

  transition: background 0.28s ease,
    color 0.28s ease,
    transform 0.16s ease,
    box-shadow 0.28s ease;
}


/* 텍스트와 화살표 스타일 */
.btn-more .btn-text {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--neon-contrast);
  transition: color 0.28s ease;
}

.btn-more .btn-arrow {
  display: inline-block;
  color: var(--neon-contrast);
  transition: transform 0.28s ease, color 0.28s ease;
}

/* Hover / Focus */
.btn-more:hover,
.btn-more:focus {

  /* 🔹 1px 테두리 추가 */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* 은은한 화이트 */

  color: chartreuse;
  outline: none;
  transform: translateY(-2px);
}

.btn-more:hover .btn-text,
.btn-more:focus .btn-text {
  color: var(--neon);
}

.btn-more:hover .btn-arrow,
.btn-more:focus .btn-arrow {
  color: var(--neon);
  transform: translateX(6px);
  /* 화살표 약간 이동 */
}

/* 포커스 가시성 (키보드 접근성) */
.btn-more:focus-visible {
  box-shadow: 0 0 0 4px rgba(124, 255, 107, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45);
  border-color: var(--neon);
}

/* 작아지는 화면에서 버튼 크기 조정 */
@media (max-width: 480px) {
  .btn-more {
    padding: 8px 14px;
    gap: 8px;
    border-radius: 8px;
  }

  .btn-more .btn-text {
    font-size: 0.85rem;
  }
}



/***********************modal********************************************/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}





.close-btn2 {
  position: fixed;
  /* 항상 화면 기준으로 고정 */
  top: 2vh;
  /* 화면 상단에서 2vh */
  right: 2vw;
  /* 화면 우측에서 2vw */

  font-size: 60px;
  /* 아이콘 크기 */
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100000;
}

@media (max-width: 768px) {
  .close-btn2 {
    font-size: 40px;
    top: 2vh;
    right: 3vw;
  }
}

@media (max-width: 480px) {
  .close-btn2 {
    font-size: 34px;
    top: 1.5vh;
    right: 3vw;
  }
}



.slider {
  position: relative;
  width: 70vw;
  max-width: 800px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slides {
  width: 100%;
  overflow: hidden;
  display: flex;
}

.slide {
  min-width: 100%;
  object-fit: contain;
  display: none;
}

.slide.active {
  display: block;
}

.prev,
.next {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 48px;
  color: #aaff00;
  padding: 16px;
  transition: opacity 0.3s;
}

.prev:hover,
.next:hover,
.close-btn:hover {
  opacity: 0.7;
}

@media (max-width:1024px) {
  .slider {
    width: 90vw;
  }
}


/************************************************************/

/* 전체 모달 */
.modal22 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.modal22.active {
  display: flex;
  z-index: 100000;
}

.close-btn22 {
  position: fixed;
  /* 항상 화면 기준으로 고정 */
  top: 2vh;
  /* 화면 상단에서 2vh */
  right: 2vw;
  /* 화면 우측에서 2vw */

  font-size: 60px;
  /* 아이콘 크기 */
  color: #fff;
  background: none;
  border: none;
  cursor: pointer !important;
  z-index: 100001;
}

@media (max-width: 768px) {
  .close-btn22 {
    font-size: 40px;
    top: 2vh;
    right: 3vw;
  }
}

@media (max-width: 480px) {
  .close-btn22 {
    font-size: 34px;
    top: 1.5vh;
    right: 3vw;
  }
}



.slider22 {
  position: relative;
  width: 70vw;
  max-width: 800px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slides22 {
  width: 100%;
  overflow: hidden;
  display: flex;
}

.slide22 {
  min-width: 100%;
  object-fit: contain;
  display: none;
}

.slide22.active {
  display: block;
}

.prev22,
.next22 {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 48px;
  color: #aaff00;
  padding: 16px;
  transition: opacity 0.3s;
}

.prev22:hover,
.next22:hover,
.close-btn22:hover {
  opacity: 0.7;
}

@media (max-width:1024px) {
  .slider22 {
    width: 90vw;
  }
}




/*************************비디오 modal************************/

/* gallery layout */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 1.5vw;
  margin-top: 4vh;
  align-items: start;
}

/* 각 아이템 9:16 비율 유지 */
.video-item {
  position: relative;
  aspect-ratio: 9/16;
  /* ★ 강력 추천 */
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  display: block;
}

/* video & thumb 공통 */
.desktop-video,
.mobile-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

/* 모바일에서는 video 숨기고 thumbnail만 보이게 */
@media (max-width: 1024px) {
  .desktop-video {
    display: none;
  }

  .mobile-thumb {
    display: block;
  }
}

/* 데스크탑에서는 video 보이게, thumb 숨김 */
@media (min-width: 1025px) {
  .desktop-video {
    display: block;
    transition: transform 0.35s ease;
  }

  .mobile-thumb {
    display: none;
  }

  /* 마우스오버 시 살짝 스케일(원하시면 1.05~1.12로 조정) */
  .video-item:hover .desktop-video {
    transform: scale(1.12);
  }
}

/* Play 아이콘 공통 스타일 */
.video-item::after {
  content: "\25B6";
  /* ▶ Unicode */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translate(-50%, -50%) scale(0.85);
}

.video-item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hover 시 Play 아이콘 노출 */
@media (min-width: 1025px) {
  .video-item:hover::after {
    opacity: 1;
  }

  /* Hover 시 영상 어두워짐 */
  .video-item:hover .desktop-video {
    filter: brightness(40%);
    transform: scale(1.12);
  }
}


/*******************************************************************/

/* 👉 s5 이외 섹션에서는 미니영상 pointer-events 비활성화 */
.section:not(#s4) .mini-video-container4,
.section:not(#s4) .mini-video-item4,
.section:not(#s4) video {
  pointer-events: none !important;
}


/* 👉 s5 이외 섹션에서는 미니영상 pointer-events 비활성화 */
.section:not(#s5) .mini-video-container,
.section:not(#s5) .mini-video-item,
.section:not(#s5) video {
  pointer-events: none !important;
}

/* 🔥 우측 하단 기본 위치 */
.mini-video-container {
  position: absolute;
  right: 2vw;
  bottom: 4vh;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 50;
}

/* 🔥 우측 하단 기본 위치 */
.mini-video-container4 {
  position: absolute;
  right: 2vw;
  bottom: 4vh;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 50;
}

/* ✔ 6:19 비율 유지 (aspect-ratio: 6/19) */
.mini-video-item {
  position: relative;
  width: 150px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

.mini-video-item4 {
  position: relative;
  width: 150px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

@media (min-width:2048px) {
  .mini-video-item {
    width: 250px;
  }
  .mini-video-item4 {
    width: 250px;
  }
}

/* 재생 중 강조 효과 */
.mini-video-item.highlight {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
  transition: all 0.25s ease;
}

.mini-video-item4.highlight {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
  transition: all 0.25s ease;
}

/* 영상 자체도 조금 밝게 */
.mini-video-item.highlight video {
  filter: brightness(1.1);
}

.mini-video-item4.highlight video {
  filter: brightness(1.4);
}


/* 영상 자체 */
.mini-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

.mini-video-item4 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

/* ▷ 플레이 아이콘 */
.play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  opacity: 1;
  transition: 0.2s;
  pointer-events: none;
}

.mini-video-item:hover .play-icon {
  opacity: 1;
}

.mini-video-item4:hover .play-icon {
  opacity: 1;
}

.mini-video-item:hover video {
  filter: brightness(1);
}

.mini-video-item4:hover video {
  filter: brightness(1.3);
}

/* 🔥 반응형 — 화면이 좁아지면 3개가 가로 정렬 */
@media (max-width: 1024px) {
  .mini-video-container {
    flex-direction: row;
    width: 80vw;
    right: 50%;
    transform: translateX(50%);
    bottom: 50px;
  }
}

@media (max-width: 1024px) {
  .mini-video-container4 {
    flex-direction: row;
    width: 80vw;
    right: 50%;
    transform: translateX(50%);
    bottom: 50px;
  }
}

/* 🔥 더 작은 화면에서는 크기 축소 */
@media (max-width: 600px) {
  .mini-video-item {
    width: 80%;
  }
}

@media (max-width: 600px) {
  .mini-video-item4 {
    width: 80%;
  }
}

/* 🔥 재생 중일 때 아이콘 숨김 */
.mini-video-item4.playing .play-icon {
  opacity: 0;
}


/***************************************************************/

.image-slider {
  display: flex;
  width: 45vw;
  height: auto;
  overflow: hidden;
  gap: 4px;
  /* ← 이미지 사이 간격 추가 */
}

.image-slider2 {
  position: fixed;
  right: 2vw;
  bottom: 2vh;
  display: flex;
  width: 45vw;
  overflow: hidden;
  gap: 4px;
  z-index: 999;
}

@media (max-width: 1024px) {
  .image-slider {
    width: 85vw;
  }
}


.img-box {
  width: 20%;
  height: 350px;
  position: relative;
  cursor: pointer;
  transition: width 0.6s ease;
  overflow: hidden;
  border-radius: 8px;
  z-index: 500;
}

@media (min-width:2048px) {
  .img-box {
    height: 500px;
  }
}


/* 마우스 오버 시 이미지 밝게 */
.img-box:hover img {
  filter: brightness(1.8);
  transition: filter 0.3s ease;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 활성 이미지 */
.img-box.active {
  width: 100%;
  border-radius: 20px;
}


/* 제목 스타일 */
.img-title {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: 1.0rem;
  opacity: 1;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* 기본(비활성) 제목 숨김 */
.img-box:not(.active) .img-title {
  opacity: 0;
}



.slider-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-item:hover .slider-video {
  filter: brightness(115%);
}



/* CSS */
.scroll-icon {
  position: fixed;
  right: 4vw;
  bottom: 20px;
  /* 화면 하단으로부터 20px */
  transform: translateX(-50%);
  /* 가로 가운데 정렬 */

  width: 30px;
  /* 가로 60px */
  height: 50px;
  /* 세로 100px */
  border: 2px solid #fff;
  /* 1px 흰색 테두리 */
  border-radius: 15px;
  /* 모서리 둥글게 (원하시면 숫자 조정) */
  display: flex;
  align-items: center;
  /* 수직 중앙 기준(기본 dot 시작 위치) */
  justify-content: center;
  background: #ffffff32;
  box-sizing: border-box;
  pointer-events: none;
  /* 클릭 방해하지 않음 */
  z-index: 9999;
}

@media (min-width:1024px) {
  .scroll-icon {
    display: none;
  }
}

/* 내부 컨테이너: 위치기준 및 overflow 처리 */
.scroll-icon .frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 이동하는 작은 원 */
.scroll-icon .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 세로 절반 위치에서 시작 */
  transform: translate(-50%, -50%);
  width: 8px;
  /* 원 크기 (원하면 조절) */
  height: 8px;
  border-radius: 50%;
  background: #fff;
  /* 원 색상 (테두리와 동일) */
  box-shadow: none;
  opacity: 1;
  /* 애니메이션: 위로 이동 후 다시 원래 위치로 돌아오는 루프 */
  animation: moveUp 1.6s cubic-bezier(.2, .9, .2, 1) infinite;
}

/* 애니메이션 키프레임: 0% 시작 -> 60% 위 이동 -> 100% 원위치 (투명해짐) */
@keyframes moveUp {
  0% {
    transform: translate(-50%, 0);
    /* 시작: 중앙(절반) */
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -23px);
    /* 위쪽으로만 이동 (값 조정 가능) */
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 0);
    /* 다시 원위치로 */
    opacity: 0;
    /* 살짝 숨기고 재시작 */
  }
}

/* 사용자의 '감속모션(감소모션)' 선호를 존중 */
@media (prefers-reduced-motion: reduce) {
  .scroll-icon .dot {
    animation: none;
    opacity: 1;
  }
}


.content_set {
  position: fixed;
  /* 화면 기준 고정 */
  bottom: 4vh;
  /* 화면 하단에서 여백 */
  right: 4vw;
  /* 화면 왼쪽에서 여백 */

  width: 35vw;
  /* 🔹 화면 가로의 40% */
  max-width: 900px;


  z-index: 9999;
  /* 다른 요소보다 위 */
}

@media (max-width: 1024px) {
  .content_set {

    transform: translateX(-50%);
    /* 화면 중앙 정렬 */
    width: 90vw;
    /* 모바일은 조금 더 넓게 */
  }
}


.small-dot {
  display: inline-block;
  width: 6px;
  /* 원 크기 */
  height: 6px;
  background-color: rgb(34, 255, 0);
  border-radius: 50%;
  /* 완전한 원 */
  margin-right: 8px;
  /* 글자와 간격 */
  position: relative;
  top: -1px;
  /* 🔥 글씨 중앙에 맞게 미세 보정 */
}

.small-dot2 {
  display: inline-block;
  width: 6px;
  /* 원 크기 */
  height: 6px;
  background-color: rgb(0, 251, 255);
  border-radius: 50%;
  /* 완전한 원 */
  margin-right: 8px;
  margin-left: 8px;
  /* 글자와 간격 */
  position: relative;
  top: -4px;
  /* 🔥 글씨 중앙에 맞게 미세 보정 */
}





#s7 .special-p {
  padding: 12px 18px;
  margin-top: 2vh;
  border-radius: 10px;

  /* 🔥 메탈 배경 + 투명도 75% */
  background: linear-gradient(135deg,
      rgba(93, 93, 93, 0.75) 0%,
      rgba(62, 62, 62, 0.75) 25%,
      rgba(122, 122, 122, 0.75) 50%,
      rgba(47, 47, 47, 0.75) 75%,
      rgba(91, 91, 91, 0.75) 100%);

  background-blend-mode: overlay;

  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.25),
    inset 0 0 14px rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.4);

  color: #fefefe;
  letter-spacing: -0.5px;
}

#s8 .special-h1 {
  color: #ff0180;
  font-size: clamp(2.4rem, 6vw, 8rem);

  /* 🔹 모던한 서체 */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 900;

  /* 🔹 행간을 약간 좁게 */
  line-height: 0.92;

  /* 🔹 자간 조절 */
  letter-spacing: -2px;

  /* 🔹 초기 상태(안 보임) */
  opacity: 0;
  transform: translateY(20px);

  /* 애니메이션 */
  animation: fadeInH1 3s ease-out forwards;
}

#s8 .special-h2 {
  color: #ffffff;
  
  font-size: clamp(0.85rem, 2vw, 2.0rem);

  /* 🔹 모던한 서체 */
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-weight: 600;

  /* 🔹 행간을 약간 좁게 */
  line-height: 1.2;

  /* 🔹 자간 조절 */
  letter-spacing: 0.1px;

  /* 🔹 초기 상태(안 보임) */
  opacity: 0;
  transform: translateY(20px);

  /* 애니메이션 */
  animation: fadeInH1 3s ease-out forwards;
}



@media (max-width:1024px) {
  #s7 .special-p {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: none;

    /* 🔹 사방 여백 크게 */
    padding: 14px 18px;

    border: solid 1px rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    /* 모바일에서 둥근 느낌 추가 */
  }
}


.radio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
  z-index: 1000;
}

.radio-toggle .icon {
  font-size: 1.2rem;
  transform: translateY(1px);
}

/* 처음에는 ON 상태 → OFF 아이콘 숨김 */
.radio-toggle .icon.off {
  display: none;
}

/* OFF 상태 클래스가 붙었을 때 */
.radio-toggle.off {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

.radio-toggle.off .icon.on {
  display: none;
}

.radio-toggle.off .icon.off {
  display: inline;
}



/* 전체 바 (가로로 꽉 차는 박스) *********************************************************/
/* 하단 바 */
.thumbnail-bar {
  position: absolute;
  bottom: 2vh;
  width: 100%;
  z-index: 9;
 overflow: visible !important; 
  pointer-events: auto;
}

/* 트랙 */
.thumb-track {
  display: flex;
  width: max-content;
  gap: 4px;
  animation: scrollLeft 20s linear infinite;
  overflow: visible !important;
  position: relative;
  z-index: 9;
}

/* 리스트 */
.thumb-list {
  display: flex;
  gap: 12px;
  overflow: visible;
}

/* 개별 아이템 */
.thumb-item {
  width: 120px;
  height: 120px;
  position: relative;
  flex-shrink: 0;
  overflow: visible !important;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px; /* 이미지만 둥글게 */
  opacity: 55%;
}

/* 툴팁 */
.thumb-tooltip {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  background: red !important;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #fff;
  white-space: nowrap;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}

.thumb-item:hover .thumb-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

/* 무한 루프 애니메이션 */
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* MOBILE */
@media (max-width: 1024px) {
  .thumbnail-bar {
    bottom: 4vh;
  }

  .thumb-track {
    cursor: grab;
    left: 4vw;
  }

  .thumb-tooltip {
    display: none;
  }

  .thumb-item {
    width: 80px;
    height: 80px;
  }
}


/***************************************************/
/* 🔥 우측 하단 기본 위치 */
.mini-video-container2 {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 24px; /* 문장과 영상 사이의 적절한 여백 */
  z-index: 5;
}

/* ✔ 6:19 비율 유지 (aspect-ratio: 6/19) */
.mini-video-item2 {
  position: relative;
  width: 150px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

@media (min-width:2048px) {
  .mini-video-item2 {
    width: 250px;
  }
}

/* 재생 중 강조 효과 */
.mini-video-item2.highlight {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
  transition: all 0.25s ease;
}

/* 영상 자체도 조금 밝게 */
.mini-video-item2.highlight video {
  filter: brightness(1.1);
}


/* 영상 자체 */
.mini-video-item2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

/* ▷ 플레이 아이콘 */
.play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  opacity: 1;
  transition: 0.2s;
  pointer-events: none;
}

.mini-video-item2:hover .play-icon {
  opacity: 1;
}

.mini-video-item2:hover video {
  filter: brightness(1);
}

/* 🔥 반응형 — 화면이 좁아지면 3개가 가로 정렬 */
@media (max-width: 1024px) {
  .mini-video-container2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  /* ⭐ 가로 3개까지만 배치하고 나머지는 줄바꿈 */
    width: 100%;
    justify-content: left;
    gap: 8px;
    margin: 0 auto;
    position: relative;
    bottom: 0;
    right: 0;
    transform: none;
  }

  .mini-video-item2 {
    flex: 1 1 calc(33.33% - 8px); /* ⭐ 한 줄에 정확히 3개 */
    max-width: calc(33.33% - 8px);
  }
}


/* 🔥 더 작은 화면에서는 크기 축소 */
@media (max-width: 600px) {
  .mini-video-item {
    width: 80%;
  }
}

/****************************************************/

/* 가로 스크롤 전체 영역 */
.rowlineimg {
  width: 100%;
  overflow: hidden;

  position: fixed;
  bottom: 0;
  left: 0;

  background: rgba(255, 255, 255, 0.85); /* 배경 필요 시 */
  backdrop-filter: blur(10px); /* 옵션 */

  padding: 10px 0; /* 이미지가 바닥에 붙지 않게 */
  z-index: 9999;   /* 항상 위에 보이도록 */
}


/* 가로로 이어진 이미지 트랙 */
.imgtrack {
  display: flex;
  gap: 20px;
  padding: 30px;
  cursor: grab;
  user-select: none;
  transition: transform 0.25s ease;
}

.imgtrack:active {
  cursor: grabbing;
}

/* 개별 이미지 */
.item {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

/* 클릭 시 선택된 이미지 효과 */
.item.active {
  transform: scale(1.12);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
}

/* TIP 스타일 */
.tip {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tip.show {
  opacity: 1;
}

.hidden {
  display: none;
}

/*****************************************************************/

/* ===== 하단 고정 바 ===== */
/* ================= Base Vars ================= */
:root{
  --bar-h: 102px;     /* 하단 바 높이 */
  --thumb-h: 100px;   /* 썸네일 높이 */
  --tip-gap: 28px;    /* 이미지 윗변과 말풍선 사이 간격 */
}

/* ================= Bottom Marquee Shell ================= */
.rb-bottom-marquee{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12,12,12,0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* 1024px 미만에서는 숨김 */
@media (max-width: 1023.98px){
  .rb-bottom-marquee{ display: none; }
}

/* 본문이 가려지지 않게 여백 */
@media (min-width: 1024px){
  body{ padding-bottom: var(--bar-h); }
}


/************************************************************/
.putter_img {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: start;
  margin-top: 2vh;
  
}

.putter_img img {
  height: clamp(100px, 14vw, 160px);
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}


@media (max-width:1024px){
  .putter_img img {
  height: 100px; 
}
}

/**************************************************************/
/* ================================
   LAST GRID 기본 레이아웃
================================ */
.last_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  padding: 10px 0;
  z-index: 100;
}

/* 카드 공통 */
.last_grid .card {
  position: relative;
  width: clamp(70px, 12vw, 120px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.45s ease, box-shadow 0.35s ease;
}

.last_grid .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.35s ease;
}

/* 텍스트 오버레이 */
.last_grid .card-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* =======================================
   1) 첫 번째 카드: hover 효과 완전 제거
======================================= */
.last_grid .card:first-child:hover {
  transform: none !important;
  box-shadow: none !important;
}

.last_grid .card:first-child:hover img {
  filter: none !important;
}

.last_grid .card:first-child:hover .card-text {
  opacity: 0 !important;
}

/* =======================================
   2) 세 번째 카드 (swap) : hover 시 이미지 교체만
======================================= */

.card.swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 기본이미지는 보임 */
.card.swap .img-hover {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card.swap .img-default {
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* hover 시 이미지 교체 */
.card.swap:hover .img-default {
  opacity: 0;
}

.card.swap:hover .img-hover {
  opacity: 1;
}

/* 3번째 카드는 기존 hover 효과 제거 */
.card.swap:hover {
  transform: none !important;
  box-shadow: none !important;
}

.card.swap:hover img {
  filter: none !important;
}

.card.swap:hover .card-text {
  opacity: 0 !important;
}

/* =======================================
   3) 나머지 카드 기본 hover 효과
======================================= */
.last_grid .card:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.last_grid .card:hover img {
  filter: brightness(35%);
}

.last_grid .card:hover .card-text {
  opacity: 1;
}

/*******************************************************/

.content.gallery2 h2 {
  color: #3d3d3d; /* 원하는 색상 */
}

/******************************************************/

/* =============================
   🔹 썸네일 리스트 (motion)
============================= */
.motion-list {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.motion {
  position: relative;
   width: clamp(100px, 18vw, 180px); /* 🔥 반응형 핵심 */
  aspect-ratio: 3/4.5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.motion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motion:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}


/* 🔹 Play 아이콘 */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: white;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

.motion:hover .play-icon {
  opacity: 1;
}

/* =============================
   🔥 motion-modal (전체 화면)
============================= */
.motion-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: left;
  z-index: 99999;
}

.motion-modal.active {
  display: flex !important;
}

/* 🔥 왼쪽 50%를 영상으로 채움 */
.motion-video-container {
  width: 50vw;
  height: 86vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔥 오른쪽 위/아래만 라운드 */
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

@media (max-width:1200px){
  .motion-video-container {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
}

.motion-video-container video {
  max-width: 100%;   /* 가로 영상 지원 */
  max-height: 100%;  /* 세로 영상 지원 */
  width: auto;       /* 비율 유지 */
  height: auto;      /* 비율 유지 */
  object-fit: contain;
}

/* 🔥 닫기 버튼 */

.motion-close-btn {
  position: absolute;
  top: 50%;
  right: 45%;
  font-size: 50px;
  color: rgb(208, 255, 0);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100000;
}


@media (max-width:1200px){
.motion-close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 48px;
  color: rgb(208, 255, 0);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100000;
}
}

/************************************************************/

/* 🔥 전체 로딩 화면 */
#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(2px);
}

/* 전체 박스 → 로고 + 로딩바 세트 */
.loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* 로고와 바 사이 여백 */
}

/* 🔥 로고 스타일 */
.loading-logo {
  width: 200px;      /* 요청하신 크기 */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px #39ff14);  /* 네온 그린 glow 효과(선택) */
}

/* 로딩바 컨테이너 */
.loader-wrapper {
  width: 50vw;
  max-width: 420px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 50px;
  overflow: hidden;
}

/* 형광 그린 로딩바 */
.loader-bar {
  width: 0%;
  height: 100%;
  background: #39ff14;
  box-shadow: 0 0 12px #39ff14, 0 0 25px #39ff14;
  border-radius: 50px;
  animation: loadingMove 2.4s ease-in-out infinite;
}

@keyframes loadingMove {
  0% { width: 0%; }
  50% { width: 85%; }
  100% { width: 0%; }
}

/*********************************************************/

.sns-footer {
  width: 100%;
  padding: 40px 0;
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  background: transparent; /* 하단 배경 유지 */
}

.sns-icon {
  display: inline-flex;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.33s ease;
}

@media (max-width:1200px){
.sns-icon {  
  width: 38px;
  height: 38px;  
}
}


.sns-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.9); /* 기본 흑백 모드 */
  transition: 0.33s ease;
}

.sns-icon:hover {
  transform: scale(1.18);
}

.sns-icon:hover img {
  filter: grayscale(0) brightness(1) drop-shadow(0 0 6px #39ff14); /* 네온 글로우 */
}


/********************************/

.footer-info {
  position: fixed;
  left: 24px;
  bottom: 40px;
  z-index: 9999;
  background: transparent !important;
}

.footer-info p {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;

  margin: 0;
  padding: 0;

  font-size: 1.2rem;
  color: rgba(132, 132, 132, 0.65);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: transparent !important;
}

/* 회사명 강조 */
.footer-info .company {
  font-weight: 800;
  color: rgba(148, 148, 148, 0.9);
}

/* 구분자 */
.footer-info .divider {
  opacity: 0.4;
}

/* 전화 / 이메일 */
.footer-info .tel,
.footer-info .email {
  font-weight: 400;
}

@media (max-width: 768px) {
  .footer-info {
    left: 12px;
    bottom: 12px;
  }

  .footer-info p {
    font-size: 0.7rem;
  }
}

/******************************************/
#section-indicator {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

#section-indicator.active {
  animation: sectionFlash 1.4s ease forwards;
}

#section-number {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(120px, 20vw, 350px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(195, 255, 0, 0.85);
  text-shadow:
    0 20px 60px rgba(0,0,0,0.45);
}

@keyframes sectionFlash {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}