.banner {
    height     : 8.6rem;
    max-height : 100vh;
    position   : relative;
    display    : flex;
    align-items: center
}

.banner .bannerImg {
    position           : absolute;
    width              : 100%;
    height             : 100%;
    background-size    : cover;
    background-position: center;
    transition         : all .5s ease-out;
    left               : 0;
    top                : 0
}

.banner .basics-box {
    position: relative
}

.banner .basics-box .box p {
    color: #fff
}

.banner .basics-box .box p.p1 {
    font-size  : 54px;
    line-height: 1.2
}

@media only screen and (max-width:1440px) {
    .banner .basics-box .box p.p1 {
        font-size: 38px
    }
}

@media only screen and (max-width:1024px) {
    .banner .basics-box .box p.p1 {
        font-size: 34px
    }
}

@media only screen and (max-width:767px) {
    .banner .basics-box .box p.p1 {
        font-size: 28px
    }
}

.banner .basics-box .box p.p2 {
    font-size  : 22px;
    line-height: 1.7;
    margin-top : .2rem
}
.banner .basics-box .box p.p2.en {
    width: 70%;
}
@media only screen and (max-width:1440px) {
    .banner .basics-box .box p.p2 {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .banner .basics-box .box p.p2 {
        font-size: 16px
    }
    .banner .basics-box .box p.p2.en {
        width: 100%;
    }
}

.detail .nav-box {
    position        : sticky;
    top             : 0;
    z-index         : 999;
    width           : 100%;
    height          : .6rem;
    min-height      : 36px;
    background-color: #f1f1f1
}

.detail .nav-box .basics-box {
    height : 100%;
    display: flex
}

.detail .nav-box .basics-box .box {
    font-size         : 17px;
    color             : #333;
    height            : 100%;
    width             : 20%;
    text-align        : center;
    transition        : all .5s;
    -webkit-transition: all .5s;
    -moz-transition   : all .5s;
    -ms-transition    : all .5s;
    display           : flex;
    justify-content   : center;
    align-items       : center
}

@media only screen and (max-width:1366px) {
    .detail .nav-box .basics-box .box {
        font-size: 15px
    }
}

@media only screen and (max-width:767px) {
    .detail .nav-box .basics-box .box {
        font-size: 12px
    }
}

.detail .nav-box .basics-box .box.active {
    color           : #fff;
    background-color: #e70012
}

.detail .nav-box .basics-box .box:hover {
    color           : #fff;
    background-color: #e70012
}

.detail .content {
    padding            : 1rem 0 1.2rem;
    width              : 100%;
    height             : 100%;
    background-size    : cover;
    background-position: center
}

.detail .content .basics-box {
    overflow: hidden
}

.detail .content .img-box {
    float        : left;
    clear        : both;
    margin-right : .75rem;
    margin-bottom: .45rem
}

.detail .content .img-box .img {
    width : 4.8rem;
    height: auto
}

.detail .content .img-box .img-title {
    text-align: right;
    font-size : 18px;
    color     : #555555;
    margin-top: .1rem
}

@media only screen and (max-width:1024px) {
    .detail .content .img-box .img-title {
        font-size: 16px
    }
}

.detail .content .title {
    font-size  : 36px;
    color      : #e70012;
    font-weight: 600
}

@media only screen and (max-width:1440px) {
    .detail .content .title {
        font-size: 32px
    }
}

@media only screen and (max-width:1024px) {
    .detail .content .title {
        font-size: 26px
    }
}

@media only screen and (max-width:767px) {
    .detail .content .title {
        font-size: 24px
    }
}

.detail .content .explain {
    font-size : 24px;
    color     : #555555;
    margin-top: .1rem
}

@media only screen and (max-width:1440px) {
    .detail .content .explain {
        font-size: 20px
    }
}

@media only screen and (max-width:1200px) {
    .detail .content .explain {
        font-size: 18px
    }
}

@media only screen and (max-width:1024px) {
    .detail .content .explain {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .detail .content .explain {
        font-size: 16px
    }
}

.detail .content .text {
    color      : #333333;
    margin-top : .36rem;
    line-height: 2;
    font-size  : 17px
}
.detail .content .text.en {
    font-size  : 16px
}
@media only screen and (max-width:1366px) {
    .detail .content .text {
        font-size: 15px
    }
    .detail .content .text.en {
        font-size  : 14px
    }
}

@media only screen and (max-width:767px) {
    .detail .content .text {
        font-size: 15px
    }
    .detail .content .text.en {
        font-size  : 14px
    }
}

@media screen and (max-width:768px) {
    .detail .nav-box .basics-box {
        width: 100%
    }

    .detail .nav-box .basics-box .box {
        line-height: 36px;
        height     : auto
    }

    .detail .nav-box {
        top       : 1rem;
        height    : auto;
        min-height: auto
    }

    .detail .content .img-box {
        float       : none;
        margin-right: 0
    }

    .detail .content .img-box .img {
        width: 100%
    }
}

/*# sourceMappingURL=./makespeech.css.map */