@font-face {
    font-family: "serifcnMedium";
    src: url(fonts/SourceHanSansCN-Medium.ttf);
}
html, body {
    height: 100%;
    font-family: "serifcnMedium";
}
body {
    width: 100%;
    height: 100%;
    background: url(../images/onlineImg/onlineBg.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
body > div {
    position: absolute;
    text-align: left;
    box-sizing: border-box;
    padding-top: 1.2rem;
    padding-left: 3.4rem;
}
.cloud-left {
    left: 0%;
    top: 0;
    width: 54rem;
    height: 100%;
    padding: 0;
    background: url(../images/onlineImg/planePullsLeft.png) no-repeat;
    background-size: 100% 100%;
}
.cloud-right {
    right: 0%;
    top: 0;
    width: 59.4rem;
    height: 100%;
    padding: 0;
    background: url(../images/onlineImg/planePullsRight.png) no-repeat;
    background-size: 100% 100%;
}
body > div h3 {
    font-size: 1.8rem;
    color: #fff;
}
body > div span {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}
.online-logo {
    position:absolute;
    left: 21rem;
    top: 0;
    width: 15.2rem;
    height: 10.5rem;
    background: url(../images//onlineImg/logo.png) no-repeat;
    background-size: 100% 100%;
}
.online-logo2024{
    background: url(../images//onlineImg/logo2024.png) no-repeat;
    background-size: 100% 100%;
}
.online-title {
    left: 50%;
    top: 3.3rem;
    transform: translate(-50%, 0);
    width: 48rem;
    height: 7.6rem;
    background: url(../images//onlineImg/title.png) no-repeat;
    background-size: 100% 100%;
}
.smart-bg {
    left: 23.5rem;
    top: 12.4rem;
    width: 105.8rem;
    height: 31.6rem;
    background: url(../images/onlineImg/smartBg.png) no-repeat;
    background-size: 100% 100%;
}
.smart-coum {
    left: 21rem;
    top: 15rem;
    width: 39.2rem;
    height: 5.8rem;
    background: url(../images/onlineImg/smartTitle.png) no-repeat;
    background-size: 100% 100%;
    transition: all .1s ease-in-out;
    z-index:999;
}
.smart-coum:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.access-title {
    left: 113.5rem;
    top: 16.2rem;
    width: 36.8rem;
    height: 5.8rem;
    background: url(../images/onlineImg/accessTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.access-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.drones-left {
    left: 9.1rem;
    top: 31.5rem;
    width: 7.3rem;
    height: 3.5rem;
    background: url(../images/onlineImg/dronesLeft.png) no-repeat;
    background-size: 100% 100%;
}
.railway {
    left: 14.5rem;
    top: 44.2rem;
    width: 14.5rem;
    height: 13.2rem;
    background: url(../images/onlineImg/railway.png) no-repeat;
    background-size: 100% 100%;
}
.inter {
    left: 57.5rem;
    top: 40.6rem;
    width: 72.5rem;
    height: 22.5rem;
    background: url(../images/onlineImg/intBg.png) no-repeat;
    background-size: 100% 100%;
}
.inter-title {
    left: 81rem;
    top: 41.9rem;
    width: 21rem;
    height: 5.8rem;
    background: url(../images/onlineImg/inieTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.inter-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.intel-title {
    left: 102.9rem;
    top: 34.2rem;
    width: 21rem;
    height: 5.8rem;
    background: url(../images/onlineImg/inillTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.intel-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.smart-po-title {
    left: 131.1rem;
    top: 27rem;
    width: 34rem;
    height: 5.8rem;
    background: url(../images/onlineImg/smartPoTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.smart-po-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.smart-po-bg {
    left: 136.1rem;
    top: 34rem;
    width: 24.9rem;
    height: 26.4rem;
    background: url(../images/onlineImg/smartPoBg.png) no-repeat;
    background-size: 100% 100%;
}
.drones-right {
    left: 171.3rem;
    top: 43.2rem;
    width:12.3rem;
    height: 5.7rem;
    background: url(../images/onlineImg/dronesRight.png) no-repeat;
    background-size: 100% 100%;
}
.ai-title {
    left: 25.5rem;
    top: 56.9rem;
    width: 32.9rem;
    height: 5.8rem;
    background: url(../images/onlineImg/AITitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.ai-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.ai-bg {
    left: 25.4rem;
    top: 64.6rem;
    width: 31.8rem;
    height: 19.3rem;
    background: url(../images/onlineImg/aiBg.png) no-repeat;
    background-size: 100% 100%;
}
.video-title {
    left: 102.9rem;
    top: 75.7rem;
    width: 31rem;
    height: 5.8rem;
    background: url(../images/onlineImg/intellTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.video-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.video-bg {
    left: 128.3rem;
    top: 61.5rem;
    width: 27.6rem;
    height: 24.6rem;
    background: url(../images/onlineImg/intellBg.png) no-repeat;
    background-size: 100% 100%;
}
.secur-title {
    left: 146.5rem;
    top: 60.7rem;
    width: 34rem;
    height: 5.8rem;
    background: url(../images/onlineImg/securitTitle.png) no-repeat;
    background-size: 100% 100%;
    z-index:999;
}
.secur-title:hover {
    transition: transform .1s;
    transform: scale(1.02);
}
.online_gallery {
    left: 50%;
    bottom:3rem;
    transform: translate(-50%, 0);
    width: 117.1rem;
    height: 6.5rem;
}
.onBtn ul {
    display: flex;
    justify-content: space-between;
}
.onBtn ul li {
    width: 21rem;
    height: 6.2rem;
    line-height: 6.2rem;
    text-align: center;
    color: rgba(255, 255, 255, .4);
    font-size: 2.2rem;
    background: url(../images/onlineImg/onlineBtn.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li a {
    color: rgba(255, 255, 255, .4);
}
.onBtn ul li a i {
    width: 2.3rem;
    height: 2.6rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.3rem;
    background: url(../images/onlineImg/abhBtn.png) no-repeat;
    background-size: 100% 100%;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(2) a i {
    width: 3.1rem;
    background: url(../images/onlineImg/zsBtn.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(3) a i {
    width: 2.6rem;
    height: 2.8rem;
    background: url(../images/onlineImg/zpBtn.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(4) a i {
    width: 2.5rem;
    background: url(../images/onlineImg/zxzbBtn.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(5) a i {
    width: 3.3rem;
    height: 2.8rem;
    background: url(../images/onlineImg/gydjBtn.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li.current {
    color: #fff;
    background: url(../images/onlineImg/onlineBtnHover.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li.current a {
    color: #fff;
}
.onBtn ul li.current a i {
    background: url(../images/onlineImg/abhBtnHover.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(2).current a i {
    background: url(../images/onlineImg/zsBtnH.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(3).current a i {
    background: url(../images/onlineImg/zpBtnHover.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(4).current a i {
    background: url(../images/onlineImg/zxzbBtnHover.png) no-repeat;
    background-size: 100% 100%;
}
.onBtn ul li:nth-child(5).current a i {
    background: url(../images/onlineImg/gydjBtnHover.png) no-repeat;
    background-size: 100% 100%;
}
.bg-ani {
    position: absolute;
    top: 0;
    left: -99%;
    width: 192rem;
    height: 32.8rem;
    background: url(../images/onlineImg/cloud_bg1.png) no-repeat;
    background-size: 100% 100%;
    animation: cloud-1-ani 100s linear infinite;
    animation-delay: 0;
}
@keyframes cloud-1-ani {
    0% {
        opacity: 1;
        transform: translate(0rem, 0rem);
   }
    25% {
        opacity: 1;
        transform: translate(81rem, 0rem);
   }
    50% {
        opacity: 1;
        transform: translate(10rem, 0rem);
   }
    92% {
        opacity: 1;
        transform: translate(312rem, 0rem);
   }
    98% {
        opacity: 0;
        transform: translate(362rem, 0rem);
   }
    99% {
        opacity: 0;
        transform: translate(11162rem, 0rem);
   }
    100% {
        opacity: 1;
        transform: translate(0rem, 0rem);
   }
}
.drones-left {
    animation: dronexLeft 12.4s linear infinite;
    animation-delay: .4s;
}
@keyframes dronexLeft {
    0% {
        transform: translate(0rem, 0rem);
   }
    25% {
        transform: translate(-2rem, 0rem);
   }
    50% {
        transform: translate(2rem, -2rem);
   }
    75% {
        transform: translate(-2rem, 4rem);
   }
    100% {
        transform: translate(0rem, 0rem);
   }
}
.drones-right {
    animation: dronexRight 12.4s linear infinite;
    animation-delay: .4s;
}
@keyframes dronexRight {
    0% {
        transform: translate(0rem, 0rem);
   }
    25% {
        transform: translate(2rem, 2.5rem);
   }
    50% {
        transform: translate(0rem, 0rem);
   }
    75% {
        transform: translate(-2rem, -2rem);
   }
    100% {
        transform: translate(0rem, 0rem);
   }
}