.banner-container {
    position: relative;
    margin-bottom: 25px;
    text-align: center;
}
.banner-wrapper {
    display: inline-block;
}
.banner-img {
    max-width: 100%;
    height: auto;
    display: block;
}
.banner-dots {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 12px; /* 점들 사이의 간격 */
}
/* 기본 점 모양 */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #aaaaaa;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
/* 마우스 오버되거나 활성화된 점 모양 */
.dot.active, .dot:hover {
    background-color: #777777;
}

.side-banner-container {
    position: relative;
    margin-bottom: 25px;
    text-align: center;
}
.side-banner-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 좌우측 배너 전용 점(Dot) 스타일 */
.side-banner-dots {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.side-dot {
    display: inline-block ;
    width: 8px ;        /* 메인 배너보다 살짝 작게 설정(취향껏 조절 가능) */
    height: 8px ;
    background-color: #aaaaaa ;
    border-radius: 50% ;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 마우스 오버 및 활성화 스타일 */
.side-dot.active, .side-dot:hover {
    background-color: #777777 ;
}


/* 보드 배너 레이아웃 */
.board-banner-container {
    position: relative;
    margin-bottom: 25px;
    text-align: center;
}
.board-banner-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 보드 배너 전용 점(Dot) 스타일 */
.board-banner-dots {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.board-dot {
    display: inline-block ;
    width: 8px ;        /* 메인 배너보다 살짝 작게 설정(취향껏 조절 가능) */
    height: 8px ;
    background-color: #aaaaaa ;
    border-radius: 50% ;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 마우스 오버 및 활성화 스타일 */
.board-dot.active, .board-dot:hover {
    background-color: #777777 ;
}