@charset "utf-8";


/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}
body, html {
  overflow-x: hidden;
  max-width: 100%;}


:root {
  --bg: #fff;
  --ac: #FFF940;
}
body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Pretendard', sans-serif; 
  transition: all 0.8s;
}
body.on {background: var(--bg); transition: all 0.8s;}


.en {font-family: 'Perpetua Titling MT'; font-weight: 300;}

/* main slides */
.main {height: 100vh; opacity: 0; transform: translateY(100px); transition: all 0.6s ease; position: relative; z-index: 1;}
.main.on {opacity: 1; transform: translateY(0);}
.main .inner {width: 85%; height: auto; margin: 0 auto; position: relative; padding-top: 150px;}
.main .inner .textBox.mobile {display: none;}
.main .inner .textBox h3 {font-size: 21px; font-weight: 400; border-bottom: 1px solid #000; width: 200px;}
.main .inner .slider2 .slides2 .title h2 {font-size: 100px; font-weight: 500; letter-spacing: -3px; }
.main .inner .slider2 .slides2 .title p {font-weight: 600;}
.main .inner .textBox {position: absolute; bottom: 25%; left: 0; z-index: 20;}
.main .inner .slider2 { display: flex; width: 1300px; height: 150px; overflow: hidden;}
/* Visual Slide */
.main .inner .slider { bottom: -30px; right: -60%; z-index: 0; width: 560px; height: 780px; overflow: hidden; position: relative;}

.direction {position: absolute; left:52.5%; bottom: 35%; /* transform: translateY(-50%); */ z-index: 10; display: flex; justify-content: space-between; width: 800px; transition: all 0.5s ease; z-index: 9999;}
.main .arrow {
  font-size: 40px;
  color: #333;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}
.main .arrow.left {left: -10px;}
.main .arrow.right {right: -10px;}
.main .arrow img {width: 65px;}

.main .inner .slider .slides {
  display: flex;
  width: max-content; /* 300px x 4 slides */
  transition: transform 0.8s ease-in-out;
}
.main .inner .slider .slides .poster {
  width: 560px;
  height: 780px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .inner .slider .slides .poster img {
  width: 500px;
  height: 700px;}



  /* 슬라이드 넘버 */
.main .slide-number {
  position: absolute;
  bottom: 130px;
  left: 0;
  width: 100px;
  height: 60px;
  font-family: sans-serif;
}

.main .slide-number .current {
  font-size: 18px;
  font-weight: bold;
  color: black;
}

.main .slide-number .line {
  width: 100%;
  height: 1px;
  background-color: black;
  margin: 8px 0;
}

.main .slide-number .total {
  font-size: 18px;
  color: #aaa;
  position: absolute;
  bottom: -8px;
  right: 0;
}



/* collections */
.collection {position: relative; z-index: 0;}
.collection .top .textBox {width: 85%; height: 100vh; margin: 0 auto; position: relative;transform: translateY(50vh); z-index: 9990;}
.collection .top .title {font-size: 120px; line-height: 1.3;}
.collection .top .title::first-letter {font-size: 150px;}
.collection .top .content {font-size: 20px; line-height: 2;}

.collection img.background {
  margin-right: -25%;
  animation: rotateImage 20s linear infinite;
  transform-origin: center center; /* 중심축 기준 회전 */
  display: block;
  max-width: 100%;
}

@keyframes rotateImage {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.collection .top img.background {position: absolute; top: 0; right: 0; z-index: -100;}
.collection .grid-container {padding-top: 20vh;  max-width: calc(100vw - 40px); margin: 0 auto; gap: 0.5vw;}

.collection .grid-fade-wrapper { position: relative; margin-top: 0px; padding-top: 100px;}

.collection .fade-bottom {position: absolute; bottom: -2vw; left: 0; width: 100%; height: 800px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 70%); pointer-events: none!important;; z-index: 1;}

.collection .load-more {text-align: center; position: relative; z-index: 100; margin: -100px 0 220px 0;}
.collection .load-more .more-button {background: none; border: none; font-size: 18px; cursor: pointer; font-weight: 600; font-size: 20px; color: #717171; letter-spacing: -2px;}


/* 소장품 */
/* container layout */
.collection .columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2vw;
    width: 100%;
    max-width: 110em; /*이미지 넓이 조절 jaeha*/
    margin: 0 auto;
    position: relative;
}

/* Inside one column, lay out all items in column direction */
.collection .column {
    --column-offset: 10vh;
    display: flex;
    flex-direction: column;
    padding: var(--column-offset) 0;
}

.collection figure {
    margin: 1em 0;
}

/* Limit site of the images */
.collection .column__item-imgwrap img {
    /* border-radius: 1em; */
    width: 100%;
    height: auto;
    aspect-ratio: 0.75;
    object-fit: cover;
}

.collection .column__item-imgwrap {
  position: relative;
  filter: brightness(60%);
}


.collection .column__item-imgwrap:hover {
  filter: brightness(100%);
  transition: opacity 0.3s ease;

}

.collection .column__item-caption {
    text-align: center;
}

/* Adjust position of warning */
/* .warning {
	position: fixed;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	max-width: 80em;
	margin: auto;
	z-index: 2;
} */

@supports (animation-timeline: scroll()) {
			/* As we're about to shift content out of .columns, we need it to hide its overflow */
			.collection .columns {
				overflow-y: hidden;
			}

			.collection .column-reverse {
				/* Flip item order in reverse columns */
				flex-direction: column-reverse;
			}

			/* Set up Animation */
			@keyframes adjust-position {
				/* Start position: shift entire column up, but not so that it goes out of view */
				from {
					transform: translateY(calc(-100% + 120vh));
				}

				/* End position: shift entire column down, but not so that it goes out of view */
				to {
					transform: translateY(calc(100% - 180vh));
				}
			}

			/* Hook our animation with the timeline to our columns */
			.collection .column-reverse {
				animation: adjust-position linear forwards;
        animation-timeline: scroll(root block);
        animation-range: entry 0% exit 100%;
			}
		}

.collection .grid-container {
    width: 100%;
    margin: 0 auto;
    /* max-height 대신 height를 자동으로 맞추도록 설정 */
    /* height: auto; */
    /* overflow-y: auto; */
    padding-top: 20vh;
}
.collection .grid-container .columns {
    width: 100%;
    margin: 0 auto;
    height: 250vh;  /* max-height가 아니라 height를 자동으로 설정 */
    /* overflow-y: auto; */
    max-height: 250vh;
}
.collection .grid-fade-wrapper {margin-top: 10vh;}





/* docent intro */
.docent-intro {display: block; width: 85%; text-align: right;margin: 0 auto; opacity: 1; transition: all 0.8s;}
.docent-intro .title {font-size: 60px; padding: 10vw 0 1.25vw;}
.docent-intro .content {font-size: 20px; color: #717171; line-height: 1.5;}
.docent-intro.on {opacity: 0; transition: all 0.8s;}
.docent-intro .title br.on {display: none;}
.docent-intro .title br.on2 {display: none;}


/* docent */

.docent {
  display: grid;
  place-items: center;
  height: calc(100vh + 10vw);
  overflow-y: hidden;
  opacity: 0;
  transition: all 0.8s;
  z-index: 3;
}

.docent.on {opacity: 1; transition: all 1.2s;}

.docent .drag-proxy {
  visibility: hidden;
  position: absolute;
}

.docent .controls {
  position: absolute;
  top: calc(50% + 15vw);
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
  gap: 50vw;
  z-index: 300;
}
.docent .boxes button {
  all: unset;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  transition: transform 0.2s;
}


.docent .boxes button:nth-of-type(1) {
  right: 100%;
}
.docent .boxes button:nth-of-type(2) {
  left: 100%;
}


.docent .boxes {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 800px;
  touch-action: none;
}
.docent .box {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 22vw;
  width: 22vw;
  min-height: 200px;
  min-width: 200px;
  display: none;

}
.docent .box:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-image: var(--src);
  background-size: cover;
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin);
  opacity: 0.75;
}
.docent .box:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--bg) 50%, transparent);
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin) scale(1.01);
  z-index: 2;
}

