/* ============================================================
   Rolling Banner - eyesurfer.com 하단 플로팅 배너
   데스크톱/모바일 각각 별도 컨테이너
   Bootstrap visible-lg/visible-md, hidden-lg/hidden-md 로 전환
   ============================================================ */

/* --- 데스크톱 배너 (992px 이상) --- */
#rolling-banner-desktop {
  position: fixed;
  z-index: 999;
  bottom: 50px;
  right: 60px;
  width: 470px;
}

/* --- 모바일 배너 (992px 미만) --- */
#rolling-banner-mobile {
  position: fixed;
  z-index: 999;
  bottom: 20px;
  right: 20px;
  width: 250px;
}

/* --- 닫기 버튼 --- */
.rb-close-area {
  width: 100%;
  text-align: right;
  margin-bottom: 2px;
}

.rb-close-btn {
  display: inline-block;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  border: none;
  padding: 0;
  text-align: center;
  line-height: 32px;
  vertical-align: middle;
}

.rb-close-btn img,
.rb-close-btn svg {
  width: 11px;
  height: 11px;
  vertical-align: middle;
}

/* --- 배너 슬라이더 --- */
.rb-banner-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.rb-banner-slider {
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.rb-banner-slider.rb-animate {
  -webkit-transition: margin-left 0.5s ease;
  -moz-transition: margin-left 0.5s ease;
  -o-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease;
}

/* --- 배너 아이템 (컨테이너별 고정 너비) --- */
#rolling-banner-desktop .rb-banner-item {
  display: inline-block;
  vertical-align: top;
  width: 470px;
  font-size: 14px;
  white-space: normal;
}

#rolling-banner-mobile .rb-banner-item {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  font-size: 14px;
  white-space: normal;
}

.rb-banner-item a {
  display: block;
  text-decoration: none;
}

.rb-banner-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* --- 인디케이터 --- */
.rb-indicator-wrap {
  position: absolute;
  bottom: 24px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  text-align: center;
  z-index: 10;
  display: none;
}

.rb-indicator-wrap.rb-show {
  display: block;
}

.rb-indicator-dot {
  display: inline-block;
  width: 24px;
  height: 3px;
  border-radius: 99px;
  border: none;
  margin: 0 4px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0;
  vertical-align: middle;
}

.rb-indicator-dot.rb-active {
  background-color: #ffffff;
}