/* 系统联动 Start */

.xtld {
    margin: 0 auto;
    position: relative;
    font-size: 100px;
    background: #f5f3f5;
    width: 100%;
    max-width: 1400px;
}

@media(max-width:1460px) {
    .xtld {
        font-size: calc(96 / 1400 * 100vw);
    }
}

@media(max-width:640px) {
    .xtld {
        font-size: calc(90 / 1400 * 100vw);
    }
}

.xtld img {
    width: 100%;
    display: block;
}

.xtld .circle {
    position: absolute;
    width: 5.7em;
    left: 49.4%;
    top: 54.5%;
    transform: translate(-50%, -50%);
    opacity: .5;
    animation: xtld-circle-anim 1s infinite alternate;
}

@keyframes xtld-circle-anim {
    0% {
        width: 5.9em;
        opacity: .2;
    }
    100% {
        width: 6.2em;
        opacity: .5;
    }
}

.xtld .item {
    position: absolute;
    width: 1.4em;
    height: 1.1em;
}

.xtld .item1 {
    left: 3.03em;
    top: 1.44em;
}

.xtld .item2 {
    left: 2.36em;
    top: 3.36em;
}

.xtld .item3 {
    left: 6.48em;
    top: 4.64em;
}

.xtld .item4 {
    left: 10.29em;
    top: 3.24em;
}

.xtld .item5 {
    left: 8.83em;
    top: 1.19em;
}

.xtld .item .text {
    font-size: .20em;
    position: absolute;
    right: 100%;
    top: 2em;
    display: inline-block;
    padding: .3em 1em;
    background: #fff;
    border-radius: 2em;
    transition: all .5s;
    width: auto;
    white-space: nowrap;
}

.xtld .item .text::before {
    position: absolute;
    content: '';
    background-color: #54d04c;
    width: 2em;
    height: .1em;
    right: -2em;
    top: 1em;
}

.xtld .item .text::after {
    position: absolute;
    content: '';
    background-color: #54d04c;
    width: .3em;
    height: .3em;
    right: -2em;
    top: .9em;
    border-radius: 2em;
}

.xtld .item .right {
    left: 100%;
    right: auto;
    margin-left: 0em;
}

.xtld .item .right::before {
    left: -2em;
}

.xtld .item .right::after {
    left: -2em;
}


.xtld .item:hover .text {
    color: #fff;
    background: #54d04c;
    user-select: none;
    font-size: .21em;
    top: 1.9em;
}

.xtld .item .icon {
    position: absolute;
    width: 40%;
    top: 15%;
    left: 50%;
    transition: .5s;
    transform: translateX(-50%);
    animation: xtld-icon-anim .5s linear infinite alternate;
}

.xtld .item:hover .icon {
    width: 45%;
}

@keyframes xtld-icon-anim {
    from {
        top: 15%;
    }

    to {
        top: 5%;
    }
}

.xtld .item .light {
    position: absolute;
    bottom: 10%;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    animation: xtld-light-anim .5s ease-in-out infinite alternate;
}

@keyframes xtld-light-anim {
    from {
        opacity: 1;
    }

    to {
        opacity: .5;
    }
}

/* 系统联动 End */

/* 防疫用车 Start */

.fyyc {
    margin: 0 auto;
    position: relative;
    font-size: 100px;
    width: 100%;
    max-width: 1400px;
}

@media(max-width:1460px) {
    .fyyc {
        font-size: calc(96 / 1400 * 100vw);
    }
}

@media(max-width:640px) {
    .fyyc {
        font-size: calc(90 / 1400 * 100vw);
    }
}

.fyyc img {
    width: 100%;
    display: block;
}

.fyyc .item {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    overflow: hidden;
}

.fyyc .mask {
    top: 0;
    left: 0;
    z-index: 10;
    position: absolute;
}

.fyyc .bg {
   /*  position: absolute; */
}

