.menuopen i{
    transition: all 0.3s;
}

@keyframes srlline{
    from{
        transform: translate3d(-100%, 0, 0);
    }to{
        transform: translate3d(100%, 0, 0);
    }
}
.textIn{
    overflow: hidden;
    display: block;
}
.textIn > div{
    transform: translate3d(0, 100%, 0);
}
.textIn.active > div{
    animation: textIn 1s;
    animation-fill-mode: both;
}
@keyframes textIn{
    from{
        transform: translate3d(0, 100%, 0);
    }to{
        transform: translate3d(0, 0, 0);
    }
}

.mvstro0{fill:none;stroke:#B3D9FF;stroke-miterlimit:10;}
.mvstro1{fill:none;stroke:#002B69;stroke-miterlimit:10;}
.mvstro2{fill:none;stroke:#EAC598;stroke-miterlimit:10;}
.mvstro3{fill:none;stroke:#92C4FF;stroke-miterlimit:10;}

.mv_visual.isAni svg line{
    stroke-dasharray: 100;
    animation: mvstroAni 2s cubic-bezier(0.55, 0, 1, 0.45);
    animation-fill-mode: both;
    stroke-dasharray: 100;
    stroke-dasharray: 1030;
}
@keyframes mvstroAni{
    0%{
        stroke-dasharray: 30;
    }100%{
        stroke-dasharray: 820;
    }
}


.secsli_bg.active div,
.hws_cover.active{
    animation: seclisbg 1s cubic-bezier(0.76, 0, 0.24, 1);
}
@keyframes seclisbg{
    0%{
        transform: translate3d(-100%,0,0);
    }50%{
        transform: translate3d(0,0,0);
    }100%{
        transform: translate3d(100%,0,0);
    }
}


.hwsc_icons.rotate img{
    animation: iconRotate .5s;
}
@keyframes iconRotate{
    0%{
        opacity: 1;
    }50%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}

@keyframes ballScale{
    from{
        opacity: 1;
        transform: scale(1);
    }to{
        opacity: 0;
        transform: scale(1.8);
    }
}
@-webkit-keyframes fadeIn{
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  @keyframes fadeIn{
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeInLeft{
    from{
      opacity: 0;
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    to{
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @-webkit-keyframes fadeIndown{
    from{
      opacity: 0;
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
    }
    to{
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes fadeIndown{
    from{
      opacity: 0;
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
    }
    to{
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  .getInAni h3,
  .getInAni h2,
  .getInAni p{
      opacity: 0;
      transform: translate3d(0,2rem,0);
      transition: all 1s;
  }
  .getInAni.act_ani h3,
  .getInAni.act_ani h2,
  .getInAni.act_ani p{
      opacity: 1;
      transform: translate3d(0,0,0);
  }
  .getInAni.act_ani p{
      transition-delay: .5s;
  }