/* intro */
.intro {position: relative; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 70px; width: 100%; height: 100vh; background: var(--black); font-family: 'He'; overflow: hidden;}

.intro.start .first-ct {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.intro.start .first-ct .bg1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; animation: bg1 1s .3s linear both; width: 300px; height: auto; aspect-ratio: 5/5; background: var(--wt); border-radius: 100%;}
@-webkit-keyframes bg1 {
  0% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);}
  20% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  30% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  40% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  50% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  60%, 70% {top: 50%; left: 50%; background: var(--wt); width: 30px; height: 143px; border-radius: 0;}
  100% {background: var(--wt); width: 20px; height: 143px; border-radius: 0;}
}

@keyframes bg1 {
  0% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);}
  20% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  30% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  40% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  50% {top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20);}
  60%, 70% {top: 50%; left: 50%; background: var(--wt); width: 30px; height: 143px; border-radius: 0;}
  100% {background: var(--wt); width: 20px; height: 143px; border-radius: 0;}
}
.intro.start .bg2 {animation: on_bg 2s linear both; position: absolute; width: 100%; height: 100%; z-index: 1; background: var(--black); opacity: 0;}
@keyframes on_bg {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
.intro.start .bg2 .bg2_item {animation: opacity_bg .5s 2s linear alternate infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 143px; background: var(--wt); opacity: 0;}
@keyframes opacity_bg {
  0%{opacity: 1;}
  100%{opacity: 0;}
}

.intro.start .intro-ct {transform: scaleY(0.8);}
.intro.start .intro-ct.off {opacity: 0;}
.intro.start .intro-ct.open {position: relative; opacity: 1; z-index: 2; width: 1176px;}
.intro .intro-top {display: flex; align-items: center; justify-content: flex-start; width: 0; height: auto; overflow: hidden; white-space: nowrap; line-height: 1.2;}
.intro.start .intro-ct.open .intro-top:before {content: ''; display: block; animation: opacity_bg2 .3s linear alternate infinite; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 100%; background: var(--wt); opacity: 0; z-index: 3;}
@keyframes opacity_bg2 {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
.intro.start .intro-ct.open .intro-top {position: relative; animation: wd 1s linear both; padding-left: 60px; margin: 0 auto; z-index: 2;}
@keyframes wd {
  0% {width: 0%;}
  100% {width: 85%;}
}
.intro.start .intro-ct.none .intro-top:before {background: transparent; transition: all 1.5s;}

.intro-top span {font-size: 150px; font-weight: bold; color: var(--wt); letter-spacing: -4px;}
.intro-top span:nth-child(6) {margin-left: 32px;}
.intro-top span:nth-child(7) {margin-right: 43px;}

.intro-bottom {display: flex; align-items: center; gap: 43px; width: 0; height: auto; margin-top: 70px; overflow: hidden; white-space: nowrap;}
.intro.start .intro-ct.none .intro-bottom {position: relative; animation: wd2 1s .5s linear both;}
@keyframes wd2 {
  0% {width: 0%;}
  100% {width: 100%;}
}
.intro.start .intro-ct.none .intro-bottom:before {content: ''; display: block; animation: opacity_bg3 .3s linear alternate infinite; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 100%; background: var(--wt); opacity: 0; z-index: 1;}
@keyframes opacity_bg3 {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
.intro.start .intro-ct.end .intro-bottom:before {width: 23px; height: 23px; transform: initial; top: auto; bottom: 0; transition: all .3s;}
.intro.start .intro-ct.intro_end .intro-bottom:before {display: none;}

/* .intro .intro-bottom.open {width: auto; height: ;} */
.intro.start .intro-ct.intro_end .intro-bottom {gap: 0;}
.intro.start .intro-ct.intro_end .intro-bottom .ist {text-indent: -9999px;}
.intro.start .intro-bottom .txt-an {display: flex; align-items: center;}
.intro.start .intro-bottom .txt-an img {width: 52px; height: auto;}
.intro.start .intro-bottom .txt-on {position: relative; top: 110px; transform: translateY(-0px); transform: translateY(20px); display: flex; align-items: center; flex-flow: column; height: 52px;}
.intro.start .intro-bottom .txt-on.rolling {animation: rolling_bn 3s ease-in-out both;}
@keyframes rolling_bn {
  0%{transform: translateY(0); }
  100%{transform: translateY(-1360px); }
}
.intro.start .intro-bottom .txt-on span {transform: scaleY(0.8); font-size: 150px; font-weight: bold; color: var(--wt); letter-spacing: -0.04em;}
.intro.start .intro-bottom .txt-on span.on {color: var(--wt);}
.intro.start .intro-bottom .ist {display: flex; align-items: flex-end; gap: 41px; font-size: 150px; font-weight: bold; color: var(--wt);}
.intro.start .intro-bottom .ist img {width: 0; height: auto; margin-top: 12px; opacity: 0; transition: all .5s;}

/* .intro .intro-bottom .txt-an on 이 붙으면? */
.intro .intro-bottom .txt-an.on3 span {position: relative; transform: translateX(100px); opacity: 0; transition: all 1s;}
/* .intro .intro-bottom .txt-an.on span.txt-on {width: auto; height: auto; font-size: 150px; overflow: hidden; opacity: 0; transition: all .3s;} */

/* rolling-banner */
.rolling-banner {position: absolute; bottom: 25px; left: 0; display: flex; align-items: center; gap: 4px;  width: 8116px; height: auto; z-index: 3;}
.rolling-banner img:first-child {animation: rolling 30s linear infinite;}
.rolling-banner img:last-child {animation: rolling2 30s linear infinite;}
@keyframes rolling {
  0%{ transform: translateX(0%) }
  100%{ transform: translateX(-100%) }
}
@keyframes rolling2 {
  0%{ transform: translateX(0%) }
  100%{ transform: translateX(-100%) }
}

/* loading-vod */
.loading-vod {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; background: var(--black); transition: all .3s;}
.loading-vod video {width: 100%; height: 100%; object-fit: contain;}