/* Section 01 */
.sec_01 .title{
  top: 5.3%; left: 9.3%; width: 82.5%; height: 24.5%;  
}

.sec_01 .ribbon{
  top: 30.4%; left: 20.1%; width: 59.8%; height: 45.8%;
}

.sec_01 .product{
  top: 43.9%; left: 5.8%; width: 89.3%; height: 39.2%; 
}

.sec_01 .event{
  top: 76.6%; left: 0.0%; width: 100.0%; height: 23.4%; 
}

.sec_01 .event-01{
  top: 83.4%; left: 7.4%; width: 11.7%; height: 13.7%;
}

.sec_01 .event-02{
  top: 83.7%; left: 32.1%; width: 11.8%; height: 13.4%;
}

.sec_01 .event-03{
  top: 84.6%; left: 54.3%; width: 16.0%; height: 12.6%;
}

.sec_01 .event-04{
  top: 84.6%; left: 81.8%; width: 9.8%; height: 12.6%; 
}

.sec_01 .title, .sec_01 .product{
  opacity : 0;
  transform : translateY(-100px);
  transition : all 0.5s ease-out;
}

.sec_01 .title.active, .sec_01 .product.active {
  opacity : 1;
  transform : translateY(0);
  transition : all 0.5s ease-out;
}


/* Section 02 */
.sec_02 .character{
  top: 39.3%; left: 74.3%; width: 10.6%; height: 13.2%;
  z-index : 2;
}

.sec_02 .tag{
  top: 49.2%; left: 70.0%; width: 19.2%; height: 18.5%;
}

/* Section 03 */
.sec_03 .open_tag{
  top: 18.2%; left: 78.4%; width: 19.2%; height: 10.6%; 
}

.sec_03 .first_tag{
  top: 28.5%; left: 78.7%; width: 19.2%; height: 10.6%;
}

/* Lucky Draw Swiper */
.sec_03 .lucky-stage__cards{
  position : absolute;
  top: 45.5%; left: 4.8%; width: 90.8%; height: 35.5%; 
}

.sec_03 .lucky-stage__cards .swiper-wrapper{
  height : 100%;
}

.sec_03 .drop-card-slide{
  height : 100%;
}

.sec_03 .drop-card{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(8px, 1.667vw, 20px);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(96, 39, 0, 0.06);
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}

.sec_03 .drop-card.is-drop-card-active{
  cursor : pointer;
  pointer-events : auto;
}

.sec_03 .drop-card__date{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16.82%;
  padding: 0 6px;
  font-family: "Pretendard Variable", Pretendard;
  font-size: clamp(13px, 3.56vw, 40px);
  font-weight: 700;
  line-height: 0.864;
  letter-spacing: -0.04em;
  text-align: center;
}

.sec_03 .drop-card--active .drop-card__date{
  background: #a4dfff;
  color : #0081e6
}

.sec_03 .drop-card--muted .drop-card__date{
  background: #8aa2af;
  color: #fff;
}

.sec_03 .drop-card__body{
  position : relative;
  height : calc(100% - 16.82%);
  padding : 0;
}

.sec_03 .drop-card__image{
  position : absolute;
  display : flex;
  align-items : center;
  justify-content : center;
  background : #fff;
}

/* 이미지 */
.sec_03 .walnut{
  top: 7.3%; left: 0.0%; width: 106.3%; height: 46.9%; 
}

.sec_03 .black_sesame_mini{
  top: 11.7%; left: 5.7%; width: 84.9%; height: 39.9%; 
}

.sec_03 .big_almond{
  top: 6.2%; left: 4.6%; width: 98.0%; height: 47.7%; 
}

.sec_03 .bar{
  top: 9.5%; left: 18.3%; width: 68.0%; height: 41.3%; 
}

.sec_03 .jelly{
  top: 14.5%; left: 18.3%; width: 73.1%; height: 39.6%; 
}

.sec_03 .no_spike{
  top: 8.9%; left: 18.3%; width: 64.0%; height: 43.5%;
}

.sec_03 .no_spike_walnut{
  top: 8.6%; left: 6.3%; width: 97.1%; height: 45.6%; 
}

.sec_03 .injeolmi{
  top: 6.9%; left: -4.3%; width: 109.7%; height: 47.0%;
}

.sec_03 .walnut_mini{
  top: 13.7%; left: 5.4%; width: 88.9%; height: 37.9%; 
}

