.animationWrap{
    background: url("../img/animationBg.png")no-repeat;
    background-size:100% 100%;
    margin-top:1.5%;
    margin-bottom: 2%;
    position: relative;
    box-shadow: 0px 0px 20px #757472;
}
.animationWrap>img{
    width: 100%
}
.step{
    position: absolute;
   width: 11.5%;
}
.step1{
    right: 1%;
    top: 20%;
}
.step2 {
    right: 22.5%;
    top: 4%;
}
.step3{
    right: 57.5%;
    top: 16.5%;
}
.step4{
       right: 14.5%;
       top: 36%;
}
.step5{
      right: 4.5%;
      top: 55%;
}
.step6{
         right: 32%;
         top: 52%;
}
.step7{
        right: 55%;
        top: 49%;
}
.step8{
       left: 13%;
      top: 74.5%;
}
.step9{
     left: 1%;
     top: 30.5%;
}
.brief{
    color:#2c2c2c;
    font-size: 13px;
    line-height: 1.5em;
    padding: 0 7px
}
.imgBox{
    cursor: pointer;
    display: block;
    border:6px solid #fff;
    border-radius:8px;
    overflow: hidden;
}
.imgBox img{
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}
.step1 .imgBox{
    border-color:#26bfd4
}
.step2 .imgBox {
    border-color: #0c6daf
}
.step3 .imgBox {
    border-color: #299746
}
.step4 .imgBox {
    border-color: #8eb33e
}
.step5 .imgBox {
    border-color: #fdd00a
}
.step6 .imgBox,
.step8 .imgBox {
    border-color: #f36f1e
}
.step7 .imgBox,
.step9 .imgBox {
    border-color: #9f438e
}
.imgBox:hover img {
 transform: scale(1.1, 1.1);
 -webkit-transform: scale(1.1, 1.1);
 -moz-transform: scale(1.1, 1.1);
}
.step1 .brief,
.step3 .brief,
.step4 .brief,
.step5 .brief
    {
    margin-top: 6%
}
.step2 .brief {
    margin-top: 75%;
}
.step6 .brief{
 margin-top: 60%;
}
.step7 .brief {
        position: absolute;
        width: 100%;
        right: -77%;
        top: 176%;
}
.step8 .brief {
    position: absolute;
    width: 100%;
 right: -34%;
 top: -91%;
}
.step9 .brief {
    position: absolute;
    width: 100%;
     right: -13%;
     top: -82%;
}
.popWrap{
    display: none;
    background:rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
}
.videoBox{
    width: 50%;
    margin:10% auto 0 auto
}
.close{
    cursor: pointer;
    position: absolute;
    right:20% ;
    top:10%;
    font-size: 24px;
    color:#fff;
    font-weight: bold
}
.videoTitle {
    text-align: center;
    color: #fff;
    padding: 3% 0
}