:root {
  --bg0: #0b0b10;
  --color-text: #e9e9ee;
  --color-text-muted: rgba(255, 255, 255, 0.78);
  --color-text-subtle: #bdbdcc;
  --color-line: rgba(255, 255, 255, 0.12);
  --color-line-soft: rgba(255, 255, 255, 0.04);
  --color-black: #111111;
  --color-white: #ffffff;
  --color-gold: #65ccda;

  --accent-1: #b85cff;
  --accent-2: #ff7bd1;
  --accent-3: #50d6ff;

  /* --shadow-lg: 0 16px 60px rgba(0, 0, 0, 0.55); */
  --shadow-card: -20px 20px cadetblue;
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 50px 5px;
  --container: min(80%);
  --section-inline: 18px;
  --section-bottom: 26px;
  --header-offset: 90px;
  --fade-ms: 900ms;
  --stagger-y: 20px;
  --hero-poster-top: -450px;

  --fs-base: clamp(14px, 0.9vw, 18px);
  --fs-h1: clamp(40px, 3.6vw, 64px);
  --fs-h2: clamp(28px, 2.8vw, 48px);
  --fs-display: clamp(40px, 3.8vw, 76px);
  --fs-display-lg: clamp(60px, 13.5vw, 100px);
  --fs-kicker: clamp(16px, 0.8vw, 24px);
  --fs-subtitle: clamp(16px, 1.6vw, 28px);
  --fs-lead: clamp(14px, 1.05vw, 18px);
  --fs-body: clamp(14px, 0.95vw, 17px);
  --fs-small: clamp(12px, 0.85vw, 14px);
  --fs-xs: clamp(11px, 0.75vw, 12px);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", Arial, sans-serif;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--bg0);
  overflow: hidden;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {word-break: keep-all;}

.msg_sound_only,
.sound_only {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  border: 0 !important;
  overflow: hidden !important;
}

/* Background */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  will-change: opacity;
  transition: opacity var(--fade-ms) ease;
}

.bg-layer.is-on {
  opacity: 1;
}

.bg-color,
.bg-video,
.bg-yt-wrap,
.bg-overlay {
  position: absolute;
  inset: 0;
}

.bg-color {
  background: #000;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.bg-yt-wrap {
  display: none;
  overflow: hidden;
}

.bg-yt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%) scale(1.08);
}

.bg-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.58));
  pointer-events: none;
  transition: opacity var(--fade-ms) ease;
}

/* Header */

.head-inner,
.l-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.brand small {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
}

.mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(184, 92, 255, 0.9), rgba(255, 123, 209, 0.85), rgba(80, 214, 255, 0.75));
  box-shadow: 0 10px 30px rgba(184, 92, 255, 0.22);
}

/* Scroll container */
main#snap {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  overscroll-behavior: contain;
}

.page {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: var(--header-offset) var(--section-inline) var(--section-bottom);
  border-top: 1px solid var(--color-line-soft);
  background: transparent !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page__inner,
.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.l-grid,
.grid {
  display: grid;
  grid-template-columns: 0.91fr 0.7fr;
  gap: 28px;
  align-items: center;
}

.l-grid--program {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.kicker, .c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  /* font-family: "Libre Baskerville", serif; */
  font-size: 1.4vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  backdrop-filter: blur(10px);
}

.dot,
.c-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 0 0 5px rgba(184, 92, 255, 0.08);
}

.c-title {
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.c-title--hero, .main-h2 {
  /* font-family: "Cinzel", serif; */
  font-size: 3.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 50px;
}

.c-title--section, .main-cine-h2, .main-etc-h2 {
  /* font-family: "Cinzel", serif; */
  font-size: clamp(32px, 3.5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;

}

.c-title--camp,
.main-camp-h2 {
  font-family: "Cinzel", serif;
  font-size: var(--fs-display-lg);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}

.c-subtitle,
.main-h5 {
  margin: 20px 0;
  color: var(--color-gold);
  /* font-family: "Libre Baskerville", serif; */
  font-size: 1.6vw;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lead,
.c-lead {
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 80ch;
}

/* Buttons */
.btn,
.cta,
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: 0.25s ease;
  backdrop-filter: blur(10px);
}

.cta {
  background: linear-gradient(135deg, rgba(184, 92, 255, 0.28), rgba(255, 123, 209, 0.18));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.btn:hover,
.cta:hover,
.c-btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 123, 209, 0.28), rgba(80, 214, 255, 0.16));
}

