#section04 {
    height: 890px;
    background-color: #fff;
    padding-top: 84px;
}

#section04 .title p.pre-title {
    width: 600px;
}

#section04 .title h4 {
    font-size: 40px;
    width: 600px;
    margin-bottom: 55px;
}

#section04 .title p.pre-title::after {
    left: 403px;
}

#section04 p.s4p-des {
    font-size: 18px;
    font-weight: 500;
    color: #707070;
    text-align: center;
    line-height: 36px;
    margin-bottom: 25px;
}

#section04 .title h4 br{
    display: none;
}

@media (max-width: 1902.98px) { 
    
}

/* large desktops more than 1200px*/
@media (max-width: 1399.98px) {   
}

/* desktop more than 992px */
@media (max-width: 1199.98px) { 
}

/* tablets more than 768px */
@media (max-width: 991.98px) {  
}

/* landscape phones more than 576px */
@media (max-width: 767.98px) {    
    #section04 .title h4{
        width: calc(100vw - 50px);
        font-size: 34px;
    }

    #section04 .title p.pre-title{
        width: calc(100vw - 50px);
    }

    #section04{
        padding-top: 15px;
        width: calc(100vw - 20px);
    }

    #section04 p.s4p-des{
        width: calc(100vw - 35px);
        margin: 0 auto 25px 15px;
    }

    #section04 .title h4 br{
        display: none;
    }

    #section04 p.s4p-des br{
        display: block;
    }
}

/* portrait phones less than 576px */
@media (max-width: 575.98px) {    
    #section04 .title p.pre-title::after{
        content: none;
    }

    #section04 .title p.pre-title{
        font-size: 16px;
    }

    #section04 .title h4{
        font-size: 32px;
        margin-bottom: 30px;
    }

    #section04 .title h4 br{
        display: block;
    }

    #section04 p.s4p-des{
        font-size: 16px;
        text-align: left;
    }

    #section04 p.s4p-des br{
        display: none;
    }

    #section04 p.s4p-des br.br-end-line{
        display: block;
    }
}