* {
    margin: 0;
    padding: 0
}

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font: 14px/1 "Microsoft Yahei", "微软雅黑";
    color: #000000;
    text-align: center;
    background-color: #070F21;
    user-select: none;
}

a {
    text-decoration: none;
    color: unset;
}

image {
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.header {
    background: url("/style/images/header-bg.png") center top;
    width: 100%;
    display: inline-flex;
    justify-content: space-evenly;
    height: 81px;
}

.header .logo {
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.navigation {
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #DEE7E9;
    line-height: 15px;
    display: inline-flex;
    justify-content: center;
    /* width: 15%; */
    align-items: center;
    font-weight: bold;
}



.navigation .index {
    width: 170px;
    text-align: center;
    opacity: 0.5;
    /* height: 73px; */
}

.navigation .nav-active {
    background: url("/style/images/nav-active-btn.png") no-repeat;
    background-position-x: 49px;
    background-position-y: 50px;
    opacity: 1;
    position: relative;
    display: block;
    height: 73px;
    line-height: 74px;
}

.navigation .index:hover {
    background: url("/style/images/nav-active-btn.png") no-repeat;
    animation-duration: 0.5s;
    /* 动画时长 */
    animation-fill-mode: forwards;
    /* 动画结束后元素停留在动画结束的状态 */
    background-position-x: 49px;
    background-position-y: 50px;
    background-size: auto;
    transition: background-position-x 0.5s ease;
    opacity: 1;
    width: 170px;
    text-align: center;
    height: 73px;
    line-height: 73px;
}

.header .service-btn {
    background: url("/style/images/service-btn.png") center top;
    width: 140px;
    height: 39px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
}

.header .service-btn:hover {
    background: url("/style/images/service-btn-hover.png") center top;
}

/* 定义 slideInLeft 动画 */
@keyframes slideInLeft {
    from {
        left: -50px;
        /* 元素起始位置向左偏移100px */
    }

    to {
        left: 0;
        /* 元素结束位置偏移0px，也就是左侧边框与页面左侧对齐 */
    }
}


.footer {
    width: 100%;
    background: url("/style/images/footer-bg.png") center top;
    width: 100%;
    margin-top: 50px;
    color: #FFFFFF;
    height: 205px;
    z-index: 1;
}

.footer .content {
    width: 1105px;
    display: inline-flex;
    justify-content: space-between;
    height: 80%;
    margin-top: 25px;
}

.left-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #747C88;
    line-height: 36px;
}

.foot-link {
    display: inline-flex;
    justify-content: space-evenly;
    color: #BCD2F3;
}

.right-content {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.back {
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    position: fixed;
}

.service-body {
    width: 969px;
    height: 326px;
    position: absolute;
    background: url("/style/images/service-bg.png") center top;
    z-index: 1000;
    top: 21%;
}

.service-box{
    display: inline-flex;
    margin-top: 165px;
    margin-left: 247px;
}

.service-body .label {
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    color: #C2C7EB;
    line-height: 53px;
}

.service-body .info {
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 53px;
}

.service-item{
    width: 190px;
}