.page-toTop {
  -webkit-animation: toTop .7s ease-in-out both;
  animation: toTop .7s ease-in-out both;
}

.page-toBottom {
  -webkit-animation: toBottom .7s ease-in-out both;
  animation: toBottom .7s ease-in-out both;
}

.page-fromBottom {
  -webkit-animation: formBottom .7s ease both;
  animation: formBottom .7s ease both;
}

.page-fromTop {
  -webkit-animation: formTop .7s ease both;
  animation: formTop .7s ease both;
}

.active .pin {
  -webkit-animation: formTop .7s ease both;
  animation: formTop .7s ease both;
}

.active .title-1 {
  -webkit-animation: formBottom .7s ease 1s both;
  animation: formBottom .7s ease 1s both;
}

.active .jb-name {
  -webkit-animation: pulse .7s ease 1.7s both;
  animation: pulse .7s ease 1.7s both;
}

.active .subject {
  -webkit-animation: pulse .7s ease 2s both;
  animation: pulse .7s ease 2s both;
}

.active .yun-left {
  -webkit-animation: formRight .7s ease both;
  animation: formRight .7s ease both;
}

.active .yun-right {
  -webkit-animation: formLeft .7s ease both;
  animation: formLeft .7s ease both;
}

.active .title-2 {
  -webkit-animation: formLeft .7s ease both;
  animation: formLeft .7s ease both;
}

.active .house {
  -webkit-animation: formRight .7s ease both;
  animation: formRight .7s ease both;
}

.active .yun-bottom {
  -webkit-animation: moveLeft 20s linear infinite;
  animation: moveLeft 20s linear infinite;
}

.active .title-3 {
  -webkit-animation: rotate-tit .7s ease both;
  animation: rotate-tit .7s ease both;
}

.active .people-left {
  -webkit-animation: formLeft .7s ease both;
  animation: formLeft .7s ease both;
}

.active .people-right {
  -webkit-animation: formRight .7s ease both;
  animation: formRight .7s ease both;
}

.active .title-4 {
  -webkit-animation: scale-tit .7s ease both;
  animation: scale-tit .7s ease both;
}

.active .face {
  -webkit-animation: rotate-y .7s ease both;
  animation: rotate-y .7s ease both;
}

/*.active .tags>a {
  -webkit-animation: tag .7s ease both;
  animation: tag .7s ease both;
}*/

.active .tag-1 {
  -webkit-animation: tag .7s ease .1s both;
  animation: tag .7s ease .1s both;
}

.active .tag-2 {
  -webkit-animation: tag .7s ease .2s both;
  animation: tag .7s ease .2s both;
}

.active .tag-3 {
  -webkit-animation: tag .7s ease .3s both;
  animation: tag .7s ease .3s both;
}

.active .tag-4 {
  -webkit-animation: tag .7s ease .4s both;
  animation: tag .7s ease .4s both;
}

.active .tag-5 {
  -webkit-animation: tag .7s ease .5s both;
  animation: tag .7s ease .5s both;
}

.active .tag-6 {
  -webkit-animation: tag .7s ease .6s both;
  animation: tag .7s ease .6s both;
}

.active .tag-7 {
  -webkit-animation: tag .7s ease .7s both;
  animation: tag .7s ease .7s both;
}

.active .tag-8 {
  -webkit-animation: tag .7s ease .8s both;
  animation: tag .7s ease .8s both;
}

.active .tag-9 {
  -webkit-animation: tag .7s ease .9s both;
  animation: tag .7s ease .9s both;
}

.active .jobs>li:nth-child(odd) {
  -webkit-animation: formLeft .7s ease .7s both;
  animation: formLeft .7s ease both;
}

.active .jobs>li:nth-child(even) {
  -webkit-animation: formRight .7s ease .7s both;
  animation: formRight .7s ease .7s both;
}

.active .jobs-more {
  -webkit-animation: rollInRight 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) .8s both;
  animation: rollInRight 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) .8s both;
}

