@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");




/*인트로*/
.intro{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:#1d1b19;
  z-index:1000000000000000;
  animation: intro 1s 6s cubic-bezier(0.535, 0.005, 1.000, 0.215) forwards ;
  -moz-animation: intro 1s 1s cubic-bezier(0.535, 0.005, 1.000, 0.215) forwards ;
  -webkit-animation: intro 1s 6s cubic-bezier(0.535, 0.005, 1.000, 0.215) forwards ;
  -o-animation: intro 1s 1s cubic-bezier(0.535, 0.005, 1.000, 0.215) forwards ;

}
.intro>span.logo2{
  display:block;
  position:fixed;
  top:43.5%;
  left:50%;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
  animation-duration: 2s;
}


@media only screen and (max-width : 1024px){
  .intro>span.logo2{
    width:250px;
  }
  .intro>span.logo2>img{
    width:250px;
  }
}



@keyframes intro{
	from  {
		opacity : 1;
		background-color:#1d1b19;
		z-index:1000000000000000;
	}
	to {
		opacity : 0;
		background-color:#fff;
		z-index : 0;
	}
}













* {
  padding: 0;
  margin: 0;
}

.in {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.in h1 {
  font-family: "Montserrat Medium";
  max-width: 100ch;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  line-height: 40px !important;
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

.in span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

.in span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.in span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}