@charset "utf-8"; .museum-banner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; } .museum-banner li { width: calc((100% / 2) - 10px); margin-bottom: 10px; } .museum-banner li:nth-child(2n+1) { margin-right: 10px; } .museum-banner li img { display: block; width: 100%; height: auto; } .museum-banner li:hover img { opacity: 0.6; transition-duration: 0.1s; } @media screen and (max-width: 639px) { .museum-banner li { width: 100%; margin-bottom: 5px; } .museum-banner li:nth-child(2n+1) { margin-right: 0px; } } @media screen and (max-width: 639px) { .museum-news-banner.small .img { -webkit-justify-content: left; justify-content: left; } .museum-news-banner.small .img .block { width: calc(30px + ((100% - 110px) / 12 * 8)); } }