@charset "UTF-8";

/*----------------------------------------------------
  01.keyframes
----------------------------------------------------*/
@keyframes fadeIn {
 0% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}

@keyframes fadeOut {
 0% {
  opacity: 1;
 }

 100% {
  opacity: 0;
 }
}

@keyframes fadeInOut {
 0% {
  opacity: 0;
 }

 50% {
  opacity: 1;
 }

 100% {
  opacity: 0;
 }
}

@keyframes fadeInDown {
 0% {
  opacity: 0;
  transform: translateY(-20%);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fadeInUp {
 0% {
  opacity: 0;
  transform: translateY(50px);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fadeInUp10 {
 0% {
  opacity: 0;
  transform: translateY(10%);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes scaleDown {
 0% {
  opacity: 0;
  transform: scale(1.2);
 }

 100% {
  opacity: 1;
  transform: scale(1);
 }
}

@keyframes fadeInLeft {
 0% {
  opacity: 0;
  transform: translateX(-10%);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

@keyframes fadeInRight {
 0% {
  opacity: 0;
  transform: translateX(10%);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}





.effect {
 opacity: 0;
}

header.effect_on {
 animation: fadeIn 1s ease-in 0s 1 normal forwards;
}

.contentsWrapper .effect_on {
 animation: fadeInUp 0.5s ease-in 0s 1 normal forwards;
}

.footer.effect_on {
 animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
}

#index .contentsWrapper.effect_on {
 animation: fadeIn 1s ease-in 0s 1 normal forwards;
}

#top .contentsWrapper.effect_on {
 animation: fadeIn 0.5s ease-in 0.5s 1 normal forwards;
}

.realestate_top .head-wrap.effect_on {
 animation: fadeInDown 0.5s ease-in 1s 1 normal forwards;
}

@keyframes fadeInUp2 {
 0% {
  opacity: 0;
  transform: translateY(30px);
  transform: translateX(-50%);
 }

 100% {
  opacity: 1;
 }
}

.realestate_top .cover-wrap h1.effect_on {
 animation: fadeInUp2 1s ease-in 0s 1 normal forwards;
}

.realestate_top .crumb.effect_on {
 animation: fadeIn 0.5s ease-in 1s 1 normal forwards;
}

.contentsWrapper .effect_on {
 animation: fadeInUp 0.5s ease-in-out 1s 1 normal forwards;
}

.realestate_top .cover-wrap.effect_on {
 animation: fadeIn 1s ease-in 0s 1 normal forwards;
}

.mapAreaWrapper.effect_on {
 animation: fadeIn 0.5s ease-in 1s 1 normal forwards;
}

h1.effect_on {
 animation: fadeInUp2 0.5s ease-in-out 0s 1 normal forwards;
}