.about-title,
.about-p,
.about-h1,
.idea-info-logo,
.idea-info-article p,
.contact-title,
.contact-text,
.contact-need,
.contact-textarea,
.demo--label,
.button,
.index-logo,
.index-logo-slong1,
.index-logo-slong2{
  opacity: 0;
}
.about-title.active{
  animation: fade .8s linear 0s 1 forwards;
}

.about-line-box{
  transform: scale(1, 0);
  transform-origin: top;
}
.about-box.active .about-line-box{
  animation: line2 .8s linear 0s 1 forwards;
}

.about-box.active .about-p:nth-child(1){
  animation: fadeInDown .8s linear .3s 1 forwards;
}
.about-box.active .about-p:nth-child(2){
  animation: fadeInDown .8s linear .4s 1 forwards;
}
.about-box.active .about-p:nth-child(3){
  animation: fadeInDown .8s linear .5s 1 forwards;
}
.about-box.active .about-p:nth-child(4){
  animation: fadeInDown .8s linear .6s 1 forwards;
}
.about-box.active .about-h1{
 animation:  fadeInUp .8s linear 1s 1 forwards;
}

.idea-info-logo.active{
  animation:  fadeInUp .8s linear 0s 1 forwards;
}


.idea-box.active .idea-info-article p:nth-child(1){
  animation: fade .8s linear 0s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(2){
  animation: fade .8s linear .1s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(3){
  animation: fade .8s linear .2s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(4){
  animation: fade .8s linear .3s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(5){
  animation: fade .8s linear .4s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(6){
  animation: fade .8s linear .5s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(7){
  animation: fade .8s linear .6s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(8){
  animation: fade .8s linear .7s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(9){
  animation: fade .8s linear .8s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(10){
  animation: fade .8s linear .9s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(11){
  animation: fade .8s linear 1s 1 forwards;
}
.idea-box.active .idea-info-article p:nth-child(12){
  animation: fade .8s linear 1.1s 1 forwards;
}

.contact-title.active{
  animation: fade .8s linear 0s 1 forwards;
}
.contact-text.active,
.contact-need.active{
  animation: fade .8s linear 0s 1 forwards;
}

.contact-textarea.active,
.demo--label.acitve,
.button.active{
  animation: fade .8s linear 0s 1 forwards;
}

.index-logo-box{
  transition: all .3s linear;
}

.index-logo{
  animation: fade .8s linear 0s 1 forwards;
}
.index-logo-line{
  transform: scale(0, 1);
  transform-origin: left;
}
.index-logo-line{
  animation: line .8s linear 3s 1 forwards;
}
.index-logo-line2{
  transform: scale(1,0);
  transform-origin: top;
}
.index-logo-line2{
  animation: line2 .8s linear 3s 1 forwards;
}
.index-logo-slong1{
   animation: fade .8s linear 3.4s 1 forwards;
}
.index-logo-slong2{
   animation: fade .8s linear 3.6s 1 forwards;
}
.demo--label.active{
  animation: fade .8s linear 0s 1 forwards;
}

.loading-slong-box{
  width: 100%;
  display: block;
  position: absolute;
  bottom: -90px;
  right: -60px;
}
.loading-slong1{
    width: 150px;
    max-width: 100%;
    display: block;
    font-size: 16px;
    color: #01344f;
    text-align: right;
    letter-spacing: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.loading-slong2{
    width: 80px;
    max-width: 100%;
    display: block;
    float: right;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    color: #b2e202;
    letter-spacing: 12px;
    padding-left: 15px;
}
.loading-line{
    width: 100%;
    display: block;
    height: 1px;
    background-color: #b2e202;
    transform: scale(0, 1);
    transform-origin: left;
    margin-bottom: 10px;
    animation: line .8s linear 0s 1 forwards;
}
.loading-line2{
    width: 1px;
    height: 150px;
    display: block;
    background-color: #b2e202;
    position: absolute;
    top: -23px;
    left: 150px;
    transform: scale(1,0);
    transform-origin: top;
    animation: line2 .8s linear 0s 1 forwards;
}
.loading-log{
  animation: fade 1s linear 0s 1 forwards;
}
.loading-slong1{
  opacity: 0;
  animation: fade .8s linear 0.2s 1 forwards;
}
.loading-slong2{
  opacity: 0;
    animation: fade .8s linear 0.4s 1 forwards;
}