@charset "UTF-8";

/* -------------------------------------
layout
------------------------------------- */
.event_wrap .bg_01 {
    padding: 40px 0 0;
    height: 636px;
    background-color: #F1F1F5;
}

.event_wrap .bg_rolling {
    position: relative;
    height: 24px;
    padding: 10px 0;
    background-color: #6462FF;
    z-index: 5;
}

.event_wrap .bg_02 {
    padding: 80px 0;
    background-color: #F1F1F5;
}

.event_wrap .bg_03 {
    padding: 80px 0;
    background-color: #6462FF;
}

.event_wrap .inner {
    width: 750px;
    height: 100%;
    overflow: visible; /* 최소 750px */
}

.event_wrap [class^="eImg"] {
    display: block;
    margin: 0 auto;
}

.event_wrap [class^="eImg"] img {
    width: 100%;
    height: 100%;
}

.event_wrap .eHideWrap {
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* -------------------------------------
images
------------------------------------- */
.event_wrap .eImgTitle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 486px;
    height: 240px;
    background-image: url('https://contents.kyobobook.co.kr/pmtn/2025/general/250411_app/bnM_title_ebg.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.event_wrap .eImgTitle img {
    width: 320px;
    height: 196px;
}

.event_wrap .eImgBenefit {
    width: 100%;
    height: 296px;
}

.event_wrap .eImgQr {
    width: 480px;
    height: 276px;
}


/* -------------------------------------
visual animation
------------------------------------- */
/* hand */
.event_wrap .eImgHand {
    position: absolute;
    left: 28px;
    bottom: -128px;
    width: 484px;
    height: 484px;
    overflow: hidden;
    z-index: 10;
    animation: handSlideUp 0.8s ease-in-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.event_wrap .eHandBg {
    position: relative;
    display: block;
    margin-top: 84px;
    width: 750px;
    height: 750px;
    background-color: #7FEF63;
    border-radius: 50%;
}

/* coupon */
.event_wrap [class^="eImgAni"] {
    position: absolute;
    animation-fill-mode: forwards;
    opacity: 0;
}

.event_wrap .eImgAni_01 {
    left: -13px;
    top: 262px;
    width: 277px;
    height: 309px;
    animation:
        fadeIn 1s ease forwards 0.6s,
        eFloatY 2.6s ease-in-out infinite 0.6s;
}

.event_wrap .eImgAni_02 {
    right: 17px;
    top: 239px;
    width: 277px;
    height: 248px;
    animation:
        fadeIn 1s ease forwards 0.9s,
        eFloatY 3.4s ease-in-out infinite 0.9s;
}

/* text rolling */
.event_wrap .eRolling {
    display: flex;
    width: 100%;
    background-color: #6462FF;
    font-family: 'Gmarket Sans';
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: #7FEF63;
    font-weight: 700;
    animation: eRolling 60s linear infinite;
}

.event_wrap .eRolling li {
    margin: 0 6px;
    white-space: nowrap;
}


/* -------------------------------------
text
------------------------------------- */
.event_wrap .eTitle {
    display: block;
    margin: 0 auto 40px;
    text-align: center;
    font-family: 'Pretendard';
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.8px;
}

.event_wrap .bg_02 .eTitle {
    color: #000;
}

.event_wrap .bg_03 .eTitle {
    color: #fff;
}

/* -------------------------------------
keyframes
------------------------------------- */
@keyframes eRolling {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes eFloatY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes handSlideUp {
    0% {
        transform: translate(50px, 80px) rotate(10deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    80% {
        transform: translate(-10px, -10px) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}