* {
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei';
    position: relative;
    background: linear-gradient(to right, #052b5b, #003880, #052b5b);
}


@media (min-width: 1366px) {
    .banner {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: url(../images/banner.jpg) no-repeat center center;
        background-size: 100% 100%;

        .banner-foc {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: auto;
            top: -2%;
            text-align: center;
            > img {
                width: 100%;
            }
        }

        .banner-title {
            width: 100%;
            height: auto;
            text-align: center;
            z-index: 12;

            .img1 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 1vw;
                bottom: 38%;
                z-index: 111;
            }
            .img2 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 1vw;
                bottom: 35%;
                z-index: 111;
            }
        }

        .btn-con {
            text-align: center;

            a {
                cursor: pointer;
                display: inline-block;
                color: #fff;
                font-size: 2vw;
                position: absolute;
                bottom: 15%;
                left: 50%;
                transform: translate(-50%);
                z-index: 111;
            }
            a + a {
                width: 2vw;
                bottom: 10%;
                z-index: 111;
                animation: loadingUpDown 1.5s infinite;
                -o-animation: loadingUpDown 1.5s infinite ease-in-out;
                -moz-animation: loadingUpDown 1.5s infinite ease-in-out;
                -webkit-animation: loadingUpDown 1.5s infinite;
                img {
                    width: 100%;
                    margin-left: -35%;
                }
            }
        }

        @keyframes loadingUpDown {
            0%,
            30% {
                opacity: 0;
                transform: translate(0, 10px);
            }
            70% {
                opacity: 1;
                transform: translate(0, 0);
            }
            100% {
                opacity: 0;
                transform: translate(0, 5px);
            }
        }

        .logo-con {
            width: 100%;
            height: auto;
            margin: 0 auto;
            position: relative;

            .logo {
                position: absolute;
                height: 6vh;
                top: 5vh;
                left: 5vw;
            }
        }
    }
}

@media (max-width: 1366px) {
    .banner {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: url(../images/banner.jpg) no-repeat center center;
        background-size: 100% 100%;

        .banner-foc {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: auto;
            top: -8%;
            text-align: center;
            > img {
                width: 100%;
            }
        }

        .banner-title {
            width: 100%;
            height: auto;
            text-align: center;
            z-index: 12;

            .img1 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 1vw;
                bottom: 38%;
                z-index: 111;
            }
            .img2 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 1vw;
                bottom: 35%;
                z-index: 111;
            }
        }

        .btn-con {
            text-align: center;

            a {
                cursor: pointer;
                display: inline-block;
                color: #fff;
                font-size: 2vw;
                position: absolute;
                bottom: 15%;
                left: 50%;
                transform: translate(-50%);
                z-index: 111;
            }
            a + a {
                width: 2vw;
                bottom: 10%;
                z-index: 111;
                animation: loadingUpDown 1.5s infinite;
                -o-animation: loadingUpDown 1.5s infinite ease-in-out;
                -moz-animation: loadingUpDown 1.5s infinite ease-in-out;
                -webkit-animation: loadingUpDown 1.5s infinite;
                img {
                    width: 100%;
                    margin-left: -35%;
                }
            }
        }

        @keyframes loadingUpDown {
            0%,
            30% {
                opacity: 0;
                transform: translate(0, 10px);
            }
            70% {
                opacity: 1;
                transform: translate(0, 0);
            }
            100% {
                opacity: 0;
                transform: translate(0, 5px);
            }
        }

        .logo-con {
            width: 100%;
            height: auto;
            margin: 0 auto;
            position: relative;

            .logo {
                position: absolute;
                height: 6vh;
                top: 5vh;
                left: 5vw;
            }
        }
    }
}

@media (max-width: 899px) {
    .banner {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: url(../images/banner.jpg) no-repeat center center;
        background-size: cover;

        .banner-foc {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: auto;
            top: 10%;
            text-align: center;
            > img {
                width: 200%;
                margin-left: -50%;
            }
        }

        .banner-title {
            width: 100%;
            height: auto;
            text-align: center;
            z-index: 12;

            .img1 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 3.5vw;
                top: 55%;
                z-index: 111;
            }
            .img2 {
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: 3.5vw;
                top: 58%;
                z-index: 111;
            }
        }

        .btn-con {
            text-align: center;

            a {
                cursor: pointer;
                display: inline-block;
                color: #fff;
                font-size: 4vw;
                position: absolute;
                bottom: 15%;
                left: 50%;
                transform: translate(-50%);
                z-index: 111;
            }
            a + a {
                width: 4vw;
                bottom: 12%;
                z-index: 111;
                animation: loadingUpDown 1.5s infinite;
                -o-animation: loadingUpDown 1.5s infinite ease-in-out;
                -moz-animation: loadingUpDown 1.5s infinite ease-in-out;
                -webkit-animation: loadingUpDown 1.5s infinite;
                img {
                    width: 100%;
                    margin-left: -35%;
                }
            }
        }

        @keyframes loadingUpDown {
            0%,
            30% {
                opacity: 0;
                transform: translate(0, 10px);
            }
            70% {
                opacity: 1;
                transform: translate(0, 0);
            }
            100% {
                opacity: 0;
                transform: translate(0, 5px);
            }
        }

        .logo-con {
            width: 100%;
            height: auto;
            margin: 0 auto;
            position: relative;

            .logo {
                position: absolute;
                width: 80vw;
                top: 8vw;
                left: 8vw;
            }
        }
    }
}