* {
  margin: 0;
  padding: 0
}

html, body {
  width: 100%;
  height: 100%;
  /*min-width: 1280px;*/
  min-height: 600px;
  background: #fff;
}
.logo>a>img {
    width: auto;
    position: static;
}
body {
  font-family: "微软雅黑","Microsoft YaHei","黑体";
}

img {
  display: block;
  max-width: 100%;
  position: absolute;
}
.nav-img-div img{
  position: static;
}

.h_view .section{
    background-size: cover;
    background-position: center;
}
.section {
  overflow: hidden;
  height: 100% !important;
  display: block !important;
  background-repeat: no-repeat;
  background-size: 100%;
}

.fullpage>div {
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.level_middle{left: 0;right: 0;margin:0 auto;}
/*fp1*/
.section1{background-image: url(../images/20190724_JH6I/update190724/fp1_bg.png);background-position: center;}
.fp1_prol{width: 13%;top: 26%;left: 20.5%;}
.fp1_title{width: 27.5%;top: 30%;right: 13.9%;}
.fp1_icon1{width: 6.2%;right: 34%;top: 47.6%}
.fp1_icon2{width: 6.2%;right: 24.7%;top: 47.6%}
.fp1_icon3{width: 6.2%;right: 15.4%;top: 47.6%}
/*fp2*/
.section2{background-image: url(../images/20190724_JH6I/update190724/fp2_bg.png);}
.fp2_title{width: 30.35%;left: 59%;top: 19%;}
.fp2_show{width: 34%;left: 29%;top: 46%;}
.fp2_head{width: 22%;left: 43%;bottom:-1%;}
/*fp3*/
/*.section3{background-image: url(../images/20190724_JH6I/fp3_bg.png);background-position:center;}*/
.fp3_title{width: 34%;left: 11.5%;top: 38.13%;}
.fp3_prol{width:13%;right: 18.21%;top: 21.3%;}
.fp3_triangle{width: 3%; right: 10.5%;bottom:-1%;}

/*fp4*/
.section4{background-image: url(../images/20190724_JH6I/update190724/fp4_bg.png);}
.fp4_title{width: 51%;top: 44.4%;left: -13.7%;}

/*fp5*/
.section5{background-image: url(../images/20190724_JH6I/update190724/fp5_bg.png);}
.fp5_title{width: 24.7%;top: 33.5%;left: 58.6%;}
.fp5_line{width:2px;left: 69.4%;top: 46.5%;}
.fp5_box{position: absolute;right: 30.71%;top: 55.3%;width: 15%;text-align: center;cursor: pointer;}
.fp5_box1_icon{width: 21%;top: -52%;right: 42%;-webkit-transform: translateY(.3rem);-webkit-transition: -webkit-transform .5s;-ms-transform: translateY(.3rem);-ms-transition: -ms-transform .5s;background: none;}
.fp5_con{-webkit-transform: translateY(-.3rem);-ms-transform: translateY(-.3rem);opacity: 0;-webkit-transition: -webkit-transform .5s,opacity .5s;-ms-transition: -ms-transform .5s,opacity .5s;background: none;}
.fp5_box2{right:13.1%;}
.fp5_box2_icon{width: 21%;top: -52%;right: 40.5%;-webkit-transform: translateY(.3rem);-webkit-transition: -webkit-transform .5s;-ms-transform: translateY(.3rem);-ms-transition: -ms-transform .5s;background: none;}
.fp5_con>.fp5_tit{font-size: .28rem;font-weight: 600;color: #2e2e2e;line-height:  0.64rem;}
.fp5_con>.fp5_word{font-size: .18rem;font-weight: 500;color: #000000;line-height: 0.27rem;}
.active>.fp5_box1_icon{-webkit-transform: translateY(-.1rem);-ms-transform: translateY(-.1rem);}
.active>.fp5_box2_icon{-webkit-transform: translateY(-.1rem);-ms-transform: translateY(-.1rem);}
.active>.fp5_con{-webkit-transform: translateY(0);-ms-transform: translateY(0);opacity: 1;}
/*.fp5_tit{font-size: .28rem;font-weight: 600;color: #2e2e2e;line-height:  0.64rem;-webkit-transform: translateY(.3rem);-webkit-transition: -webkit-transform .5s;-ms-transform: translateY(.3rem);-ms-transition: -ms-transform .5s;background: none;}
.fp5_word{font-size: .18rem;font-weight: 500;color: #000000;line-height: 0.27rem;-webkit-transform: translateY(-.3rem);-ms-transform: translateY(-.3rem);opacity: 0;-webkit-transition: -webkit-transform .5s,opacity .5s;-ms-transition: -ms-transform .5s,opacity .5s;background: none;}
.active>.fp5_tit{-webkit-transform: translateY(-.1rem);-ms-transform: translateY(-.1rem);}
.active>.fp5_word{-webkit-transform: translateY(0);-ms-transform: translateY(0);opacity: 1;}*/

/*.active>.fp5_tit{-webkit-transform: translateY(-.1rem);-ms-transform: translateY(-.1rem);}
.active>.fp5_word{-webkit-transform: translateY(0);-ms-transform: translateY(0);opacity: 1;}*/

/*fp6*/
.section6{background-image: url(../images/20190724_JH6I/update190724/fp6_bg.png);}
.fp6_title{width: 18%;top: 29.6%;left: 17.3%;}
.fp6_prol{width: 32%;top: 19.5%;right: -1%;}
.fp6_tem{width: 38.5%;bottom: 11.8%;left: 30.8%;}
.fp6_tem_tit{width: 11%;bottom: 17%;right: 33.8%;}
/*fp7*/
.section7{background-image: url(../images/20190724_JH6I/update190724/fp7_bg.png);}
.fp7_title{width: 13%;top: 38.5%;left: 23%;}
/*.fp7_prol{width: 12.5%;top: 28%;right: 25%;}*/
.fp7_box{width: 25.5%;text-align: center;position: absolute;top: 50.7%;left: 17%;}
.fp7_word{font-size: .24rem;color: #fff;line-height: .28rem}

/*fp8*/
.section8{background-image: url(../images/20190724_JH6I/update190724/fp8_bg.png);}
.fp8_title{width: 16.5%;top: 17.3%;left: 42.6%}
.fp8_box{width: 40%;position: absolute;top: 30%;left: 31%;text-align: center;cursor: pointer;}
.fp8_word{font-size: .24rem;color: #000;line-height: .40rem;}
.fp8_icon{width: 77%;bottom: 36.5%;left: 12.35%}

/*fp9*/
.section9{background-image: url(../images/20190724_JH6I/update190724/fp9_bg.png);}
.fp9_pro{width: 9.53%;top: 39%; left: -50.7%}
.fp9_tab{position: absolute;top: 37.3%;left: 47.4%;}
.section9 table{width: 100%;border-collapse: collapse;left: 35%;text-align: center;margin-top: 0.1rem;}
.fp9_tab p{font-size: .28rem;padding-bottom: .3rem;color: #4d4d4f;}
.section9 tr{}
.section9 td{color: #4d4d4f;font-size: .22rem;padding: .2rem .2rem .2rem .35rem;border: 1px solid #dedede;}
.section9 .td_l{text-align: left;}
.section9 .td_c{text-align: center;}
.section9 td:nth-of-type(1){}
/*.h_view*/
  .h_view .fp1_pro{top: 3rem;}
  .h_view .fp1_yan{top: 3.55rem;}
  .h_view .fp1_fish{top: 3.25rem;}

  /*.h_view .active .fp1_bg1{-webkit-animation:fadeInMiddle 3s .2s both linear;-ms-animation:fadeInMiddle 3s .2s both linear;}*/

  .h_view .fp2_bg{width: auto;height: 100%;max-width: none;left: 50%;}
  .h_view .active .fp2_bg{-webkit-animation:fadeInMiddle 3s .2s both linear;-ms-animation:fadeInMiddle 3s .2s both linear;}

  .h_view .fp3_pro{/* top: 11%; */}
  .h_view .fp3_pro1{/* top: calc( 11% + 3.9rem); */bottom: -6%;}
  .h_view .fp3_yan{/* top: calc( 11% + 5.5rem); */bottom: -50%;}
  .h_view .fp3_box{top: 11%;}

  .h_view .fp7_box1{left: 5%;}
  .h_view .fp7_box3{right: 5%;}

/*animation*/
/*fp1*/
.active .fp1_prol{-webkit-animation: fadeIn .8s .5s both linear;-ms-animation: fadeIn .8s .5s both linear;}
.active .fp1_title{-webkit-animation: bounceInRight3 1s .8s both linear;-ms-animation: bounceInRight3 1s .8s both linear;}
.active .fp1_icon1{-webkit-animation:flipInX  1.5s 1.6s both linear;-ms-animation: flipInX 1.5s 1.6s both linear;}
.active .fp1_icon2{-webkit-animation:flipInX  1.5s 1.6s both linear;-ms-animation: flipInX 1.5s 1.6s both linear;}
.active .fp1_icon3{-webkit-animation:flipInX  1.5s 1.6s both linear;-ms-animation: flipInX 1.5s 1.6s both linear;}

/*fp2*/
.active .fp2_title{-webkit-animation:fadeIn .5s 1s both linear;-ms-animation:fadeIn .5s 1s both linear;}
.active .fp2_show{-webkit-animation:bounceInLeft 1.2s 1.5s both linear;-ms-animation: bounceInLeft 1.2s 1.5s both linear;}
.active .fp2_head{-webkit-animation:fadeIn 1s 2s both linear;-ms-animation:fadeIn 1s 2s both linear;}

/*fp3*/
.active .fp3_title{-webkit-animation:bounceIn2 1s .6s both linear;-ms-animation:bounceIn2 1s .6s both linear;}
.active .fp3_prol{-webkit-animation:fadeIn .8s .2s both linear;-ms-animation:DownPro .8s .2s both linear;}

/*fp4*/
.active .fp4_title{-webkit-animation:fadeIn 1s .6s both linear;-ms-animation:fadeIn 1s .6s both linear;}

/*fp5*/
.active .fp5_title{-webkit-animation:bounceIn2 1s .6s both linear;-ms-animation:bounceIn2 1s .6s both linear;}
.active .fp5_box{-webkit-animation:fadeIn 1s 1.6s both linear;-ms-animation:fadeIn 1s 1.6s both linear;}
.active .fp5_line{-webkit-animation:fadeIn 1s 1.6s both linear;-ms-animation:fadeIn 1s 1.6s both linear;}
.active .fp5_box1_icon{-webkit-animation:fadeIn 1s 1.6s both linear;-ms-animation:fadeIn 1s 1.6s both linear;}
.active .fp5_box2_icon{-webkit-animation:fadeIn 1s 1.6s both linear;-ms-animation:fadeIn 1s 1.6s both linear;}

/*fp6*/
.active .fp6_title{-webkit-animation:downIn .5s .5s both linear;-ms-animation:downIn .5s .5s both linear;}
.active .fp6_prol{-webkit-animation:fadeIn 1s .2s both linear;-ms-animation:fadeIn 1s .2s both linear;}
.active .fp6_tem{-webkit-animation:UpIn .5s .5s both linear;-ms-animation:UpIn .5s .5s both linear;}
.active .fp6_tem_tit{-webkit-animation:UpIn .5s .5s both linear;-ms-animation:UpIn .5s .5s both linear;}

/*fp7*/
.active .fp7_title{-webkit-animation:UpIn .5s .5s both linear;-ms-animation:UpIn 1.5s .5s both linear;}
.active .fp7_box{-webkit-animation:UpIn .5s .8s both linear;-ms-animation:UpIn .5s .8s both linear;}

/*fp8*/
.active .fp8_title{-webkit-animation:fadeIn 1s .5s both linear;-ms-animation:fadeIn 1s .5s both linear;}
.active .fp8_box{-webkit-animation:fadeIn 1s 1s both linear;-ms-animation:fadeIn 1s 1s both linear;}
.active .fp8_icon{-webkit-animation:fadeIn 1s 1.5s both linear;-ms-animation:fadeIn 1s 1.5s both linear;}
/*fp9*/
.active .fp9_pro{-webkit-animation:fadeInDown 1s .3s both linear;-ms-animation:fadeInDown 1s .3s both linear;}
.active .fp9_tab{-webkit-animation:fadeInUp 1s 1s both linear;-ms-animation:fadeInUp 1s 1s both linear;}

/*keyframes*/
@-webkit-keyframes fadeInMiddle{
  0% {
    opacity: 0;
    -webkit-transform:translateX(-50%);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateX(-50%);
  }
}
@-webkit-keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn2{
  0% {
    opacity: .2;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}
@-webkit-keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(-200px);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateX(0);
  }
}
@-webkit-keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(200px);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateX(0);
  }
}
@-webkit-keyframes fadeInOut{
  0% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}
@-webkit-keyframes fp_fish {
  0% {
    opacity: .8;
    -webkit-transform:translate(-20px,0);
  }
  15% {
    opacity: 1;
    -webkit-transform:translate(0,-10px);
  }
  30% {
    opacity: .8;
    -webkit-transform:translate(20px,0);
  }
  65% {
    opacity: .6;
    -webkit-transform:translate(0,15px);
  }
  100% {
    opacity: .8;
    -webkit-transform:translate(-20px,0);
  }
}
@-webkit-keyframes DownPro {
  0% {
    -webkit-transform:translateY(-68%);
  }
  100%{
    -webkit-transform:translateY(0);
  }
}
@-webkit-keyframes yanUp {
  0% {
    opacity: 0;
    -webkit-transform:translateY(0);
  }
  25%{
    opacity: 1;
    -webkit-transform:translateY(0);
  }
  75%{
    opacity: 0;
    -webkit-transform:translateY(-20px);
  }
  100% {
    opacity: 0
    -webkit-transform:translateY(0);
  }
}
@-webkit-keyframes BigSmall {
  0% {
    opacity: 1;
    -webkit-transform:scale(1) rotate(0deg);
  }
  50% {
    opacity: .7;
    -webkit-transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform:scale(1) rotate(0deg);
  }
}
@-webkit-keyframes flashIn{
  0% {
    opacity: 0;
  }
  5%{
    opacity: .3;
  }
  10%{
    opacity: 0;
  }
  15%{
    opacity: .3;
  }
  20%{
    opacity: .1;
  }
  25%{
    opacity: .5;
  }
  40%{
    opacity: .3;
  }
  45%{
    opacity: .8;
  }
  60%{
    opacity: .5;
  }
  65%{
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes LeftIn{
  0% {
    opacity: .5;
    -webkit-transform:translateX(-500px);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateX(0px);
  }
}
@-webkit-keyframes downIn{
  0% {
    opacity: 0;
    -webkit-transform:translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateY(0px);
  }
}
@-webkit-keyframes UpIn{
  0% {
    opacity: 0;
    -webkit-transform:translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform:translateY(0px);
  }
}
@-webkit-keyframes bounceInLeft2{
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes bounceInLeft3{
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translateX(30px);
    }
    80% {
      -webkit-transform: translateX(-10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes bounceInRight3{
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translateX(-30px);
    }
    80% {
      -webkit-transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes bounceIn2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.8);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.03);
  }
  70% {
    -webkit-transform: scale(.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes bounceInRight2{
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*ie*/
@-ms-keyframes fadeInMiddle{
  0% {
    opacity: 0;
    -ms-transform:translateX(-50%);
  }
  100% {
    opacity: 1;
    -ms-transform:translateX(-50%);
  }
}
@-ms-keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn2{
  0% {
    opacity: .2;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}
@-ms-keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -ms-transform:translateX(-200px);
  }
  100% {
    opacity: 1;
    -ms-transform:translateX(0);
  }
}
@-ms-keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -ms-transform:translateX(200px);
  }
  100% {
    opacity: 1;
    -ms-transform:translateX(0);
  }
}
@-ms-keyframes fadeInOut{
  0% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}
@-ms-keyframes fp_fish {
  0% {
    opacity: .8;
    -ms-transform:translate(-20px,0);
  }
  15% {
    opacity: 1;
    -ms-transform:translate(0,-10px);
  }
  30% {
    opacity: .8;
    -ms-transform:translate(20px,0);
  }
  65% {
    opacity: .6;
    -ms-transform:translate(0,15px);
  }
  100% {
    opacity: .8;
    -ms-transform:translate(-20px,0);
  }
}
@-ms-keyframes DownPro {
  0% {
    -ms-transform:translateY(-68%);
  }
  100%{
    -ms-transform:translateY(0);
  }
}
@-ms-keyframes yanUp {
  0% {
    opacity: 0;
    -ms-transform:translateY(0);
  }
  25%{
    opacity: 1;
    -ms-transform:translateY(0);
  }
  75%{
    opacity: 0;
    -ms-transform:translateY(-20px);
  }
  100% {
    opacity: 0
    -ms-transform:translateY(0);
  }
}
@-ms-keyframes BigSmall {
  0% {
    opacity: 1;
    -ms-transform:scale(1) rotate(0deg);
  }
  50% {
    opacity: .7;
    -ms-transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    -ms-transform:scale(1) rotate(0deg);
  }
}
@-ms-keyframes flashIn{
  0% {
    opacity: 0;
  }
  5%{
    opacity: .3;
  }
  10%{
    opacity: 0;
  }
  15%{
    opacity: .3;
  }
  20%{
    opacity: .1;
  }
  25%{
    opacity: .5;
  }
  40%{
    opacity: .3;
  }
  45%{
    opacity: .8;
  }
  60%{
    opacity: .5;
  }
  65%{
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes LeftIn{
  0% {
    opacity: .5;
    -ms-transform:translateX(-500px);
  }
  100% {
    opacity: 1;
    -ms-transform:translateX(0px);
  }
}
@-ms-keyframes downIn{
  0% {
    opacity: 0;
    -ms-transform:translateY(-100px);
  }
  100% {
    opacity: 1;
    -ms-transform:translateY(0px);
  }
}
@-ms-keyframes UpIn{
  0% {
    opacity: 0;
    -ms-transform:translateY(30px);
  }
  100% {
    opacity: 1;
    -ms-transform:translateY(0px);
  }
}
@-ms-keyframes bounceInLeft2{
    0% {
        opacity: 0;
        -ms-transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        -ms-transform: translateX(30px);
    }
    80% {
        -ms-transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}
@-ms-keyframes bounceInLeft3{
    0% {
      opacity: 0;
      -ms-transform: translateX(-2000px);
    }
    60% {
      opacity: 1;
      -ms-transform: translateX(30px);
    }
    80% {
      -ms-transform: translateX(-10px);
    }
    100% {
      opacity: 1;
      -ms-transform: translateX(0);
    }
}
@-ms-keyframes bounceInRight3{
    0% {
      opacity: 0;
      -ms-transform: translateX(2000px);
    }
    60% {
      opacity: 1;
      -ms-transform: translateX(-30px);
    }
    80% {
      -ms-transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -ms-transform: translateX(0);
    }
}
@-ms-keyframes bounceIn2 {
  0% {
    opacity: 0;
    -ms-transform: scale(.8);
  }
  50% {
    opacity: 1;
    -ms-transform: scale(1.03);
  }
  70% {
    -ms-transform: scale(.95);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1);
  }
}
@-ms-keyframes bounceInRight2{
    0% {
        opacity: 0;
        -ms-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -ms-transform: translateX(-30px);
    }
    80% {
        -ms-transform: translateX(10px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

@-ms-keyframes flipInX {
  from {
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  -ms-animation-name: flipInX;
  animation-name: flipInX;
}

@-ms-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -ms-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -ms-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -ms-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -ms-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -ms-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -ms-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -ms-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -ms-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}