.csr-box { padding:40px 0px 50px 0px; }
.csr-box:nth-child(even) { background-color:#eef4f8 }
.csr-box > .wrapper { max-width:1300px;margin:0px auto; }
.csr-box .thumbnail-area { display:flex;flex-flow:row wrap;  }
.csr-box .thumbnail-area .img { width:20%;box-sizing:border-box;padding:10px;margin-bottom:10px;overflow:hidden;transition:all .2s }
.csr-box .thumbnail-area .img a { display:block;position: relative; padding-top:55%; }
.csr-box .thumbnail-area .img img { width:100%;position: absolute;bottom:0px;left:0px; }
.csr-box .thumbnail-area .img:hover { transform:scale(1.05); }

.csr-box h1 { color:#044da1;font-size:16pt;margin:10px;margin-top:10px;padding:0px }
.csr-box p { color:#333; font-size:10pt; margin:0px 10px;padding:0px; }


@media screen and (max-width:1200px) {
    .csr-box > .wrapper { margin:0px 40px; }
}

@media screen and (max-width:800px) {
    .csr-box > .wrapper { margin:0px 30px; }
    .csr-box .thumbnail-area .img  { padding:5px;margin-bottom:5px;  }
}

@media screen and (max-width:600px) {
    .csr-box > .wrapper { margin:0px 20px; }
    .csr-box .thumbnail-area .img { width:50%; }
    .csr-box .thumbnail-area .img:nth-child(n+5) { display:none; }

    .csr-box h1 { font-size:13pt; }

    
}

@media screen and (max-width:400px) {
    .web-banner .title h1 { font-size:11pt;padding-bottom:5px; }
}

@media screen and (max-width:350px) {
    .csr-box { padding:30px 0px; }
    .csr-box > .wrapper { margin:0px 15px; }

    .web-banner .title h1 { font-size:9pt; }
}