.quick-menu-notice {
  display: grid; grid-template-columns: repeat(5,100px) 430px; justify-content: space-between; align-items: start; gap: 12px;
}



.quick-menu-notice .quick-menu {
  text-align: center;
}

.quick-menu-notice .quick-menu .icon {
   margin:0 auto; background-color: #f1f1f1; border-radius: 10px; width:85px; height:85px; margin-bottom: 4px;
}

@media (max-width: 576px){
  .quick-menu-notice {
    /* 1줄 3칸 그리드, 최소 100px은 보장하면서 남으면 나눠가짐 */
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
  .quick-menu-notice > .notice {
    grid-column: 1 / -1;   /* 3번째 줄에서 전체 너비(100%) 차지 */
  }
  /* 만약 notice가 DOM에서 중간에 있어도 마지막 줄로 보내고 싶다면: */
  /* .quick-menu-notice > .notice { order: 99; }  ← 옵션 */
}


.quick-menu-notice .quick-menu .txt {
   font-size:17px; margin-top:16px;
}

.quick-menu-notice .notice .notice-head {
  display: flex; justify-content: space-between; margin-bottom:10px;
}

.quick-menu-notice .notice .notice-head .title {
  font-size:17px;
}

.quick-menu-notice .notice .notice-body {
  border: 1px solid #dfdfdf; padding:10px;
  display:grid; grid-template-columns: 1fr 5fr 2fr; column-gap:5px; border-radius: 4px; row-gap: 4px;
}

.quick-menu-notice .notice .notice-body .red-badge {
   padding:2px 4px; background-color:#f24755; border-radius:6px; color:#fff; font-size:0.8em; text-align:center;
}

.quick-menu-notice .notice .notice-body .blue-badge {
   padding:2px 4px; background-color:#4584ee; border-radius:6px; color:#fff; font-size:0.8em; text-align:center;
}


.weekly-best {

}

.weekly-best .title {
  font-size: 36px; font-weight: 500; margin-bottom: 16px;
}

.weekly-best .grid-rect {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px;
}


@media (max-width: 576px) {
  .weekly-best .grid-rect {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .weekly-best .grid-rect .wb-img-box img {
    width: 100%;
  }
}


.weekly-best .grid-rect .title {
  margin: 16px 0; font-size:19px; font-weight:600;
}

.weekly-best .grid-rect strike {
  font-size: 17px; opacity: 0.5;
}

.weekly-best .grid-rect .price {
  font-size: 17px;
}

.weekly-best .grid-rect .price .dc {
  color: #1a66ea;
}


.bullet-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  gap: 10px;
}

.bullet {
  width:45px;
  height:4px;
  background-color:#333;
  opacity:0.5;
  cursor:pointer;
}

.bullet.active {
  opacity:1;
}

.wb-img-box {
  position:relative;
  background-color:#f7f7f7;
  /*
  width:298px;
  height:285px;

   */
  cursor:pointer;
}

.wb-img-box img {
  width: 280px;
}

.black {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  z-index:2;
  transition: all 1s;
}

.order-btn {
  position:absolute;
  left:50%;
  top:50%;
  width:140px;
  transform: translate(-50%, -50%);
  z-index:2;
  color:#fff;
  font-size:1.2rem;
  border:1px solid #fff;
  padding: 12px 0;
  text-align:center;
}

.wb-img-box:hover > .black {
  opacity: 1;
}


.wb-img-box img {
  transition: transform .3s ease-in-out;
}
.wb-img-box:hover > img {
  /*transform: rotate(-20deg);*/
}

button.bb-button {
  width:196px; background-color:#fff; border:1px solid #1a66ea; color:#1a66ea; padding:20px 0; margin:50px auto; text-align:center; font-size:18px;
}

button.bb-button:hover {
  background-color: #0d6efd !important;
  color:#fff !important;
}

.the-more-title {
  font-size: 36px; font-weight: 500;
}

.the-more-category {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 20px;
}

@media (max-width: 576px) {
  .the-more-category {
    grid-template-columns: repeat(3,1fr);
  }
}

.the-more-category button {
  border:none; padding:10px 0; background-color: #f1f1f1; border-radius: 20px; text-align: center; font-size:18px;
}

.the-more-category button.active {
  background-color: #1a66ea; color: #fff;
}

.more-grid-rect {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px;
}


.more-grid-rect .rect {
}

.more-grid-rect .rect .img img {
  width: 280px;
}


@media (max-width: 576px) {
  .more-grid-rect {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .more-grid-rect .rect .img img {
    width: 100%;
  }
}

.more-grid-rect .rect .title {
  margin: 16px 0; font-size: 19px; font-weight: 500;
}

.more-grid-rect .rect strike {
  font-size: 17px; opacity: 0.5;
}

.more-grid-rect .rect .price {
  font-size: 19px;
}

.more-grid-rect .rect .dc {
  color: #1a66ea;
}

.weekly-event-title {
  font-size: 36px; font-weight: 500;
}

.weekly-event-banner {
  display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; align-items: center; gap: 20px;
  /*display: flex; justify-content: space-between; align-items: center;*/
}

.weekly-event-banner img {
  width: 580px;
}

.long-bar img {
  width: 1200px;
}

@media (max-width: 576px) {
  .weekly-event-banner {
    grid-template-columns: 1fr;
  }

  .weekly-event-banner img {
    width: 100%;
  }

  .long-bar img {
    width: 100%;
  }
}


.customer-support-rect {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px;
}

.customer-support-rect .desc {
  background-color: #fff; width:298px; height:285px; text-align: left;
}

.customer-support-rect .img img {
  width: 280px;
}


@media (max-width: 576px) {
  .customer-support-rect {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .customer-support-rect .desc {
    width: 100%; height: 100%; font-size: 0.8em;
  }

  .customer-support-rect .img img {
    width: 100%;
  }
}