.slogan {
    color: purple;
}

.slogan>span {
    max-width: 6em;
}


.slogan>span:nth-child(2) {
    font-family: "楷体";
    min-width: 8em;
}

.container>p {
    font-family: "楷体";
}

.float-box {
    width: 90%;
    /* height: 400px; */
    position: inherit;
    left: 5%;
    background: rgba(255, 255, 255, 0.2);
    padding: 1%;
    margin-top: 20px;
    text-align: center;
    padding-bottom: calc(1% + 50px);
}

.text-left>span {
    text-indent: 2em;
    margin-left: 7.5%;
    margin-right: 7.5%;
    text-align: left;
}

.text-left>img {
    margin-top: 20%;
}

.float-box>h3 {
    font-weight: bold;
}

.float-box>span {
    font-family: "楷体";
    font-weight: bolder;
}

.float-box:hover,
.float-box:focus {
    box-shadow: 0 11px 32px rgba(115, 115, 156, 0.3);
    transition: all 0.4s linear;
}

.float-container {
    width: 100%;
    /* background: url("../img/superiority.png"); */
    display: flex;
}

.superiority-img {
    margin: 40px auto;
    margin-top: 25%;
    width: 40%;
}

@media screen and (min-width: 992px) {
    p {
        margin: 5% 10%;
        font-size: 1.3vw;
        text-indent: 2em;
    }

    h2 {
        text-align: center;
        font-size: 3vw;
    }

    h3 {
        text-align: center;
        font-size: 2vw;
        font-weight: normal;
    }

    .float-box>span {
        display: block;
        margin-top: 1%;
        margin-bottom: 1%;
        font-weight: 400;
        line-height: 30px;
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 1366px) {
    .header {
        height: 558px;
        max-width: 1366px;
        max-height: 558px;
    }

    .slogan>span:nth-child(1) {
        position: relative;
        display: block;
        font-size: 105px;
        font-weight: bolder;
        left: 150px;
        top: 80px;
    }

    .slogan>span:nth-child(2) {
        position: relative;
        display: block;
        font-size: 55px;
        top: 195px;
        left: 150px;
    }

    .application-container {
        width: 1366px;
        height: 1366px;
        margin: auto;
        margin-bottom: 136.6px;
    }

    .application-container>div {
        width: 683px;
        height: 546.4px;
        position: relative;
    }

    .app-item1 {
        top: 0;
        left: 0;
    }

    .app-item1>img {
        height: 546.4px;
        width: 683px;
    }

    .app-item2 {
        top: -546.4px;
        left: 683px;
    }

    .app-item2>span {
        position: relative;
        display: block;
        max-width: 478.1px;
    }

    .app-item2>span:first-child {
        font-size: 95px;
        top: 20%;
        left: 10%;
        line-height: 95px;
        font-weight: bolder;
    }

    .app-item2>span:last-child {
        font-size: 54px;
        line-height: 54px;
        top: 35%;
        left: 14%;
        font-family: "楷体";
    }

    .app-item3 {
        top: -546.4px;
        left: 0;
        background-color: rgba(16, 72, 176, 0.69);
        color: white;
    }

    .app-item3>span {
        position: relative;
        display: block;
    }

    .app-item3>span:first-child {
        font-size: 95px;
        top: 15%;
        left: 16%;
        line-height: 95px;
        font-weight: bolder;
    }

    .app-item3>span:nth-child(2) {
        font-size: 54px;
        line-height: 54px;
        top: 30%;
        left: 20%;
        font-family: "楷体";
    }

    .app-item3>img {
        width: 546.4px;
        height: 409.8px;
        position: relative;
        top: 191.24px;
        left: 204.9px;
    }

    .app-item4 {
        top: -1092.8px;
        left: 683px;
        display: flex;
    }

    .app-item4>* {
        position: relative;
    }

    .app-item4>img {
        left: -68.3px;
        width: 478.1px;
        height: 321px;
    }

    .app-item4>div {
        left: -68.3px;
        top: -68.3px;
        background-color: rgb(16, 72, 176);
        height: 389.31px;
        width: 341.5px;
    }

    .app-item4>span:nth-child(3) {
        position: absolute;
        font-size: 95px;
        top: 85%;
        left: 20%;
        line-height: 95px;
        font-weight: bolder;
    }

    .app-item4>span:nth-child(4) {
        position: absolute;
        font-size: 54px;
        line-height: 54px;
        top: 115%;
        left: 25%;
        font-family: "楷体";
    }


}

@media screen and (min-width: 992px) and (max-width: 1366px) {
    .slogan>span:nth-child(1) {
        position: relative;
        display: block;
        font-size: 8.5vw;
        font-weight: bolder;
        left: 13%;
        top: 6vw
    }

    .slogan>span:nth-child(2) {
        position: relative;
        display: block;
        font-size: 4.5vw;
        top: 12vw;
        left: 13%;
    }

    .application-container {
        width: 100vw;
        height: 100vw;
        margin: auto;
        margin-bottom: 10vw;
    }

    .application-container>div {
        width: 50vw;
        height: 40vw;
        position: relative;
    }

    .app-item1 {
        top: 0;
        left: 0;
    }

    .app-item1>img {
        height: 40vw;
        width: 50vw;
    }

    .app-item2 {
        top: -40vw;
        left: 50vw;
    }

    .app-item2>span {
        position: relative;
        display: block;
        max-width: 35vw;
    }

    .app-item2>span:first-child {
        font-size: 7vw;
        top: 20%;
        left: 10%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item2>span:last-child {
        font-size: 4vw;
        line-height: 4vw;
        top: 35%;
        left: 14%;
        font-family: "楷体";
    }

    .app-item3 {
        top: -40vw;
        left: 0;
        background-color: rgba(16, 72, 176, 0.69);
        color: white;
    }

    .app-item3>span {
        position: relative;
        display: block;
    }

    .app-item3>span:first-child {
        font-size: 7vw;
        top: 15%;
        left: 16%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item3>span:nth-child(2) {
        font-size: 4vw;
        line-height: 4vw;
        top: 30%;
        left: 20%;
        font-family: "楷体";
    }

    .app-item3>img {
        width: 40vw;
        height: 30vw;
        position: relative;
        top: 14vw;
        left: 15vw;
    }


    .app-item4 {
        top: -80vw;
        left: 50vw;
        display: flex;
    }

    .app-item4>* {
        position: relative;
    }

    .app-item4>img {
        left: -5vw;
        width: 35vw;
        height: 23.5vw;
    }

    .app-item4>div {
        left: -5vw;
        top: -5vw;
        background-color: rgb(16, 72, 176);
        height: 28.5vw;
        width: 25vw;
    }

    .app-item4>span:nth-child(3) {
        position: absolute;
        font-size: 7vw;
        top: 85%;
        left: 20%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item4>span:nth-child(4) {
        position: absolute;
        font-size: 4vw;
        line-height: 4vw;
        top: 115%;
        left: 25%;
        font-family: "楷体";
    }
}

@media screen and (max-width: 992px) {


    p {
        margin: 5% 10%;
        text-indent: 4em;
    }

    h2 {
        text-align: center;
        font-size: 5.5vw;
    }

    h3 {
        text-align: center;
        font-size: 3.5vw;
        font-weight: normal;
    }

    .slogan>span:nth-child(1) {
        position: relative;
        display: none;
        font-size: 12vw;
        font-weight: bolder;
        left: 11%;
        top: 6vw;
    }

    .slogan>span:nth-child(2) {
        position: relative;
        display: none;
        font-size: 6vw;
        top: 12vw;
        left: 12%;
        font-family: "楷体";
    }

    .nav-item {
        font-size: 27px !important;
    }

    .float-box>span {
        display: block;
        margin-top: 1%;
        margin-bottom: 1%;
        font-weight: 400;
        line-height: 30px;
        font-size: 2vw;
    }

    .application-container {
        width: 100vw;
        height: 100vw;
        margin: auto;
        margin-bottom: 10vw;
    }

    .application-container>div {
        width: 50vw;
        height: 40vw;
        position: relative;
    }

    .app-item1 {
        top: 0;
        left: 0;
    }

    .app-item1>img {
        height: 40vw;
        width: 50vw;
    }

    .app-item2 {
        top: -40vw;
        left: 50vw;
    }

    .app-item2>span {
        position: relative;
        display: block;
        max-width: 35vw;
    }

    .app-item2>span:first-child {
        font-size: 7vw;
        top: 20%;
        left: 10%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item2>span:last-child {
        font-size: 4vw;
        line-height: 4vw;
        top: 35%;
        left: 14%;
        font-family: "楷体";
    }

    .app-item3 {
        top: -40vw;
        left: 0;
        background-color: rgba(16, 72, 176, 0.69);
        color: white;
    }

    .app-item3>span {
        position: relative;
        display: block;
    }

    .app-item3>span:first-child {
        font-size: 7vw;
        top: 15%;
        left: 16%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item3>span:nth-child(2) {
        font-size: 4vw;
        line-height: 4vw;
        top: 30%;
        left: 20%;
        font-family: "楷体";
    }

    .app-item3>img {
        width: 40vw;
        height: 30vw;
        position: relative;
        top: 14vw;
        left: 15vw;
    }


    .app-item4 {
        top: -80vw;
        left: 50vw;
        display: flex;
    }

    .app-item4>* {
        position: relative;
    }

    .app-item4>img {
        left: -5vw;
        width: 35vw;
        height: 23.5vw;
    }

    .app-item4>div {
        left: -5vw;
        top: -5vw;
        background-color: rgb(16, 72, 176);
        height: 28.5vw;
        width: 25vw;
    }

    .app-item4>span:nth-child(3) {
        position: absolute;
        font-size: 7vw;
        top: 85%;
        left: 20%;
        line-height: 7vw;
        font-weight: bolder;
    }

    .app-item4>span:nth-child(4) {
        position: absolute;
        font-size: 4vw;
        line-height: 4vw;
        top: 115%;
        left: 25%;
        font-family: "楷体";
    }
}