.sys_tit {
    line-height: 1.6em;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #031373;
    position: relative;
    padding-left: 78px
}

.sys_tit span {
    display: block;
    font-weight: normal;
    font-size: 17px;
    color: #000;
}

.sys_tit:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: url(../images/system_img02.png) no-repeat 0 0;
    background-size: contain
}

/***********action animation***********/

.sys_animation {
    text-align: center;
}

.sys_animate {
    text-align: center;
    display: inline-block;
    position: relative;
    width: 1080px;
    height: 370px;
    margin: 0 auto;
    overflow-y: clip;
    overflow: hidden;
}

.sys_animate .step2,
.sys_animate .step3 {
    top: 0
}

.sys_animate .step1 {
    top: 8px;
    left: 8%;
}

.sys_animate .step2 {
    left: 33%;
}

.sys_animate .step3 {
    right: 29%;
}

.sys_animate .step4 {
    right: 2%;
    top: 14%;
}

.sys_animate .step5 {
    left: 46%;
    top: 36%;
}

.sys_animate .step6 {
    left: 1%;
    top: 45%;
}

.sys_animate .step7 {
    left: 27%;
    bottom: -6px;
}

.sys_animate .step8 {
    right: 36%;
    bottom: -6px;
}

.sys_animate .step9 {
    right: 9%;
    bottom: 0;
}

.sys_animate [class *='step'] {
    z-index: 1;
    line-height: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden
}

.animate_active [class *='step'].active,
.animate_active .step1 {
    opacity: 1;
    visibility: visible
}


/*************line*************/
.sys_animate [class *="line"] {
    position: absolute;
    content: "";
    z-index: 0;

}

.sys_animate [class *="line"]:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}


.sys_animate .line1 {
    left: 0;
    top: 0;
    z-index: 0;
    width: 432px;
    height: 100%;
}

.sys_animate .line1:after {
    left: 0;
    background: url(../images/line_step1.png) no-repeat;
    opacity: 0
}


/*******set step1*****/
.animate_active .step1 {
    animation: step1 0.5s ease;

}

@keyframes step1 {
    0% {
        opacity: 0.5;
        transform: translateY(-10%);
    }

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

.animate_active .line1.show:after {
    animation: line_step1 0.5s ease;
    opacity: 1
}

@keyframes line_step1 {
    0% {
        width: 0;


    }

    100% {
        width: 100%;

    }
}

/*******set step2*****/
.animate_active .step2.active {
    animation: step2 0.5s ease;

}

@keyframes step2 {
    0% {
        opacity: 0;
        transform: translateY(-10%);

    }


    100% {
        opacity: 1;
        transform: translateY(0);


    }
}

.sys_animate .line2 {
    width: 257px;
    height: 100%;
    top: 0;
    left: 40%
}

.sys_animate .line2:after {
    left: 0;
    background: url(../images/line_step2.png) no-repeat;
    top: 0;

}


.animate_active .line2.show:after {
    animation: line_step2 0.5s ease;
    opacity: 1
}

@keyframes line_step2 {
    0% {
        width: 0;
        left: 0;
    }

    100% {
        width: 100%;
        left: 0;
    }
}


/*******set step3*****/

.animate_active .step3.active {
    animation: step3 0.5s ease;

}

@keyframes step3 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}

.sys_animate .line3 {
    width: 391px;
    height: 100%;
    top: 0;
    left: 63.5%
}

.sys_animate .line3:after {
    left: 0;
    background: url(../images/line_step3.png) no-repeat;
    top: 0;


}

.animate_active .line3.show:after {
    animation: line_step3 0.5s ease;
    opacity: 1
}

@keyframes line_step3 {
    0% {
        width: 0;
        left: 0;
    }

    100% {
        width: 100%;
        left: 0;
    }
}

/*******set step4*****/


.animate_active .step4.active {
    animation: step4 0.5s ease;

}

@keyframes step4 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}

.sys_animate .line4 {
    width: 514px;
    height: 100%;
    top: 0;
    right: 0.5%;
}

.sys_animate .line4:after {
    right: 0;
    background: url(../images/line_step4.png) no-repeat right;
    top: 0;

}

.animate_active .line4.show:after {
    animation: line_step4 0.5s ease;
    opacity: 1
}

@keyframes line_step4 {
    0% {
        width: 0;
        right: 0;

    }

    100% {
        width: 100%;
        right: 0;

    }
}

/*******set step5*****/
.animate_active .step5.active {
    animation: step5 0.5s ease;


}

@keyframes step5 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}

.sys_animate .line5 {
    width: 564px;
    height: 100%;
    top: 0;
    right: 48%;


}

.sys_animate .line5:after {
    right: 0;
    background: url(../images/line_step5.png) no-repeat right;
    top: 0;
}

.animate_active .line5.show:after {
    animation: line_step5 0.5s ease;
    opacity: 1
}

@keyframes line_step5 {
    0% {
        width: 0;
        right: 0;

    }

    100% {
        width: 100%;
        right: 0;

    }
}

/*******set step6*****/
.animate_active .step6.active {
    animation: step6 0.5s ease;


}

@keyframes step6 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);

    }
}


.sys_animate .line6 {
    width: 369px;
    height: 100%;
    top: 0;
    left: -2px;


}

.sys_animate .line6:after {
    left: 0;
    background: url(../images/line_step6.png) no-repeat left;
    top: 0;
}

.animate_active .line6.show:after {
    animation: line_step6 0.5s linear;
    opacity: 1
}

@keyframes line_step6 {
    0% {
        width: 0;

    }

    100% {
        width: 100%;


    }
}

/*******set step7*****/
.animate_active .step7.active {
    animation: step7 0.5s ease;


}

@keyframes step7 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}


.sys_animate .line7 {
    width: 270px;
    height: 100%;
    top: 0;
    left: 334px;

}

.sys_animate .line7:after {
    left: 0;
    background: url(../images/line_step7.png) no-repeat left;
    top: 0;

}

.animate_active .line7.show:after {
    animation: line_step7 0.5s linear;
    opacity: 1
}

@keyframes line_step7 {
    0% {
        width: 0;

    }

    100% {
        width: 100%;


    }
}


/******set step8****/
.animate_active .step8.active {
    animation: step8 0.5s ease;


}

@keyframes step8 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}


.sys_animate .line8 {
    width: 441px;
    height: 100%;
    top: 0;
    left: 55.5%;


}

.sys_animate .line8:after {
    left: 0;
    background: url(../images/line_step8.png) no-repeat left;
    top: 0;
}

.animate_active .line8.show:after {
    animation: line_step8 0.5s linear;
    opacity: 1
}

@keyframes line_step8 {
    0% {
        width: 0;

    }

    100% {
        width: 100%;


    }
}


/******set step9****/
.animate_active .step9.active {
    animation: step9 0.5s ease;


}

@keyframes step9 {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);


    }
}