/* Custom CSS
 * --------------------------------------- */


/* Sections backgrounds
* --------------------------------------- */
#section0{
	background-color: #111 !important;
}

#section1{
}

#section2{
}

#section3{
}

/* ------------------------------------------추가 css------------------------------ */

/* 메인배너 스크롤 바 */
.Main__scroll-down-container{left: 50%;
	bottom: 1.2rem;
	transform: translateX(-50%);
	position: absolute;
	color: rgba(255, 255, 255, 0.94);
	display: flex;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	gap: 1.2rem;
	opacity: 0;
	opacity: 1;
	transition: opacity 0.3s ease 1s;}
.MainView__Icon{width: 3rem;
	height: 4rem;
	border-radius: 10rem;
	border: 0.2rem solid rgba(255, 255, 255, 0.94);
	position: relative;
	transition: width 0.3s ease 0s, height 0.3s ease 0s, border 0.3s ease 0s;}

 .fadeInonscroll{transform: translateY(100px)  translateZ(0);transition-delay: 1.8s;transition: 1.8s;opacity: 0;}


.active .fadeInonscroll{  opacity: 1;transform: translateY(0px) translateZ(0);}

  
#home {position:relative; height:100vh;overflow: hidden;}
#home #plax_txt {position:absolute; top:250px; left:-70%; padding:0; margin:0; width:180%; line-height:1; color:hsla(0,0%,100%,0); font-size:18.63rem; font-weight:700; text-shadow:none; text-transform:uppercase; -webkit-text-stroke:1px #ebe0ff; -moz-text-stroke:1px #ebe0ff; -o-text-stroke:1px #ebe0ff; -ms-text-stroke:1px #ebe0ff; letter-spacing:-5px}
#home .top_circles > div {min-width:200px; min-height:200px}
#home .top_circles .circles {position:absolute; width:19.7vw; height:19.7vw; border-radius:50%}
#home .top_circles .circle1 {top:15%; left:-20%; background:-webkit-linear-gradient(0deg, rgba(135,38,232,1) 0%, rgba(79,38,232,1) 100%); background:-moz-linear-gradient(0deg, rgba(135,38,232,1) 0%, rgba(79,38,232,1) 100%); background:-o-linear-gradient(0deg, rgba(135,38,232,1) 0%, rgba(79,38,232,1) 100%); background:linear-gradient(0deg, rgba(135,38,232,1) 0%, rgba(79,38,232,1) 100%); -webkit-animation:moving1 10s none infinite alternate; -moz-animation:moving1 10s none infinite alternate; -o-animation:moving1 10s none infinite alternate; -ms-animation:moving1 10s none infinite alternate; animation:moving1 10s none infinite alternate}
#home .top_circles .circle2 {top:40%; right:40%; background:-webkit-linear-gradient(0deg, rgba(35,217,183,1) 0%, rgba(51,253,179,1) 100%); background:-moz-linear-gradient(0deg, rgba(35,217,183,1) 0%, rgba(51,253,179,1) 100%); background:-o-linear-gradient(0deg, rgba(35,217,183,1) 0%, rgba(51,253,179,1) 100%); background:linear-gradient(0deg, rgba(35,217,183,1) 0%, rgba(51,253,179,1) 100%); -webkit-animation:moving2 20s none infinite alternate; -moz-animation:moving2 20s none infinite alternate; -o-animation:moving2 20s none infinite alternate; -ms-animation:moving2 20s none infinite alternate; animation:moving2 20s none infinite alternate}
#home .top_circles .circle3 {bottom:-10px; right:-13%; background:-webkit-linear-gradient(0deg, rgba(68,25,224,1) 0%, rgba(25,142,224,1) 100%); background:-moz-linear-gradient(0deg, rgba(68,25,224,1) 0%, rgba(25,142,224,1) 100%); background:-o-linear-gradient(0deg, rgba(68,25,224,1) 0%, rgba(25,142,224,1) 100%); background:linear-gradient(0deg, rgba(68,25,224,1) 0%, rgba(25,142,224,1) 100%); -webkit-animation:moving3 5s none infinite alternate; -moz-animation:moving3 5s none infinite alternate; -o-animation:moving3 5s none infinite alternate; -ms-animation:moving3 5s none infinite alternate; animation:moving3 5s none infinite alternate}
#home .slogan {position:absolute; top:50%; left:50%; padding:0; margin:0; transform:translate(-50%, -50%); text-shadow:none;color: #fff;; z-index:1}
#home .slogan .slogan1 {width:38.3605vw; -webkit-animation:appear 1.5s ease-out; -moz-animation:appear 1.5s ease-out; -o-animation:appear 1.5s ease-out; -ms-animation:appear 1.5s ease-out; animation:appear 1.5s ease-out}
#home .slogan .slogan2 {width:54.4929vw; -webkit-animation:appear 1.5s ease-in; -moz-animation:appear 1.5s ease-in; -o-animation:appear 1.5s ease-in; -ms-animation:appear 1.5s ease-in; animation:appear 1.5s ease-in}
/* animation */

