/*第一层*/
@keyframes animX{
    0% {
        left:125px;
    }
    100% {
        left: 805px;
    }
}
@keyframes animY{
    0% {
        top:70px;
    }
    100% {
        top: 600px;
    }
}
@keyframes scale {

    0% {
        transform: scale(0.4);
        z-index: 0;
        font-weight: 100;
        color: #000;
    }
    50% {
        transform: scale(1);
        z-index: 3;
        font-weight: 300;
    }
    100% {
        transform: scale(0.5);
        z-index: 0;
        font-weight: 600;
        color: #339af3;
    }
}

.ball {
   width: 240px;
    height: 32px;
    position: absolute;
    color:#000;
    font-size:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 600;
    z-index: 3;
    /*动画执行一次所需时间*/
    animation-duration: 10s;
    /*动画以何种运行轨迹完成一个周期*/
    animation-timing-function: cubic-bezier(0.36,0,0.64,1);
    /*动画播放次数,无线循环播放*/
    animation-iteration-count: infinite;
    /*是否轮流反向播放动画 alternate:正向播放*/
    animation-direction: alternate;
    animation-name: animX, animY,scale;
}

#lopp {
    width: 690px;
    height: 520px;
    border: 1px  #339af3 dashed;
    border-radius: 50%;
    position: absolute;
    left: 235px;
    top: 90px;
}
/*鼠标进入停止*/
.active {
    animation-play-state: paused;
}


/*第二层*/
@keyframes anim2X{
    0% {
        left: -95px;
    }
    100% {
        left: 815px;
    }
}
@keyframes anim2Y{
    0% {
        top: -10px;
    }
    100% {
        top: 673px;
    }
}
.ball2 {
    z-index: 3;
    width: 430px;
    position: absolute;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;

    /*line-height: 120px;*/
    /*动画执行一次所需时间*/
    animation-duration: 10s, 10s, 20s;
    /*动画以何种运行轨迹完成一个周期*/
    animation-timing-function: cubic-bezier(0.36,0,0.64,1);
    /*动画播放次数,无线循环播放*/
    animation-iteration-count: infinite;
    /*是否轮流反向播放动画 alternate:正向播放*/
    animation-direction: alternate;
    animation-name: anim2X, anim2Y,scale;
}
#lopp2 {
    width: 920px;
    height: 693px;
    border: 1px  #339af3 dashed;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 125px;
}
.certify{
    position: relative;
    transform: rotateX(20deg);

    height: 720px;
    margin: 0 auto;
    overflow-x: hidden;
}
.circle {
    position: absolute;
    top: 174px;
    left: 375px;
    border-radius: 50%;
    width: 430px;
    height: 350px;
    z-index: 3;
    color: #fff;
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    border: 3px solid #005dad;
    line-height: 350px;
    vertical-align: middle;
}
@media (max-width:1100px) {

    /*第二层*/
    @keyframes anim2X{
        0% {
            left: -60%;
        }
        100% {
            left:39%;
        }
    }
    @keyframes anim2Y{
        0% {
            top: 20px;
        }
        100% {
            top: 300px;
        }
    }
    /*第一层*/
    @keyframes animX{
        0% {
            left:-70px;
        }
        100% {
            left:190px;
        }
    }
    @keyframes animY{
        0% {
            top: 60px;
        }
        100% {
            top: 260px;
        }
    }
    @keyframes scale {

        0% {
            transform: scale(0.4);
            z-index: 0;
            font-weight: 100;
            color: #000;
        }
        50% {
            transform: scale(1);
            z-index: 3;
            font-weight: 300;
        }
        100% {
            transform: scale(0.5);
            z-index: 0;
            font-weight: 600;
            color: #339af3;
        }
    }
    .ball{font-size: 14px}
    .ball2{font-size: 14px}
    .certify{
        width: 100%;
        height: 400px;

    }
    .circle{
        width: 170px;
        height: 120px;
        left:27%;
        top: 100px;
        line-height:108px;
        padding: 0 .8rem;
    }
    #lopp{
        width: 260px;
        height: 200px;
        top: 60px;
        left: 14%;
    }
    #lopp2{width: 99%;height: 280px;top: 20px;left: 0}


}