/* 도슨트 오디오 아이콘 css */
.docent .equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.21vw;

  /* 비율 고정 크기 줄이기 */
  width: clamp(40px, 4vw, 60px);  
  height: clamp(40px, 4vw, 60px);
  transform-origin: bottom right;

  /* 위치 고정 */
  position: absolute;
  right: 1vw;
  bottom: 1vw;
  /* transform: translateX(-50%);  */
  z-index: 100;

  /* GPU 최적화 */
  will-change: transform;
  transition: transform 0.3s ease;

  opacity: 0; 
}
  .docent .equalizer .bar {width: 10%; height: 50%; background: #fff; animation: bounce 1s infinite ease-in-out; opacity:0.7} 

  .docent .equalizer .bar1 { animation-delay: 0s; } 
  .docent .equalizer .bar2 { animation-delay: 0.2s; } 
  .docent .equalizer .bar3 { animation-delay: 0.4s; } 
  .docent .equalizer .bar4 { animation-delay: 0.6s; } 
  .docent .equalizer .bar5 { animation-delay: 0.8s; } 
  
  @keyframes bounce { 
  0%, 100% { height: 0.42vw; } 
  50% { height: 2.6vw; } 
  } 

  .docent .boxes .box .play-btn img{ 
  opacity: 0; 
  width: 15%;
  height: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease; 
  shape-rendering: geometricPrecision;
  } 
  .docent .boxes .box.active:hover .play-btn img { 
  opacity: 0.8;
  } 



  .docent .boxes .box.active .equalizer { 
  opacity: 1; 
  } 
  

.docent .box img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
      object-fit: cover;
}
.docent .box:nth-of-type(odd) {
  background: #000;
  color: #fff;
}
.docent .box:nth-of-type(even) {
  background: #444;
}
@supports (-webkit-box-reflect: below) {
  .docent .box {
    -webkit-box-reflect: below .5vmin linear-gradient(transparent 0 50%, #fff 100%);
  }
  .docent .box:after {content: '';
  position: absolute;
  bottom: 100%; /* 반사영역과 맞춤 */
  left: 50%;
  width: 100%;
  height: calc(100% - .5vmin);
  background: rgba(0, 0, 0, 0.6); /* 덮는 그림자 */
  pointer-events: none; /* 클릭 방해 안 되게 */}
  .docent .box:before {
    display: none;
  }
}
@-webkit-keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}
@keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}


