@keyframes showEventAni01{
    0% {
        transform: scale(0.8);
    }
    80% {
        /*210120*/transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes showEventAni02{
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* showEvent */
.showEventCon .showEvent01{opacity: 0; transform-origin: 0 0;}
.eventActive .showEvent01{animation:showEventAni01 ease-in-out .5s forwards;}

.showEventCon .showEvent02{opacity: 0; transform-origin: 100% 0;}
.eventActive .showEvent02{animation:showEventAni01 ease-in-out .5s forwards;}

/*210120*/.showEventCon .showEvent03{opacity: 0; transform:translateY(30px);}
/*210120*/.eventActive .showEvent03{animation:showEventAni02 ease-in-out .4s forwards;}

/*210120*/.showEventCon .showEvent04{opacity: 0.5; transform:translateY(-50px);}
.eventActive .showEvent04{animation:showEventAni02 ease-in-out .8s forwards;}

/*210120*/.showEventCon .showEvent05{opacity: 0; transform: scale(0.8); transform-origin: center center; transition: all ease-out .3s;}
/*210120*/.eventActive .showEvent05{animation:showEventAni01 ease-in-out .4s forwards;}

/*210120*/.cardHoverCon{transition: all ease-out .3s;}
.cardHoverCon.active{transform: scale(1.05);}

/* delay */
.delay1-1{animation-delay: 0s !important;}
.delay1-2{animation-delay: .15s !important;}
.delay1-3{animation-delay: .3s !important;}
.delay1-4{animation-delay: .45s !important;}
.delay1-5{animation-delay: .6s !important;}
.delay1-6{animation-delay: .75s !important;}
.delay1-7{animation-delay: .9s !important;}
.delay1-8{animation-delay: 1.05s !important;}
.delay1-9{animation-delay: 1.2s !important;}

.delay2-1{animation-delay: 0s !important;}
.delay2-2{animation-delay: .2s !important;}
.delay2-3{animation-delay: .4s !important;}
.delay2-4{animation-delay: .6s !important;}
.delay2-5{animation-delay: .8s !important;}
.delay2-6{animation-delay: 1s !important;}
.delay2-7{animation-delay: 1.2s !important;}
.delay2-8{animation-delay: 1.4s !important;}
.delay2-9{animation-delay: 1.6s !important;}

.delay3-1{animation-delay: 0s !important;}
.delay3-2{animation-delay: .3s !important;}
.delay3-3{animation-delay: .6s !important;}
.delay3-4{animation-delay: .9s !important;}
.delay3-5{animation-delay: 1.2s !important;}
.delay3-6{animation-delay: 1.5s !important;}
.delay3-7{animation-delay: 1.8s !important;}
.delay3-8{animation-delay: 2.1s !important;}
.delay3-9{animation-delay: 2.4s !important;}

/* btnEvent */
.hoverEvent{transition: all ease-out .3s;}
.hoverEvent:hover{transform: scale(1.05);}

.hoverEvent2{transition: all ease-out .3s;}
.hoverEvent2:hover{background-color: #D83143 !important; transform:scale(1.05);}

/* heart event */
.bg_heart {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
 }

.heart {
    z-index: -1;
    position: absolute;
    top: -50%;
 }

.heart:before {
    position: absolute;
    top: -50%;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

.heart:after {
    position: absolute;
    top: 0;
    right: -50%;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}


.passEventList li.event-closed {
    position: relative;
}

/* 오버레이 */
.passEventList li.event-closed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(24, 32, 58, 0.93);
    border-radius: 20px; 
    z-index: 2;
}

/* 종료 문구 센터*/
/*.passEventList li.event-closed::after {
    content: "이벤트가 종료되었습니다.";
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    border-radius: 20px; 
}*/

/* 종료 텍스트 */
.passEventList li.event-closed {
    opacity: 1 !important;
    transform: none !important;
}
.passEventList li.event-closed .eventClosedText {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-left: 45px;   
    padding-right: 24px;

    color: #fff;
    text-align: left;
}

.passEventList li.event-closed .eventClosedText strong {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}

.passEventList li.event-closed .eventClosedText span {
    font-size: 12px;
    opacity: 0.85;
    letter-spacing: -0.01em;
}


/* 이미지 흐림 */
/*.passEventList li.event-closed img {
    filter: grayscale(60%) blur(0.6px);
}*/

/* 클릭 방지 */
.passEventList li.event-closed {
    pointer-events: none;
}

@-webkit-keyframes love {
  0%{top:110%}
  20%{opacity: 1;}
  45%{opacity: 0;}
}
@-moz-keyframes love {
  0%{top:110%}
  20%{opacity: 1;}
  45%{opacity: 0;}
}
@-ms-keyframes love {
  0%{top:110%}
  20%{opacity: 1;}
  45%{opacity: 0;}
}
@keyframes love {
  0%{top:110%}
  20%{opacity: 1;}
  45%{opacity: 0;}
}
