/* 첫 화면 맨 위의 넓은 배너.

   높이를 정해 둔다. 백오피스에 들어오는 그림의 크기가 제각각이라,
   정해 두지 않으면 그림 하나가 바뀔 때마다 아래 EVENT CORNER 가
   위아래로 움직인다.

   250px 로 시작한다. 바꾸고 싶으면 이 숫자 하나만 고치면 된다. */

.topwide-wrap {
    margin: 20px auto 0;
    line-height: 0;          /* 그림 아래 생기는 빈 줄을 없앤다 */
}

.topwide-wrap .topwide-img {
    display: block;
    width: 100%;
    height: 250px;

    /* 그림이 칸보다 크면 잘라서 채운다. 늘려서 일그러뜨리지 않는다 -
       배너에는 대개 글자가 들어 있어서, 늘어나면 바로 티가 난다. */
    object-fit: cover;
    object-position: center;
}

/* 좁은 화면에서는 250px 이 너무 높다. 폭이 줄면 높이도 줄인다. */
@media (max-width: 768px) {
    .topwide-wrap .topwide-img {
        height: 120px;
    }
}