html {
  scroll-behavior: smooth;
  user-select: none;
  cursor: url(https://cdn.jsdelivr.net/gh/solmopark/disney-plus-process/docs/img/mouse_cs.png), auto;
}

/* lib */
:root {
  --site-width: 1920px;
  --bg-black: #080E20;
  --bg-img: url("https://cdn.jsdelivr.net/gh/solmopark/disney-plus-process/docs/img/first_back.png");
}

.con {
  width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media (min-width:1900px) {
  body {
    overflow-x: hidden;
  }
}

/*-------- first --------*/
.first-box .first-page {
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: var(--site-width);
  height: 1080px;
  position: relative;
}

.first-box .js-tilt {
  padding-top: 40px;
}

.first-box .first__img {
  border-radius: 58px;
  display: block;
  margin: 0 auto;
}

/*-- text --*/
.first-box .first_t {
  animation: glitch 1s linear infinite;
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  position: absolute;
  top: 17%;
  left: 11%;
  z-index: 5;
}

@keyframes glitch {

  2%,
  64% {
    transform: translate(2px, 0) skew(0deg);
  }

  4%,
  60% {
    transform: translate(-2px, 0) skew(0deg);
  }

  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

.first-box .first_t:before,
.first-box .first_t:after {
  content: attr(title);
  position: absolute;
  left: 0;
}

.first-box .first_t:before {
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {

  2%,
  64% {
    transform: translate(2px, -2px);
  }

  4%,
  60% {
    transform: translate(-2px, 2px);
  }

  62% {
    transform: translate(13px, -1px) skew(-13deg);
  }
}

.first-box .first_t:after {
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {

  2%,
  64% {
    transform: translate(-2px, 0);
  }

  4%,
  60% {
    transform: translate(-2px, 0);
  }

  62% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}

/* 버블 이펙트 */
.bubble-effect-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.bubble-effect-1__canvas {
  display: block;
  border: 10px soild red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*-------- overview --------*/
.over-box .intro {
  color: url(""), linear-gradient(233deg, #332387, #8976ff, #a6bfff, #37bbde);
  opacity: 0.7;
  background-size: cover;
  background-blend-mode: hard-light;
  animation: over-view 3s linear infinite;
}

@keyframes over-view {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}


/*-------- Strategy --------*/
.color-box .overlay {
  width: 313.4px;
  height: 313.4px;
  border-radius: 50%;
  background: red;
  mix-blend-mode: soft-light;
  animation: animateMixColor 3s linear infinite alternate;
}


@keyframes animateMixColor {
  0% {
    background-color: #ea4986;
  }

  60% {
    background-color: #2b21f1;
  }

  100% {
    background-color: #f12121;
  }
}

.Strategy-box .brand-box .brand-line::after {
  width: 0px;
  transition: width 0.8;
}

.Strategy-box .brand-box:hover .brand-line::after {
  width: 1159px;
}

/*-------- style --------*/
.style-wrapper {
  width: 100%;
  font-family: 'Alfa Slab One', sans-serif;
  margin: 0 auto;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;


}

.style-wrapper .text-style {
  -webkit-transform: translate(-50%, -50%) skew(-10deg, 0);
  transform: translate(-50%, -50%) skew(-10deg, 0);
  top: 32%;
  left: 49.1%;
  margin: 0;
  position: absolute;
  font-size: 220px;
  font-weight: 800;
  white-space: nowrap;
  color: #332387;
  letter-spacing: 0.8px;
  z-index: 1;
}

.style-wrapper .text-style-1 {
  -webkit-transform: translate(-50%, -50%) skew(-10deg, 0);
  transform: translate(-50%, -50%) skew(-10deg, 0);
  top: 49.5%;
  left: 11.8%;
  margin: 0;
  position: absolute;
  font-size: 40px;
  font-weight: 800;
  white-space: nowrap;
  color: #332387;
  letter-spacing: -0.8px;
  z-index: 1;

}

.style-wrapper .text-style::after,
.style-wrapper .text-style::before {
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: attr(data-heading);
  position: absolute;
}

.style-wrapper .text-style::after {
  left: -15px;
  top: -15px;
  z-index: 2;
  -webkit-text-stroke: 3px #A6BFFF;
  -webkit-text-fill-color: transparent;
}

.style-wrapper .text-style::before {
  z-index: -1;
  left: 15px;
  top: 15px;
  color: #8976FF;
}

.style-wrapper .text-style:hover::after {
  left: -20px;
  top: -20px;
}

.style-wrapper .text-style:hover::before {
  left: 20px;
  top: 20px;
}

/* sans */

.style-box .intro {
  color: url(''), linear-gradient(233deg, #332387, #8976FF, #A6BFFF, #37bbde);
  opacity: 0.7;
  background-size: cover;
  background-blend-mode: hard-light;
  animation: style-font__1 3s linear infinite;
}

@keyframes style-font__1 {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

/*-------- main --------*/
.main-page .main-color {
  height: 1179px;
  background-image: linear-gradient(to right, #332387 0%, #8976FF 50%, #332387 100%);
  opacity: 0.7;

}


.main-page .vedio-box {
  width: 1920px;
  height: 1179px;
  object-fit: fill;
}

.main-page .main-gjimg {
  border-radius: 0 0 30px 30px;
}

@keyframes subpage-1 {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

/*-------- Epilogue --------*/
.Epilogue-box .con {
  background-color: var(--bg-black);
}

.Epilogue-box .intro {
  background: url(''), linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
  width: 1920px;
  height: 400px;
  background-size: cover;
  background-blend-mode: hard-light;
  animation: hue-rotate 3s linear infinite;
}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }

  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #8976e1 #f6f5ff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 9px;
}

*::-webkit-scrollbar-track {
  background: #f6f5ff;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(#332387, #8976FF, #A6BFFF);
  border-radius: 5px;
}

#fountainTextG {
  width: 234px;
  margin: auto;
}

.fountainTextG {
  color: rgb(0, 0, 0);
  font-family: Arial;
  font-size: 24px;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  float: left;
  animation-name: bounce_fountainTextG;
  -o-animation-name: bounce_fountainTextG;
  -ms-animation-name: bounce_fountainTextG;
  -webkit-animation-name: bounce_fountainTextG;
  -moz-animation-name: bounce_fountainTextG;
  animation-duration: 2.09s;
  -o-animation-duration: 2.09s;
  -ms-animation-duration: 2.09s;
  -webkit-animation-duration: 2.09s;
  -moz-animation-duration: 2.09s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
}

#fountainTextG_1 {
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
}

#fountainTextG_2 {
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
}

#fountainTextG_3 {
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 1.05s;
}

#fountainTextG_4 {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}

#fountainTextG_5 {
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}

#fountainTextG_6 {
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}

#fountainTextG_7 {
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.64s;
}




@keyframes bounce_fountainTextG {
  0% {
    transform: scale(1);
    color: rgb(0, 0, 0);
  }

  100% {
    transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

@-o-keyframes bounce_fountainTextG {
  0% {
    -o-transform: scale(1);
    color: rgb(0, 0, 0);
  }

  100% {
    -o-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

@-ms-keyframes bounce_fountainTextG {
  0% {
    -ms-transform: scale(1);
    color: rgb(0, 0, 0);
  }

  100% {
    -ms-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

@-webkit-keyframes bounce_fountainTextG {
  0% {
    -webkit-transform: scale(1);
    color: rgb(0, 0, 0);
  }

  100% {
    -webkit-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

@-moz-keyframes bounce_fountainTextG {
  0% {
    -moz-transform: scale(1);
    color: rgb(0, 0, 0);
  }

  100% {
    -moz-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

/*--------로딩화면--------*/
.loader-1>* {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 11;
  margin: 0 auto;
  background-color: #080E20;
}

.loader-1.hide {
  opacity: 0;
  visibility: hidden;
}