.animateD {
    opacity: 0;
}
.yu-mada .red {
    width: 0px;
    background: url(../images/yu-mada-red.png) left top no-repeat
}
.yu-mada .blue {
    width: 0;
    background: url(../images/yu-mada-blue.png) left top no-repeat
}
.yu-mada .red.animated.animateD {
    opacity: 1;
    animation: line0 0.5s linear 0.5s 1 forwards;
    -webkit-animation: line0 0.5s linear 0.5s 1 forwards;
}
.yu-mada .blue.animated.animateD {
    opacity: 1;
    animation: line1 0.5s linear 0.5s 1 forwards;
    -webkit-animation: line1 0.5s linear 0.5s 1 forwards;
}

.feel-content .red {
    width: 0;
    height: 0;
    background: url(../images/feel-right-red.png) right bottom no-repeat;
}
.feel-content .blue {
    width: 0;
    height: 0;
    background: url(../images/feel-left-blue.png) left top no-repeat;
}
.feel-content .red.animated.animateD {
    opacity: 1;
    animation: line2 0.5s linear 0s 1 forwards;
    -webkit-animation: line2 0.5s linear 0s 1 forwards;
}
.feel-content .blue.animated.animateD {
    opacity: 1;
    animation: line3 0.5s linear 0s 1 forwards;
    -webkit-animation: line3 0.5s linear 0s 1 forwards;
}
.swiper-container4 .swiper-slide-active .fca-xian {
    width: 0;
    top: 154px;
    right: 114px;
    animation: line6 0.85s linear 0s 1 forwards;
    -webkit-animation: line6 0.85s linear 0s 1 forwards;
}
.swiper-container4 .fca-bot {
    background: url(../images/fcad.png) 0 0 no-repeat;
    -webkit-animation: leida 1s steps(4, end) 0s infinite backwards;
    animation: leida 1s steps(4, end) 0s infinite backwards;
}
.swiper-container4 .ascc-bot {
    top: 238px;
    left: 503px;
    width: 360px;
    height: 211px;
    background: url(../images/ascc.png) 0 0 no-repeat;
    -webkit-animation: leida 1.5s steps(8, end) 0s infinite backwards;
    animation: leida 1.5s steps(8, end) 0s infinite backwards;
}
.swiper-container4 .swiper-slide-active .ldws-xian {
    width: 0;
    animation: line7 0.85s linear 0.2s 1 forwards;
    -webkit-animation: line7 0.85s linear 0.2s 1 forwards;
}

.circleProgress_wrapper {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 6px;
    top: 6px;
}
.circleProgress_wrapper2 {
    left: auto;
    right: 6px;
}
.wrapper {
    width: 120px;
    height: 60px;
    position: absolute;
    top: 0;
    overflow: hidden;
}
.right {
    top: auto;
    bottom: 0;
}
.left {
    bottom: 0;
}
.circleProgress {
    width: 117px;
    height: 114px;
    position: absolute;
    border: 6px solid transparent;
    border-radius: 50%;
    top: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.animateda .rightcircle {
    border-top: 6px solid #fff;
    border-right: 6px solid #fff;
    right: 0;
    top: auto;
    bottom: 3px;
    -webkit-animation: circleProgressLoad_right 0.6s linear forwards;
    animation: circleProgressLoad_right 0.6s linear forwards;
}
.animateda .leftcircle {
    border-bottom: 6px solid #fff;
    border-left: 6px solid #fff;
    left: 3px;
    -webkit-animation: circleProgressLoad_left 0.6s linear forwards;
    animation: circleProgressLoad_left 0.6s linear forwards;
}
.circleProgress_wrapper2.animateda .leftcircle {
    border-bottom: 6px solid #fff;
    border-left: 6px solid #fff;
    left: 3px;
    -webkit-animation: circleProgressLoad_left2 0.6s linear forwards;
    animation: circleProgressLoad_left2 0.6s linear forwards;
}
.circle {
    width: 7px;
    height: 7px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
}
.circle1 {
    left: 67px;
    top: 1px;
}
.circle2 {
    left: 81px;
    top: 6px;
}
.circle3 {
    left: 95px;
    top: 15px;
}
.circle4 {
    left: 106px;
    top: 28px;
}
.circle5 {
    left: 112px;
    top: 44px;
}

@-webkit-keyframes line0 {
    0% {
        width: 0px;
    }
    100% {
        width: 205px;
    }
}
@keyframes line0 {
    0% {
        width: 0px;
    }
    100% {
        width: 205px;
    }
}

@-webkit-keyframes line1 {
    0% {
        width: 0px;
    }
    100% {
        width: 154px;
    }
}
@keyframes line1 {
    0% {
        width: 0px;
    }
    100% {
        width: 154px;
    }
}

@-webkit-keyframes line2 {
    0% {
        width: 0px;
        height: 0
    }
    100% {
        width: 387px;
        height: 613px;
    }
}
@keyframes line2 {
    0% {
        width: 0px;
        height: 0
    }
    100% {
        width: 387px;
        height: 613px;
    }
}

@-webkit-keyframes line3 {
    0% {
        width: 0px;
        height: 0
    }
    100% {
        width: 405px;
        height: 611px;
    }
}
@keyframes line3 {
    0% {
        width: 0px;
        height: 0
    }
    100% {
        width: 405px;
        height: 611px;
    }
}

@-webkit-keyframes line4 {
    0% {
        width: 0px;
    }
    100% {
        width: 232px;
    }
}
@keyframes line4 {
    0% {
        width: 0px;
    }
    100% {
        width: 232px;
    }
}
@-webkit-keyframes leida {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}
@keyframes leida {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}
@-webkit-keyframes line5 {
    0% {
        width: 0px;
    }
    100% {
        width: 183px;
    }
}
@keyframes line5 {
    0% {
        width: 0px;
    }
    100% {
        width: 183px;
    }
}
@-webkit-keyframes line6 {
    0% {
        width: 0px;
    }
    100% {
        width: 557px;
    }
}
@keyframes line6 {
    0% {
        width: 0px;
    }
    100% {
        width: 557px;
    }
}
@-webkit-keyframes line7 {
    0% {
        width: 0px;
    }
    100% {
        width: 458px;
    }
}
@keyframes line7 {
    0% {
        width: 0px;
    }
    100% {
        width: 458px;
    }
}
@-webkit-keyframes circleProgressLoad_right {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    50%, 100% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}
@-webkit-keyframes circleProgressLoad_left {
    0%, 50% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
@-webkit-keyframes circleProgressLoad_left2 {
    0%, 50% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}