/* sub_visual */
.sub_visual{
  padding: 170px 0;
  background-position: center center;
  background-size: cover;
  position: relative;
}
.sub_visual .sub-vi-img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
}
.sub_visual .sub-vi-img.v1{
  background-image: url(/shop/asset/img/sub/visual/sub_visual01.png);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub_visual .main-tit-box {
  position: relative;
  text-align: center;
  z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    animation-name: fadeIn;
    animation-duration: .7s;        /* 애니메이션 지속 시간 (예: 1.5초) */
    animation-timing-function: ease-out; /* 애니메이션 속도 곡선 (천천히 시작) */
    animation-delay: 0.5s;           /* 페이지 로드 후 0.5초 지연 후 시작 */
    animation-fill-mode: forwards;   /* 애니메이션 종료 후 마지막 상태(opacity: 1) 유지 */
}

@media all and (max-widtH:1440px){
}

@media all and (max-width:1024px){
  .sub_visual{
    padding: 100px 0;
  }
}

@media all and (max-width: 1400px) {
}

@media all and (max-width: 1000px) {
}


/* 기획전 */
.event-bbs-list ul{
  display: flex;
  flex-wrap: wrap;
  gap: 40px 28px;
}
.event-bbs-list ul li{
  width: calc(33.333% - 18.666px);
}
.event-bbs-list .img-box{
  aspect-ratio: 1/0.67;
  border-radius: 20px;
  overflow: hidden;
}
.event-bbs-list .img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media all and (max-width: 768px) {
  .event-bbs-list ul li{
    width: calc(50% - 14px);
  }
}

@media all and (max-width: 576px) {
  .event-bbs-list ul{
    gap: 20px;
  }
  .event-bbs-list ul li{
    width: calc(50% - 10px);
  }
}
/* 옵션 그룹 감싸는 박스 */
.pro-select {
  position: relative;
  margin-top: 25px; /* 타이틀이 올라갈 공간 확보 */
}

/* 셀렉트 박스 타이틀 (옵션 그룹명) */
.pro-select .fs-14.fw-600 {
  position: absolute;
  top: -12px;      /* 테두리 선 위로 올림 */
  left: 12px;      /* 왼쪽 여백 */
  background: #fff; /* 배경을 흰색으로 해서 테두리 선을 가림 */
  padding: 0 5px;  /* 글자 양옆 여백 */
  font-size: 13px; /* 살짝 작게 조절 (선택사항) */
  z-index: 10;     /* 선보다 위로 오게 설정 */
  color: #333;
}

/* 셀렉트 박스 본체 */
.prod-option-selector {
  width: 100%;
  height: 50px;    /* 높이 명시 */
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: transparent;
  font-size: 15px;
  appearance: none; /* 브라우저 기본 화살표 숨김(선택사항) */
  -webkit-appearance: none;
}

/* 선택된 상품 리스트 상단 여백 확보 */
#selected-items-container {
  margin-top: 30px;
}