/* Cards */
.cards {
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.card {
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.card strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-small);
}

.card span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.visual {
  height: 360px;
}

/* Dots */
.dots {
  position: fixed;
  top: 50%;
  right: 50px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(-50%);
}

.dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 0.2s ease;
}

.dots button.active {
  height: 26px;
  background: #fff;
}

#dots.tone-light button {
  background: rgba(0, 0, 0, 0.3);
}

#dots.tone-light button.active {
  background: #000;
}

/* Light tone */
.page,
.page .lead,
.page .card,
.page .card span,
.page .btn {
  transition:
    color var(--fade-ms) ease,
    background-color var(--fade-ms) ease,
    border-color var(--fade-ms) ease,
    box-shadow var(--fade-ms) ease;
}

.page.tone-light {
  color: var(--color-black);
}

.page.tone-light .lead {
  color: rgba(0, 0, 0, 0.65);
}

.page.tone-light .card {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.70);
}

.page.tone-light .card span {
  color: rgba(0, 0, 0, 0.60);
}

.page.tone-light .btn {
  color: var(--color-black);
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55);
}

/* Hero */
.page--hero,
section#hero {
  display: block;
  /* height: 250vh; */
  padding: 0;
  border-top: 0;
}

.hero-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  padding: var(--header-offset) var(--section-inline) var(--section-bottom);
}

.hero-grid,
.page--hero .l-grid {
  width: 100%;
  align-items: center;
}

.hero-copy {
  align-self: center;
  padding-bottom: 100px;
}

.hero-poster-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: var(--hero-poster-top);
}

.hero-poster-img {
  width: min(100%);
  height: auto;
  object-fit: contain;
  border: 0px solid #f5f5f5;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Work */
.page--work .visual {
  min-height: 420px;
}
.page--work h5 {font-size: 1.6vw;
  /* font-family: "Libre Baskerville", serif; */
  font-weight: 500;
  letter-spacing: -1px;
  margin: 20px 0;}
.page--work .line { border: 1px solid #e9e9ee; margin: 30px 0; width: 50px;}
/* Camp */
.page--camp,
section#process {
  display: block !important;
  height: auto !important;
  padding: 0;
  border-top: 0;
}

.page--camp .page__inner,
#process .wrap {
  max-width: 100%;
}

.camp-wrap,
.camp_wrap {
  position: relative;
  z-index: 1;
  margin-top: 100px;
}

.camp-master__item,
.camp_wrap .camp_master .camp_master_list {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  border-top: 0px solid #555;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page--camp h5 {
  font-size: 1.2vw;
  /* font-family: "Libre Baskerville", serif; */
  font-weight: 500;
  margin: 20px 0;
  color: #ffffff;
}
.camp_wrap .camp_master .camp_master_list:nth-child(1) {
  background-image: url('/theme/bidf/img/main_st_img_01.jpg');
}

.camp_wrap .camp_master .camp_master_list:nth-child(2) {
  background-image: url('/theme/bidf/img/main_fringe.jpg');
}

.camp_wrap .camp_master .camp_master_list:nth-child(3) {
  background-image: url('/theme/bidf/img/main_st_img_05.jpg');
}

.camp_wrap .camp_master .camp_master_list:nth-child(4) {
  background-image: url('/theme/bidf/img/main_st_img_05.jpg');
}

.camp_wrap .camp_master .camp_master_list:nth-child(5) {
  background-image: url('/theme/bidf/img/pexels-aerialsergey-18899644.jpg');
}

.camp-inner,
.camp_wrap .camp_master .camp_master_list .camp_inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: var(--container);
  margin: 0 auto;
}


.po_01 {width: 42%;}
.po_02 {
  width: 58%;
}

