.slide {
    /* layout */
    display: flex;
    flex-wrap: nowrap;
    /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */
    overflow: hidden;

    /* position */
    /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offset을 적용시키기 때문) */
    position: relative;

    /* size */
    width: 100%;
}
.slide_item {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* position - 버튼 클릭시 left offset값을 적용시키기 위해 */
    position: relative;
    left: 0px;

    /* size */
    width: 100%;
    height: 550px;
    /* flex item의 flex-shrink는 기본값이 1이므로 컨테이너 크기에 맞게 줄어드는데, 슬라이드를 구현할 것이므로 줄어들지 않도록 0을 준다. */
    flex-shrink: 0;

    /* transition */
    transition: left 0.15s;
}
.slide_button {
    /* layout */
    display: flex;
    justify-content: center;
    align-items: center;

    /* position */
    position: absolute;
    /* 버튼이 중앙에 위치하게 하기위해 계산 */
    top: calc(50% - 16px);

    /* size */
    width: 32px;
    height: 32px;

    /* style */
    border-radius: 100%;
    background-color: #cccc;
    cursor: pointer;
}

.slide_prev_button {
    left: 50px;
}
.slide_next_button {
    right: 50px;
}

/* 각 슬라이드가 변경되는 것을 시각적으로 확인하기 쉽도록 각 슬라이드별 색상 적용 */
.slide_item:nth-child(1) {
    background-color: white;
}
.slide_item:nth-child(2) {
    background-color: white;
}
.slide_item:nth-child(3) {
    background-color: white;
}
.slide_item:nth-child(4) {
    background-color: white;
}
.slide_item:nth-child(5) {
    background-color: white;
}

/* 페이지네이션 스타일 */
ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.slide_pagination {
    /* layout */
    display: flex;
    gap: 5px;

    /* position */
    position: absolute;
    bottom: 0;
    /* left:50%, translateX(-50%)를 하면 가로 가운데로 위치시킬 수 있다. */
    left: 50%;
    transform: translateX(-50%);
}
.slide_pagination > li {
    /* 현재 슬라이드가 아닌 것은 투명도 부여 */
    color: rgba(250, 228, 214, 0.53);
    cursor: pointer;
    font-size: 50px;
}
.slide_pagination > li.active {
    /* 현재 슬라이드 색상은 투명도 없이 */
    color: #5f0000;
}