#banner { height: 25vw; background: url(../img/research/banner.jpg) center/cover; }

.article { padding: 90px 0 90px; }
    .article > .c { display: flex; align-items: flex-start; width: 1180px; margin: 0 auto; font-size: 20px; max-width: 90%; }
        .article > .c > .img-w { margin-right: 85px; border-radius: 500px; overflow: hidden; flex: none; }
            .article > .c > .img-w > img { display: block; }
        .article > .c > .t > h3 { font-size: 22px; margin: 0; }
        .article > .c > .t > ul { margin: 0 0 20px; }
        .article > .c > .t > ol { padding-left: 20px; margin-top: 60px; width: 80%; }
    .article.reverse > .c > .img-w { order: 2; margin: 0 0 0 85px; }

.article.blue { background: #4FAFDA; }
    .article.blue > .c > .t > p { color: white; }

.article > .c > .t > h2 { font-size: 36px; }
.article > .c > .t > h3 { color: #F05125; margin: 60px 0 0; text-transform: uppercase; }
    .article > .c > .t > h3 + p { margin-top: 0; }

@media(max-width:1249px) {
    .article { padding-bottom: 90px; }
        .article > .c { width: 630px; font-size: 15px; }
            .article > .c > .img-w { margin-right: 30px; }
                .article > .c > .img-w > img { width: 180px; }
        .article.reverse > .c > .img-w { margin-left: 30px; }
    .article > .c > .t > h2 { font-size: 26px; }
    .article > .c > .t > h3 { font-size: 20px; margin-top: 40px; }
}

@media(max-width:767px) {
    #banner {height: 50vw; }
    .article { padding: 60px 25px; }
        .article > .c { display: block; width: auto; }
            .article > .c > .img-w { margin: 0 auto 40px; width: 200px; }
                .article > .c > .img-w > img { width: 200px; }
        .article.reverse > .c > .img-w { margin: 0 auto 40px; }
    .article > .c > .t > h2 { text-align: center; font-size: 22px; }
    .article > .c > .t > h3 { font-size: 18px; }
}