.camp-name,
.camp_wrap .camp_master .camp_master_list .camp_inner .name {
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.camp-name span,
.camp_wrap .camp_master .camp_master_list .camp_inner .name span {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
}

.camp-flex,
.camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.camp-media,
.camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .left_section {
  width: 35%;
}

.master_img {
  margin-top: 30px;
}

.master_img img {
  width: 100%;
}

.camp-content,
.camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
  width: 65%;
  padding-left: min(4.375vw, 70px);
}

.camp-meta,
.camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .master_info {
  margin-bottom: 20px;
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.5;
}

.camp-text,
.camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section .master_txt {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Program / Swiper */
.page--program .page__inner,
.page--program .wrap {
  max-width: var(--container);
}

.cine-section {
  width: 100%;
  padding: 100px 0;
  overflow: hidden;
}

.cine-container {
  width: 100%;
  padding: 50px 0 !important;
  overflow: visible !important;
}

.page--program .swiper-slide,
.cine-container .swiper-slide {
  width: clamp(280px, 25vw, 420px);
}

.poster-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 30px 0;
  background: #221d30;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.swiper-slide.is-up .poster-card {
  transform: translateY(calc(var(--stagger-y) * -1));
}

.swiper-slide.is-down .poster-card {
  transform: translateY(var(--stagger-y));
}

.poster-card img {
  width: 100%;
  height: 85%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.poster-card:hover img {
  transform: scale(1.08);
}

.poster-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
  opacity: 0.7;
}

.poster-card__caption,
.overlay {
  position: absolute;
  right: 20px;
  bottom: 24px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.poster-card__badge,
.badge-top {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.controls-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin: 20px auto 0;
}

.progress-container {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

#progressBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  transition: width 0.3s ease;
}

.nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.nav-btn:hover {
  border-color: #000;
  background: #000;
  color: #fff;
}

.play-pause-btn {
  background: #f8f8f8;
  font-size: 14px;
}

.counter {
  min-width: 60px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.main-btn {
  display: grid;
  place-items: center;
  width: 200px;
  padding: 20px;
  border-radius: 50px;
  background: #fff;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 50px;
}
.main-btn:hover {
  border-color: #000;
  background: #65ccda;
  color: #fff;
}

/* Footer */
.site-footer {
  padding: 40px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #111;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  margin: 0 auto;
  padding: 60px 0px 22px;
  max-width: var(--container);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
}

.foot-tit {
  /* font-family: "Cinzel", serif; */
  font-size: clamp(30px, 2.8vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.foot-subtit {
  margin: 20px 0;
  color: var(--color-gold);
  /* font-family: "Libre Baskerville", serif; */
  font-size: clamp(16px, 1.2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.footer_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
}

.footer_wrap>ul,
.footer_sns>ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer_wrap>ul li+li::before,
.footer_txt>ul li span+span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 12px;
  background-color: #ddd;
}

.footer_wrap>ul li a,
.footer_txt,
.footerCopyright,
.footerCopyright p,
.footerText li a {
  color: #555;
}

.footer_wrap>ul li a,
.footer_txt {
  font-size: 17px;
}

.footer_txt {
  margin: 30px 0;
  line-height: 1.6;
}

.footerCopyright {
  width: 100%;
  font-size: 15px;
  font-weight: 400;
}

.footerCopyright p {
  margin: 0 0 80px;
  font-size: 15px;
  line-height: 1.4;
}

.footer_sns>ul>li:nth-child(2) {
  margin: 0 10px;
}

.footer_sns>ul>li>a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
}

.footer_sns>ul>li.insta a {
  background: linear-gradient(240deg, #d502c0, #fe016c, #fe6713);
}

.footer_sns>ul>li.youtube a {
  background: red;
}

/* Responsive */
@media (pointer: fine) {
  main#snap {
    scroll-snap-type: none;
  }
}

@media (max-width: 1200px) {
  :root {
    --container: min(88%, 1440px);
    --hero-poster-top: -300px;
  }

  .camp-media,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .left_section {
    width: 42%;
  }

  .camp-content,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
    width: 58%;
    padding-left: 40px;
  }
}

@media (max-width: 980px) {
  :root {
    --container: min(92%, 1440px);
    --header-offset: 76px;
    --hero-poster-top: -120px;
  }

  .l-grid,
  .grid,
  #services .grid,
  #etc .grid,
  .l-grid--program {
    grid-template-columns: 1fr;
    display: grid;
    gap: 18px;
  }

  .hero-copy {
    padding-bottom: 30px;
  }

  .hero-poster-box {
    margin-top: 0;
  }

  .hero-poster-img {
    width: min(100%, 520px);
  }

  .visual {
    height: auto;
  }

  .dots {
    display: none;
  }

  .camp-flex,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex {
    display: block;
    margin-top: 40px;
  }

  .camp-media,
  .camp-content,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .left_section,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
    width: 100%;
  }

  .camp-content,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
    margin-top: 30px;
    padding-left: 0;
  }

  .controls-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .progress-container {
    order: 2;
    width: 100%;
  }

  .nav-btns {
    order: 1;
    justify-content: flex-start;
  }

  .cine-container .swiper-slide,
  .page--program .swiper-slide {
    width: 75vw;
  }

  .footer_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .page {
    min-height: auto;
    padding-right: 16px;
    padding-left: 16px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .page--hero,
  section#hero {
    height: auto;
  }

  .hero-sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    padding-top: calc(var(--header-offset) + 20px);
    padding-bottom: 40px;
  }

  .camp-wrap,
  .camp_wrap {
    margin-top: 0;
  }

  .camp-master__item,
  .camp_wrap .camp_master .camp_master_list {
    position: relative;
    height: auto;
  }

  .camp-inner,
  .camp_wrap .camp_master .camp_master_list .camp_inner {
    width: min(92%, 720px);
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section .master_txt>br {
    display: none;
  }

.po_01 {
  width: 100%;
}

.po_02 {
  width: 100%;
}

}