.active .cm-join-btn {
  -webkit-animation: tada 1s ease-in-out .5s both;
  animation: tada 1s ease-in-out .5s both
}

.active .ju-box {
  -webkit-animation: scaleIn .6s ease-in-out;
  animation: scaleIn .6s ease-in-out
}

.up {
  -webkit-animation: flash 3s ease-in-out infinite;
  animation: flash 3s ease-in-out infinite;
}


@-webkit-keyframes toTop {
  from { }
  to { -webkit-transform: translateY(-120%); }
}
@keyframes toTop {
  from { }
  to { transform: translateY(-120%); }
}

@-webkit-keyframes toBottom {
  from { }
  to { -webkit-transform: translateY(120%); }
}
@keyframes toBottom {
  from { }
  to { transform: translateY(120%); }
}

@-webkit-keyframes formBottom {
  from { -webkit-transform: translateY(120%); }
}
@keyframes formBottom {
  from { transform: translateY(120%); }
}

@-webkit-keyframes formTop {
  from { -webkit-transform: translateY(-120%); }
}
@keyframes formTop {
  from { transform: translateY(-120%); }
}

@-webkit-keyframes formLeft {
  from { -webkit-transform: translateX(-120%); visibility: hidden;}
}
@keyframes formLeft {
  from { transform: translateX(-120%); visibility: hidden;}
}

@-webkit-keyframes formRight {
  from { -webkit-transform: translateX(120%); visibility: hidden; }
}
@keyframes formRight {
  from { transform: translateX(120%); visibility: hidden;}
}

@-webkit-keyframes moveLeft {
  from { -webkit-transform: translateX(100%);}
  to { -webkit-transform: translateX(-500%);}
}
@keyframes moveLeft {
  from { transform: translateX(100%);}
  to { transform: translateX(-500%);}
}

@-webkit-keyframes rotate-tit {
  from { }
  to { -webkit-transform: rotate(360deg);}
}
@keyframes rotate-tit {
  from { }
  to { transform: rotate(360deg);}
}

@-webkit-keyframes scale-tit {
  from { -webkit-transform: scale3d(0, 0, 0);}
  to { -webkit-transform: scale3d(50px, 50px, 200px);}
}
@keyframes scale-tit {
  from { transform: scale3d(0, 0, 0);}
  to { transform: scale3d(50px, 50px, 200px);}
}

@-webkit-keyframes rotate-y {
  from { }
  to { -webkit-transform: rotateY(360deg);}
}
@keyframes rotate-y {
  from { }
  to { transform: rotateY(360deg);}
}

@-webkit-keyframes tag {
  from { 
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -60px;
    display: none;
  }
}
@keyframes tag {
  from { 
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -60px;
    display: none;
  }
}

@-webkit-keyframes flash {
  0%,50%,100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  25%,75% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes flash {
  0%,50%,100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  25%,75% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

@-webkit-keyframes rollInRight {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: none
    }
}
@keyframes rollInRight {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: none
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.2,1.2,1.2)
    }

    100% {
        -webkit-transform: scale3d(1,1,1)
    }
}
@keyframes pulse {
    0% {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.2,1.2,1.2)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}

@keyframes rotate-loop {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }

  25% {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg); 
  }

  50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }

  75% {
    transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }

}

@-webkit-keyframes rotate-loop {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }

  25% {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg); 
  }

  50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }

  75% {
    transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); 
  }
}

@-webkit-keyframes scaleIn {
    0% {
        -webkit-transform: scale3d(0,0,1)
    }

    100% {
        -webkit-transform: scale3d(1,1,1)
    }
}

@keyframes scaleIn {
    0% {
        transform: scale3d(0,0,1)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    100% {
        -webkit-transform: scale3d(1,1,1)
    }
}

@keyframes tada {
    0% {
        transform: scale3d(1,1,1)
    }

    10%,20% {
        transform: scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}