.sec_03 .chip{
  top: 10.6%; left: 8.0%; width: 82.0%; height: 40.8%;
}

.sec_03 .no_spike_almond{
   top: 9.3%; left: 6.0%; width: 97.1%; height: 45.0%; 
}

.sec_03 .no_spike_shake{
  top: 12.9%; left: 9.1%; width: 78.0%; height: 38.6%; 
}

.sec_03 .tea{
  top: 7.5%; left: 20.3%; width: 72.9%; height: 44.9%
}

.sec_03 .kidney{
  top: 15.4%; left: 6.3%; width: 83.1%; height: 36.8%; 
}

.sec_03 .walnut_pro{
   top: 9.2%; left: -3.4%; width: 106.0%; height: 45.3%;
}

.sec_03 .black_sesame{
  top: 7.3%; left: -4.0%; width: 110.0%; height: 47.0%; 
}


.sec_03 .drop-card__image img{
  display : block;
  width : auto;
  max-width : 100%;
  height: 100%;
  max-height: 100%;
  object-fit : contain;
}

.sec_03 .drop-card__image img[src*="no-image"]{
  width : 76%;
  height : auto;
  max-height : 76%;
}

.sec_03 .drop-card__copy{
  position: absolute;
  top: 53.95%;
  left: 11.1%;
  right: 8.7%;
  bottom: 18.3%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(3px, 0.5vw, 7px);
}

.sec_03 .drop-card__name{
  display: -webkit-box;
  font-family: "Pretendard Variable", Pretendard;
  font-size: clamp(12px, 3.36vw, 38px);
  font-weight: 800;
  line-height: 1.263;
  letter-spacing: -0.04em;
  color: #111111;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(1.263em * 2);
  word-break: keep-all;
}

.sec_03 .drop-card__spec{
  display: block;
  font-family: "Pretendard Variable", Pretendard;
  font-size: clamp(10px, 1.667vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0em;
  color: #111111;
}

@media (min-width: 576px) and (max-width: 1200px) {
  .sec_03 .drop-card__copy {
    bottom: 19.3%;
    gap: clamp(4px, 0.55vw, 8px);
  }

  .sec_03 .drop-card__name {
    font-size: clamp(16px, 2.1vw, 28px);
  }

  .sec_03 .drop-card__spec {
    font-size: clamp(12px, 1.15vw, 16px);
    line-height: 1.25;
  }
}

.sec_03 .drop-card__price{
  position: absolute;
  right: 9.8%;
  bottom: 7.1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sec_03 .drop-card__original{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  column-gap: 0.16em;
  font-family: "Pretendard Variable", Pretendard;
  font-weight: 700;
  color: #8d8d8d;
  letter-spacing: -0.03em;
}

.sec_03 .drop-card__original-label,
.sec_03 .drop-card__original-value{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(154, 154, 154, 0.88);
  font-size : clamp(9px, 1.833vw, 22px);
  line-height : 0.95;
}

.sec_03 .drop-card__sale{
  display: block;
  margin-top: 6.2%;
  font-family: "Pretendard Variable", Pretendard;
  font-size: clamp(16px, 4.18vw, 47px);
  font-weight: 700;
  line-height: 0.82;
  color: #fe0201;
  letter-spacing: -0.04em;
}

.sec_03 .buy{
  top: 83.1%; left: 4.5%; width: 90.7%; height: 6.9%; 
}

/* Section 04 */
.sec_04 .limit_tag{
  top: 35.1%; left: 72.5%; width: 19.2%; height: 11.9%;
  z-index : 2;
}

.sec_04 .coupon_tag{
  top: 42.3%; left: 72.5%; width: 19.2%; height: 11.9%;
}

.sec_04 .buy{
  top: 79.1%; left: 5.8%; width: 90.7%; height: 7.7%; 
}

/* Section 05 */
.sec_05 .link-item{
  width: 35.3%; height: 4.3%; 
}

.sec_05 .link-item-01{
  top: 47.2%; left: 9.6%;
}

.sec_05 .link-item-02{
  top: 47.2%; left: 55.6%; 
}

.sec_05 .link-item-03{
  top: 83.1%; left: 9.6%; 
}

.sec_05 .link-item-04{
  top: 83.1%; left: 55.7%;
}

.sec_05 .link-item-05{
  top: 87.7%; left: 55.7%; 
}

/* Animation */
.sec_03 .first_tag, .sec_04 .coupon_tag{
  animation-delay : 0.3s;
}