@media (max-width: 576px) {
  :root {
    --section-inline: 14px;
    --section-bottom: 20px;
    --hero-poster-top: 0px;
  }

  .kicker,
  .c-eyebrow {
    font-size: 16px;
  }

  .c-subtitle,
  .main-h5 {
    margin: 14px 0;
  }

  .camp-text,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section .master_txt {
    font-size: 15px;
  }

  .nav-btn {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .footer_wrap>ul,
  .footer_sns>ul {
    gap: 8px;
  }

  .footer_wrap>ul li+li::before,
  .footer_txt>ul li span+span::before {
    margin: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main#snap {
    scroll-behavior: auto;
  }

  .bg-layer,
  .bg-overlay,
  .page,
  .page * {
    transition: none !important;
  }
}


@media (max-width: 980px) {

  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    overflow: auto !important;
  }

  main#snap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior: auto !important;
  }

  .page {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding: 64px 18px 48px !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  .dots {
    display: none !important;
  }

  /* 공통 2컬럼 -> 1컬럼 */
  .l-grid,
  .grid,
  #services .grid,
  #etc .grid,
  .l-grid--program,
  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    /* padding-top: 100px; */
  }

  .visual {
    height: auto !important;
    min-height: 0 !important;
  }

  /* HERO 일반 페이지화 */
  .page--hero,
  section#hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .hero-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    padding: calc(var(--header-offset) + 18px) 18px 36px !important;
  }

  .hero-copy {
    padding-bottom: 20px !important;
  }

  .hero-poster-box {
    margin-top: 20px !important;
    justify-content: flex-start !important;
  }

  .hero-poster-img {
    width: min(100%, 520px) !important;
    transform: none !important;
    will-change: auto !important;
    box-shadow: -10px 10px cadetblue;;
  }

  .main-h2 {
    font-size: clamp(36px, 11vw, 58px) !important;
    line-height: 1.02 !important;
  }

  .main-h5,
  .page--work h5,
  .page--camp h5 {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* WORK */
  .page--work .visual {
    min-height: 0 !important;
  }

  /* CAMP 일반 페이지화 */
  .page--camp,
  section#process {
    padding: 0 !important;
  }

  .camp-wrap,
  .camp_wrap {
    margin-top: 0 !important;
  }

  .camp-master__item,
  .camp_wrap .camp_master .camp_master_list {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 56px 0 !important;
    background-position: center center !important;
  }

  .camp-inner,
  .camp_wrap .camp_master .camp_master_list .camp_inner {
    display: block !important;
    width: min(92%, 720px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .main-camp-h2 {
    font-size: clamp(44px, 1vw, 74px) !important;
    line-height: 0.98 !important;
  }

  .camp-flex,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex {
    display: block !important;
    margin-top: 24px !important;
  }

  .camp-media,
  .camp-content,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .left_section,
  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section {
    margin-top: 20px !important;
  }

  .camp_wrap .camp_master .camp_master_list .camp_inner .camp_maser_flex .right_section .master_txt br {
    display: none !important;
  }

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}


  /* PROGRAM */
  .cine-section {
    padding: 56px 0 0 !important;
  }

  .cine-container {
    padding: 36px 0 56px !important;
    overflow: visible !important;
  }

  .cine-container .swiper-slide,
  .page--program .swiper-slide {
    width: 82vw !important;
  }

  .controls-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .progress-container {
    order: 2;
    width: 100%;
  }

  .nav-btns {
    order: 1;
    justify-content: flex-start !important;
  }

  /* ETC / 후원 */
  #etc .grid>div:first-child {
    /* height: 240px !important;
    min-height: 240px !important; */
  }

  .sponser_wrap {
    padding: 40px 0 !important;
  }

  .sponser .sponser_list {
    gap: 12px !important;
  }

  .sponser .sponser_list li {
    width: calc(50% - 6px) !important;
  }

  .sponser .sponser_list li img {
    padding: 10px !important;
  }

  /* 모바일에서는 배경 영상/유튜브 숨김 */
  .bg-video,
  .bg-yt-wrap {
    display: none !important;
  }
}
@media (max-width: 980px) {
  #bg {
    display: none !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .page {
    background: #ffffff !important;
    color: #111111 !important;
  }

  /* 1. Hero */
  #hero {
    background: #ffffff !important;
    color: #111111 !important;
  }

  #hero .lead,
  #hero p {
    /* color: rgba(255, 255, 255, .78) !important; */
    color: rgba(0, 0, 0, 0.65);
  }

  #hero .main-h5,
  #hero .kicker {
    color: #65CCDA !important;
  }

  /* 2. About */
  #work {
    display: none !important;
    background: #F7F6F2 !important;
    color: #111111 !important;
  }

  #work .lead,
  #work p,
  #work h5 {
    color: rgba(17, 17, 17, .76) !important;
  }

  #work .line {
    border-color: rgba(17, 17, 17, .16) !important;
  }

  /* 3. AK21 / Camp */
  #process {
    background: #17171D !important;
    color: #ffffff !important;
  }

  #process .lead,
  #process p,
  #process h2,
  #process h3,
  #process h4,
  #process h5,
  #process .name,
  #process .master_info,
  #process .master_txt {
    color: #ffffff !important;
  }

  /* 4. Program */
  #services {
    background: #F1F0EB !important;
    color: #111111 !important;
  }

  #services .lead,
  #services p {
    color: rgba(17, 17, 17, .74) !important;
  }

  /* 5. Sponsor */
  #etc {
    background: #FFFFFF !important;
    color: #111111 !important;
  }

  #etc .panel {
    background: #fff;
  }
  .sponser .inner {
    max-width: inherit;
    padding: 0 !important;
  }

  /* 공통 포인트 컬러 */
  .main-h5,
  .foot-subtit,
  .kicker {
    color: #65CCDA;
  }

.main-btn {
  display: grid;
  place-items: center;
  width: 100px;
  padding: 10px;
  border-radius: 50px;
  background: #fff;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 50px;
}

}
@media (min-width: 981px) {

  #hd,
  header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    transform: translateY(0);
    transition: transform .35s ease;
    will-change: transform;
  }

  #hd.is-hidden,
  header.is-hidden {
    transform: translateY(-100%);
  }

  #hd,
  header,
  #gnb,
  .head-inner,
  .gnb_wrap,
  .nav-wrap {
    overflow: visible !important;
  }

  #gnb .gnb_2dul,
  .submenu,
  .sub-menu,
  .hd-submenu,
  .nav-submenu {
    z-index: 10000 !important;
  }

  #bg {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  main#snap {
    position: relative;
    z-index: 1;
  }

  .dots {
    z-index: 50;
  }


}