.fyyc .bus1 {
    position: absolute;
    left: -1.7em;
    top: 4.1em;
    width: 1.44em;
}

.fyyc .bus2 {
    position: absolute;
    left: -0.7em;
    top: 1.52em;
    width: .75em;
    animation: fyyc-bus2-anim linear 20s infinite;
}

.fyyc .bus3 {
    position: absolute;
    left: 10.6em;
    top: -0.5em;
    width: .75em;
}

.fyyc .p1 {
    position: absolute;
    left: 9.3em;
    top: 3.22em;
    width: .16em;
}

.fyyc .p2 {
    position: absolute;
    left: 8.7em;
    top: 6.72em;
    width: 1.31em;
}

.fyyc .data {
    position: absolute;
    left: 9.22em;
    top: 5.85em;
    width: .39em;
}

.fyyc .icon1 {
    position: absolute;
    left: 7.42em;
    top: 0.95em;
    width: 1.6em;
}

.fyyc .icon2 {
    position: absolute;
    left: 1em;
    top: 3.93em;
    width: 3.49em;
}

.fyyc .build {
    position: absolute;
    top: 0;
    left: 0;
}

/* 防疫用车 End */

/* 校车管理 Start */

.xcgl {
    position: relative;
    font-size: 100px;
    max-width: 765px;
    width: 100%;
}

@media(max-width:1500px) {
    .xcgl {
        font-size: calc(96 / 1400 * 100vw); 
    }
}

@media(max-width:640px) {
    .xcgl {
        font-size: calc(166 / 1400 * 100vw); 
    }
}

.xcgl img {
    width: 100%;
    display: block;
}

.xcgl .build1 {
    position: absolute;
    width: .27em;
    left: 3.25em;
    top: 0.7em;
    animation: xcgl-build1-anim linear .5s infinite alternate;
    transform-origin: 50%;
}

@keyframes xcgl-build1-anim {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.4);
    }    
}

.xcgl .loc1 {
    position: absolute;
    left: 5.2em;
    top: 2.1em;
    width: .35em;
    animation: xcgl-loc1-anim linear .5s infinite alternate;
}

@keyframes xcgl-loc1-anim {
    0% {
        transform: translateY(-.1em);
    }
    100% {
        transform: translateY(.1em);
    }    
}

.xcgl .pic2 {
    position: absolute;
    left: 5.9em;
    top: 1.8em;
    width: 1.26em;
    transform-origin: 40%;
    animation: xcgl-pic2-anim linear 1.5s infinite alternate;
}

@keyframes xcgl-pic2-anim {
    0% {
        transform: translateY(.5em) scale(0);
        opacity: 0;
    }
    30% {
        transform: translateY(0em) scale(1);
        opacity: 1;
    }
    100% {

    }    
}

.xcgl .icon2 {
    position: absolute;
    width: .27em;
    left: 3.17em;
    top: 1em;
    animation: xcgl-icon2-anim linear .5s infinite alternate;
    transform-origin: 50%;
}

@keyframes xcgl-icon2-anim {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.4);
    }    
}

.xcgl .icon3 {
    position: absolute;
    width: .27em;
    left: 2.17em;
    top: 0.6em;
    animation: xcgl-icon2-anim linear .5s infinite alternate;
    transform-origin: 50%;
}

.xcgl .t1 {
    position: absolute;
    left: 4.37em;
    top: 1.2em;
    width: 1.14em;
    animation: xcgl-t1-anim linear .5s infinite alternate;
    transform-origin: 10%;
}

.xcgl .t2 {
    position: absolute;
    left: 6.19em;
    top: 0.2em;
    width: 1.13em;
    animation: xcgl-t1-anim linear .5s infinite alternate;
    transform-origin: 10%;
}

@keyframes  xcgl-t1-anim {
    0% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1.1);
    }    
}

@media(max-width:640px) {
.xcgl .loc1{ left:10.2em; top:4.4em;}
}
/* 校车管理 End */