@charset "UTF-8";
/* 기획전 상세 페이지 스타일 파일입니다. */
.event-list__content-box {
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 80px 20px;
cursor: pointer;
}
.event-list__item {
flex: 0 0 calc(33% - 8px);
}
.product-list-items {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.product-list-items > * {
flex: 0 0 48%;
}
.event-list__img {
position: relative;
}
.event-list__badge {
width: 70px;
height: 32px;
text-align: center;
font-size: 12px;
line-height: 29px;
font-weight: inherit;
background-color: var(--color-point);
color: var(--color-base-white);
}
.event-list__badge--ing,
.event-list__badge--end,
.event-list__badge--ready {
position: absolute;
top: 0px;
left: 0px;
}
.event-list__badge--ing {
background-color: var(--color-point);
}
.event-list__badge--end {
background-color: var(--color-secondary);
}
.event-list__badge--ready {
background-color: var(--color-base-white);
border: 1px solid var(--color-base-black);
color: var(--color-base-black);
}
.event-list__badge--d-day {
width: 52px;
height: 26px;
display: inline-block;
background-color: transparent;
border: 1px solid var(--color-point);
color: var(--color-point);
font-weight: 500;
line-height: 24px;
}
.event-list__main-img {
display: block;
width: 100%;
height: 210px;
background:
center/contain no-repeat url('/assets/images/bg/no-img-round.png'),
var(--gray100);
background-size: 64px;
}
.event-list__main-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-list__info {
padding: 20px;
text-align: center;
}
.event-list__title {
font-size: 18px;
font-weight: 400;
}
.event-list__date {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
color: #7a7a7a;
}
.event-list__period {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 15px;
}
.event-list .pagination {
margin-top: 40px;
}
.event-list .skeleton-grid {
margin-block-start: 20px;
}
.event-list .skeleton-grid .skeleton__media {
aspect-ratio: 2/1;
}
.thumb-item__media {
border: 0;
width: auto;
height: auto;
}
.sort-list__wrap {
margin-top: 0;
}
.product-thumb-title,
.product-thumb-price--origin,
.product-thumb-price {
font-size: 15px;
}