@charset "UTF-8";
@import url('https://css.mirae-n.com/miraen_fonts/font/nanum/fonts.css');
@import url('./event_common.css');
@import url('./event_footer.css');

body { }

/* common */
img { vertical-align:top;}
.btn_group { position:absolute; left:50%; transform:translateX(-50%); width:100%; }
.btn_group a + a { margin-top:3.5%; }
.btn { z-index:2; position:absolute; left:50%; transform:translateX(-50%); display:inline-block; width:100%; }
    .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:12%; bottom:-20%; max-width:82px; width:6vw; animation:moveCursor 2s infinite;}
    .detail span { position:absolute; max-width:112px; width:10vw; bottom:-48%; right:-5%; }

.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:1200px; 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:7vw; }
    .logo_group .login { margin-right:10px; 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; }
   
.inner { position:relative; margin:0 auto; max-width:1200px; width:100%; }
.inner .motion img { position:absolute; }

/* S : 26.02.09 미래엔 수정 pop_wrap -> pop_con 클래스명 변경 */
.pop_con { display:none; z-index:51; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); padding:48px 70px; max-width:784px; width:90%; text-align:center; background:#F3F0F1; box-sizing:border-box; border-radius:20px; }
    .pop_con .pop_close { z-index:10; position:absolute; top:4%; right:3%; display:inline-block; max-width:20px; max-height:20px; width:5vw; height:5vw; background:transparent; }
