/* 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}
video {max-width: 100%; height: auto;}
html, body {overscroll-behavior-y: none;}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Labil Grotesk';
    src: url('../font/Labil\ Grotesk.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Jomolhari';
    src: url('../font/Jomolhari-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

* {font-family: 'Pretendard',sans-serif; color: #fff;}
html {background: #000;}
.wrap {background: #000;}
.en1 {font-family: 'Roboto' , sans-serif; letter-spacing: -0.02em;}
.en2 {font-family: 'Labil Grotesk' , sans-serif;}
.en3 {font-family: 'Montserrat' , sans-serif; letter-spacing: -0.02em;}
.en4 {font-family: 'Jomolhari' , sans-serif;}



/* Header */
header {position: fixed; width: 100%; height: 73px; z-index: 999; top: 0px; transition: all 0.5s ease-in-out; overflow: hidden; background: transparent;}
header.active {background: #000;}
header .inner {max-width: 1610px; margin: 0 auto;  height: 100%; position: relative;transition: all 0.5s ease-in-out; align-content: center; opacity: 0;}
header .inner .logo {position: absolute; left: 5%; top: 50%; transform: translateY(-50%);}
header .inner h1 {width: 50px;}
header .inner h1 img {width: 100%;}
header .inner h1.logoonly {display: none;} /* 글씨없는 로고는 제거 */
header .inner nav {display: flex; justify-content: space-between;}
header .inner nav ul {display: flex; font-size: 16px; margin: 0 auto;}
header .inner nav ul li {margin: 0 30px;}
header .inner nav ul li .text {transition: all 0.4s; position: relative; display: inline-block;}
header .inner nav ul li.show .text::before {content: ''; width: 0%; height: 1px; position: absolute; left: 0; bottom: -15%; background: #9f67ff; transition: all 0.4s;}
header .inner nav ul li.none .text{cursor: default; opacity: 0.35;}
header .inner nav ul li.show:hover .text {color: #9f67ff;}
header .inner nav ul li:hover .text::before {width: 100%;}
header .inner .SearchBox {display: flex; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); transition: all 0.4s;}
header .inner .SearchBox .imgBox img {width: 24px; height: 24px; transition: all 0.3s; opacity: 0.35; cursor: default;}
header .inner .SearchBox .imgBox:nth-child(2) {margin-left: 30px;}






/* 노래 */
header .inner .SearchBox .audio-controls .volume-control a {width: 26px; height: 26px; margin-left: 30px;}
header .inner .SearchBox .audio-controls .volume-control a img {width: 26px; height: 26px; cursor: pointer;}

.audio-controls {position: relative; display: none;}
.soundwave-container {
  display: none; /* 기본은 숨김 */
  margin-left: 8px;
  width: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  right: -110%;
  top: 50%;
  transform: translate(0%, -50%);
}
.soundwave-container {
  height: 20px;
  width: auto;
  display: flex;
  align-items: flex-end;
  margin-right: 15px;
}
.soundwave-container .bar {
  width: 3px;
  height: 40px;
  background: #00ebe1;
  border-radius: 2px;
  margin: 0 2px;
  animation: equalizer 10s steps(40, end) infinite;
}
.soundwave-container .bar:nth-child(1) { 
  animation-duration: 2s;
}
.soundwave-container .bar:nth-child(2) { 
  animation-duration: 2.2s;
}
.soundwave-container .bar:nth-child(3) { 
  animation-duration: 2.4s;
}
.soundwave-container .bar:nth-child(4) { 
  animation-duration: 2.6s;
}


@keyframes equalizer {
  0% {
    height: 60%;
  }
  4% {
    height: 50%;
  }
  8% {
    height: 40%;
  }
  12% {
    height: 30%;
  }
  16% {
    height: 20%;
  }
  20% {
    height: 30%;
  }
  24% {
    height: 40%;
  }
  28% {
    height: 10%;
  }
  32% {
    height: 40%;
  }
  36% {
    height: 60%;
  }
  40% {
    height: 20%;
  }
  44% {
    height: 40%;
  }
  48% {
    height: 70%;
  }
  52% {
    height: 30%;
  }
  56% {
    height: 10%;
  }
  60% {
    height: 30%;
  }
  64% {
    height: 50%;
  }
  68% {
    height: 60%;
  }
  72% {
    height: 70%;
  }
  76% {
    height: 80%;
  }
  80% {
    height: 70%;
  }
  84% {
    height: 60%;
  }
  88% {
    height: 50%;
  }
  92% {
    height: 60%;
  }
  96% {
    height: 70%;
  }
  100% {
    height: 80%;
  }
}











.header.scrolled {top: 0px;}
.header.scrolled .inner {max-width: 1800px;}
header.hide {
  transform: translateY(-100%);
}
.header.active .inner{animation: mainSlide 1s; animation-delay: 0s; opacity: 1;}

@keyframes mainSlide {
    0%{transform: translateY(100px); opacity: 0;}
    100%{transform: translateY(0px); opacity: 1;}
}




/* header -> 햄버거 */
.mobile-menu-toggle {display: none;flex-direction: column; gap: 3px; cursor: pointer; padding-top: 5%; box-sizing: border-box;}
.mobile-menu-toggle span {display: block; width: 30px; height: 1px; background: #fff; transition: all 0.3s ease;}
.mobile-nav {
  position: fixed;
  top: 38px;
  right: 0;
  width: 100%;
  background: #000;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.3s ease;
  z-index: 9999;
  border-radius: 0px 0px 15px 15px;
}


.mobile-nav ul {
  padding: 20px;
  margin: 0;
}



    .mobile-nav ul li a {
      color: #fff;
      opacity: 0.85;
      text-decoration: none;
      font-size: 35px;
      transition: all 0.3s ease;
    }
    
        .mobile-nav ul li.none a {
          cursor: default;
          opacity: 0.35;
    }
    
    .mobile-nav .hamIcon {opacity: 0.35;}









/*header 반응형 */
/* 1024 */
@media screen and (max-width: 1024px) {
  header{height: 62px;}
  header .inner h1 img{width: 41px;}
  header .inner nav ul{font-size: 11px;}
  header .inner nav ul li{margin: 0 20px;}  
  header .inner .SearchBox .imgBox img{width: 19px; height: 19px;}
  header .inner .SearchBox .imgBox:nth-child(2){margin-left: 16px;}
  header .inner .SearchBox .audio-controls {display: none;}
}
/* 768 */
@media screen and (max-width: 768px) {
  header .inner h1 {width: 39px;}
  header .inner h1 a {width: 100%; display: inline-block; height: 100%;}
  header .inner h1 img{width: 100%;}
  header .inner nav ul{font-size: 9px;}
  header .inner nav ul li{margin: 0 12px;}
  header .inner nav ul li .text {font-size: 12px;}
  header .inner .SearchBox .imgBox img{width: 16px; height: 16px;}
  header .inner .SearchBox .imgBox:nth-child(2){margin-left: 10px;}
  header .inner .SearchBox .audio-controls {display: none;}
}
/* 480 */
@media screen and (max-width: 480px) {
  /* 로고 글씨없는버전으로 변경 */
  header .inner h1.logo {display: none;}
  header .inner h1.logoonly {display: inline; position: absolute; left: 5%; top: 60%; transform: translateY(-60%); width: 50px; height: 50px;}
  
  header{height: 60px;}
  header .inner h1 img{width: 50px;}
  header .inner nav ul{display: none;}
  header .inner nav ul li{margin: 0 7px;}
  /* header .inner .SearchBox .imgBox img{width: 13px; height: 13px;}
  header .inner .SearchBox .imgBox:nth-child(2){margin-left: 7px;} */ /* 숨김처리 */

  /* 480로고 오른쪽 텍스트 */
  header .logoonly a::after {content: 'IGLOO'; width: auto; height: 32.3px; position: absolute; top: 50%; left: 120%; transform: translateY(-50%); line-height: 32.3px; font-size: 24px;}


  /* 햄버거 */
  .mobile-menu-toggle {
    display: block;
    z-index: 1001;
    width: 30px; height: 30px;
  }
  .bar {
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
  }
  
  /* 각 바 초기 위치 */
  .bar--top {
    top: 25%;
  }
  
  .bar--middle {
    top: 50%;
  }
  
  .bar--bottom {
    top: 75%;
  }
  
  /* X 모양 전환 */
/* X 모양 전환 (percent 기준에 맞게 수정) */
.mobile-menu-toggle.active .bar--top {
  top: 55%;
  transform: rotate(45deg) scale(1.3);
}

.mobile-menu-toggle.active .bar--middle {
  opacity: 0;
}

.mobile-menu-toggle.active .bar--bottom {
  top: 55%;
  transform: rotate(-45deg) scale(1.3);
}



  
  .mobile-nav.active {
    display: block;
  }
  
    /* 모바일 메뉴: 오른쪽에서 왼쪽으로 슬라이드 */
    .mobile-nav {
      position: fixed;
      top: 60px;
      right: 0;
      width: 0;
      height: 100%;
      background: #000;
      overflow: hidden;
      opacity: 0;
      transition: width 0.4s ease, opacity 0.3s ease;
      z-index: 9999;
    }
  
    .mobile-nav.active {
      width: 100%; /* 너비 설정 */
      opacity: 1;
    }
  
    .mobile-nav ul {
      padding: 80px 33px;
      margin: 0;
      box-sizing: border-box;
    }
  
    .mobile-nav ul li {
      white-space: nowrap;
      margin-bottom: 33px;
    }
  



    .mobile-nav ul li a {
      color: #fff;
      opacity: 0.85;
      text-decoration: none;
      font-size: 35px;
      transition: all 0.3s ease;
    }
    
    /* 모바일에서 링크 클릭 시 포커스 박스 삭제 및 색깔 변경 */
    .mobile-nav ul li a {-webkit-tap-highlight-color: transparent;}
    .mobile-nav ul li a:focus {outline: none; box-shadow: none; color: #9f67ff;}
    .mobile-nav ul li a:active {color: #9f67ff; outline: none;}
    .mobile-nav ul li a::-moz-focus-inner {border: 0;} /* 파이어폭스 전용 */

    /* 모바일에서 서치박스 숨김 */
    header .inner .SearchBox > .imgBox {display: none;}
    /* 서치박스 숨기면 햄버거 메뉴 height가 안잡히니까 서치박스에 height 추가 */
    header .inner .SearchBox {height: 30px;}
    /* search 서치, globe 글로브 아이콘 추가 */
    .mobile-nav ul .hamIcon {width: 20%;}
    .mobile-nav ul .hamIcon div {display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; margin: 0 auto;}
    .mobile-nav ul .hamIcon div .imgBox img {width: 30px; aspect-ratio: 1/1;}

} 













/* footer */
footer{position: relative; overflow: hidden; padding-bottom: 30px;}
footer > .imgBox{position: absolute; top: -400px ; right: -275px;}
footer .footerWrap{margin: 0 7.5%; position: relative;}
footer .footerWrap .corp{display: flex; justify-content: space-between; width: 26%; float: right; margin: 63px 0px;}
footer .footerWrap .corp li{font-size: 22px; font-weight: 300; color: #fff; opacity: 0.9; transition: all 1s; width: 80%;}
footer .footerWrap .corp li a {
    background-color: transparent;
    border: none;
    padding: 5px;
    position: relative;
    width: 7.2em;
    height: 2em;
    transition: 0.5s;
    font-size: 17px;
    border-radius: 0.4em;
  }
  
  footer .footerWrap .corp li a p {
    position: absolute;
    top: 0.4em;
    left: 1.2em;
    margin: 0;
    padding: 0;
    transition: .5s;
    color: #fff;
  }
  
  footer .footerWrap .corp li a svg {
    position: absolute;
    top: 0.45em;
    right: 0.5em;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: 0.5s;
    height: 1em;
    fill: #0077b5
  }
  
  footer .footerWrap .corp li a:hover p {
    left: 0.6em;
    color: #0077b5
  }
  
footer .footerWrap .corp li a:hover svg {opacity: 1;}

footer .footerWrap .corp li:nth-child(2) a:hover p{color: #1877F2;}
footer .footerWrap .corp li:nth-child(3) a:hover p{color: #FF0000;}
footer .footerWrap .corp li:nth-child(2) a svg{fill: #1877F2;}
footer .footerWrap .corp li:nth-child(3) a svg{fill: #FF0000;}

footer .footerWrap .newsLetter{padding-top: 150px;}
footer .footerWrap .newsLetter .text1{font-size: 18px; color: #fff; opacity: 0.62;}
footer .footerWrap .newsLetter .text2{font-size: 22px; color: #fff; opacity: 0.9; margin-top: 15px;}
footer .footerWrap .newsLetter .write{display: flex; justify-content: left; margin-top: 23px;}
footer .footerWrap .newsLetter .write .textLogin{background: #000; width: 281px; height: 53px; border: none; border-bottom: 1px solid #111111; margin-right: 21px; font-size: 18px;}
/* button */
footer .footerWrap .newsLetter .write .buttonBox{align-content: center; opacity: 0.8;}
footer .footerWrap .newsLetter .write .buttonBox button {
background: #242323; width: 8em; height: 3.3em; border: 2px solid #000;border-radius: 25px;font-weight: bold; text-transform: uppercase; color: #1abc9c; padding: 2px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; cursor: pointer;}
footer .footerWrap .newsLetter .write .buttonBox button .login {transition: .4s ease-in-out;position: absolute;}
footer .footerWrap .newsLetter .write .buttonBox button .complete {transform: translateY(1em) scale(0); color: #000; position: absolute;}
footer .footerWrap .newsLetter .write .buttonBox button .loader-container {height: 100%;width: 100%; background-color: transparent; border-radius: inherit; display: flex; justify-content: center; align-items: center; z-index: 0; overflow: hidden;}
footer .footerWrap .newsLetter .write .buttonBox button .loader-container .loader {height: 100%; width: 100%; background-color: #9f67ff; border-radius: inherit; transform: translateX(-13em);}
footer .footerWrap .newsLetter .write .buttonBox button:focus {border: 2px solid #9f67ff; animation: scaling 0.8s ease-in-out 0s 1 both; background-color: transparent;}
footer .footerWrap .newsLetter .write .buttonBox button:focus .login {position: absolute;transform: translateY(-5em); transition: .4s ease-in-out;}
footer .footerWrap .newsLetter .write .buttonBox button:focus .complete {transform: translateY(0) scale(1); transition: .2s ease-in-out 1.2s;z-index: 2;}
footer .footerWrap .newsLetter .write .buttonBox button:focus .loader-container .loader {display: block; transform: translate(0); transition: .8s cubic-bezier(0,.4,1,.28) .2s; animation: loading 0.6s forwards; background-color: #9f67ff;}

@keyframes scaling {
    20% {height: 1.5em;}
    80% {height: 1.5em;} 
    100% {height: 3.3em;}
}

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

footer .footerWrap .newsLetter .write .textLogin:focus{outline: none; border-bottom: 1px solid #9f67ff; transition: all 1s;}
footer .footerWrap .imgLine{text-align: center; position: relative; margin-top: 113px;}
footer .footerWrap .imgLine::before{content: ''; position: absolute; width: 1000%; height: 1px; background: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.6;}
footer .footerWrap .navigation{margin: 50px 0 91px; display: flex; justify-content: space-between; width: 550px; font-size: 21px; font-weight: 300; color: #fff; }
footer .footerWrap .navigation li.show a {transition: all 0.5s ease;}
footer .footerWrap .navigation li.none a {cursor: default; opacity: 0.35;}
footer .footerWrap .navigation li.show a:hover{color: #9f67ff;}
footer .footerWrap .footerBottom{display: flex; justify-content: space-between; align-items: flex-end;}
footer .footerWrap .footerBottom .footerLogo{ height: 100%; transition: all 1s; position: relative; z-index: 2; color: #9f67ff; overflow: hidden;}
footer .footerWrap .footerBottom .footerLogo img{position: absolute; top: 0%; left: 0%; z-index: 11; width: 100%;}
footer .footerWrap .footerBottom .footerLogo img:nth-child(1){position: relative; filter: brightness(0) saturate(100%) invert(44%) sepia(16%) saturate(3957%) hue-rotate(227deg) brightness(106%) contrast(107%);}
footer .footerWrap .footerBottom .footerLogo img:nth-child(2){width: 120%; height: 100%; left: -20%;}
footer .footerWrap .footerBottom .footerLogo img:nth-child(3){filter: brightness(0) saturate(100%) invert(44%) sepia(16%) saturate(3957%) hue-rotate(227deg) brightness(106%) contrast(107%);}
footer.active .footerWrap .footerBottom .footerLogo img:nth-child(2){transition: all 1.5s; left: 120%;}

footer .footerWrap .footerBottom .number {font-size: 16px; opacity: 0.62; text-align: right; display: block; }
footer .footerWrap .footerBottom .number .copy{margin-top:15px;}




/*footer 반응형 */
/* 1024 */
@media screen and (max-width: 1024px) {
  footer > .imgBox{width: 700px; height: 700px; top: -50%; right: -20%;}
  footer > .imgBox >img{width: 100%; height: 100%;}
  footer .footerWrap .corp{width: 300px; margin: 32px 0;}
  footer .footerWrap .corp li a p{font-size: 13px;}
  footer .footerWrap .corp li a svg{top: 50%; transform: translateY(-50%);}
  footer .footerWrap .newsLetter{padding: 46px 0;}
  footer .footerWrap .newsLetter .text1{font-size: 14px;}
  footer .footerWrap .newsLetter .text2{font-size: 18px;}
  footer .footerWrap .newsLetter .write .textLogin{font-size: 14px; width:30%; margin-right: 78px ;}
  footer .footerWrap .imgLine{margin: 0;}
  footer .footerWrap .imgLine img{width: 35px; height: 35px;}

  footer .footerWrap .navigation{margin: 10 0 31px; width: 50%; font-size: 16px;}
  footer .footerWrap .footerBottom{margin-top: 0px; width: 98%;}
  footer .footerWrap .footerBottom .footerLogo{width: 70%}
  footer .footerWrap .footerBottom .number{font-size: 11px;}
}

/* 768 */
@media screen and (max-width: 768px) {
  footer > .imgBox{width: 700px; height: 700px; top: -47%; right: -29%;}

  footer .footerWrap .imgLine img{width: 30px; height: 30px;}

  footer .footerWrap .corp{margin: 20px 0; width: 50%;}
  footer .footerWrap .footerBottom{display: block;}
  footer .footerWrap .navigation{margin: 14.5px auto 0; width: 60%;}
  footer .footerWrap .footerBottom{margin: 0 auto; width: 92%;}
  footer .footerWrap .footerBottom .number{margin-top: 12px;}
  footer .footerWrap .footerBottom .number .copy{margin-top: 10px;}
  footer .footerWrap .footerBottom .footerLogo{width: 100%; margin-top: 22px;}
}

/* 480 */
@media screen and (max-width: 480px) {
  footer{padding-bottom: 15px;}
  footer > .imgBox{top: -90%; right: -66%;}

  footer .footerWrap .corp li{text-align: center; width: 100%;}
  footer .footerWrap .corp li a{padding: 0;}
  footer .footerWrap .corp li a p {font-size: 9px; position: relative; top: 0; left: 0;}
  footer .footerWrap .corp li a svg{right: 2px; display: none;}

  footer .footerWrap .imgLine img{width: 25px; height: 25px;}

  footer .footerWrap .newsLetter {padding:75px 0 10px;}
  footer .footerWrap .newsLetter .text1{font-size: 12px;}
  footer .footerWrap .newsLetter .text2{font-size: 14px;}
  footer .footerWrap .newsLetter .write .textLogin{width: 27%; height: 40px; margin-right: 8px; font-size: 13px; font-size: 12px;}
 
  footer .footerWrap .newsLetter .write .buttonBox button{width: 6em; height: 2em; padding: 0px; border: 1px solid #000;}
  
  footer .footerWrap .newsLetter .write .buttonBox button .loader-container{height: 2em;}
  footer .footerWrap .newsLetter .write .buttonBox button .loader-container .loader{height: 80%;}
  
  footer .footerWrap .newsLetter .write .buttonBox button .login{font-size: 10px;}
  footer .footerWrap .newsLetter .write .buttonBox button .complete{font-size: 10px;}

  footer .footerWrap .navigation{width: 78%; font-size: 13px; margin: 0 auto;}

  footer .footerWrap .footerBottom {width: 100%;}
  footer .footerWrap .footerBottom .footerLogo{opacity: 0.2; width: 100%; margin-top: 22px; width: 105%; left: 0;}
  footer .footerWrap .footerBottom .footerLogo a img:nth-child(1) {filter: grayscale(100%);}
  footer .footerWrap .footerBottom .footerLogo a img:nth-child(3) {filter: grayscale(100%);}
  footer .footerWrap .footerBottom .number{position: absolute; bottom: 0; right: 0; z-index: 10; width: 100%; text-align: left; }
  footer .footerWrap .footerBottom .number .copy{margin: 15px 0 0;}
  
  @keyframes scaling {
    20% {height: 1em;}
    80% {height: 1em;} 
    100% {height: 2em;}
  }
}





















/* ------------------[공통요소 : alert]--------------------- */
/* alert 박스 커스텀 */
.custom-alert {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: sans-serif;
  }
  
  .alert-box {
    background: #fff;
    padding: 24px 36px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    text-align: center;
    animation: fadeIn 0.3s ease;
    color: #000; /* ✅ 글자색 검정 */
  }
  
  .alert-box p {
    margin: 0 0 16px;
    font-size: 16px;
    color: #000; /* ✅ 글자색 검정 */
  }
  
  .alert-box button {
    padding: 8px 20px;
    background: #9f67ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .alert-box button:hover {
    background: #9f67ff;
  }
  
  @keyframes fadeIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  
  .custom-alert {transition: opacity 0.3s ease;}




.visual .container .inner .title {font-size: 141px; letter-spacing: 0; line-height: 141px; display: block;}
.visual .container .inner .title p {display: block;}
.visual .container .inner .textBox h3 {font-size: 26px; letter-spacing: 0; background: linear-gradient(to bottom, rgba(143, 103, 255,0.9)0%, rgba(99, 33, 212,0.85) 100%); background-clip: text;  -webkit-text-fill-color: transparent; font-weight: 100;}

.visual .brNone {display: none;}



.visual .container .inner .textBox p {font-size: 18px; font-weight: 300; line-height: 26px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); color: hsl(0, 0%, 80%, 0.9);}
.visual .container .inner .textBox span {font-weight: 300; font-size: 13px; line-height: 19px; letter-spacing: 0; color: #777; text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);}


.visual {position: relative; height: auto; overflow: hidden; min-height: 1500px; background: #000000; width: 100%;}
.visual .container {position: absolute; padding: 0 8%; width: 100%; z-index: 30; height: 100%;}
.visual .container .inner {margin: 232px auto 0; max-width: 1610px; height: 100%;}
.visual .container .inner .title .solution {padding-left: 160px; margin-top: -10px;}
.visual .container .inner .textBox {display: flex; justify-content: flex-end; margin-top: 72px; gap: 70px; overflow: visible;}
.visual .container .inner .textBox .left {width: 40%;} 
.visual .container .inner .textBox .right {width: 42%;}
.visual .container .inner .textBox p {margin: 20px 0;}
.visual .bgBox {position: absolute; top: 20%; width: 100%;}
.visual .bgBox img {
  display: block; 
  width: 100%;  
  filter: brightness(0.6)/*노출*/ saturate(1.05)/*채도*/ contrast(1)/*대비*/ opacity(0.6)/*투명도*/;
}


/* 경계용 그라데이션 */
.visual .gradient-transition {width: 100%;height: 450px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%); z-index: 1; position: absolute; bottom: 0; left: 0;}













/* visual splitting 애니메이션 */
.visual .title .our .char { /* 텍스트 윗줄 아랫줄 애니메이션 */
  display: inline-block; 
  opacity: 0; 
  transform: translateX(50px) scale(1.3); 
  filter: blur(10px); 
  animation: blurIn 0.7s ease-out forwards; 
  animation-delay: calc(var(--char-index)*0.05s);
  font-family: 'Jomolhari' , sans-serif;}

  .visual .title .char { /* 텍스트 윗줄 아랫줄 애니메이션 */
    display: inline-block; 
    opacity: 0; 
    transform: translateX(50px) scale(1.3); 
    filter: blur(10px); 
    animation: blurIn 0.7s ease-out forwards; 
    animation-delay: calc(var(--char-index)*0.05s);}

  

@keyframes blurIn {
  to {
    opacity : 1;
    transform: translateX(0) scale(1);
    filter:blur(0);
  }
}



/* 텍스트박스 애니메이션 */
.visual .container .inner .textBox .high,
.visual .container .inner .textBox .middle,
.visual .container .inner .textBox .low {
  animation-name: fadeInUp;
  animation-duration: 1000ms;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

.visual .container .inner .textBox .high { animation-delay: 0.3s; }
.visual .container .inner .textBox .middle { animation-delay: 0.4s; }
.visual .container .inner .textBox .low    { animation-delay: 0.5s; display: inline-block;}

.visual .bgBox {
  animation: fadeInUp 800ms ease-in-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }
  /* 중간에 한 번 더 살짝 풀어주면 자연스러워집니다 */
  50% {
    filter: blur(2px);
  }
  80% {
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}







@media screen and (max-width: 1400px) {
  #starsContainer {
    display: none !important;
  }
    .svgLine {max-height: 140vh; margin-top: 100px;}

}




/*visual 반응형 */
/* 1024 */
@media screen and (max-width: 1024px) {
  .visual {min-height: 800px;}
  .visual .container .inner {margin: 160px auto 0;}
  .visual .container .inner .title {font-size: 84px; line-height: 84px;}
  .visual .container .inner .textBox .right {width: 45%;}
  .visual .container .inner .title .solution {padding-left: 120px;}
  .visual .container .inner .textBox .middle {display: none;}
  .visual .container .inner .textBox {margin-top: 80px; display: block;}
  .visual .container .inner .textBox .left {margin-left: 15%; width: 60%;}
  .visual .container .inner .textBox .left .high {margin-bottom: 7px;}
  .visual .container .inner .textBox h3 {font-size: 22px;}
  .visual .container .inner .textBox .low {font-size: 16px; line-height: 20px;}
  .visual .container .inner .textBox .right {width: 65%; margin-left: 37%; margin-top: 40px;}
  .visual .container .inner .textBox .right .high {margin-bottom: 7px; width: 100%;}
  .visual .container .inner .textBox .right .low {width: 78%;}
  .visual .bgBox {top: 30%;}




  .svgLine {max-height: 130vh; margin-top: 100px;}
  .start-marker .marker-label {font-size: 15px !important;}
  .start-marker.phase2 .marker-label {top: -15px !important; left: 145px !important;}
  .start-marker.phase2 .title {margin-bottom: 3px !important;}
  .start-marker.phase2 .marker-label .text01 {display: flex;}
  .start-marker.phase2 .marker-label .text {font-size: 10px !important; font-weight: 100 !important; opacity: 0.6 !important; line-height: 15px !important;}
  .start-marker.phase2 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase2 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase2 .maker-img img {width: 100%;}
  .start-marker.phase2 .text.last {padding-left: 3px !important;}
  .static-connector {height: 150px !important;}


  .start-marker.phase3 .marker-label {top: -20px !important; left: -40px !important;}
  .start-marker.phase3 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase3 .title {margin-bottom: 0px !important;}
  .start-marker.phase3 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase3 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase3 .maker-img img {width: 100%;}

  .start-marker.phase7 .marker-label {top: -5px !important; left: -35px !important;}
  .start-marker.phase7 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase7 .title {margin-bottom: 0px !important;}
  .start-marker.phase7 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase7 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase7 .maker-img img {width: 100%;}

  .start-marker.phase8 .marker-label {top: -5px !important; left: -35px !important;}
  .start-marker.phase8 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase8 .title {margin-bottom: 0px !important;}
  .start-marker.phase8 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase8 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase8 .maker-img img {width: 100%;}


  .start-marker.phase9 .marker-label {top: -35px !important; left: -30px !important;}
  .start-marker.phase9 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase9 .title {margin-bottom: 0px !important;}
  .start-marker.phase9 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase9 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase9 .maker-img img {width: 100%;}



  .start-marker.phase5 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase5 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase5 .maker-img img {width: 100%;}
  .start-marker.phase5 .text {font-size: 10px !important; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase5 .title {margin-bottom: 0px !important;}
  .start-marker.phase5 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase5 .marker-label {top: -5px !important; left: -30px !important;}

  .start-marker.phase6 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase6 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase6 .maker-img img {width: 100%;}
  .start-marker.phase6 .text {font-size: 10px !important; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase6 .title {margin-bottom: 0px !important;}
  .start-marker.phase6 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase6 .marker-label {top: -5px !important; left: -30px !important;}



  .start-marker.phase4 .maker-img {width: 70px !important; height: 70px !important; top: -130px !important;}
  .start-marker.phase4 .maker-img::before {bottom: -95px !important;}
  .start-marker.phase4 .maker-img img {width: 100%;}
  .start-marker.phase4 .title {margin-bottom: 0px !important;}
  .start-marker.phase4 .marker-label .text {font-size: 10px; margin-bottom: -5px; font-weight: 100 !important; opacity: 0.6 !important;}
  .start-marker.phase4 .marker-label {top: -30px !important; left: -50px !important;}
}




/* 768 */
@media screen and (max-width: 768px) {
  .visual {min-height: 600px;} 
  .visual .container .inner {margin: 120px auto 0;}
  .visual .container .inner .title {font-size: 64px !important;}
  .visual .container .inner .title .solution { margin-top: -30px; text-align: left;}
  .visual .container .inner .textBox {margin-top: 60px;}
  .visual .container .inner .textBox .left {width: 65%; margin-left: 15%;}
  .visual .container .inner .textBox h3 {font-size: 20px !important;}
  .visual .container .inner .textBox span {font-size: 14px !important; line-height: 20px !important; color: #cccccc !important; opacity: 0.8 !important;}
  .visual .container .inner .textBox .right {width: 80%; margin-left: 37%; margin-top: 40px;}
  .visual .container .inner .textBox .low {width: 95%;}
  .visual .container .inner .textBox .right .low {width: 68%;}
  .visual .container .inner .textBox h3 {font-size: 20px !important;}
  .visual .container .inner .textBox p {font-size: 8px !important; line-height: 11px; margin: 2px 0px 5px 0px;}
  .visual .container .inner .textBox span {font-size: 14px !important; line-height: 20px !important; color: #cccccc;}
  .visual .brNone {display: inline;}
  .visual .bgBox {top: 37%;}
  .visual .bgBox img {filter: brightness(0.7) /*노출*/ saturate(1.05) /*채도*/ contrast(1) /*대비*/ opacity(1) /*투명도*/;}







  .svgLine {max-height: 80vh; margin-top: 50px;}
  .start-marker .marker-label {font-size: 12px !important;}
  .start-marker.phase2 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase2 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase2 .maker-img img {width: 100%;}
  .start-marker.phase2 .marker-label .text01 {display: block;}
  .start-marker.phase2 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase2 .marker-label {left: -50px !important;}
  

  .start-marker.phase3 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase3 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase3 .maker-img img {width: 100%;}
  .start-marker.phase3 .marker-label .text01 {display: block;}
  .start-marker.phase3 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase3 .marker-label {left: -35px !important; top: -10px !important;}




  .start-marker.phase7 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase7 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase7 .maker-img img {width: 100%;}
  .start-marker.phase7 .marker-label .text01 {display: block;}
  .start-marker.phase7 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase7 .marker-label {left: -30px !important; top: -10px !important;}


  .start-marker.phase8 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase8 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase8 .maker-img img {width: 100%;}
  .start-marker.phase8 .marker-label .text01 {display: block;}
  .start-marker.phase8 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase8 .marker-label {left: -30px !important; top: -0px !important;}
  .start-marker.phase8 .text.last {padding-left: 4px !important;}






  .start-marker.phase9 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase9 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase9 .maker-img img {width: 100%;}
  .start-marker.phase9 .marker-label .text01 {display: block;}
  .start-marker.phase9 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase9 .marker-label {left: -35px !important; top: -20px !important;}
  .start-marker.phase9 .text.last {padding-left: 4px !important;}


  .start-marker.phase5 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase5 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase5 .maker-img img {width: 100%;}
  .start-marker.phase5 .marker-label .text01 {display: block;}
  .start-marker.phase5 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase5 .marker-label {left: -35px !important; top: -0px !important;}



  .start-marker.phase6 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase6 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase6 .maker-img img {width: 100%;}
  .start-marker.phase6 .marker-label .text01 {display: block;}
  .start-marker.phase6 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase6 .marker-label {left: -35px !important; top: -0px !important;}
  .start-marker.phase6 .text.last {padding-left: 9.5px !important;}




  .start-marker.phase4 .maker-img {width: 48px !important; height: 48px !important; top: -100px !important;}
  .start-marker.phase4 .maker-img::before {bottom: -80px !important;}
  .start-marker.phase4 .maker-img img {width: 100%;}
  .start-marker.phase4 .marker-label .text01 {display: block;}
  .start-marker.phase4 .marker-label .text {font-size: 9px !important;}
  .start-marker.phase4 .marker-label {left: -30px !important; top: -10px !important;}
  .start-marker.phase4 .text.last {padding-left: 5px !important;}


  .static-connector {height: 110px !important;}


}

/* 480 */
@media screen and (max-width: 480px) {
  .visual {min-height: 500px;}
  .visual .container {padding: 0 6%;}
  .visual .container .inner {margin: 80px auto 0;}
  .visual .container .inner .title {font-size: 60px !important;}
  .visual .container .inner .title .solution {padding-left: 70px !important; margin-top: -30px !important;}
  .visual .container .inner .textBox {margin-top: 20px !important; display: block;}
  .visual .container .inner .textBox .left {width: 100%; margin-left: 0% !important;}
  .visual .container .inner .textBox .left .low {width: 80%;}
  .visual .container .inner .textBox h3 {font-size: 18px !important; margin-bottom: 5px !important;}
  .visual .container .inner .textBox p {display: none !important;}
  .visual .container .inner .textBox span {font-size: 14px !important; line-height: 1.4 !important; color: #fff !important; opacity: 0.7 !important; font-weight: 100 !important;}
  .visual .container .inner .textBox .low {width: 95%;}
  .visual .container .inner .textBox .right {width: 100%; margin-top: 20px; margin-left: 0;}
  .visual .container .inner .textBox .right .low {width: 93%;}
  .visual .bgBox {top: 50%;}
  .visual .bgBox img {filter: brightness(2.5) /*노출*/ saturate(1.05) /*채도*/ contrast(1) /*대비*/ opacity(0.8) /*투명도*/;}
  
    #starsContainer {
    display: none !important;
  }
  
  .svgLine {max-height: 70vh; margin-top: 100px;}
  .start-marker .marker-circle {width: 6px !important; height: 6px !important;}
  .start-marker.phase2 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker .marker-label {font-size: 10px !important;}
  .start-marker.phase2 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase2 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase2 .maker-img img {width: 100%;}
  .start-marker.phase2 .marker-label .text01 {display: none;}
  .start-marker.phase2 .marker-label .text {display: none;}
  .start-marker.phase2 .marker-label {left: 80px !important; top: -25px !important;}


  .start-marker.phase3 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase3 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase3 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase3 .maker-img img {width: 100%;}
  .start-marker.phase3 .marker-label .text01 {display: block;}
  .start-marker.phase3 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase3 .marker-label {left: -30px !important; top: -39px !important;}

  .start-marker.phase7 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase7 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase7 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase7 .maker-img img {width: 100%;}
  .start-marker.phase7 .marker-label .text01 {display: block;}
  .start-marker.phase7 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase7 .marker-label {left: -20px !important; top: -23px !important;}




  .start-marker.phase8 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase8 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase8 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase8 .maker-img img {width: 100%;}
  .start-marker.phase8 .marker-label .text01 {display: block;}
  .start-marker.phase8 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase8 .marker-label {left: -13px !important; top: -25px !important;}



  .start-marker.phase9 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase9 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase9 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase9 .maker-img img {width: 100%;}
  .start-marker.phase9 .marker-label .text01 {display: block;}
  .start-marker.phase9 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase9 .marker-label {left: -20px !important; top: -25px !important;}




  .start-marker.phase5 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase5 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase5 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase5 .maker-img img {width: 100%;}
  .start-marker.phase5 .marker-label .text01 {display: block;}
  .start-marker.phase5 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase5 .marker-label {left: -15px !important; top: -20px !important;}





  .start-marker.phase6 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase6 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase6 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase6 .maker-img img {width: 100%;}
  .start-marker.phase6 .marker-label .text01 {display: none;}
  .start-marker.phase6 .marker-label .text {font-size: 8px !important; margin-bottom: -8px; display: none;}
  .start-marker.phase6 .marker-label {left: -27px !important; top: -20px !important;}



  .start-marker.phase4 .title {font-size: 10px !important; font-weight: 100 !important; opacity: 0.8 !important;}
  .start-marker.phase4 .maker-img {width: 28px !important; height: 28px !important; top: -60px !important;}
  .start-marker.phase4 .maker-img::before {bottom: -50px !important; height: 50px !important;}
  .start-marker.phase4 .maker-img img {width: 100%;}
  .start-marker.phase4 .marker-label .text01 {display: none;}
  .start-marker.phase4 .marker-label .text {font-size: 8px !important; margin-bottom: -10px; display: none;}
  .start-marker.phase4 .marker-label .text.last {font-size: 8px !important; margin-bottom: -9px;}
  .start-marker.phase4 .marker-label {left: -25px !important; top: -30px !important;}
} 







/* ------------------[visual : 밤하늘의 별]-------------------- */
/* 밤하늘에 별을 */
.stars-container {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  z-index: 199;
}

.star {
  position: absolute;
    background: radial-gradient(circle at center,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.7) 40%,
        rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: twinkle 2s infinite alternate;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.star.large {
  width: 3px;
  height: 3px;
  animation-duration: 3s;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.star.medium {
  width: 2px;
  height: 2px;
  animation-duration: 2.5s;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.star.small {
  width: 1px;
  height: 1px;
  animation-duration: 1.5s;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
    background: radial-gradient(circle at center,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0) 70%);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
              0 0 0 8px rgba(255, 255, 255, 0.1),
              0 0 20px rgba(255, 255, 255, 1);
}

.shooting-star::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
    background: linear-gradient(45deg,
      rgba(255,255,255,0.8),
      rgba(255,255,255,0));
}

.moon {
  display: none;
}

.custom-cursor {
  display: none;
}

.constellation {
  display: none;
}

.constellation-line {
  display: none;
}


/* visual splitting 애니메이션 */
.visual .title .char {
  display: inline-block; 
  opacity: 0; 
  transform: translateX(50px) scale(1.3); 
  filter: blur(10px); 
  animation: blurIn 0.7s ease-out forwards; 
  animation-delay: calc(var(--char-index)*0.05s);}
  
.visual .container .inner .title p.solution .char {-webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #9f67ff; font-family: 'Labil Grotesk' , sans-serif;}



@keyframes blurIn {
  to {
    opacity : 1;
    transform: translateX(0) scale(1);
    filter:blur(0);
  }
}



























/* wrap 안은 overflow hidden 가능 */
.wrap {
  overflow-x: hidden;
  overflow-y: visible;
}


/* SVG 애니 전용 섹션 */
.svgLine {
  position: relative;
  height: 185vh;    /* 필요 시 더 늘리세요 */
  overflow: visible;
  background: transparent;
}

/* sticky로 화면에 고정 */
.svg-wrapper {
  position: sticky;
  bottom: -10vh;
  width: 85vw;      /* 요청하신 90vw */
  max-width: 1855px;
  margin: 0 auto;

  perspective: 1000px;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  z-index: 10;


  position: relative;
}
.svg-wrapper svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 간단한 opacity 전환 효과 */
.svg-wrapper path {
  transition: opacity 1s ease;
}

/* 공통 path 스타일 */
.svg-wrapper path.st0 {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 3px;
}

/* Static path: 흰색, 대시 세팅 없음 */
.svg-wrapper path.static {
  stroke: #fff;
  stroke-width: 1px;
  opacity: 0.2;
}

/* Animated path: 컬러, JS에서 dash 애니메이션 */
.svg-wrapper path.animated {
  stroke: #9f67ff;
  stroke-width: 1px;
}

/* 초기엔 모두 숨김 */
.svg-wrapper path.static,
.svg-wrapper path.animated {
  opacity: 0;
}

/* ■ Glow path: blur + 굵은 stroke */
.svg-wrapper path.glow {
  stroke: rgba(159, 103, 255, 0.7);      /* 컬러는 animated와 동일 */
  stroke-width: 8px;   /* border:14px 효과 */
  filter: blur(15px);   /* blur 효과 */
  opacity: 0;           /* JS에서 제어 */
  /* stroke-dasharray 등은 JS에서 animated와 함께 세팅 */
}



/* ────────────────────────────────── */
/* 시작 마커 (전체 컨테이너는 크기 0으로!) */
/* ────────────────────────────────── */
.start-marker {
  position: absolute;
  /* viewBox(1755.8×1630.59) 기준 시작점 비율 계산 */
  left:  calc(23.52   / 1755.8  * 100%);
  top:   calc(32.08   / 1630.59 * 100%);
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 12×12 원: 컨테이너(=점)의 중심에 */
.start-marker .marker-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9f67ff;
  transform: translate(-50%, -50%); /* 컨테이너(0,0) 위치를 원의 중심으로 */
}

/* 텍스트: 컨테이너(=점)의 바로 위, 가운데 정렬 */
.start-marker .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -130%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.founding .marker-label {text-align: center;}

/* 텍스트 내부 강조(span) */
.start-marker.founding .marker-label span.en2 {
  display: block;
  color: #9f67ff;
}




.start-marker.phase2 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-90%, -130%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase2 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase2 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase2 .title {margin-bottom: 10px; padding-left: 7px;}
.start-marker.phase2 .text.last {padding-left: 7px;}
.start-marker.phase2 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase2 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}

.static-connector {
  position: absolute;
  width: 3px;
  height: 300px;       /* 원하는 고정 길이 */
  background: linear-gradient(135deg, rgba(175, 175, 175, 0.8),rgb(99, 99, 99, 0.4), rgba(0, 0, 0, 0.77));
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, 1%);
  z-index: 0;
  opacity: 0.4;
}







.start-marker.phase3 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-88%, -160%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase3 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase3 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase3 .title {margin-bottom: 10px; padding-left: 12px;}
.start-marker.phase3 .text {font-weight: 100;}
.start-marker.phase3 .text span {margin-right: 5px;}
.start-marker.phase3 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase3 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}






.start-marker.phase4 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-88%, -130%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase4 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase4 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase4 .title {margin-bottom: 10px; padding-left: 7px;}
.start-marker.phase4 .text.last {padding-left: 7px;}
.start-marker.phase4 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase4 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}








.start-marker.phase5 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(33%, -160%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase5 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase5 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase5 .title {margin-bottom: 10px; padding-left: 12px;}
.start-marker.phase5 .text {font-weight: 100;}
.start-marker.phase5 .text span {margin-right: 5px;}
.start-marker.phase5 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase5 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}




























.start-marker.phase6 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(35%, -160%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase6 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase6 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase6 .title {margin-bottom: 10px; padding-left: 12px;}
.start-marker.phase6 .text {font-weight: 100;}
.start-marker.phase6 .text.last {padding-left: 12px;}
.start-marker.phase6 .text span {margin-right: 5px;}
.start-marker.phase6 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase6 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}




.start-marker.phase7 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(35%, -160%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase7 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase7 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase7 .title {margin-bottom: 10px; padding-left: 12px;}
.start-marker.phase7 .text {font-weight: 100;}
.start-marker.phase7 .text span {margin-right: 5px;}
.start-marker.phase7 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase7 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}











.start-marker.phase8 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(35%, -130%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase8 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase8 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase8 .title {margin-bottom: 10px; padding-left: 7px;}
.start-marker.phase8 .text.last {padding-left: 7px;}
.start-marker.phase8 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase8 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}




.start-marker.phase9 .marker-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-95%, -130%); /* 원의 위쪽 중앙에 배치 */
  color: #fff;
  font-size: 26px;
  white-space: nowrap;
}

.start-marker.phase9 .text {font-size: 14px; line-height: 20px; font-weight: 100;}


.start-marker.phase9 .marker-label {
  left: -50px;
  top : 10px
}

.start-marker.phase9 .title {margin-bottom: 10px; padding-left: 7px;}
.start-marker.phase9 .text.last {padding-left: 7px;}
.start-marker.phase9 .maker-img {
  position: absolute;
  right: 0;
  top:    -180px;
  transform: translate(50%, -50%);
  width:  100px;
  height: 100px;
  overflow: visible;
  
  /* 초기 커넥터 높이 */
  --connector-height: 0px;
}

.start-marker.phase9 .maker-img::before {
  content: '';
  position: absolute;
  /* 아래쪽이 늘어나는 기준점이 되도록 bottom 기준으로 잡습니다 */
  bottom: -135px;
  left:   50%;
  transform: translateX(-50%);
  
  width: 1px;
  height: var(--connector-height);
  
  background: linear-gradient(
    135deg,
    rgba(159, 103, 255, 1),
    rgba(159, 103, 255, 0.1)
  );
  border-radius: 50%;
  
  /* CSS 트랜지션으로 부드럽게 늘어나게 */
  transition: height 0.5s ease-out;
}