@charset "UTF-8";
@import url('./event_common.css');
@import url('./event_footer.css');
body { }

/* common */
img { vertical-align:top;}
.btn_group { z-index:10; position:absolute; left:50%; transform:translateX(-50%); width:95%; text-align:center; }
.btn_group .btn + .btn { margin-top:1.5%; }
.btn { z-index:10; position:relative; display:inline-block; }
    .cursor span { animation:moveCursor 2s infinite; }
    @keyframes moveCursor {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        30%, 70% {
            transform: translate(-10px, -10px) scale(1);
        }
        50% {
            transform: translate(-10px, -10px) scale(0.8);
        }
    }
    .cursor span { position:absolute; right:5%; bottom:-17%; max-width:68px; width:6vw; animation:moveCursor 2s infinite;}

.logo_group { z-index:15; position:absolute; display:flex; align-items:center; justify-content:space-between; padding:0 1vw; width:100%; top:40px; left:50%; max-width:1280px; text-align:right !important; transform:translate(-50%); }
.logo_group div { display:flex; align-items:center; gap:24px; }
.logo_group div img { display:inline-block; vertical-align:middle; }
    .logo_group .choco { position:relative; max-width:68px; width:6vw; }
    .logo_group .login { padding:10px 24px; font-size:18px; box-sizing:border-box; color:#000; font-weight:bold; border:2px solid #000; border-radius:30px; line-height:1.0; font-family:'NanumSquareRound'; }
    .logo_group .miraen { max-width:96px; width:10vw; }
/* banner & nav */
.flot_banner { z-index:30; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; max-width:1200px; width:99vw; }
.flot_banner a { padding:0px !important; }
    .flot_banner.fixed { position:fixed; }

/* *******************
    pc 
******************** */
.event_wrap { position:relative; overflow:hidden; margin:0 auto; max-width:1920px; width:100%; }
.event_content { width:100%; background:#BEF7FD url('../images/event/20260622/bg_con.jpg') center bottom no-repeat; }
    .event_content .tit { z-index:2; position:relative; }
    .event_content .inner { position:relative; margin:0 auto; max-width:1240px; width:100%; text-align:center; }
    .event_content .motion img { position:absolute; }

.event_content h1 { position:relative; width:100%; text-align:center; background:url('../images/event/20260622/bg_tit.jpg') center no-repeat; background-size:auto 100%; }
    h1 .sub { opacity:0; top:7%; left:20%; max-width:275px; width:22vw; }
        h1.action .sub { opacity:1; left:16%; transition:all 0.5s ease-in-out; }
    h1 .talk { top:47%; right:6%; max-width:182px; width:15vw; animation:balloonFloat 3s ease-in-out infinite alternate; }
    @keyframes balloonFloat {
        0%, 50%, 100% { transform: translateY(0); }
        25%, 75% { transform: translateY(-10%); }
    }
    h1 .twinkle01 { right:40%; top:51%; max-width:25px; width:5vw; animation-delay:0s; }
    h1 .twinkle02 { right:39%; top:49%; max-width:14px; width:3vw; animation-delay:0.3s; }
    h1 .twinkle01, 
    h1 .twinkle02 { transform:scale(0.8); transition:transform 0.3s; animation:twinkleScale 0.95s infinite; }
    h1 .twinkle01 { animation-delay:0s; }
    h1 .twinkle02 { animation-delay:0.3s; }
    @keyframes twinkleScale {
        0%, 100% { transform: scale(0.8); }
        50% { transform: scale(1.04); }
    }

    .con01 ul { position:absolute; top:28%; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; gap:2%; max-width:1200px; width:98vw; }
        .con01.current li:nth-child(1),
        .con01.current li:nth-child(2),
        .con01.current li:nth-child(3) { animation: liDominoUp 1s forwards; }
        .con01.current li:nth-child(2) { animation-delay: 0.14s; }
        .con01.current li:nth-child(3) { animation-delay: 0.28s; }
        @keyframes liDominoUp {
            0%, 100% { transform: translateY(0); }
            50%{ transform: translateY(-5%); }
        }

    .con02 .car { top:24%; left:6%; max-width:190px; width:15vw; animation:carShake 2s infinite ease-in-out; }
    @keyframes carShake {
        0%, 100% { transform: translateX(0) rotate(0); }
        20%, 60% { transform: translateX(-4px) rotate(-1deg);}
        40%, 80% { transform: translateX(4px) rotate(1deg);}
    }
    .con02 .start { top:24%; left:3%; max-width:94px; width:8vw; animation: balloonUpFloat 2.4s ease-in-out infinite alternate; }
    @keyframes balloonUpFloat {
        0%, 50%, 100% { transform: translateY(0); }
        25%, 75% { transform: translateY(-8%); }
    }
    .con02 a { position:absolute; left:50%; transform:translateX(-50%); bottom:7%; max-width:614px; width:54vw; }

    .con03 .obj01 { top:23%; left:1%; max-width:151px; width:9vw; }
    .con03 .obj02 { top:21%; left:-4%; max-width:76px; width:6vw; transform:scale(0); }
        .con03.current .obj02 { transform:scale(1); transition:all 0.3s ease-in-out; }
    .con03 .obj03 { bottom:5%; right:-8%; max-width:204px; width:20vw; }
    .con03 .talk { top:33.5%; left:18.5%; max-width:133px; width:11vw; animation: balloonUpFloat 2s ease-in-out infinite alternate; }

    .con04 .card01 { top:34%; left:1%; max-width:650px; width:53vw; }
    .con04 .card02 { top:36%; right:1%; max-width:655px; width:53vw; }
        .con04 a:hover img { transform:translateY(-3%); transition:all 0.3s ease-in-out; }

    .con05 .coin { bottom:15%; left:37%; max-width:156px; width:12vw; transform:scale(0); }
        .con05.current .coin { transform:scale(1); transition:all 0.3s ease-in-out; }
    .con05 .pen { display:none; bottom:15%; right:13%; max-width:123px; width:10vw; transform:scale(0); }
     .con05.current .pen { transform:scale(1); transition:all 0.3s ease-in-out;transition-delay: 0.3s; }

    .con06 .bok { top:33%; right:10%; max-width:180px; width:14vw; }
        .con06.current .bok { animation: bokJumpOnce 1s cubic-bezier(0.43, 0.01, 0.53, 1.21); }
        @keyframes bokJumpOnce {
            0%, 40%, 80%, 100%  { transform: translateY(0); }
            20%, 60% { transform: translateY(-10%); }
        }
   
    .con06 a { position:absolute; left:50%; transform:translateX(-50%); bottom:6%; max-width:786px; width:68vw; }
               

/* *******************
    mobile  
******************** */
@media all and (max-width:1230px) { 
    .logo_group { padding:0 4vw; top:3.3vw; }
    .logo_group div { gap:2vw; }
    .logo_group .login { margin-right:5px; padding:1vw 2vw; font-size:0.5rem; border-width:1px; }   

    .event_content { background-size:auto 89%; }


}