.font{
    stroke: #FFF;
    stroke-width: 1;
    stroke-miterlimit: 10;
    
}
.svg-title{
    animation: title 5s linear 1 forwards;
}
@keyframes title{
  0%{
    stroke: #FFF;
    stroke-width:1;
    stroke-miterlimit: 1;
    stroke-dasharray:0;

  }
  50%{
    stroke: #FFF;
    stroke-width:1;
    stroke-miterlimit: 1;
    stroke-dasharray:0;
  }
  100%{
    stroke: #FFF;
    stroke-width:1;
    stroke-miterlimit: 1;
    stroke-dasharray:1000;
  }

}
.svg-title2{
    stroke-width: 1;
    animation: svg-title2 5s linear 1 forwards;
    stroke-dasharray:500;
}

@keyframes svg-title2{
  0%{
    opacity: 1;
     stroke-dashoffset: 500;
  }
  50%{
    fill: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  99%{
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 0;
    stroke-width: 0;
  }

}
.svg-title{
  animation: logo-title 5s linear 1 forwards;
  stroke-dasharray:1000;
}
@keyframes logo-title{
  0%{
    opacity: 0;
   stroke-dashoffset: 500;
  }
  50%{
    fill: none;

    opacity: 0;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 1;
    stroke-width: 0;
  }

}
.svg-logo{
    animation: logo 5s linear 1 forwards;
    stroke-dasharray:500;
}
@keyframes logo{
  0%{
    opacity: 0;

  }
  50%{
    fill: none;

    opacity: 0;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 1;
    stroke-width: 0;
  }

}

.svg-logo2{
     stroke-width: 1;
    animation: logo2 5s linear 1 forwards;
    stroke-dasharray:500;
}

@keyframes logo2{
  0%{
    opacity: 0;
     stroke-dashoffset: 500;
  }
  50%{
    fill: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  99%{
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 0;
    stroke-width: 0;
  }

}
.next-page{
  animation: next 3s linear 0s infinite;
}
@keyframes next{
  0%{
    opacity: 0;
    bottom: 20px;
  }

  100%{
     opacity: 1;
    bottom: 0px;
  }

}

.fancybox-slide>*{
  animation: open .3s linear 0s 1;
}
@keyframes open{
  0%{
    opacity: 0;
    transform: scale(0);
  }

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

}


.fade{
  animation:  fade 1s linear 0s 1;
}

@keyframes fade{
  0%{
    opacity: 0;

  }

  100%{
     opacity: 1;

  }

}

.work-list-box li{

  animation:  scalcin .3s linear 0s 1;
}
@keyframes scalcin{
  0%{
    transform: scale(0.3);
    opacity: 0.3;

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

  }

}

.news-info{
  overflow: hidden;
  animation: fadeInRight .5s linear 0s 1;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fancybox-mask-block {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: fixed;
    top: 0;
    background-color: #000;
    z-index: 9999;
    flex-direction: column;
}
.banner-logo-h2{
  font-size: 25px;
  color: #fff;
}

::-webkit-scrollbar {
    display: none;
}