@-webkit-keyframes moving1 {
    0%{transform:translate(0px, 50px)}
    30%{transform:translate(30px, 90px)}
    70%{transform:translate(60px, 204px)}
    100%{transform:translate(120px, 80px)}
}
@-moz-keyframes moving1 {
    0%{transform:translate(0px, 50px)}
    30%{transform:translate(30px, 90px)}
    70%{transform:translate(60px, 204px)}
    100%{transform:translate(120px, 80px)}
}
@-o-keyframes moving1 {
    0%{transform:translate(0px, 50px)}
    30%{transform:translate(30px, 90px)}
    70%{transform:translate(60px, 204px)}
    100%{transform:translate(120px, 80px)}
}
@-ms-keyframes moving1 {
    0%{transform:translate(0px, 50px)}
    30%{transform:translate(30px, 90px)}
    70%{transform:translate(60px, 204px)}
    100%{transform:translate(120px, 80px)}
}
@keyframes moving1 {
    0%{transform:translate(0px, 50px)}
    30%{transform:translate(30px, 90px)}
    70%{transform:translate(60px, 204px)}
    100%{transform:translate(120px, 80px)}
}

@-webkit-keyframes moving2 {
    0%{transform:translate(80px, 80px)}
    50%{transform:translate(20px, -200px)}
    70%{transform:translate(100px, -100px)}
    100%{transform:translate(-50px, 100px)}
}
@-moz-keyframes moving2 {
    0%{transform:translate(80px, 80px)}
    50%{transform:translate(20px, -200px)}
    70%{transform:translate(100px, -100px)}
    100%{transform:translate(-50px, 100px)}
}
@-o-keyframes moving2 {
    0%{transform:translate(80px, 80px)}
    50%{transform:translate(20px, -200px)}
    70%{transform:translate(100px, -100px)}
    100%{transform:translate(-50px, 100px)}
}
@-ms-keyframes moving2 {
    0%{transform:translate(80px, 80px)}
    50%{transform:translate(20px, -200px)}
    70%{transform:translate(100px, -100px)}
    100%{transform:translate(-50px, 100px)}
}
@keyframes moving2 {
    0%{transform:translate(80px, 80px)}
    50%{transform:translate(20px, -200px)}
    70%{transform:translate(100px, -100px)}
    100%{transform:translate(-50px, 100px)}
}

@-webkit-keyframes moving3 {
    0%{transform:translate(0, -10px)}
    50%{transform:translate(-40px, -90px)}
    100%{transform:translate(-70px, -240px)}
}
@-moz-keyframes moving3 {
    0%{transform:translate(0, -10px)}
    50%{transform:translate(-40px, -90px)}
    100%{transform:translate(-70px, -240px)}
}
@-o-keyframes moving3 {
    0%{transform:translate(0, -10px)}
    50%{transform:translate(-40px, -90px)}
    100%{transform:translate(-70px, -240px)}
}
@-ms-keyframes moving3 {
    0%{transform:translate(0, -10px)}
    50%{transform:translate(-40px, -90px)}
    100%{transform:translate(-70px, -240px)}
}
@keyframes moving3 {
    0%{transform:translate(0, -10px)}
    50%{transform:translate(-40px, -90px)}
    100%{transform:translate(-70px, -240px)}
}

@-webkit-keyframes moving4 {
    from {
        transform:translate(-400px, 200px)
    }
    to {
        transform:translate(-400px, 100px)
    }
}
@-moz-keyframes moving4 {
    from {
        transform:translate(-400px, 200px)
    }
    to {
        transform:translate(-400px, 100px)
    }
}
@-o-keyframes moving4 {
    from {
        transform:translate(-400px, 200px)
    }
    to {
        transform:translate(-400px, 100px)
    }
}
@-ms-keyframes moving4 {
    from {
        transform:translate(-400px, 200px)
    }
    to {
        transform:translate(-400px, 100px)
    }
}
@keyframes moving4 {
    from {
        transform:translate(-400px, 200px)
    }
    to {
        transform:translate(-400px, 100px)
    }
}

@-webkit-keyframes moving5 {
    from {
        transform:translate(400px, -200px)
    }
    to {
        transform:translate(400px, -100px)
    }
}
@-moz-keyframes moving5 {
    from {
        transform:translate(400px, -200px)
    }
    to {
        transform:translate(400px, -100px)
    }
}
@-o-keyframes moving5 {
    from {
        transform:translate(400px, -200px)
    }
    to {
        transform:translate(400px, -100px)
    }
}
@-ms-keyframes moving5 {
    from {
        transform:translate(400px, -200px)
    }
    to {
        transform:translate(400px, -100px)
    }
}
@keyframes moving5 {
    from {
        transform:translate(400px, -200px)
    }
    to {
        transform:translate(400px, -100px)
    }
}

.mydiv{
  position: relative;
  height: 100vh;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 10vh;
  &:nth-child(1){
    background: #2cc36b;
  }
  &:nth-child(2){
    background: #2980b9;
  }
  &:nth-child(3){
    background: #c0392b;
  }
  &:nth-child(4){
    background: #673AB7;
  }
  &:nth-child(5){
    background: #009688;
  }
}
.cOMnRK::after {
    position: absolute;
    content: "";
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 100%;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease 0s, height 0.3s ease 0s;
    animation: 1200ms ease 0ms forwards infinite scroll;
}

.jWyfIp {
    color: rgb(204, 204, 204);
    font-size: 1.2rem;
}


@-webkit-keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}

@keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}