@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-size: inherit; font-weight: 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}

@font-face {
  font-family: 'Aspekta';
  src: url('../font/Aspekta-Font/aspekta-main/fonts/webfonts/Aspekta-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('../font/Aspekta-Font/aspekta-main/fonts/webfonts/Aspekta-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 공통요소 - section txt-box */
body {font-family: 'Neue Haas Grotesk Display Pro',sans-serif; overflow-x: hidden; font-weight: 300; background: #f5f6fb;}
.text-box .tit {font-size: clamp(56px, 13vw, 200px); line-height: 1;}
.text-box .sub-tit {font-family: 'Pretendard',sans-serif; font-size:clamp(14px, 1vw, 16px)}

/* 공통요소 - section 화면 */
section {width: 100%; overflow: hidden;}
.inner {width: 95%; margin: 8vh auto; letter-spacing: -1px;}
.inner2 {width: 100%; padding: 200px 100px;}

/* 공통 btn */
/* dark-btn */
.dark-btn.a {display: inline-flex; align-items: center;justify-content: center; font-family: 'Pretendard', sans-serif; font-size: 20px; color: #F5F6FB; padding: 10px 12px 12px 30px; border-radius: 100px; font-weight: 500; border: 1px solid rgba(245, 246, 251,0.28); white-space: nowrap; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px)}
.dark-btn.a span {width: 44px; height: 44px; background: #5F5F61; border-radius: 50%; position: relative; margin-left: 16px;}
.dark-btn.a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* light-button-1920 */
.light-btn.a {background: rgba(9, 9, 9, 0.14); display: inline-flex; align-items: center;justify-content: center; font-family: 'Pretendard', sans-serif; font-size: 20px; color: #434343; padding: 10px 12px 12px 30px; border-radius: 100px; font-weight: 500;  white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(6px)}
.light-btn.a span {width: 44px; height: 44px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 16px;}
.light-btn.a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* hover효과 */
.light-btn:hover {background: rgba(9, 9, 9, 0.3);}

/* visual */
.visual {width: 100vw; height: 100vh; position: relative; overflow: hidden;}
.visual .visual-inner .dance {width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 0; top: 0;}
.visual .visual-inner .dance source {max-width: 100%; height: auto;}
.visual .visual-inner .video-txt-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.intro .inner .intro-box4 .text-box.motion {animation: text .5s ease-out forwards;}
.intro .inner .intro-box2 .topBox img.motion {animation: text2 .5s ease-out forwards;}
.intro .inner .intro-box2 .bottomBox img.motion {animation: text3 .5s ease-out forwards;}
.lineup .inner .text-box.motion {animation: text .5s ease-out forwards;}
.lineup .inner .card-wrap.motion {animation: text .5s ease-out forwards;}
.upcoming .inner .text-box.motion {animation: text .5s ease-out forwards;}
.upcoming .inner .upcoming-wrap.motion {animation: text .5s ease-out forwards;}
.bottom-bookclass .inner .title.motion {animation: text .5s ease-out forwards;}
.location .inner .text-box.motion {animation: text .5s ease-out forwards;}
.location .inner .studio-wrap.motion {animation: text .5s ease-out forwards;}

.intro .inner .video-box.motion {animation: from-right .5s ease-out forwards;}
.intro .inner .box3-box .video-box.motion {animation: from-left .5s ease-out forwards;}

@keyframes textAni-fast {
  0% { opacity: 0.7; transform: translateY(40px); }
  30%{ opacity: 1; transform: translateY(0); }
}

@keyframes text {
  0% { opacity: 0; }
  30%{ opacity: 0; transform: translateY(60px); }
}

@keyframes text2 {
  0% { opacity: 0; }
  30%{ opacity: 0; transform: translateX(70px);}
}

@keyframes text3 {
  0% { opacity: 0; }
  30%{ opacity: 0; transform: translateX(-70px);}
}

@keyframes from-right {
  0% { opacity: 0; }
  30%{ opacity: 0; transform: translateX(30px); }
}

@keyframes from-left {
  0% { opacity: 0; }
  30%{ opacity: 0; transform: translateX(-30px); }
}

/* intro */
.intro {width: 100%; height: auto; position: relative; min-height: 220vh;}
.intro .inner {padding-top: 100px; position: relative;}
.intro .inner .intro-box1 {color: #f5f6fb; display: flex; position: relative; z-index: 10;  margin-bottom: 25vh;}
.intro .inner .intro-box1 .text-box {position: relative;}
.intro .inner .intro-box1 .text-box .tit {line-height: 1; font-weight: 700; font-size: 16.15vw;;}
.intro .inner .intro-box1 .text-box .tit .push {padding-left: 8%;}
.intro .inner .intro-box1 .text-box .sub-tit {width: min(35vw,475px); color: #a7a7a7; position: absolute; left: 10.2%; bottom: -52px; letter-spacing: 0; line-height: 1.3;} 
.intro .inner .intro-box1 .text-box .sub-tit-out {position: absolute; left: 84%; top: -8%; font-family: 'Pretendard',sans-serif; font-size: 16px; color: #a7a7a7; width: 100%; letter-spacing: 0;}
.intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(2) {padding-left: 6%;}
.intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(3) {padding-left: 3%; font-style: italic;}
.intro .inner .video-box {display: block;}
.intro .inner .video-box .video1 {position: absolute; transform: rotate(-30deg) translateY(-50%); width: min(80vw,1461px); aspect-ratio: 1 / 1; right: -41%;}
.intro .inner .video-box .video1 video {width: 100%; height: auto;}

/* spliting ani */
.split span {display: inline-flex; flex-wrap: nowrap; white-space: nowrap;}
.split span .char {flex: 0 0 auto;}

.split {letter-spacing: 0.08em; ; word-spacing: none;}
.split .char {display: inline-block; margin: 0; padding: 0; line-height: inherit; letter-spacing: 0; font-kerning: normal; white-space: pre; opacity: 0; transform: translateY(20px);}

.split.is-active .char {
  animation: charUp 1s ease-out forwards;
  animation-delay: calc(var(--char-index) * 0.09s);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 0.8s;
  /* opacity: 0.7; */
}

.split .whitespace {width: 0;}

@keyframes charUp {
  to {opacity: 1; transform: translateY(0);}
}

.intro .inner .intro-box2 {margin: clamp(400px, 79.7vw, 1320px) 0 clamp(-6px, -6.4vw, 97px); width: 100%; z-index: 10; position: relative;}
.intro .inner .intro-box2 .topBox {display: block; z-index: 4;}
.intro .inner .intro-box2 .topBox img {width: 60%; max-width: 998px; height: auto;z-index: 10;}
.intro .inner .intro-box2 .bottomBox {z-index: 3;  display: flex;} 
.intro .inner .intro-box2 .bottomBox img {width: 40%; max-width: 998px; height: auto; margin-right: 12%;}
.intro .inner .intro-box2 .text-mini-box {display: flex; color: #f5f6fb; margin-top: 9%; box-sizing: border-box; height: auto; width: 850px; position: absolute; right: 10%;  font-family: 'Pretendard',sans-serif;} 
.intro .inner .intro-box2 .text-mini-box .num {font-size: 14px; padding:0 10px 10px;}
.intro .inner .intro-box2 .text-mini-box .sub-txt {display: flex;  letter-spacing: normal; font-weight: 400; line-height: 1;}
.intro .inner .intro-box2 .text-mini-box .name {font-size: 26px; margin-right: 26px;}
.intro .inner .intro-box2 .text-mini-box .sub-tit {width: 700px; font-size: 16px; color: #777777; line-height: 1.3; letter-spacing: -1px;}

.wrap-1m {position: relative; width: min(100vw,1500px); height: auto; cursor: pointer; margin-left: 35%; z-index: 3; aspect-ratio: 1348 / 858;}
.wrap-1m .noise { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;}
.wrap-1m .clean { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; padding-right: 20px;
  mask-image: radial-gradient(circle 0px at 0 0, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 0px at 0 0, transparent 100%);
}
.wrap-1m:hover .clean {opacity: 1;}

/* cusor */
.cursor-ui {position: fixed; top: 0; left: 0 ;pointer-events: none; z-index: 9999; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.2s ease;}
.cursor-ui.is-active {opacity: 1;}
.cursor-text {font-size: 24px; letter-spacing: 0; font-weight: 800; color: #000; mix-blend-mode: difference;}

.intro .inner .box3-box {display: flex; justify-content: space-between; gap: 4%; position: relative; z-index: 1;}
.intro .inner .box3-box .video-box {position: relative; width: 200vw; height: 136vh; z-index: 1;}
.intro .inner .box3-box .video2 {position: absolute; transform: translateY(-50%); width: 100%; height: 100%; left: -30%; top: 60%;}

.intro .inner .box3-box .intro-box3 {position: absolute; right: 50%; top: 10%; z-index: 10;}
.intro .inner .box3-box .intro-box3 .text-box.right {display: flex; color: #f5f6fb; position: relative;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {display: flex; position: absolute; z-index: 3; font-family: 'Pretendard',sans-serif; bottom: -400px; left: 0;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .num {font-size: 14px; position: absolute; left: -23px; top: -8px; letter-spacing: 1px; font-weight: 500;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .name {font-size: 26px; margin-right: 26px; line-height: 1; font-weight: 400;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {font-size: 16px; color: #777777; width: 585px; line-height: 1.3; letter-spacing: -1px; display: block;}

.intro .inner .intro-box4 {width: 100%; display: flex; color: #f5f6fb; justify-content: center;  gap: 20vw; margin: 25vh 0 15vh; z-index: 10; position: relative;}
.intro .inner .intro-box4 .float {width: min(20vw,384px); margin: 95px auto;}
.intro .inner .intro-box4 .float img {display: block; max-width: 100%; height: auto;}
.intro .inner .intro-box4 .rotate {width: 100%; transform: rotate(80deg);}
.intro .inner .intro-box4 .heart {position: relative;}
.intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 60px; margin-bottom: 134px; font-weight: 600; line-height: 1.45;} 
.intro .inner .intro-box4 .heart.box1 .text-box .title-box .num {font-size: 20px; font-family: 'Pretendard',sans-serif; position: absolute; left: -40px; top: auto; letter-spacing: 1px;}
.intro .inner .intro-box4 .heart.box2 .text-box .title-box .num {font-size: 20px; font-family: 'Pretendard',sans-serif; position: absolute; left: -40px; top: auto;}
.intro .inner .intro-box4 .heart.box2 .float.rotate {transform: rotate(80deg);}
.intro .inner .intro-box4 .heart .text-box .name {font-size: 26px; margin-bottom: 26px; font-weight: 600; letter-spacing: 0;}
.intro .inner .intro-box4 .heart .text-box .sub-tit {font-size: 16px; font-family: 'Pretendard',sans-serif; color: #a7a7a7; margin-bottom: 20px; line-height: 1.3; letter-spacing: -2%;}

/* heart animation */
@keyframes floatUpDown {
  0%   { transform: translateY(0);}
  50%  { transform: translateY(-30px);}
  100% { transform: translateY(0); }
}

.intro .inner .intro-box4 .float {animation: floatUpDown 5s ease-in-out infinite;}
.intro .inner .intro-box4 .heart.box1 .float {animation-delay: 0s;}
.intro .inner .intro-box4 .heart.box2 .float {animation-delay: -2.5s;}

@keyframes puff-in-center{
  0%{transform:scale(2);filter:blur(4px);opacity:0.7}
  100%{transform:scale(1);filter:blur(0);opacity:1}
}

.puff-in-center {opacity: 0;}
.puff-in-center.is-active {animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both}

/* class lineup */
.lineup {overflow: hidden; position: relative; padding-bottom: 120px; margin: 25vh 0;}
.lineup .inner {margin: 0 auto 99px;}
.lineup .inner .text-box {padding-top: 100px; margin-bottom: 50px; color: #0a0a0a; display: flex; align-items: end;}
.lineup .inner .text-box .tit {font-weight: 600; letter-spacing: 0;}
.lineup .inner .text-box .sub-tit {color: #777777; margin-left: 20px; margin-bottom: 25px; font-family: 'Pretendard',sans-serif;}
.lineup .inner .card-wrap .cards {color: #f5f6fb; display: flex;  gap: 3vw; transition: transform 0.3s ease;}
.lineup .inner .card-wrap .cards .card {padding: clamp(40px, 4vw, 58px) clamp(30px, 3vw, 50px); width: min(42vw,545px); height: auto; border-radius: 25px; background: #000; transition: transform 0.35s ease; transform-origin: center bottom; position: relative; z-index: 1;  flex-shrink: 0;}
.lineup .inner .card-wrap .cards .card .top-box {display: flex; justify-content: space-between; font-size: clamp(32px, 3.5vw, 58px); margin-bottom: 80px; font-weight: 600;}
.lineup .inner .card-wrap .cards .card .skill-box {margin-bottom: 80px;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .skill {font-size: clamp(16px, 1.6vw, 25px); padding-bottom: 14px; font-weight: 500; line-height: 1; letter-spacing: normal;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar {display: block; width: 100%; height: 5px; background: #484848; border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 38px; position: relative; overflow: hidden;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar:after{content: ""; position: absolute; left: 0; top: 0; height: 100%; background: #f5f6fb; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar.persent1::after {width: 70%;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar.persent2:after {width: 65%;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar.persent3:after {width: 55%;}
.lineup .inner .card-wrap .cards .card .dark {display: flex; justify-content: flex-end;}

.lineup .inner .card-wrap .navbtn {position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(219, 219, 219, 0.6); border: 1px solid rgba(10,10,10,0.3); color: #fff; font-size: 32px; cursor: pointer; z-index: 10; backdrop-filter: blur(6px);}
.lineup .inner .card-wrap .navbtn img {width: 12px; margin: auto;}
.lineup .inner .card-wrap .navbtn.prev { left: -35px; }
.lineup .inner .card-wrap .navbtn.next { right: -35px; }
.lineup .inner .card-wrap .navbtn:hover {background: rgba(255,255,255,0.8);}

  /* upcoming */
  .upcoming {width: 100%; height: auto; margin-bottom: 45vh; display: flex; justify-content: center;}
  .upcoming .inner .text-box {display: flex; position: relative; margin-bottom: 50px; color: #0a0a0a; font-weight: 600; align-items: end;}
  .upcoming .inner .text-box .sub-tit {color: #777777; font-weight: 300; padding: 0 0 20px 20px;}
  .upcoming .inner .upcoming-wrap {gap: 25px; display: grid; color: #0a0a0a; align-items: stretch; grid-template-columns: 1.3fr 1.5fr;}
  .upcoming .inner .upcoming-wrap .clip {overflow: hidden; border-radius: 30px; width: 100%; height: 100%;}
  .upcoming .inner .upcoming-wrap .clip .left-human {width: 100%; aspect-ratio: 725 / 936; overflow: hidden; position: relative; height: 100%;}
  .upcoming .inner .upcoming-wrap .clip .left-human img {width: 100%; height: 100%; object-fit: cover;object-position: center; transition: all 0.5s; inset: 0; position: absolute;}
  .upcoming .inner .upcoming-wrap .upcoming-box {display: grid; grid-template-rows: 1fr 1fr; gap: 25px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box {display: flex; gap: 25px;} 
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purpleclip {overflow: hidden; width: 100%; height: auto; border-radius: 20px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox {background: url(../img/pop-up-date.png) no-repeat center / cover; width: 100%; height: 100%; transition: all 0.5s;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box {padding: clamp(24px, 4vw, 70px) 0 0 clamp(24px, 4vw, 70px);display: inline-block; color: #f5f6fb;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .time {font-size: clamp(14px, 1.2vw, 20px); margin-bottom: 10px; font-family: 'Pretendard', sans-serif;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .loca {font-size: clamp(28px, 3vw, 52px);}

  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox {position: relative; overflow: hidden; width: 100%; border-radius: 20px;height: auto; }
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox .youtube {width: 100%; height: 100%; transition: all 0.5s; object-fit: cover; object-position: center; }
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox a {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 75px; height: 80px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox a .playicon {width: 100%; height: 100%;}

  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box {width: 100%; height: auto; padding: clamp(20px, 3vw, 70px); background: #fff; border: 1px solid #d2d2d2; border-radius: 20px;  height: auto; display: flex; flex-direction: column; justify-content: space-between;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 {display: flex; justify-content: space-between; margin-bottom: 53px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 img {width: clamp(72px, 12vw, 150px);}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 .pop-up {font-size: clamp(16px, 2vw, 26px); text-align: right; font-family: 'Pretendard', sans-serif;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 .pop-up .kor {font-weight: 400; margin-bottom: 16px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 .pop-up .genre {font-weight: bold;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 {display: flex; justify-content: space-between; align-items: end;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .tit {font-size: clamp(28px, 3vw, 52px); font-weight: 600;}

  .upcoming .inner .upcoming-wrap .left-human img:hover {transform: scale(1.05); z-index: 10;}
  .upcoming .inner .upcoming-wrap .top-box .purplebox:hover {transform: scale(1.05); z-index: 10;}
  .upcoming .inner .upcoming-wrap .top-box .playbox .youtube:hover {transform: scale(1.05); z-index: 10;}

/* bottom bookclass */
.bottom-bookclass {background: #000; color: #f5f6fb; width: 100%; height: auto; will-change: clip-path; overflow: hidden; will-change: clip-path; padding-top: 200px;padding-bottom: 30vh;} 
.bottom-bookclass .inner {margin-bottom: 0;}
.bottom-bookclass .inner .title { font-size: clamp(56px,10vw,150px); text-align: center; padding-top: 143px; line-height: 1; margin-bottom: 80px; font-weight: 600; letter-spacing: 0;}
.bottom-bookclass .inner .dark {display: flex; justify-content: center; margin-bottom: 120px;}
.marquee-wrap {padding-bottom: 100px; overflow: hidden;}
.marquee-inner {display: flex; gap: 2vw; animation: marqueeMove 12s linear infinite; width: max-content;}
.marquee-inner li {position: relative; white-space: nowrap; flex: 0 0 160px;  font-size: 16px; font-family: 'Pretendard',sans-serif; }
.marquee-inner li:after {content: '';  position: absolute;}
.marquee-inner li img {height: 200px; object-fit: contain; width: auto;}
.marquee-inner li p {margin-top: 4px; text-align: right;}

@keyframes marqueeMove {
    0% {transform: translateX(0);}
    100% {transform: translateX(-30%);}
}

@keyframes bounce-in-top 
{0%{transform:translateY(-700px);animation-timing-function:ease-in; opacity:0}
20%{transform:translateY(0);animation-timing-function:ease-out; opacity: 1;}
45%{transform:translateY(-100px);animation-timing-function:ease-in}
62%{transform:translateY(0);animation-timing-function:ease-out}
71%{transform:translateY(-30px);animation-timing-function:ease-in}
80%{transform:translateY(50px);animation-timing-function:ease-out}
85%{transform:translateY(105px);animation-timing-function:ease-in}
100%{transform:translateY(110px);animation-timing-function:ease-out; opacity: 0;}}

.bounce-in-top {width: 100px; height: 100px; background: #000; margin: 0 auto; border-radius: 50%; position: relative; z-index: 10;}
/* .bounce-in-top.is-active {animation: bounce-in-top 1.1s both;} */

/* @keyframes shake-top {
  0%,100% {transform:rotate(0deg);transform-origin:50% 0}
  10% {transform:rotate(2deg)}
  20%,40%,60% {transform:rotate(-4deg)}
  30%,50%,70% {transform:rotate(4deg)}
  80% {transform:rotate(-2deg)}
  90% {transform:rotate(2deg)}}

.shake-top{transform-origin: 50% 0;}
.shake-top.is-active {animation: shake-top .8s cubic-bezier(.455,.03,.515,.955);} */

/* location */
.location {color: #f5f6fb; position: relative; z-index: 10; width: 100%;  height: auto; padding: 20vh 0 15vh;}
.location .inner {margin-bottom: clamp(80px, 8vh, 150px);}
.location .inner .text-box {text-align: center; margin-bottom: clamp(40px, 8vh, 80px);}
.location .inner .text-box {text-align: center; margin-bottom: clamp(40px, 8vh, 80px);}
.location .inner .text-box .tit {font-size: clamp(64px, 7.8vw, 150px); margin-bottom: 10px; font-weight: 600;}
.location .inner .text-box .sub-tit {color: #a7a7a7; font-family: 'Pretendard',sans-serif; }
.location .inner .studio-wrap {display: grid; justify-content: center; gap: 25px; align-items: stretch;  grid-template-columns: auto auto;}
.location .inner .studio-wrap .clip {overflow: hidden; border-radius: 20px; height: auto; flex: 1; width: 100%;}
.location .inner .studio-wrap .clip .left {width: min(52vw,747px); height: auto; overflow: hidden; aspect-ratio: 747 / 526;}
.location .inner .studio-wrap .clip .left img {width: 100%; border-radius: 20px; transition: all 0.5s; }

.location .inner .studio-right { display: flex; flex-direction: column; height: auto;}
.location .inner .studio-right .clip .top-box {display: flex; gap: clamp(16px, 2vw, 25px); margin-bottom: clamp(16px, 2vw, 25px);}
.location .inner .studio-right .clip .top-box .small {width: 100%;aspect-ratio: 309 / 235; height: auto; border-radius: 18px; overflow: hidden;}
.location .inner .studio-right .top-box .small img {width: 100%; height: 100%; transition: all 0.5s; border-radius: 20px;}
.location .inner .studio-right .clip .bottom-box {width: 100%; height: auto; overflow: hidden; flex: 1;}
.location .inner .studio-right .clip .bottom-box img {width: 100%; height: 100%; transition: all 0.5s; scale: 1.02;}
/* .location .bg {width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: -1;}
.location .bg img {width: 100%} */

.location .inner .studio-wrap .left img:hover {transform: scale(1.1); z-index: 10;}
.location .inner .studio-wrap .small img:hover {transform: scale(1.1); z-index: 10;}
.location .inner .studio-wrap .bottom-box img:hover {transform: scale(1.1); z-index: 10;}

.gradaition-bg {width: 100%; height: 700px;
  background: linear-gradient(
    to top,
    #F5F6FB 0%,
    #9A9B9E 30%,
    #49494B 60%,
    #000000 100%
  );
}

/* footer */
footer {width: 100%; text-align: right; height: auto; color: #0a0a0a;}
footer .inner {margin: 100px auto 0;}
footer .inner .top-box {display: flex; justify-content: right; gap: 200px; margin-bottom: 123px;}
footer .inner .top-box li p.tit {font-size: 20px; margin-bottom: 27px; font-weight: 600;}
footer .inner .top-box li p {font-size: 16px; font-family: 'Pretendard',sans-serif;}
footer .inner .bottom-box {text-transform: uppercase; margin-bottom: 92px;}
footer .inner .bottom-box .mail-box {font-size: clamp(32px,6vw,90px); margin-bottom: 77px; font-family: 'Cabinet Grotesk', sans-serif; line-height: 1;}
footer .inner .bottom-box .name {margin-bottom: 83px; font-size: 345px; font-family: 'Aspekta', sans-serif; font-weight: 600; line-height: 1;}
footer .inner .bottom-box .name {margin-bottom: 83px; font-size: 345px; font-family: 'Aspekta', sans-serif; font-weight: 600; line-height: 1;}
footer .inner .bottom-box .topBtn {font-size: 30px; font-family: 'Pretendard',sans-serif; font-weight: 400; display: flex; align-items: center; justify-content: right;}
footer .inner .bottom-box .topBtn img {margin-left: 14px;}

@media (max-width: 1800px){
.intro .inner .intro-box2 .text-mini-box {right: -8%;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {left: 4%;}
footer .inner .bottom-box .name {font-size: clamp(189px, 18.9vw, 340px);}
}

@media (max-width: 1600px){
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {left: -50px;}
}

/* 1400 */
@media (max-width: 1400px){
  html{width: auto;}
  .br-none{display: none;}
  .inner { margin: 6vh auto;}
  /* light-button-1024 */
.light-btn.b {background: rgba(9, 9, 9, 0.14); display: inline-flex; align-items: center;justify-content: center; font-family: 'Pretendard', sans-serif; font-size: 20px; color: #434343; padding: 10px 10px 10px 25px; border-radius: 100px; font-weight: 500;  white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(6px)}
.light-btn.b span {width: 40px; height: 40px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 14px;}
.light-btn.b img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

  .intro { min-height: auto; }
  .intro .inner {padding-top: 174px;}
  .intro .inner .intro-box2 .text-mini-box .sub-tit {width: 580px;}
  .intro .inner .intro-box1 .text-box .sub-tit-out {position: absolute; left: 76%; top: -18%}
  .intro .inner .video-box .video1 {right: -45%;}

  .intro .inner .intro-box2 .bottomBox {display: block;}
  .intro .inner .intro-box2 .bottomBox img {margin-bottom: 20px;}
  .intro .inner .intro-box2 .text-mini-box {margin: 10% 0 0 0; padding-left: 4%;}
  .intro .inner .intro-box2 .text-mini-box .sub-tit {width: 580px; letter-spacing: 0;}
  .wrap-1m {margin-left: 35%; margin-top: 320px;}
  .wrap-1m .noise{width: 80%; height: 80%;}
  .wrap-1m .clean {width: 80%; height: 80%;}

  .intro .inner .box3-box {flex-direction: column;}
  .intro .inner .box3-box .video-box {height: 120vh; width: 100%;}
  .intro .inner .box3-box .video2 {left: -35%; top: 55%;}
  .intro .inner .box3-box .intro-box3 {position: static; margin: -250px 0 0 250px;}
  .intro .inner .box3-box .intro-box3 .text-box.right {gap: 24px;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {top: -650px; left: 30%;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .num {font-size: 14px;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .name {font-size: 20px;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {font-size: 16px; width: 505px;}

  .intro .inner .intro-box4 {margin-top: clamp(300px, 20vw, 700px); gap: 15%;}
  .intro .inner .intro-box4 .float {width: clamp(217px, calc(13.2vw + 95px), 290px); margin-bottom: 50px;}
  .intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 40px;}
  .intro .inner .intro-box4 .heart .text-box .name {font-size: 24px;}
  .intro .inner .intro-box4 .heart .text-box .sub-tit {width: 400px;}

  .lineup {margin: 148px 0 0 0; padding-bottom: 0;}
  .lineup .inner {padding: 24px 0; }
  .lineup .inner .card-wrap {padding: 0;}
  .lineup .inner .card-wrap .cards {gap: 2vw; display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));}
  .lineup .inner .card-wrap .cards .card {width: 100%; border-radius: 20px;}
  .lineup .inner .card-wrap .navbtn {display: none;}

  .upcoming .inner .upcoming-wrap .clip {border-radius: 15px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purpleclip {border-radius: 15px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox {border-radius: 15px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box {border-radius: 15px;}

  .bottom-bookclass .inner .title {font-size: clamp(110px, 8.5vw, 130px);
; margin-bottom: 40px;}
  .bottom-bookclass .inner a.morebtn {margin-bottom: 180px;}
  .marquee-inner {gap: 20px;}
  .marquee-inner li {height: 202px; width: 140px; white-space: normal; flex: 0 0 140px;} 
  .marquee-inner li  img {height: 175px; width: 140px; }
  .marquee-inner li p {margin-top: 8px; width: 140px;}

  .location .inner .text-box .tit {font-size: 100px;}
  .location .inner {margin: 0 auto;}
  .location .inner .studio-wrap {display: block;}
  .location .inner .studio-wrap .clip {width: 100%; height: 100%; flex: unset;}
  .location .inner .studio-wrap .clip .left {width: 100%; height: 100%; margin-bottom: 20px;}
  .location .inner .studio-right .top-box {gap: 20px; margin-bottom: 20px;}
  .location .inner .studio-right .top-box .small {width: 100%; height: 100%;}
  .location .inner .studio-right .bottom-box {width: 100%;  max-height: 420px;}
  .location .bg {display: none;}

  footer {margin-top: 357px; margin-bottom: 120px;}
  footer .inner .top-box {gap: 60px;}
  footer .inner .top-box li p.tit {letter-spacing: 0; font-weight: 600; margin-bottom: 20px;}
  footer .inner .top-box li p {line-height: 1.3;}
  footer .inner .bottom-box .mail-box  {font-size: clamp(32px, 3.86vw, 54px); line-height: 1.3; margin-bottom: clamp(48px, 6.4vw, 90px);}
  footer .inner .bottom-box .name {margin-bottom: 60px; font-size: 200px;}

.upcoming .inner {padding: 0;}
.upcoming .inner {padding: 0;}
.upcoming img:hover,
.upcoming .purplebox:hover,
.upcoming video:hover,
.upcoming .youtube:hover,
.location img:hover,
.location .bottom-box img:hover {
  transform: none !important;
  scale: 1 !important;}
  .location .bottom-box img:hover {scale: 1.02 !important;}

  /* animation 클래스 무효화 */
  .text,
  .from-left,
  .from-right,
  .puff-in-center,
  .shake-top,
  .split .char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }


.intro .inner .intro-box4 .text-box.motion,
.intro .inner .intro-box2 .topBox img.motion,
.intro .inner .intro-box2 .bottomBox img.motion, 
.lineup .inner .text-box.motion, 
.lineup .inner .card-wrap.motion, 
.upcoming .inner .text-box.motion, 
.upcoming .inner .upcoming-wrap.motion, 
.bottom-bookclass .inner .title.motion, 
.location .inner .text-box.motion, 
.location .inner .studio-wrap.motion, 
.intro .inner .video-box.motion, 
.intro .inner .box3-box .video-box.motion {animation: none !important;}

  .wrap-1m .noise {display: none;}

  .wrap-1m .clean {
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 1200px){
  .intro .inner .intro-box1 .text-box .sub-tit-out {left: 65%;}
}

@media (max-width: 1000px){
  .wrap-1m {margin-top: 250px;}
    .intro .inner .intro-box2 {margin:clamp(550px, 95.7vw, 900px) 0 clamp(160px, 15.6vw, 300px)}
    footer .inner .bottom-box .name {font-size: clamp(145px, 18.9vw, 189px);}
    .intro .inner .intro-box1 .text-box .sub-tit-out {left: 66%; top: -22%;}
    .intro .inner .video-box .video1 {right: -85%; width: 1150px;}
    .gradaition-bg {height: 400px;}
    .intro .inner .intro-box1 .text-box .sub-tit {bottom: -65px;}
    .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {top: -380px; left: 10%;}
    .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 480px;}
    .intro .inner .intro-box4 .heart .text-box .sub-tit {width: 300px;}
    .intro .inner .box3-box .video-box {height: 90vh;}
}

@media (max-width: 930px){
.intro .inner .intro-box1 .text-box .sub-tit-out {left: 60%;}
.intro .inner .video-box .video1 {right: -85%; width: 1000px;}
.intro .inner .intro-box1 .text-box .sub-tit {bottom: -35%;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {left: -5%; }
.intro .inner .intro-box4 {gap: 16%;}
.intro .inner .box3-box .video2 {top: 65%;}
.intro .inner .intro-box4 {margin-top: clamp(404px, 20vw, 700px);}
}

@media (max-width: 840px){
.intro .inner .intro-box1 .text-box .sub-tit-out {left: 54%;}
.intro .inner .intro-box2 .text-mini-box {padding-left: 10%;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 420px; top: -260px;}
.intro .inner .box3-box .video-box {height: 70vh;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {top: -220px}
.intro .inner .intro-box4 .heart .text-box .sub-tit {width: 260px;}
.intro .inner .intro-box2 {margin: clamp(574px, 107.7vw, 906px) 0 clamp(160px, 15.6vw, 300px);}
}


/* 768 */
@media (max-width: 768px){
.br-none {display: none}
.inner {width: 92%;}

.dark-btn.a {padding: 8px 10px 10px 20px; font-size: 18px;}
.dark-btn.a span {width: 40px; height: 40px;}
.light-btn.a {padding: 8px 10px 10px 20px; font-size: 18px;}
.light-btn.a span {width: 40px; height: 40px;}

.visual .visual-inner .video-txt-box {width: 70vw;}
.intro {width: 100%; padding: 0;}
.intro .inner {padding-top: 104px;}
.intro .inner .intro-box1 .text-box .sub-tit {width: 420px; font-size: 14px;}
.intro .inner .intro-box1 .text-box .sub-tit-out {position: absolute; left: 50%; top: -33%; font-size: 14px;}
.intro .inner .video-box .video1 {width: 700px; top: 15%;}
.wrap-1m {margin-left: 32%; width: 90vw; height: auto; bottom: -310px;}
.wrap-1m .noise {width: 120%; height: 120%;}
.wrap-1m .clean {width: 120%; height: 120%;}
.intro .inner .intro-box2 {margin: 450px 0 0 20px; position: relative; top: 400px;}
.intro .inner .intro-box2 .text-mini-box {left: -8%;} 
.intro .inner .intro-box2 .text-mini-box .name {font-size: 18px; margin-right: 24px;}
.intro .inner .intro-box2 .text-mini-box .sub-tit {font-size: 14px; width: 471px;}

.intro .inner .box3-box {display: block; margin-top: 700px;}
.intro .inner .box3-box .video-box {height: 75vh;}

.intro .inner .box3-box .intro-box3 {margin: -350PX 0 0 64PX; width: 626px;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {left: 6%;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 400PX; letter-spacing: 0;}
.intro .inner .intro-box4 {margin-top: 530px; gap: 10vh; margin-bottom: 90px; }
.intro .inner .intro-box4 .float {width: clamp(74px, calc(37.83vw - 73.5px), 217px); margin-bottom: 35px; height: auto;}
.intro .inner .intro-box4 .heart.box1 .text-box .title-box .num {display: none;}
.intro .inner .intro-box4 .heart.box2 .text-box .title-box .num {display: none;}
.intro .inner .intro-box4 .heart.box1 .text-box .title-box .num {display: none;}
.intro .inner .intro-box4 .heart.box2 .text-box .title-box .num {display: none;}
.intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 30px; margin-bottom: 70px;}
.intro .inner .intro-box4 .heart .text-box .name {font-size: 18px; margin-bottom: 21px;}
.intro .inner .intro-box4 .heart .text-box .sub-tit {width: 235px; font-size: 14px; line-height: 1.3; letter-spacing: -1px;}

.lineup {margin-bottom: 100px;}
.lineup .inner .text-box {margin-bottom: 25px;}
.lineup .inner .card-wrap {padding: 0;}
.lineup .inner .card-wrap .cards .card {width: clamp(320px, 46.3vw, 356px); padding: clamp(40px, 6.5vw, 50px) clamp(24px, 3.9vw, 30px); grid-template-columns: 1fr;  max-width: 100%; border-radius: 15px;}
.lineup .inner .card-wrap .cards .card .top-box {font-size: clamp(32px, 5.2vw, 40px);; margin-bottom: 52px; font-weight: 600;}
.lineup .inner .card-wrap .cards .card .top-box img {width: 60px;}
.lineup .inner .card-wrap .cards .card .skill-box {margin-bottom: 52px;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .skill {font-size: 20px; font-weight: 600; padding-bottom: 10px;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar {height: 3px; margin-bottom: 19px;}
.lineup .inner .card-wrap .cards .card .skill-box .bar-box .bar:after {height: 3px;}
.lineup .inner .text-box .sub-tit {display: none;}

.upcoming {margin-bottom: 40vh;}
.upcoming .inner .text-box {margin-bottom: 25px;}
.upcoming .inner .text-box .sub-tit {display: none;}
.upcoming .inner .upcoming-wrap {grid-template-columns: 1fr; gap: 20px;}
.upcoming .inner .upcoming-wrap .clip {order: 1;}
.upcoming .inner .upcoming-wrap .upcoming-box {order: 2;display: flex;flex-direction: column;gap: 20px;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box {flex-direction: column; gap: 20px; margin-bottom: 0;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox {padding: 40px 0 0 40px ;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box {padding: 0;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .time {font-size: 20px;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .loca {font-size: 52px}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box {padding: 40px;}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 img {width: 100px; height: 100px;}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 .pop-up {font-size: 20px;}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .tit {font-size: 44px;}

.bounce-in-top {width: 80px; height: 80px;}

.bottom-bookclass {padding-bottom: 0; padding-top: 0;}
.bottom-bookclass .inner .title {font-size: clamp(48px, 13vw, 100px); padding-top: 400px;}
.bottom-bookclass .inner .title.motion {animation-name: text;}
.bottom-bookclass .inner a.morebtn {width: 159px; height: 52px; margin-bottom: 80px;}
.bottom-bookclass .inner a.morebtn p {font-size: 16px; padding-right: 16px;}
.bottom-bookclass .inner a.morebtn .icon-box {width: 36px; height: 36px; right: 10px; top: 8px;}

.marquee-wrap {height: auto; width: auto;}
.marquee-inner {gap: clamp(8px, 1.14vw, 16px) ;height: auto;}
.marquee-inner li {height: 120px; flex: none; width: 80px; }
.marquee-inner li p {width: 100%; white-space: nowrap; text-align: right; font-size: 9px; letter-spacing: 0;}
.marquee-inner li img {width: 100%; height: 100px; object-fit: cover; display: block; border-radius: 4px;}

.location .inner .text-box {padding-top: 200px; margin-bottom: 40px;}
.location .inner .text-box .tit {font-size: 11vw;}
.location .inner .studio-wrap .left {width: 100%; height: 100%; margin-bottom: 16px;}
.location .inner .studio-right .top-box {margin-bottom: 16px; }
.location .inner .studio-right .top-box .small{height: 100%;}

.gradaition-bg {height: 300px;}

footer {margin-top: 0;}
footer .inner {margin-top: 40px auto 0;}
footer .inner .top-box {display: block;}
footer .inner .top-box  li {margin-bottom: 40px;}
footer .inner .top-box li p.tit {margin-bottom: 16px;}
footer .inner .bottom-box .mail-box {font-size:  clamp(24px, 6.25vw, 48px) }
footer .inner .bottom-box .name {font-size: clamp(96px, 18vw, 180px);
;}
footer .inner .top-box li p {font-size: 20px;}

.upcoming .inner .upcoming-wrap .left:hover,
.upcoming .inner .upcoming-wrap .small:hover,
.upcoming .inner .upcoming-wrap .bottom-box:hover,
.location .inner .studio-wrap .left:hover,
.location .inner .studio-wrap .small:hover,
.location .inner .studio-wrap .bottom-box:hover {transform: none; scale: 1;}
}

@media (max-width: 670px){
.intro .inner .intro-box1 .text-box .sub-tit-out {left: 45%;}
.intro .inner .intro-box2 .text-mini-box .sub-tit {font-size: 13px;  width: 420px;}
.intro .inner .intro-box1 .text-box .sub-tit p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 230px;} 
.intro .inner .intro-box4 .heart .text-box .sub-tit {width: 215px;}
}

@media (max-width: 620px){
  .wrap-1m {bottom: -400px;}
.intro .inner .intro-box1 .text-box .sub-tit-out {left: 40%; font-size: 12px;}
.intro .inner .intro-box1 .text-box .sub-tit {left: 4.2%;}
.intro .inner .intro-box2 .text-mini-box {bottom: -80%;} 
.intro .inner .video-box .video1 {width: 720px;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {left: -4%;}
.intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {font-size: 14px;}
.intro .inner .intro-box4 {gap: 10%;}
.intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 24px;}
.intro .inner .intro-box4 .heart .text-box .name {font-size: 16px;}
.intro .inner .intro-box4 .heart .text-box .sub-tit {font-size: 13px; width: 200px;}
}

@media (max-width: 600px){
  .intro .inner .intro-box1 .text-box .sub-tit-out {left: 32%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out {left: 32%;}
  .intro .inner .intro-box1 .text-box .sub-tit {font-size: 12px;}
  .intro .inner .intro-box2 .text-mini-box .sub-tit {width: 340px; padding-left: 0;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box{display: block;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {margin-top: 16px;}
.light-btn.c {background: rgba(9, 9, 9, 0.14); display: inline-flex; align-items: center;justify-content: center; font-family: 'Pretendard', sans-serif; font-size: 16px; color: #434343; padding: 8px 8px 8px 20px; border-radius: 100px; font-weight: 500; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(6px)}
.light-btn.c span {width: 36px; height: 36px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 12px;}
.light-btn.c img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .time {font-size: 16px;}
.upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .loca {font-size: 35px}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 .pop-up {font-size: 16px;}
.upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .tit {font-size: 32px;}

footer .inner .bottom-box .name {font-size: clamp(60px, 18vw, 110px);}
}

@media (max-width: 570px){
  .lineup .inner .card-wrap .cards .card .top-box {font-size: clamp(20px, 4.2vw, 32px)}
  .dark-btn.a {font-size: 14px; padding:6px 8px 8px 16px}
  .dark-btn.a span {width: 32px; height: 32px;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 350px;}
  .lineup .inner .card-wrap .cards .card .skill-box .bar-box .skill {font-size: 16px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .tit {font-size: 22px;}
  .intro .inner .intro-box4 {margin-top: 350px;}
  .intro .inner .intro-box2 .text-mini-box {bottom: -120%;}
  .intro .inner .intro-box2 .text-mini-box .sub-txt {display: block;}
  .intro .inner .intro-box2 .text-mini-box .sub-tit {margin-top: 10px;}
}

@media (max-width: 520px){
  .intro .inner .video-box .video1 { width: 630px;}
  .intro .inner .intro-box1 .text-box .sub-tit-out {top: -40%; left: 37%; font-size: 10px;}
  .intro .inner .intro-box1 .text-box .sub-tit {left: 0; width: 330px;}
  .intro .inner .intro-box2 {margin: 100px 0 0 0px; top: 500px;} 
  .intro .inner .box3-box {margin-top: 500px;}
  .intro .inner .intro-box2 .text-mini-box {bottom: -50%;}
  .intro .inner .intro-box4 .heart .text-box .sub-tit {width: 160px;}
  .intro .inner .intro-box2 .topBox img {width: 80%;}
  .intro .inner .intro-box2 .bottomBox img {width: 60%;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .loca {font-size: 28px;}
}

@media (max-width: 480px){
  .intro .inner .intro-box2 .text-mini-box .sub-tit {width: 310px;}
  .intro .inner .box3-box .video-box{height: 36vh;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {display: block; top: 200px;}
  .intro .inner .box3-box .video2 {top: 140%;}
  .intro .inner .intro-box4 {margin-top: 600px;}
  .intro .inner .video-box .video1 {width: 500px; right: -80%;}
  .location {padding-top: 0;}
  .bottom-bookclass .inner .title {padding-top: 100px;}
  footer .inner .top-box {margin-bottom: 80px;}
  footer .inner .top-box li p {font-size: 18px;}
  .intro .inner .intro-box2 {top: 460px;}
  footer {margin-bottom: 100px;}
}

@media (max-width: 460px){
  .intro .inner .intro-box2 .text-mini-box {left: -10%;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 320px; font-size: 12px;}
  .dark-btn.a {font-size: 12px; padding:5px 7px 7px 14px}
  .dark-btn.a span {width: 28px; height: 28px;}
  .lineup .inner .card-wrap .cards .card .skill-box .bar-box .skill {font-size: 14px;}
  .lineup .inner .card-wrap .cards .card .top-box img {width: 50px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 img {width: 80px; height: 80px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 img {width: 80px; height: 80px;}
}

@media (max-width: 430px){
  .intro .inner .intro-box2 {top: 400px;}
  .intro .inner .intro-box2 .text-mini-box {bottom: -75%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out {left: 32%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(2) {padding-left: 4%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(3) {padding-left: 0%;}
  .lineup .inner .card-wrap .cards .card .top-box {font-size: 36px}
  .lineup .inner .card-wrap .cards .card .top-box img {width: 60px;}
  .lineup .inner .card-wrap .cards .card .skill-box .bar-box .skill {font-size: 16px;}
  .lineup .inner .card-wrap .cards{gap: 20px; grid-template-columns: repeat(1, minmax(0, 1fr));}
  .lineup .inner .card-wrap .cards .card {width: clamp(300px, 91.8vw, 430px); border-radius: 10px;}
  .lineup .inner .card-wrap .cards .card .dark {justify-content: flex-end;}

.dark-btn.a {padding: 8px 10px 10px 20px; font-size: 18px;}
.dark-btn.a span {width: 40px; height: 40px;}
.light-btn.a {padding: 8px 10px 10px 20px; font-size: 18px;}
.light-btn.a span {width: 40px; height: 40px;}
}

@media (max-width: 415px){
.intro .inner .intro-box2 .text-mini-box .sub-tit {width: 280px;}
.intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 18px;}
.intro .inner .intro-box2 .text-mini-box .sub-tit {width: 280px;}
.intro .inner .intro-box4 .heart .text-box .sub-tit {width: 142px;}
}

/* 390 */
@media (max-width: 390px) {
  html {height: auto;}
  .br-none {display: none;}
  .inner { margin: 6vh auto;}

  .dark-btn.a {background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; gap: 8px; font-family: 'Pretendard', sans-serif; font-size: clamp(14px, 1.2vw, 18px); color: #F5F6FB;  padding: clamp(8px, 1vw, 12px) clamp(14px, 1.5vw, 20px); border-radius: 999px; font-weight: 500; white-space: nowrap; border: 1px solid rgba(245, 246, 251, 0.28); backdrop-filter: blur(6px);}
  .dark-btn.a {background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; gap: 8px; font-family: 'Pretendard', sans-serif; font-size: clamp(14px, 1.2vw, 18px); color: #F5F6FB;  padding: clamp(8px, 1vw, 12px) clamp(14px, 1.5vw, 20px); border-radius: 999px; font-weight: 500; white-space: nowrap; border: 1px solid rgba(245, 246, 251, 0.28); backdrop-filter: blur(6px);}
  .dark-btn.a span {width: 36px; height: 36px; background: #5F5F61; border-radius: 50%; position: relative;}
  .dark-btn.a span img { width: clamp(14px, 1.4vw, 18px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

  .upcoming .light-btn.a {display: inline-flex; align-items: center; padding: clamp(8px, 1vw, 12px) clamp(14px, 1.5vw, 20px);font-size: clamp(14px, 1vw, 18px); border-radius: 999px;}
  .upcoming .light-btn.a span {width: 36px; height: 36px; margin-left: 8px;}
  .upcoming .light-btn.a span img {width: clamp(14px, 1.4vw, 18px);}

  .intro {width: 100%;} 
  .intro .inner {padding-top: 130px;}
  .intro .inner .intro-box1 {margin-bottom: 100px}
  .intro .inner .intro-box1 .text-box .sub-tit {width: 294px; font-size: 12px; left: 0%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(1) {padding-left: 4%;} 
  .intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(2) {padding-left: 0%;}
  .intro .inner .intro-box1 .text-box .sub-tit-out p:nth-child(3) {padding-left: 4%;}
  
  .intro .inner .video-box .video1 {right: -100%;}
  .wrap-1m {bottom: -500px;}
  .intro .inner .intro-box2 .topBox img {width: 90%;}
  .intro .inner .intro-box2 .bottomBox img {width: 68%;}
  .intro .inner .intro-box2 .text-mini-box {width: 320px; left: -15%; bottom: -105%;}
  .intro .inner .intro-box2 .text-mini-box .sub-txt {display: block;}
  .intro .inner .intro-box2 .text-mini-box .name {margin-bottom: 8px;}
  .intro .inner .intro-box2 .text-mini-box .sub-tit {width: 250px;}

  .intro .inner .box3-box {margin-top: 460px; flex-direction: column; align-items: center;}
  .intro .inner .box3-box .video-box {width: 100%;}
  .intro .inner .box3-box .video2 {width: 120%; left: -44%;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {top: 250px; left: 38px;}
  
  .intro .inner .box3-box .intro-box3 {position: static; width: 100%; padding-top: 0px; margin: -350px 0 0 -24px;}
  .intro .inner .box3-box .intro-box3 .text-box.right {display: block; width: 320px; margin: 0 auto; padding: 0;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box {display: inline-block; position: relative;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .name {margin-bottom: 8px;}
  .intro .inner .box3-box .intro-box3 .text-box.right .text-mini-box .sub-tit {width: 292px;}

  .intro .inner .intro-box4 {gap: 20px; margin-top: 500px;}
  .intro .inner .intro-box4 .float {width: 74px; margin-bottom: 24px; height: 95px;}
  .intro .inner .intro-box4 .heart .text-box .title-box .title {font-size: 18px; margin-bottom: 80px;}
  .intro .inner .intro-box4 .heart .text-box .sub-tit {font-size: 12px; width: 142px; letter-spacing: 0px;}
  .intro .inner .intro-box4 .heart .text-box .name {margin-bottom: 8px;}

  .lineup {margin: 15vh 0;}
  .lineup .inner .text-box {margin-bottom: 24px;}
  .lineup .inner .text-box .tit {font-size: 55px;}
  .lineup .inner .card-wrap .cards{gap: 20px; grid-template-columns: repeat(1, minmax(0, 1fr));}
  .lineup .inner .card-wrap .cards .card {width: clamp(300px, 91.8vw, 358px); border-radius: 10px;}
  .lineup .inner .card-wrap .cards .card .dark {justify-content: flex-end;}

  .bounce-in-top {width: 50px; height: 50px;}

  .upcoming {margin-bottom: 120px;}
  .upcoming .inner {margin-bottom: 0;}
  .upcoming .inner .text-box {display: block; margin-bottom: 24px;}
  .upcoming .inner .upcoming-wrap .upcoming-box {display: grid; grid-template-columns: 1fr;}
  .upcoming .inner .upcoming-wrap .clip {border-radius: 10px;}
  .upcoming .inner .upcoming-wrap .upcoming-box {gap: 0;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box {margin-bottom: 20px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox {padding: 30px 0 0 30px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .time {font-size: 14px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purplebox .text-box .loca {font-size: 32px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .purpleclip {border-radius: 10px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .top-box .playbox  {border-radius: 10px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box {border-radius: 10px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox1 {align-items: center;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 {display: block;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .tit {font-size: 44px; margin-bottom: 20px;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box .inbox2 .light {justify-self: end;}
  .upcoming .inner .upcoming-wrap .upcoming-box .bottom-box {padding: 28px;}

  .bottom-bookclass {margin-top: 0; padding-top: 120px;}
  .bottom-bookclass .inner {padding: 0;}
  .bottom-bookclass .inner .title {padding-top: 100px;}
  .bottom-bookclass .inner .title {font-size: clamp(28px, 14.1vw, 55px);}
  .bottom-bookclass .inner a.morebtn {margin-bottom: 104px;}
  .marquee-inner {gap: 16px;}
  .marquee-inner li {width: 80px; height: 100px;} 
  .marquee-inner li p {width: 100%; white-space: nowrap; text-align: right; font-size: 9px; letter-spacing: 0;}
  .marquee-inner li img {height: 100px;}
  
  .location {padding: 0 0 150px;}
  .location .inner {padding: 0;}
  .location .inner .text-box {margin-bottom: 24px; padding-top: 200px;}
  .location .inner .text-box .tit {font-size: clamp(28px, 11.3vw, 44px);}
  .location .inner .text-box .sub-tit {font-size: 12px;}
  .location .inner .studio-wrap .left {width: 100%;}
  .location .inner .studio-wrap .clip .left img {border-radius: 7px;}
  .location .inner .studio-right .top-box {gap: 16px;}
  .location .inner .studio-right .clip .top-box .small {width: 100%; border-radius: 7px;}
  .location .inner .studio-right .top-box .small img {width: 100%; border-radius: 7px;}
  .location .inner .studio-wrap .clip {border-radius: 7px;}
  .location .inner .studio-wrap .clip .left {margin-bottom: 16px;}
  .location .inner .studio-right .bottom-box {width: 100%;  border-radius: 7px;}

  .gradaition-bg {height: 200px;}

  footer .inner .top-box li {margin-bottom: 20px;}
  footer .inner .top-box li p {font-size: 14px;}
  footer .inner .bottom-box .mail-box {font-size: clamp(16px, 6.15vw, 24px); margin-bottom: 40px;}
  footer .inner .bottom-box .topBtn {font-size: 20px;}
  footer .inner .bottom-box .topBtn img {width: 20px; height: 20px;}
}