/* 도슨트 헤더 */
.docent {position: relative;}
.docent-header {position: absolute; z-index: 100; top: 5.5vw; left:50%; transform: translateX(-50%); color: #fff; display: flex; justify-content: space-between; width: 85%; 
  align-items: center; transition: all 0.3s ease-in-out;}
.docent-header .text {display: flex; align-items: center; gap: 30px; transition: all 0.3s ease-in-out;}
.docent-header .text .title {font-family: 'Perpetua'; font-style: italic; font-size: clamp(16px, 20.94vw, 80px); font-weight: normal;}
.docent-header .text .content {font-size: 20px; line-height: 1.5;}
.docent-header .text .content span {color: var(--ac);}
.docent-header button { all: unset; cursor: pointer; font-size: clamp(16px, 1.1vw, 20px); color: white; border: 1px solid #5E5E5E; border-radius: 40px; padding: 0.3125em 0.625em;text-align: center; position: relative; overflow: hidden; z-index: 0; transition: all 0.3s ease; }
.docent-header button::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: white; border-radius: 40px; z-index: -1; transition: all 0.3s ease; }
.docent-header button:hover { color: #000; }
.docent-header button:hover::before { width: 100%; }

.docent .fade-bottom {position: absolute; bottom: 0; left: 0; width: 100%; height: 350px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 55%); pointer-events: none; z-index: 1;
}