.bg_layer { overflow:hidden; z-index:50; position:fixed; top:0px; left:0px; width:100vw; height:100vh; background:#000; opacity:0.5; }
/* E : 26.02.09 미래엔 수정 */

/* *******************
    pc 
******************** */

.event_container { position:relative; overflow:hidden; width:100%; }
.event_container .inner { position:relative; max-width:1200px; }
.event_container .tit { z-index:2; position:relative; }

.tit_area { position:relative; overflow:hidden; background:url('../images/event/20260410/bg_tit.jpg') center top repeat; }
    .tit_area .human,
    .tit_area .bg_con img { position:absolute; }
        /* motion */
        .tit_area .ch { right:-12.7%; bottom:0; transform:translateY(100%); max-width:376px; width:32vw; }
            .tit_area.action .ch {  transform:translateY(0%); transition:all 0.3s ease-in-out; }
        .tit_area .song { left:18%; top:34%; max-width:95px; width:8vw; transform:scale(0); }
            .tit_area.action .song { left:14%; transform:scale(1); transition:all 0.3s ease-in-out; }
        .tit_area .star { right:20.5%; top:34%; max-width:44px; width:4vw; transform:scale(0); }
            .tit_area.action .star { right:17.5%; transform:scale(1); transition:all 0.3s ease-in-out; }
        .tit_area .talk { z-index:3; left:18%; top:63%; max-width:96px; width:8vw; transform:scale(0); }
            .tit_area.action .talk { left:15%; transform:scale(1); transition:all 0.3s ease-in-out; }
        .tit_area .eng { right:18.5%; top:55%; max-width:105px; width:9vw; transform:scale(0); }
            .tit_area.action .eng { right:14.5%; transform:scale(1); transition:all 0.3s ease-in-out; }
        
        .tit_area .badge { z-index:3; position:absolute; left:7%; top:-3%; max-width:160px; width:11vw; }
        
        .tit_area .human { display:flex; top:17%; left:32%; max-height:60px; height:5vw; position:absolute; justify-content:space-between; align-items:flex-end; }
        .tit_area .human img { max-width:auto; height:100%; }
            .tit_area .human img:nth-child(2) { margin:0 5% 0 1%; }
                .tit_area.action .human img:nth-child(1) { animation:humanUpDownPause 2.5s cubic-bezier(0.45,0,0.55,1) 0s infinite; }
                .tit_area.action .human img:nth-child(2) { animation:humanUpDownPause 2.5s cubic-bezier(0.45,0,0.55,1) 0.2s infinite; }
                .tit_area.action .human img:nth-child(3) { animation:humanUpDownPause 2.5s cubic-bezier(0.45,0,0.55,1) 0.4s infinite; }
                @keyframes humanUpDownPause {
                    0% { transform: translateY(0); }
                    10% { transform: translateY(-16px); }
                    18% { transform: translateY(0); }
                    90% { transform: translateY(0); }
                    100% { transform: translateY(0); }
                }
        .tit_area .bg_con .trumpet { top:32%; left:-1%; max-width:440px; width:23vw; }
        .tit_area .bg_con .piano { bottom:-23%; left:-3%; max-width:1062px; width:58vw; }
        .tit_area .bg_con .note { top:-15%; right:-4%; max-width:683px; width:34vw; }

.con01 { background:#97E06C; }
    .con01 .motion img { left:13.5%; top:11%; max-width:1016px; width:80vw; animation:balloonFloatPause 2.5s ease-in-out infinite; }
    @keyframes balloonFloatPause {
        0%, 20%, 40%, 100% { transform:translateY(0); }
        10%, 30% { transform:translateY(-10px); }
    }

.con02 { background:url('../images/event/20260410/bg_con02.png') center no-repeat; }
    .con02 .star01 { left:23.5%; bottom:14.5%; max-width:36px; width:3vw; animation:shakeStar01 3s ease-in-out infinite; }
    .con02 .star02 { left:27.5%; bottom:13.8%; max-width:22px; width:2vw; animation:shakeStar02 3s ease-in-out infinite; }
    .con02 .star03 { right:25%; bottom:6.5%; max-width:36px; width:3vw; animation:shakeStar03 3s ease-in-out infinite; }

.con03 { background:#A7E3FF; }
    .con03 .star01 { left:19%; bottom:18%; max-width:36px; width:3vw; animation:shakeStar01 3s ease-in-out infinite; }
    .con03 .star02 { left:23.5%; bottom:20.8%; max-width:22px; width:2vw; animation:shakeStar02 3s ease-in-out infinite; }
    .con03 .star03 { right:24%; bottom:10%; max-width:36px; width:3vw; animation:shakeStar03 3s ease-in-out infinite; }

.con04 { background:#FFF27D; }
    .con04 .star01 { left:23.5%; bottom:20%; max-width:36px; width:3vw; animation:shakeStar01 3s ease-in-out infinite; }
    .con04 .star02 { left:28%; bottom:18.8%; max-width:22px; width:2vw; animation:shakeStar02 3s ease-in-out infinite; }
    .con04 .star03 { right:25%; bottom:6%; max-width:36px; width:3vw; animation:shakeStar03 3s ease-in-out infinite; }
    .con04 .pen { right:-15%; bottom:38%; max-width:255px; width:20vw; animation:penClick 5s ease-in-out infinite; }
    @keyframes penClick {
        0%, 24%, 48%, 100% { transform: rotate(0deg);}
        12% { transform: rotate(-12deg);}
        36% { transform: rotate(-9deg);}
    }
    .con04 .btn { bottom:26.5%; }

    @keyframes shakeStar01 {
        0%, 60%, 100% { transform: rotate(0deg); }
        20% { transform: rotate(-20deg); }
        30% { transform: rotate(10deg); }
        40% { transform: rotate(-15deg); }
        50% { transform: rotate(10deg); }
    }

    @keyframes shakeStar02 {
        0%, 60%, 100% { transform: rotate(0deg); }
        15% { transform: rotate(25deg); }
        30% { transform: rotate(-20deg); }
        45% { transform: rotate(22deg); }
        55% { transform: rotate(-20deg); }
    }

    @keyframes shakeStar03 {
        60%, 100% { transform: rotate(0deg); }
        20% { transform: rotate(-25deg); }
        30% { transform: rotate(23deg); }
        40% { transform: rotate(-27deg); }
        50% { transform: rotate(32deg); }
    }
    .con02 .star01,
    .con03 .star01,
    .con04 .star01 {
        animation: shakeStar01 2.8s cubic-bezier(0.45,0,0.55,1) infinite;
    }

    .con02 .star02,
    .con03 .star02,
    .con04 .star02 {
        animation: shakeStar02 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
    }

    .con02 .star03,
    .con03 .star03,
    .con04 .star03 {
        animation: shakeStar03 2.9s cubic-bezier(0.45,0,0.55,1) infinite;
    }

.con05 { background:#71C044; }
    .con05 .btn_group { bottom:19%; }
    .con05 .btn_group a { position:relative; display:block; }
    .con05 .btn_group span { position:absolute; right:0; top:-4%; max-width:78px; width:7vw; animation:boingUpDown 1s cubic-bezier(0.68,-0.6,0.32,1.6) infinite; }
        /* 각각 딜레이 주기 */
        .con05 .btn_group a:nth-child(1) span { animation-delay:0s; }
        .con05 .btn_group a:nth-child(2) span { animation-delay:0.35s; }
        @keyframes boingUpDown {
            0%, 55%, 100% { transform: translateY(0); }
            10%, 50%      { transform: translateY(-4px); }
            17%, 45%      { transform: translateY(-7.5px); }
            21%, 40%      { transform: translateY(-9px);}
            25%, 35%      { transform: translateY(-11.5px);}
            30%           { transform: translateY(-12px);}
        }

@media all and (max-width:1920px) { 

    .tit_area .bg_con .trumpet { left:-5%; }
    .tit_area .bg_con .piano { left:-6%; }
    .tit_area .bg_con .note { top:-6%; right:-7%; }
    
}

/* banner & nav */
.flot_banner { z-index:10; position:absolute; left:50%; bottom:0px; max-width:1200px; width:100%; transform:translateX(-50%); }
    .flot_banner.fixed { position:fixed; }
.flot_nav { z-index:10; position:fixed; right:2%; top:25%; }
    @media (min-width: 1920px) {
        .flot_nav {
            right: calc(52% - 960px);
            right: min(calc(52% - 960px), 1920px); /* 최대 1920px 제한 */
        }
    }
.flot_nav .nav_list { overflow:hidden; width:170px; border-radius:20px; box-sizing:border-box; border:1px solid #E0E0E0; }
    .nav_list a { position:relative; display:inline-block; width:100%; border-top:1px solid #E0E0E0; background:#fff; box-sizing:border-box; vertical-align:top; }
    .nav_list a:first-child { border-top:0px; }
    .nav_list a span { overflow:hidden; display:inline-block; position:absolute; top:50%; height:56px; transform:translateY(-50%); width:100%; font-size:0px; text-indent:-9999px; }
        .nav_list a:nth-child(1).on { background:#FF6A00; }
        .nav_list a:nth-child(2).on { background:#4DC6FF; }
        .nav_list a:nth-child(3).on { background:#FFAA00; }
        .nav_list a:nth-child(4).on { background:#71C044; }
    .nav_list a.on img { filter:brightness(0) invert(1); }
    .nav_list .btn_top { vertical-align:top; background:#4E4E4E; }
    @media all and (max-width:1400px) { 
        .flot_nav { display:none; }
    }

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

    .tit_area .ch { right:-4%; }
    .tit_area .bg_con .trumpet { left:-12%; }
    .tit_area .bg_con .piano { left:-8%; bottom:-15%; }
    .tit_area .bg_con .note { right:-8%; }

    .event_container .inner,
    .btn,
    .btn_group { padding:0 4vw; }

    .con01 .motion img { left:15.5%; }

    .con04 .pen { right:-10%; }



}

@media all and (max-width:750px) { 

    @keyframes moveCursor {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        30%, 70% {
            transform: translate(-5px, -5px) scale(1);
        }
        50% {
            transform: translate(-5px, -5px) scale(0.8);
        }
    }
    @keyframes humanUpDownPause {
        0% { transform: translateY(0); }
        10% { transform: translateY(-5px); }
        18% { transform: translateY(0); }
        90% { transform: translateY(0); }
        100% { transform: translateY(0); }
    }
    @keyframes balloonFloatPause {
        0%, 20%, 40%, 100% { transform:translateY(0); }
        10%, 30% { transform:translateY(-5px); }
    }
    @keyframes boingUpDown {
        0%, 55%, 100% { transform: translateY(0); }
        10%, 50%      { transform: translateY(-1px); }
        17%, 45%      { transform: translateY(-1.5px); }
        21%, 40%      { transform: translateY(-3px);}
        25%, 35%      { transform: translateY(-4.5px);}
        30%           { transform: translateY(-5px);}
    }

    .tit_area { background-size:160% auto; }
    

    
}