@charset "utf-8";
/* animation */
@keyframes bounce-effect {
    0% { transform: translate(0,-5px); }
    100% { transform: translate(0,5px); }
}
@keyframes boom {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/** 랜덤쿠폰팩 **/
.event_random { text-align: center; }
.random_box { margin-bottom: 48px; }
.random_box .tooltip { position: relative; display: inline-block; font-size: var(--font-small); font-weight: 700; line-height: 20px; padding: 8px 20px; background: #F3EDFF; border-radius: 20px; margin-top: 40px; animation: bounce-effect infinite 0.7s alternate-reverse; }
.random_box .tooltip::before { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 15px; height: 10px; border: 15px solid transparent; border-bottom: 10px solid #F3EDFF; box-sizing: border-box; content: ''; display: block; }
.random_box .tooltip b { color: var(--color-main); }
.coupon_box { position: relative; width: 100%; height: 184px; z-index: 5; }
.coupon_box::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../image/event/img_random_box.webp) no-repeat center center; background-size: 220px; content: ''; display: block; z-index: -1; }
.coupon_box .coupon { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 256px; height: 142px; padding: 42px 24px 16px 34px; background: url(../../image/event/img_random_coupon.webp) no-repeat center center; background-size: contain; }
.coupon_box .coupon p { font-size: 28px; font-weight: 700; color: var(--color-white); line-height: 28px; font-family: 'Gmarket Sans';}
.coupon_box .coupon p em { display: block; font-size: 20px; }
.coupon_box .obj_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.8); width: 276px; height: 176px; display: block; background: url(../../image/event/img_random_obj.webp) no-repeat center center; background-size: contain; z-index: 5; }
.text_box { margin-bottom: 56px; }
.text_box dt { font-size: 32px; font-weight: 700; color: var(--color-main); line-height: 40px; }
.text_box dt::before { width: 43px; height: 27px; background: url(../../image/event/icon_coupon.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -1px; margin-right: 8px; }
.text_box dd { font-size: 20px; font-weight: 500; line-height: 28px; margin-top: 4px; }

/* effect - before */
.coupon_box .coupon, .text_box, .btn_box_wrap { opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out; }
/* effect - after */
.coupon_box.on .coupon, .text_box.on, .btn_box_wrap.on { opacity: 1; }
.coupon_box.on .obj_box { animation: boom 0.5s 1 ease-in-out forwards; }
.coupon_box.on::before { opacity: 0; }