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




/* 공통요소 - section txt-box */
body {font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-size: 52px; background: #F5F6FB; font-weight: 300;}
.text-box .tit {font-size: 250px; font-weight: 600; letter-spacing: -2px; margin-bottom: 10px; line-height: 1;}
.box .sub-tit {font-family: 'Pretendard',sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0px; color: #818181;}

/* 공통요소 - section 화면 */
.inner {letter-spacing: -1px; margin: 0 auto;}

/* header */
header {position: absolute; top: 40px; left: 0; width: 100%; z-index: 101;}
.inner-header {width: 90%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
.inner-header .logo {font-family: 'HK Grotesk', sans-serif; font-size: 36px; font-weight: 800;}
.inner-header nav {border-radius: 29px; background: rgba(0,0,0,0.05); backdrop-filter: blur(14px); display: flex; align-items: center; margin: 0 auto;}
.inner-header nav ul {display: flex; justify-content: space-between; margin: 0 auto; color: #F5F6FB; text-decoration: none; padding: 4px 6vw;}
.inner-header nav ul li {font-size: 20px; text-align: center; font-weight: 300; font-family: 'Pretendard',sans-serif;}

.inner-header nav ul li a {position: relative; display: inline-block; overflow: hidden; margin: 10px 15px 0 15px; color: transparent;}
.inner-header nav ul li a::before, .inner-header nav ul li a::after {content: attr(data-text); position: absolute; left: 0; width: 100%; text-align: center; transition: transform 0.4s ease; color: #000;}
.inner-header nav ul li a::after {transform: translateY(0);}
.inner-header nav ul li a::before {transform: translateY(100%);}
.inner-header nav ul li a:hover::after {transform: translateY(-100%);}
.inner-header nav ul li a:hover::before {transform: translateY(0);}

.inner-header .right-box {display: flex; align-items: center;}
.inner-header .right-box .language {display: flex; width: 80px; height: 32px; border-radius: 29px; background: rgba(0,0,0,0.05); margin: 0 auto; align-items: center; justify-content: center;}
.inner-header .right-box .language p {font-family: 'Pretendard',sans-serif; font-size: 16px; font-weight: 500; color: #000;}
.inner-header .right-box .language img {width: 10px; height: 8px; margin-left: 10px; filter: invert(100%);}

.menu {width: 32px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; position: relative; display: none;}
.menu span {display: block; width: 100%; height: 3px; background: #000; border-radius: 2px;}

.menu.active .a {transform: translateY(11px) rotate(45deg);}
.menu.active .b {opacity: 0;}
.menu.active .c {transform: translateY(-10px) rotate(-45deg);}

.fullscreen-menu {display: none;}

.sub_topBtn {position: fixed; bottom: 5%; right: 3%; align-items: center; font-size: 18px; font-weight: 500;}
.sub_topBtn {text-align: center;}
.sub_topBtn img {width: 45px; display: block; margin: 1vw auto; text-align: center;}


/* visual */
.visual .inner {padding: 300px 160px 50px;}
.visual .inner .text-box {width: 100%; display: flex; justify-content: space-between; position: relative;}
.visual .inner .box {width: 100%; display: flex; justify-content: space-between;}
.visual .inner .sub-tit2 {font-size: 16px; font-family: 'Pretendard',sans-serif; color: #0a0a0a; font-weight: 500; letter-spacing: 0px; width: 29%;  color: #818181;}
.visual .inner .sub-tit {font-size: 16px; font-family: 'Pretendard',sans-serif; color: #818181; line-height: 1.3}


.visual .inner .text-box .tit {font-size: 250px; font-weight: 500; letter-spacing: -2px; line-height: 1;}
.visual .inner .text-box .tit span {display: block; overflow: hidden; transform: translate3d(0,0,0) skewY(0deg)}
.visual .inner .text-box .tit span b {display: block;}



.visual .inner .text-box .tit.motion span b {animation: textAni 1s ease forwards;}
@keyframes textAni {
    0% {opacity: 0;}
    30% {opacity: 0; transform: translate3d(0,40px,0) skewY(8deg); transform-origin: top left;}
}




/* dancer */
.dancer {padding-bottom: 400px;}
.dancer .inner {padding: 100px 160px 0;}
.dancer .inner .step {display: flex; justify-content: space-between;}
.dancer .inner .step .step-box {display: flex; gap: 69px; color: #999999; margin-bottom: 150px;}
.dancer .inner .step .step-box li {position: relative; display: inline-block; cursor: pointer; font-weight: 500; transition: color .25s, border-color .25s, font-weight .25s; font-size: 2vw; letter-spacing: 1px;}

.dancer .inner .btn {float: right;}
.dancer .inner .btn .light-btn {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); transition: all 0.5s; margin-top: 30px;}
.dancer .inner .btn .light-btn span {width: 44px; height: 44px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 16px;}
.dancer .inner .btn .light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dancer .inner .btn .light-btn:hover {background: rgba(9, 9, 9, 0.3); transition: all 0.3s;}

.dancer .inner .dancer-card-wrap {display: flex; align-items: center; justify-content: space-between;}
.dancer .inner .dancer-card-wrap {overflow: visible;}
.dancer .inner .dancer-card-wrap .dancer-card {width: 24%; transition: transform 0.4s ease, filter 0.4s ease; transform: scale(1); position: relative; overflow: hidden;}
.dancer .inner .dancer-card-wrap:hover .dancer-card {transform: scale(0.9); filter: brightness(60%);}
.dancer .inner .dancer-card-wrap .dancer-card:hover {transform: scale(1.05); filter: brightness(100%); z-index: 2;}
.dancer .inner .dancer-card-wrap .dancer-card img {width: 100%; object-fit: cover;}

.dancer .inner .dancer-card-wrap .dancer-card .text-box {margin-top: 30px; transition: transform 0.4s ease, opacity 0.4s ease;}
.dancer .inner .dancer-card-wrap .dancer-card .text-box .sub-tit {color: rgba(10, 10, 10, 0.36); margin-bottom: 9px; font-family: 'Pretendard',sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0px;}
.dancer .inner .dancer-card-wrap .dancer-card .text-box .name {font-size: 36px; font-weight: 600;}

.dancer .inner .dancer-card-wrap:hover .dancer-card .text-box {opacity: 0.4;}
.dancer .inner .dancer-card-wrap:hover .dancer-card:hover .text-box {transform: translateY(-6px); opacity: 1;}

@keyframes wrap-up {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.dancer .inner .dancer-card-wrap.motion {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* 등장 애니메이션 */
    /* animation: wrap-up 0.8s ease-out forwards;
    animation-delay: 0.2s;
    will-change: transform, opacity; */
}


/* Dancer-Step By Review */
.step-by-review {margin-bottom: 400px;}
.step-by-review .inner {padding: 0 160px;}
.step-by-review .inner .textBox {text-align: center; margin: 0 0 174px;}
.step-by-review .inner .textBox .top-sub-tit {color: #818181; text-align: center; font-weight: 500; font-size: 24px; letter-spacing: 1px;}
.step-by-review .inner .textBox .tit {font-size: 100px; text-align: center; margin: 32px 0 43px; font-weight: 500; -webkit-text-stroke: 2px #000; display: inline-block; white-space: nowrap;line-height: 1.2;}
/* .step-by-review .inner .textBox .tit::after {content: '|'; display: inline-block; margin-left: 10px; animation: blink 1s infinite; transition: opacity 0.4s ease; font-weight: 300;} */
.step-by-review .inner .textBox .sub-tit {font-size: 22px; color: #7D7D7D; text-align: center; font-family: 'Pretendard', sans-serif; letter-spacing: 0px; line-height: 1.3}

.step-by-review .inner .card-box {display: flex; flex-wrap: wrap; justify-content: space-between;}
.step-by-review .inner .card-box li {width: 32%}
.step-by-review .inner .card-box li p.img {margin-bottom: 26px; width: 93px; height: 96px;}
.step-by-review .inner .card-box li p.img img {width: 100%;}
.step-by-review .inner .card-box li .name {font-size: 42px; font-family: 'Pretendard', sans-serif; font-weight: 600; margin-bottom: 26px;}
.step-by-review .inner .card-box li span.line {display: block; width: 69px; height: 7px; background: #0a0a0a; margin: 26px 0;}
.step-by-review .inner .card-box li .text {font-size: 22px; color: #7D7D7D; font-family: 'Pretendard', sans-serif; font-weight: 400; letter-spacing: 0px;}

.step-by-review .inner .card-box li .text-box {margin-top: 62px; background: #fff; margin-bottom: 15px; border-radius: 20px; padding: 40px 175px 40px 60px;}
.step-by-review .inner .card-box li .text-box .percent .number {font-size: 130px; font-family: 'Pretendard', sans-serif; font-weight: 400; letter-spacing: -1px;}
.step-by-review .inner .card-box li .text-box .percent .small-percent {font-size: 42px;}
.step-by-review .inner .card-box li .text-box .skill {font-family: 'Pretendard', sans-serif; font-size: 22px; color: #7D7D7D;}
.step-by-review .inner .card-box li .text-box .skill .skill-bottom {display: flex;}
.step-by-review .inner .card-box li .text-box .skill .skill-bottom p {margin-right: 10px; margin-bottom: 10px;}
.step-by-review .inner .card-box li .text-box p b {font-weight: 500; margin-left: 10px; letter-spacing: 0px;}

/* 개별 포인트 색깔 및 간격 */
.step-by-review .inner .card-box .starter .skill {margin-top: 40px;}
.step-by-review .inner .card-box .starter .skill b {color: #FFB039;}
.step-by-review .inner .card-box .learner .skill {margin-top: 120px;}
.step-by-review .inner .card-box .learner .skill b {color: #F88FEC;}
.step-by-review .inner .card-box .master .skill {margin-top: 204px;}
.step-by-review .inner .card-box .master .skill b {color: #0AB26B;}

.step-by-review .inner .card-box li .view-btn {display: flex; float: right; align-items: center;}
.step-by-review .inner .card-box li .view-btn p {font-family: 'Pretendard', sans-serif;font-size: 32px; margin-right: 18px; font-weight: 400;}
.step-by-review .inner .card-box li .view-btn img {width: 27px; height: 27px;}



@keyframes card-rise-soft {
  0% {
    opacity: 0;
    transform: translateY(130px) scale(0.98);
  }

  10% {
    opacity: 0;
    transform: translateY(130px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.step-by-review .inner .card-box .starter.motion {animation: card-rise-soft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;}
.step-by-review .inner .card-box .learner.motion {animation: card-rise-soft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.3s;}
.step-by-review .inner .card-box .master.motion {animation: card-rise-soft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.6s;}


/* dancer-pick */
.dancer-pick {text-align: center; background: url(../img/dancer-pick-under-bg.png) no-repeat center/cover; padding-bottom: 30px; margin-bottom: 270px; padding: 0 160px 30px;}
.dancer-pick .inner .textBox .top-sub-tit {color: #818181; text-align: center; font-weight: 500; font-size: 24px; letter-spacing: 1px;}
.dancer-pick .inner .textBox .tit {font-size: 100px; text-align: center; margin: 32px 0 43px; font-weight: 500; -webkit-text-stroke: 2px #000; display: inline-block; white-space: nowrap;line-height: 1.2;}
/* .dancer-pick .inner .textBox .tit::after {content: '|'; display: inline-block; margin-left: 10px; animation: blink 1s infinite; transition: opacity 0.4s ease; font-weight: 300;} */
.dancer-pick .inner .textBox .sub-tit {font-size: 22px; color: #7D7D7D; text-align: center; font-family: 'Pretendard', sans-serif; letter-spacing: 0px; margin-bottom: 40px; line-height: 1.3}
.dancer-pick .inner .bg {display: none;}


.dancer-pick .inner .btn {margin-bottom: 200px;}
.dancer-pick .inner .btn .light-btn {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); transition: all 0.5s;}
.dancer-pick .inner .btn .light-btn span {width: 44px; height: 44px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 16px;}
.dancer-pick .inner .btn .light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dancer-pick .inner .btn .light-btn:hover {background: rgba(9, 9, 9, 0.3); transition: all 0.3s;}


.dancer-pick .inner .rotation-card {position: relative; width: 100%; height: 450px;}
.dancer-pick .inner .rotation-card .card-wrap { position: absolute; height: 100%; width: 100%; left: 0; bottom: 0; transform: scale(1.1);}
.dancer-pick .inner .card {position: absolute; left: 50%; bottom: -80%; transition: transform 0.6s cubic-bezier(.22,1,.36,1); transform-origin: 50% 100%; will-change: transform;}
.dancer-pick .inner .inner-text .inner-tit {font-size: 50px; margin-top: 150px; margin-bottom: 50px; font-weight: 500; line-height: 1.1;}
#fan {
  pointer-events: auto; /* 기본적으로 클릭 가능 */
}
.dancer-pick .inner .inner-text .inner-txt {font-size: 16px; font-family: 'Pretendard',sans-serif; color: #818181; letter-spacing: 0px;}
.dancer-pick .inner .inner-text .inner-txt span{color: #0a0a0a;}
.dancer-pick .inner .inner-text .inner-txt br {display: none;}

.dancer-pick .inner .circle-wrap { position: relative; width: 160px; height: 160px; margin: 120px auto 0;}
.dancer-pick .inner .circle-text { position: absolute; inset: 0; border-radius: 50%; font-size: 14px; font-weight: 500;}
.dancer-pick .inner .circle-text span {position: absolute; left: 50%; top: 50%; transform-origin: 0 8px; color: #111; font-size: 12px;animation: spin 12s linear infinite;}

@keyframes spin {
  from { transform: rotate(var(--angle)) translateY(-80px); }
  to   { transform: rotate(calc(var(--angle) + 360deg)) translateY(-80px); }
}

.dancer-pick .inner .circle-wrap .center-icon { position: absolute; inset: 0; z-index: 2; left: 51%; top: 39%; transform: translate(-50%)}
.dancer-pick .inner .circle-wrap .center-icon .mouse-icon { width: 48px; transition: transform .3s ease, filter .3s ease; stroke: #0a0a0a; fill: #0a0a0a;}
.dancer-pick .inner .circle-wrap .center-icon:hover svg { transform: scale(1.2); stroke: #8724BD; fill: #8724BD;}

@media (max-width: 1400px) {
  .inner-header {width: 92%;}
  .inner-header nav {display: none;}
  .inner-header .right-box .language {display: none;}
  .menu {display: flex;}
  .menu.active {display: flex;}
  
  .inner-header .logo img {width: 18vw;}
  .fullscreen-menu {position: fixed; top: 0; left: 100%; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 100px; font-size: 50px; color: #fff; transition: all 0.7s; z-index: 100;}
  .fullscreen-menu.active { left: 0; }
  .fullscreen-menu a { color: #000; text-decoration: none; font-weight: bold; }
  header.menu-open {position: fixed; top: 40px; left: 0; width: 100%;}
  body.no-scroll { overflow: hidden;}




  .visual .inner {padding: 250px 24px 80px;}
  .visual .inner .text-box .tit {margin-bottom: 40px; font-size: 18vw;}
  .visual .inner .sub-tit {font-size: 16px;}
  .visual .inner .sub-tit2 {font-size: 14px;}
  .visual .inner .sub-tit2 br {display: none;}

  .dancer {padding-bottom: 300px;}
  .dancer .inner {padding: 50px 24px 0;}
  .dancer .inner .step .step-box {gap: 45px; margin-bottom: 110px;}
  .dancer .inner .step .step-box li {font-size: 26px;}
  .dancer .inner .btn .light-btn {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 rgbargba(255, 255, 255, 0.13);}
  .dancer .inner .btn .light-btn span {width: 40px; height: 40px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 14px;}
  .dancer .inner .btn .light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .sub-tit {font-size: 16px;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .name {font-size: 3vw;}


  .step-by-review {margin-bottom: 360px;}
  .step-by-review .inner {padding: 0 24px;}
  .step-by-review .inner .textBox .tit {font-size: 7vw; margin: 30px 0; letter-spacing: 2px;}
  .step-by-review .inner .textBox .top-sub-tit {font-size: 16px;}
  .step-by-review .inner .textBox .sub-tit {font-size: 18px;}


  .step-by-review .inner .card-box {display: block;}
  .step-by-review .inner .card-box li {width: 100%; padding: 24px 24px 60px 24px; position: relative;}
  .step-by-review .inner .card-box li .text-box {width: 100%;}
  .step-by-review .inner .card-box li .text-box .percent .number {font-size: 120px; margin-bottom: 178px;}
  .step-by-review .inner .card-box li .name {text-align: center; font-size: 40px;}
  .step-by-review .inner .card-box li .text {text-align: center; font-size: 20px;}
  .step-by-review .inner .card-box li span.line {margin: 20px auto;}
  .step-by-review .inner .card-box li .view-btn {position: absolute; bottom: 125px; right: 110px; z-index: 100;}
  .step-by-review .inner .card-box li p.img {position: absolute; top: 296px; right: 105px;}
  .step-by-review .inner .card-box li .view-btn p {font-size: 30px;}
  .step-by-review .inner .card-box li .view-btn img {width: 23px; height: 23px;}
  .step-by-review .inner .card-box li .text-box .skill .skill-bottom {margin-top: 15px;}


  .step-by-review .inner .card-box li .text-box .skill {margin-top: 120px;}

  .dancer-pick {margin-bottom: 300px; padding: 0 24px 100px;}
  .dancer-pick .inner .textBox .tit {font-size: 7vw; margin: 30px 0; letter-spacing: 2px;}
  .dancer-pick .inner .textBox .top-sub-tit {font-size: 16px;}
  .dancer-pick .inner .textBox .sub-tit {font-size: 18px; margin-bottom: 60px;}
  .dancer-pick .inner .rotation-card .card-wrap {transform: scale(1.2);}
  .dancer-pick .inner a.morebtn {margin: 0 auto 120px;}
  .dancer-pick .inner .inner-text .inner-tit {margin-top: 200px; margin-bottom: 60px;}
  .dancer-pick .inner .circle-wrap {display: none;}
  .dancer-pick .inner .inner-text .inner-txt br {display: block;}

  
.dancer-pick .inner .btn {margin-bottom: 120px;}
.dancer-pick .inner .btn .light-btn {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);}
.dancer-pick .inner .btn .light-btn span {width: 40px; height: 40px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 14px;}
.dancer-pick .inner .btn .light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dancer-pick .inner .btn .light-btn:hover {background: rgba(9, 9, 9, 0.3); transition: all 0.3s;}
.fan-disabled .card {pointer-events: none;}

}


@media (max-width: 768px) {
  .sub_topBtn img {width: 36px;}
  .sub_topBtn {font-size: 15px;}

  .inner-header .logo {font-size: 30px;}
      .fullscreen-menu {font-size: 40px; gap: 80px;}


  .visual .inner {padding: 200px 20px 60px;}
  .visual .inner .text-box .tit {margin-bottom: 24px;}
  .visual .inner .sub-tit {font-size: 14px;}
  .visual .inner .sub-tit2 {font-size: 12px; display: -webkit-box; overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: justify;}

  .dancer {padding-bottom: 300px;}
  .dancer .inner {padding: 0 20px;}
  .dancer .inner .btn {display: none;}
  .dancer .inner .step .step-box {gap: 40px; margin-bottom: 60px;}
  .dancer .inner .step .step-box li {font-size: 20px; -webkit-text-stroke: 0.1px #999;}
  .dancer .inner .step a img {display: none;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .sub-tit {font-size: 16px;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .name {font-size: 24px;}

    .dancer .inner .dancer-card-wrap {flex-wrap: wrap;}
    .dancer .inner .dancer-card-wrap .dancer-card {width: 48%; margin-bottom: 30px;}
  .dancer .inner .dancer-card-wrap:hover .dancer-card {transform: none; transition: none; filter: none;}
  .dancer .inner .dancer-card-wrap .dancer-card:hover  {transform: none; transition: none; filter: none;}
  .dancer .inner .dancer-card-wrap:hover .dancer-card .text-box {transform: none; transition: none}
  .dancer .inner .dancer-card-wrap:hover .dancer-card:hover .text-box {transform: none; transition: none;}
  
  .dancer .inner .dancer-card-wrap:hover .dancer-card .text-box {opacity: 1;}
  .dancer .inner .dancer-card-wrap:hover .dancer-card .text-box {transform: none; transition: none;}
  .dancer .inner .dancer-card-wrap:hover .dancer-card:hover .text-box {transform: none; transition: none;}


  .dancer .inner .btn .light-btn {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);}
  .dancer .inner .btn .light-btn span {width: 36px; height: 36px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 12px;}
  .dancer .inner .btn.light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


  .step-by-review {margin-bottom: 100px;}
  .step-by-review .inner {padding: 0 20px;}
  .step-by-review .inner .textBox {margin: 0 0 180px;}
  .step-by-review .inner .textBox.ti
  
  t {margin: 30px 0 30px; letter-spacing: 2px; font-size: 8vw;}
  .step-by-review .inner .textBox .top-sub-tit {font-size: 16px;}
  .step-by-review .inner .textBox .sub-tit {font-size: 18px;}
  .step-by-review .inner .card-box li .name {letter-spacing: 0px;}
  .step-by-review .inner .card-box li .text-box .skill {margin-top: 100px;}

  .dancer-pick {margin-bottom: 300px; padding: 0 20px 0; background: url(../img/dancer-pick-under-bg-768.png) no-repeat center/cover;}
  .dancer-pick .inner .text-box .tit {font-size: 8vw; margin: 30px 0 30px; letter-spacing: 2px;}
  .dancer-pick .inner .textBox .top-sub-tit {font-size: 16px;}
  .dancer-pick .inner .textBox .sub-tit {font-size: 18px; margin-bottom: 60px;}
  .step-by-review .inner .card-box li .text-box .skill .skill-bottom {flex-wrap: wrap;}
  .dancer-pick .inner .rotation-card .card-wrap {transform: scale(0.7);}
  .dancer-pick .inner .inner-text .inner-tit { margin-top: 80px; margin-bottom: 25px; font-size: 44px; -webkit-text-stroke: 0.5px #000; letter-spacing: 1px;}
  .dancer-pick .inner .rotation-card .card {transition: none;}

  
.dancer-pick .inner .btn {margin-bottom: 160px;}
.dancer-pick .inner .btn .light-btn {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);}
.dancer-pick .inner .btn .light-btn span {width: 36px; height: 36px; background: #F5F6FB; border-radius: 50%; position: relative; margin-left: 12px;}
.dancer-pick .inner .btn .light-btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dancer-pick .inner .btn .light-btn:hover {background: rgba(9, 9, 9, 0.3); transition: all 0.3s;}

    


  .step-by-review .inner .card-box li {padding: 0; margin-bottom: 200px;}
  .step-by-review .inner .card-box li .name {font-size: 36px;}
  .step-by-review .inner .card-box li .text {font-size: 16px;}
  .step-by-review .inner .card-box li span.line {width: 46px; height: 4px;}
  .step-by-review .inner .card-box li .text-box .percent .number {font-size: 90px; margin-bottom: 113px;}
  .step-by-review .inner .card-box li .text-box {margin-bottom: 0;}
  .step-by-review .inner .card-box li p.img {width: 63px; width: 65px; top: 249px; right: 80px;}
  .step-by-review .inner .card-box li .text-box .skill {font-size: 18px;}
  .step-by-review .inner .card-box li .view-btn p {font-size: 22px;}
  .step-by-review .inner .card-box li .view-btn img {width: 17px; height: 17px;}
  .step-by-review .inner .card-box li .view-btn {bottom: 50px; right: 80px;}
  .step-by-review .inner .card-box .learner .skill {margin-top: 0px;}
  .step-by-review .inner .card-box .master .skill {margin-top: 0px;}
}

@media (max-width: 500px) {
  .sub_topBtn img {width: 30px;}
  .sub_topBtn {font-size: 15px;}
  .inner-header .logo {font-size: 26px;}
  .menu {width: 25px; height: 17px;}
  .menu.active .a {transform: translateY(4px) rotate(45deg);}
  
  .inner-header .logo img {width: 25vw;}
  .fullscreen-menu {font-size: 28px; gap: 40px;}
  .inner-header .right-box .language {display: none;}



  .visual .inner {padding: 170px 16px 30px;}
  .visual .inner .text-box .tit {font-size: 20vw;  margin-bottom: 16px;}
  .visual .inner .sub-tit {font-size: 12px;}
  .visual .inner .sub-tit2 {display: none;}

  .dancer {padding-bottom: 100px;}
  .dancer .inner .step .step-box {flex-wrap: wrap;}
  .dancer .inner .dancer-card-wrap .dancer-card {margin-bottom: 16px;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box {margin-top: 16px;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .sub-tit {font-size: 14px; margin-bottom: 0;}
  .dancer .inner .dancer-card-wrap .dancer-card .text-box .name {font-size: 22px;}

  .step-by-review .inner {padding: 0 16px;}
  .step-by-review .inner .textBox {margin: 0 0 110px;}
  .step-by-review .inner .textBox .tit {margin: 16px 0 16px; letter-spacing: 2px; font-size: 9vw; font-weight: 400;}
  .step-by-review .inner .textBox .top-sub-tit {font-size: 12px;}
  .step-by-review .inner .textBox .sub-tit {font-size: 14px;}
  .step-by-review .inner .card-box li .name {letter-spacing: 0px;}
  .step-by-review .inner .card-box li .text-box .skill {height: 100%; margin-top: 80px;}



  .step-by-review .inner .card-box li {padding: 0px; margin-top: 170px; margin-bottom: 200px;}
  .step-by-review .inner .card-box li:last-child {margin-bottom: 50px;}
  .step-by-review .inner .card-box li .name {font-size: 30px; margin: 0;}
  .step-by-review .inner .card-box li .text {font-size: 16px;}
  .step-by-review .inner .card-box li span.line {width: 44px; height: 4px;}
  .step-by-review .inner .card-box li .text-box .percent .number {font-size: 80px; margin-bottom: 125px;}
  .step-by-review .inner .card-box li p.img {width: 60px; width: 60px; top: -75px; left: 50%; transform: translateX(-50%);}
  .step-by-review .inner .title-box .sub-tit {font-size: 14px;}
  .step-by-review .inner .card-box li .text-box {padding: 34px;}
  .step-by-review .inner .card-box li .text-box .skill {font-size: 16px;}
  .step-by-review .inner .card-box li .view-btn p {font-size: 20px; font-weight: 500;}
  .step-by-review .inner .card-box li .view-btn img {width: 16px; height: 16px;}
  .step-by-review .inner .card-box li .view-btn {position: absolute; bottom: -45px; right: 21px;}
  .step-by-review .inner .card-box li .view-btn p {margin-right: 9px; width: 100%;}


  .dancer-pick {padding: 0; background-position: center top; background: url(../img/dancer-pick-under-bg-390.png) no-repeat center/contain;}
  .dancer-pick .inner .rotation-card {display: none;}
  .dancer-pick .inner .bg {display: block; margin: 0;}
  .dancer-pick .inner .bg img {margin-top: 30px; width: 100%;}
  .dancer-pick .inner .btn {margin-bottom: 0;}
  .dancer-pick {margin-bottom: 100px;}
  .dancer-pick .inner .textBox {padding: 0 16px;}
  .dancer-pick .inner .textBox .tit {margin: 16px 0 16px; letter-spacing: 2px; font-size: 9vw; font-weight: 400;}
  .dancer-pick .inner .textBox .top-sub-tit {font-size: 12px;}
  .dancer-pick .inner .textBox  .sub-tit {font-size: 14px; margin-bottom: 30px;}
  .dancer-pick .inner .rotation-card .card-wrap {display: none;}
  .dancer-pick .inner .inner-text {padding: 0 16px;}
  .dancer-pick .inner .inner-text .inner-tit {font-size: 7vw; margin-top: 60px; margin-bottom: 24px;}

  .visual .inner .text-box .tit.motion span b {animation: none !important;}
  .dancer .inner .dancer-card-wrap.motion {animation: none !important}
  .step-by-review .inner .card-box .starter.motion {animation:  none !important;}
.step-by-review .inner .card-box .learner.motion {animation:  none !important;}
.step-by-review .inner .card-box .master.motion {animation:  none !important}

}