.topBar {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

.hero {
    height: 450px;
    position: relative;
    overflow: hidden;
}

    .hero .content, .hero .cover, .hero-bg:before {
        position: absolute;
        width: 100%;
    }

.hero-bg {
    height: 100%;
}

    .hero-bg:before {
        content: "";
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

.banner-app:before {
    background-image: url(../img/base/bg-ad.jpg);
}

.banner-classroom:before {
    background-image: url(../img/base/bg-cr.jpg);
}

.banner-web:before {
    background-image: url(../img/base/bg-ws.jpg);
}

.banner-wx:before {
    background-image: url(../img/base/bg-wx.jpg);
}

.banner-about:before {
    background-image: url(../img/base/bg-ab.jpg);
}

.hero .hero-title {
    margin: 0;
    font-weight: 400;
    color: #fbfcfc;
    text-align: center;
    font-size: 3rem;
}

.hero-sub-title, .hero-title {
    text-align: center;
    color: #fff;
}

.hero .cover {
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .35;
}

.hero .content {
    top: 50%;
    margin: -4em auto 0;
    text-align: center;
    padding: 0 60px;
}

.hero .hero-sub-title {
    text-align: center;
    font-size: 1.7rem;
    line-height: 2.6rem;
    padding-top: 1rem;
    margin: 0 auto;
    width: 650px;
}

.about-talk {
    margin: 0 1rem;
    background: url(../images/text-bg.jpg) no-repeat;
    padding: 5rem 0;
}

    .about-talk h3 {
        color: #333;
    }

    .about-talk p {
        font-size: 17px;
        text-align: center;
        color: #777;
        line-height: 26px;
    }

    .about-talk .endword {
        padding-top: 1rem;
    }

.index-case {
    padding: 40px 0;
}

.case-title {
    text-align: center;
    border-bottom: 1px solid #c9caca;
    font-size: 32px;
    color: #3e3a39;
    padding-bottom: 15px;
    position: relative;
}

.index-case section {
    width: 1200px;
    margin: 20px auto 0;
    overflow: hidden;
}

    .index-case section ul {
        margin-right: -117px;
    }

    .index-case section li {
        background: #fff;
        float: left;
        width: 23%;
        padding: 14px 14px 0;
        margin: 5px 114px 20px 5px;
        position: relative;
        box-shadow: 0 0 10px rgba(0,0,128,.3);
    }

        .index-case section li img {
            width: 100%;
            display: block;
        }

        .index-case section li article {
            margin: 0 .5rem 1rem;
        }

            .index-case section li article h3 {
                color: #3e3a39;
                text-align: center;
                font-size: 24px;
                border-bottom: 1px dashed #b5b5b6;
                padding: 15px 20px 15px 0;
                margin-bottom: 15px;
                background: right center no-repeat;
            }

            .index-case section li article p {
                line-height: 26px;
                color: #3e3a39;
            }

                .index-case section li article p span {
                    display: block;
                    text-align: center;
                    height: 56px;
                    line-height: 26px;
                    overflow: hidden;
                }

@media (max-width:1440px) {
    .index-case section {
        width: auto;
    }

        .index-case section ul li {
            width: 310px;
            margin-right: 90px;
        }
}

@media (max-width:1220px) {
    .index-case section {
        width: 720px;
    }

        .index-case section ul li {
            width: 200px;
            margin-right: 40px;
        }

    .service-flow h4 {
        font-size: 16px;
    }
}

@media (max-width:767px) {
    html {
        font-size: 15px;
    }

    .index-case section {
        width: auto;
    }

        .index-case section ul {
            margin-right: 5px;
        }

            .index-case section ul li {
                width: auto;
                float: none;
                overflow: hidden;
                margin-right: 0;
                margin-bottom: 1rem;
                padding: .5rem;
            }

                .index-case section ul li picture {
                    float: left;
                    width: 30%;
                }

                .index-case section ul li article {
                    float: left;
                    width: 65%;
                    margin: 0 0 0 1rem;
                }

                .index-case section ul li img {
                    margin-top: 1rem;
                }

                .index-case section ul li article h3 {
                    background-size: 8px;
                    text-align: left;
                    padding-bottom: .5rem;
                    margin-bottom: .5rem;
                    font-size: 17px;
                }

                .index-case section ul li article p {
                    line-height: 22px;
                    font-size: 14px;
                }

        .index-case section li article p span {
            text-align: left;
            width: 100%;
            line-height: 20px;
            font-size: 13px;
        }

    .method .card .card-icon {
        width: 100%;
        height: auto;
    }

    .method .card .card-title {
        font-size: 1rem;
    }

    .method .card-footer p {
        font-size: .9rem;
    }

    .service-flow .row > div {
        margin-bottom: 20px;
    }

    .service-flow img {
        width: 20%;
    }

    .service-flow h4 {
        display: inline;
        padding-left: 20px;
        font-size: 17px;
    }
}

@media (max-width:768px) {
    html {
        font-size: 8px;
    }

    .hero {
        height: 320px;
    }

        .hero .cover {
            opacity: .5;
        }

        .hero .hero-sub-title {
            width: auto;
        }

    .about-talk h3 {
        color: #333;
    }

    .about-talk p {
        font-size: 14px;
        line-height: 20px;
        color: #333;
    }

    .about-talk .endword {
        padding-top: 1rem;
    }
}