body {
    background-color: #fff;
}

.header .navbar {
    background-color: #fff;
}

.about-container {
    clear: both;

    width: 100%;
    margin: 0;
    padding: 0;
}

.about-container-banner {
    display: block;

    height: auto;
    margin-top: 8.4rem;
}

.about-container-body-breadcrumb {
    margin: 3rem 0;
}

.breadcrumb {
    padding-left: 0;

    background-color: transparent;
}

.breadcrumb li a {
    color: #fff;
}

.breadcrumb>li+li:before {
    padding: 0 5px;

    content: '>\00a0';
    ;

    color: #fff;
}

.about-container .about-container-body {
    width: 100%;
    margin: 0 auto;
}



.about-container .about-container-body .about-container-body-introduce {
    height: auto;
    display: block;
    padding: 0 2%;
}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .about-container .about-container-body .about-container-body-introduce {
        width: 92%;
        height: auto;
        padding: 0 4%;
        margin: 2rem auto;
        display: block;
    }

    .about-container-body-introduce .about-container-body-introduce-left {
        float: left;
        width: 35%;
        padding-right: 5%;
        margin: 0;

    }

    .about-container .about-container-body .about-container-body-introduce-right {
        float: left;

        width: 60%;
        margin: 0;
        padding: 4rem 2rem 4rem 4rem;
    }
}

@media (min-width: 1200px) {

    .about-container .about-container-body .about-container-body-introduce {
        width: 80%;
        height: auto;
        
        margin: 4rem auto;
        display: block;
    }

    .about-container-body-introduce .about-container-body-introduce-left {
        float: left;
        width: 45%;
        margin: 0;

    }

    .about-container .about-container-body .about-container-body-introduce-right {
        float: left;

        width: 55%;
        margin: 0;
        padding: 4rem 2rem 4rem 4rem;
    }
}

.about-container-body-introduce .about-container-body-introduce-left {
    float: left;
    margin: 0;

}

.about-container-body-introduce .about-container-body-introduce-left h2 {
    padding-left: 2rem;
    border-left: 3px solid red;
}

.about-container .about-container-body .about-container-body-introduce-right {
    float: left;

    margin: 0;
}

.about-container .about-container-body .about-container-body-introduce-left p {
    font-size: 1.8rem;
    line-height: 3rem;
    color: #3c3c3c;
}

.thumbnail-container {
    display: flex;

    margin-top: 1rem;
}

.thumbnail-img {
    display: inline-flex;

    width: 30%;
}

.preview-img,
.thumbnail-img {
    cursor: pointer;
}

.thumbnail-img.middle {
    margin: 0 5%;
}

.about-container-body-context {
    display: block;
    clear: both;


}

.about-container .about-container-body-context img {
    width: 100%;
}

.about-container-body-introduce-right ul li {
    color: #fff;
}