@charset "UTF-8";
/*/////////////////////////////

// scroll effect by Ninny design
// Copyright (c) 2023 Ninny design
// 무단사용금지

//////////////////////////////*/

:root {
  --scr-duration: 1.3s;
  --scr-delay: 200ms;
}

/* default */
.scr-el,
.scr-el-one,
.scrs .scr-delay {
  opacity: 0;
  transition-duration: var(--scr-el-duration) !important;
  --scr-el-duration: var(--scr-duration);
  --scr-el-delay: var(--scr-delay);
}
.scr-el.active,
.scr-el-one.active,
.scrs.active .scr-delay {
  opacity: 1;
}

/* effect */
.scr-txt {
  letter-spacing: 5px;
}
.scr-txt.active {
  letter-spacing: normal;
}

.scr-fadeinup {
  transform: translateY(50px);
}
.scr-fadeinup.active,
.scrs.active .scr-fadeinup:not(.src-el):not(.scr-el-one) {
  transform: translateY(0);
}

.scr-fadeindown {
  transform: translateY(-50px);
}
.scr-fadeindown.active,
.scrs.active .scr-fadeindown:not(.src-el):not(.scr-el-one) {
  transform: translateY(0);
}

.scr-fadeinleft {
  transform: translateX(50px);
}
.scr-fadeinleft.active,
.scrs.active .scr-fadeinleft:not(.src-el):not(.scr-el-one) {
  transform: translateX(0);
}

.scr-fadeinright {
  transform: translateX(-50px);
}
.scr-fadeinright.active,
.scrs.active .scr-fadeinright:not(.src-el):not(.scr-el-one) {
  transform: translateX(0);
}

.scr-widercenter,
.scr-widerleft,
.scr-widerright {
  position: relative;
  opacity: 1 !important;
  --scr-color: #fff;
}

.scr-widercenter:before,
.scr-widercenter:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--scr-color);
  transition-duration: 1.8s;
  z-index: 9;
}
.scr-widercenter:before {
  left: 0;
  right: 50%;
}
.scr-widercenter:after {
  right: 0;
  left: 50%;
}
.scr-widercenter.active:before,
.scrs.active .scr-widercenter:not(.src-el):not(.scr-el-one):before {
  right: 100%;
}
.scr-widercenter.active:after,
.scrs.active .scr-widercenter:not(.src-el):not(.scr-el-one):after {
  left: 100%;
}

.scr-widerright:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition-duration: 1.8s;
  background: var(--scr-color);
  z-index: 9;
}
.scr-widerright.active:after,
.scrs.active .scr-widerright:not(.src-el):not(.scr-el-one):after {
  left: 100%;
}

.scr-widerleft:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition-duration: 1.8s;
  background: var(--scr-color);
  z-index: 9;
}
.scr-widerleft.active:after,
.scrs.active .scr-widerleft:not(.src-el):not(.scr-el-one):after {
  right: 100%;
}