/* 프로그램 */
.various {width: 100%; opacity: 0; position: relative;  transition: all 0.8s; padding-top: 100px;}
.various.on {opacity: 1; transition: all 0.8s;}
.various .inner {position: absolute; width: 85%; top: 0%; left: 50%; transform: translate(-50%, -50%);}
.various .inner .textBox h2 {font-size: clamp(18px, 15.38vw, 60px); margin-bottom: 20px; color: #fff;}
.various .inner .textBox h2 br.on {display: none;}
.various .inner .textBox p {font-size: 16px; line-height: 1.5; color: #666666;}

/* program slider */
.program.on {opacity: 1; transition: all 0.8s;}
.program {opacity: 0; height: auto; transition: all 0.8s;}
.program .inner {width: 100%; margin: 0 auto;}
.program .inner .textBox {text-align: center; }
.program .inner .textBox h2 {font-size: 60px; color: #fff; padding-top: 170px;}
.program .inner .textBox p {font-size: 16px; color: #666666; padding-top: 20px; line-height: 1.5;}
.program .inner .marquee-wrap {
    display: inline-block;         /* marquee 내부에 inline 요소 */
    white-space: nowrap;           /* 줄바꿈 방지 */
    width: 100%;                   /* 흐르는 만큼 너비 확장 */
    height: 450px;
    overflow: hidden;
    margin-top: 60px;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.program .inner .marquee-wrap.mobile {display: none;}
.program .inner .marquee-wrap li {
    display: inline-block;         /* 이미지 옆으로 나열 */
    padding: 0 10px;
    color: #fff;
    position: relative;
    filter: brightness(70%);
}
.program .inner .marquee-wrap li a {
    display: flex;
    align-items: flex-start;
    justify-content: center; 
    height: 450px;
    width: 300px;
    overflow: hidden;
    position: relative;
}
.program .inner .marquee-wrap li img {
    height: 450px;
    width: auto;
    display: block;
    position: absolute;
}

.program .inner .marquee-wrap li .txt {width: 300px; height: 450px; background: rgba(0,0,0,0.5); position: absolute; left: 0px; top: 0px; z-index: 200; opacity: 0; transition: all 0.5s;}
.program .inner .marquee-wrap li:hover .txt {opacity: 1;}
.program .inner .marquee-wrap li p {font-size: 15px; font-weight: 400; color: #c7c7c7; margin: 20px auto; margin-left: 10px;}
.program .inner .marquee-wrap li p b {font-weight: 500; color: #fff;}

/* splitting */
.motion .char {display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  animation: slide-in-right 0.6s cubic-bezier(.10, 0, .10, 1) forwards;
  animation-delay: calc(0.05s * var(--char-index));}
.program .inner {display: flex; flex-direction: column;}
.program .more-button { align-self: flex-end;}
.program .more-button {position: relative; overflow: hidden; z-index: 1; display: inline-block; margin: 15px 30px 0 auto ; padding: 5px 20px 5px 15px; font-size: 16px; background: #000; color: #fff; border: none; border-radius: 30px; cursor: pointer; transition: color 0.4s ease;}
.program .more-button::before {content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #fff; z-index: -1; transition: width 0.4s ease;}
.program .more-button:hover {color: #000;}
.program .more-button:hover::before {width: 100%;}


/* motion */
.various .inner .textBox.motion h2 {animation: slide-in-right 1s;}
.program.motion .inner .textBox h2 {animation: slide-in-right 1s;}
@keyframes slide-up {
  0% {opacity: 0; transform: translateY(200px);}
  40% {opacity: 0; transform: translateY(200px);}
}

.textBox.motion .content .word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  animation: slide-in-right 0.6s cubic-bezier(.10, 0, .10, 1) forwards;
  animation-delay: calc(0.6s + 0.08s * var(--word-index)); 
  /* h2 끝난 후 딜레이 + 단어 순서 */
}

@keyframes slide-in-right {
  to {opacity: 1; transform: translateX(0);}
}


.program .marquee-right {
  margin: -1vh 0 5vh;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.program .marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marqueeRight 30s linear infinite;
}

.program .marquee-text {
  font-size: 160px;
  font-weight: normal;
  letter-spacing: -0.07em;
  color: #ffffff;
  padding-right: 100px;
  flex-shrink: 0;
}

/* 오른쪽으로 흐름 + 반복 */
@keyframes marqueeRight {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0%);}
}





/* 커서 cursor */
.cursor-follow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: scale(0);
}
@media (max-width: 768px) {
  .cursor-follow {
    display: none;
  }
}
.cursor-follow span {
  width: 8em;
  height: 8em;
  border-radius: 100%;
  background-color: rgba(217, 217, 217, 0.25);
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d9d9d9;
  font-size: 0.7125rem;
}
.cursor-follow img {
  width: 15em;
  top: 0;
  left: 0;
}

/* 소개 페이지들 */
/* .allAbout .teaser {display: flex;} */

.allAbout {overflow: hidden;}

/* 각 블록 (About, Visit, Newsletter) 구성 */
.allAbout .teaser {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 110vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2rem;
}


.allAbout .teaser-title {width: 50%; height: 15.1vw; position: relative; }

/* 제목 스타일 */
.allAbout .teaser-title h2.title {
  font-family: 'Perpetua'; 
  font-size: 140px; 
  font-weight: normal; 
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -5;
  color: #d9d9d9;
  position: absolute; top: 0; right: 50%;
  transition: all 0.6s ease;}
/* .allAbout .teaser-title h2.title::first-letter {color: var(--ac);} */


/* 부제목 (sub-title) */
.allAbout .teaser-title .sub-title {
  display: block;
  font-size: 50px;
  font-weight: 500;
  color: #d9d9d9;
  white-space: nowrap;
  position: absolute; top: 15vh; left: 45%;
  transition: all 0.6s ease;
}


/* 내용 (content) */
.allAbout .teaser-title .content {
  display: block;
  color: #adadad;
  font-size: 20px;
  line-height: 1.5;
  position: absolute; top: 22vh; left: 45%;
  text-align: left;
  white-space: nowrap;
  transition: all 0.6s ease;
}
.allAbout .visit .teaser-title .content br.on2 {display: none;}

/* 예시용 배경 이미지 지정 (선택사항) */
.allAbout .teaser {
  background-attachment: fixed;
  background-size: auto 130vh; /*배경이미지 크기 조절*/
  background-repeat: no-repeat;
  background-position: center center;
}

/* 이미지에 #777 multiply */
.allAbout .teaser.about {
  background-image: url(../img/bg_about.png);
}
.allAbout .teaser.visit {
  background-image: url(../img/bg_visit.png);
}
.allAbout .teaser.newsletter {
  background-image: url(../img/bg_news.png);
}





/* 애니메이션 */
.allAbout .title.motion {animation: slideLeft 1s 0s forwards;}
.allAbout .sub-title.motion {animation: slideRight 1s 0s backwards;}
.allAbout .content.motion {animation: slideRight 1s 0s backwards;}

@keyframes slideLeft {
    0% {transform: translateX(-100px); opacity: 0;}
    30% {transform: translateX(-100px); opacity: 0;}
    100% {transform: translateX(25%); opacity: 1;}
}

@keyframes slideRight {
    0% {transform: translateX(100px); opacity: 0;}
    30% {transform: translateX(100px); opacity: 0;}
    100% {transform: translateX(0px);}
}










/* 반응형 */
/* 공통: 1024px 이하일 때 padding-top 제거 */
@media screen and (min-width: 769px) and (max-width: 1300px) {
  
  .allAbout .newsletter .teaser-title h2.title {right: 20%; font-size: clamp(105px, 13.65vw, 140px);}
}
@media screen and (max-width: 1024px) {
  .collection .grid-container {padding-top: 0;}
  .docent-header {display: flex; flex-wrap: wrap;}
  .docent-header button {order: 2; width: 160px; margin-top: 20px; margin-left: auto;}
  .docent-header .text {order: 1; width: 100%;}
  .allAbout .teaser-title h2.title {top: auto; bottom: 0;}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .allAbout .about .teaser-title h2.title {right: 20%; font-size: clamp(105px, 13.65vw, 140px);}
}


@media screen and (max-width: 800px) {
  .docent-header {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end;}
  .docent-header .text {display: flex; flex-direction: column; gap: 10px; width: calc(100% - 160px); text-align: left;}
  .docent-header button {order: 2; width: 160px; margin: 0;}
  .docent .controls {top: auto; bottom: 25%; transition: all 0.3s ease-in-out;}
  .various .inner .textBox.motion h2 br.on {display: inline;}
}

@media screen and (max-width: 630px) {
  .collection .grid-container {padding-top: 0;}
  .docent-header {display: flex;flex-wrap: wrap;}
  .docent-header button {order: 2; width: 160px; margin-top: 20px; margin-left: auto;}
  .docent-header .text {order: 1; width: 100%; display: flex; flex-direction: column; gap: 10px;}
}


/* 1024px 이하 (태블릿 가로, 작은 노트북) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 1024px 이하 스타일 */
.collection .top .title {font-size: clamp(92px, 11.72vw, 120px);}
.collection .top .content {font-size: clamp(18px, 2vw, 20px);}
.docent-intro .title {font-size: clamp(52px, 5.8vw, 60px)}
.allAbout .teaser-title .sub-title {left: auto; right: -12vw; font-size: 46px;}
.allAbout .teaser-title .content {left: auto; right: -12vw; text-align: right;}
.allAbout .visit .teaser-title .content {width: 500px; white-space: normal;}

/* .allAbout .visit .teaser-title .sub-title {left: 127px;} */
}

/* 768px 이하 (태블릿 세로, 큰 모바일) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* 768px 이하 스타일 */
  .collection .top .title {font-size: clamp(58px, 11vw, 92px);}
  .collection .top .content {font-size: clamp(16px, 2vw, 18px);}
  .docent-intro .title {font-size: clamp(32px, 6vw, 53px);}
  .docent-tm .content {font-size: clamp(14px, 2.9vw, 20px);}
  .allAbout .about .teaser-title h2.title {right: clamp(60px, 22vw, 106px);  font-size: clamp(90px, 18.71vw, 105px);}
  .allAbout .newsletter .teaser-title h2.title {font-size: clamp(70px, 14.5vw, 105px); right: 3vw;}
  .allAbout .teaser-title .sub-title {left: auto; right: clamp(-100px, -14.33vw, -110px); font-size: 6vw; top: 12vh;}
  .allAbout .teaser-title .content {font-size: clamp(16px, 3.33vw, 20px); top: clamp(149px, 22.4vw, 172px); left: auto; right: clamp(-100px, -14.33vw, -110px); text-align: right;}
  

}

/* 480px 이하 (작은 스마트폰 등) */
@media screen and (max-width: 480px) {
  /* .main {display: none;}  *//*문제*/
  /* .collection {display: none;}  *//*문제*/

  .collection .top .title {font-size: 11.8vw;}
  .collection .top .content {font-size: clamp(16px, 4vw, 18px)}
  .docent-intro .title br.on {display: inline;}
  .docent-intro .title {font-size: clamp(16px, 12vw, 57px) ;}
  .docent-intro .content br.on {display: none;}
  .docent-intro .content {font-size: 18px;}
  .various .inner .textBox p br.on {display: none;}
  .allAbout .about .teaser-title h2.title {right: 50%;  font-size: clamp(60px, 18.75vw, 105px);}
  .allAbout .visit .teaser-title h2.title {font-size: clamp(70px, 22vw, 140px ) ; right: 50%;}
  .allAbout .newsletter .teaser-title h2.title {font-size: clamp(50px, 15.625vw, 140px ) ; right: 50%;}
  .allAbout .title.motion {
    animation: slideLeftSmall 1s 0s forwards;
  }

  @keyframes slideLeftSmall {
    0% { transform: translateX(-100px); opacity: 0; }
    30% { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(50%); opacity: 1; }
  }

  .allAbout .teaser-title .sub-title {left: auto; font-size: clamp(23px, 6vw, 28px); top:clamp(60px, 18.75vw, 90px); right:clamp(-64px,-18.75vw, -90px);}
  .allAbout .teaser-title .content {font-size: clamp(16px, 3.33vw, 20px); left: auto; right:clamp(-64px,-18.75vw, -90px); top: clamp(92px, 27.1vw, 130px); white-space: normal;}
  .allAbout .teaser-title .content br.on {display: none;}

  /* program section */
  .program .inner .marquee-wrap.mobile {display: block;}
  .program .inner .marquee-wrap.pc {display: none;}

.program .inner .marquee-wrap.pc {
    display: none; /* PC 마퀴 숨김 */
  }

  .program .inner .marquee-wrap.mobile {
    display: flex;
    flex-direction: column;
    align-items: center;  /* ✅ 가로 가운데 정렬 */
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .program .inner .marquee-wrap.mobile li {
    width: 300px;  /* ✅ 있어야 중앙 정렬 기준 잡힘 */
    height: 450px;
    display: block;
    margin-bottom: 20px; /* 간격 */
  }

.program .inner .marquee-wrap li:nth-child(n+5) {
    display: none; /* 선택 사항 */
}

.program .marquee-track h2 {color: #000;}
.program .more-button {margin: 0 30px 0;}

.docent.on {z-index: 5;}
.various.on {z-index: 100;}

}



/* 메인슬라이드 반응형 */
@media screen and (max-width: 1715px){
  .direction {left:-15px; bottom: 0px; width: 200px; opacity: 0.5;}
  .main .inner .slider {bottom: -30px; right: -60%;}
}
@media screen and (max-width: 1490px){
  .main .inner .slider {bottom: -30px; left: 55%;}
}
@media screen and (max-width: 1420px){
  .main .inner .slider {bottom: -30px; left: 47%;}
}
@media screen and (max-width: 1200px){
  .main .inner .slider {bottom: -30px; left: 42%;}
}
@media screen and (max-width: 1080px){
  .main .inner .slider {bottom: -30px; left: 35%;}
}
@media screen and (max-width: 1030px){
  .main .inner .textBox .slider2 {height: 110px; width: 100%;}
  .main .inner .textBox .slider2 .slides2 .title h2 {font-size: 70px;}
  .main .inner .textBox .slider2 .slides2 {height: max-content;}
  .slide-number {left: 0; bottom: 110px;}
}
@media screen and (max-width: 1030px){
  .main .inner .slider {bottom: -30px; right: 0%}
}
/* 500px 이하 */
@media screen and (max-width:620px){
  .main .inner {width: 100%; margin: 0 auto; height: 100vh;}
  .main .inner .textBox {display: none;}
  .main .inner .textBox.mobile {display: block; position: static; transform: translateX(35px) translateY(-50px); }
  .main .inner .slider {width: 100%;position: static;}
  .main .inner .slide-number {display: none; }
  .main .inner .slider .slides {width: 100%;}
  .main .inner .slider .slides .poster {width: 101%; position: static; transform: translateY(-50px);}
  .main .inner .slider .slides .poster img {width: 100%; height: auto;}
  .main .inner .direction {width: 90%; justify-content: space-between; transform: translateX(40px) translateY(-40px); bottom: -150px; }
  .main .inner .textBox .slider2 {height: 90px; width: 100%;}
  .main .inner .textBox .slider2 .slides2 .title h2 {font-size: 55px;}
}

@media (max-width: 501px) {
  .collection .columns .column {
    display: none;
  }
  .collection .columns .column.column-reverse {
    display: none;
  }
}