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

/* common */
.event_wrap { overflow:hidden; position:relative; }
img { vertical-align:top;}
.btn_group { z-index:10; position:absolute; left:50%; transform:translateX(-50%); 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:-12%; bottom:-30%; max-width:33px; width:3vw; 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:#fff; font-weight:bold; border:2px solid #fff; border-radius:30px; line-height:1.0; font-family:'NanumSquareRound'; }
    .logo_group .miraen { max-width:96px; width:10vw; }

.motion img { position:absolute; }

/* banner */
.top_banner { z-index:3; position:absolute; top:146px; right:2%; max-width:180px; width:15vw; }
@media all and (min-width:1920px) {
    .top_banner { right: min(calc(52% - 960px), 1920px); }
}
.bot_banner { z-index:30; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; max-width:1200px; width:99vw; }
    .bot_banner a { padding:0px !important; }
        .bot_banner.fixed { position:fixed; }

.inner { position:relative; margin:0 auto; max-width:1200px; }
.tit { z-index:2; position:relative; }

.slider { position:absolute; left:50%; transform:translate(-50%); width:100%; }
    .slider_list { margin:0 auto 40px; display:flex; max-width:1000px; width:100%; padding:10px; background:#fff; border-radius:50px; }
    .slider_list a { flex:1 1 0; display:flex; align-items:center; justify-content:center; max-height:60px; height:5vw; }
        .slider_list a img { max-height:23px; height:2.4vw; }
    .slider_list a.on { background:#38C478 url('../images/event/20260731/tab_on.png') 4% 17% no-repeat; background-size:5% auto; border-radius:50px; }
        
        .slider_list a.on img { filter: brightness(0) invert(1); }
    .slider_con { max-width:1200px; width:100%;}
    .slider .swiper-button-next,
    .slider .swiper-button-prev { display:inline-block; width:54px; height:54px; }
    .slider .swiper-button-next { right:-7%; background:url('../images/event/20260731/btn_next.png') center no-repeat; background-size:100% auto; }
    .slider .swiper-button-prev { left:-7%; background:url('../images/event/20260731/btn_prev.png') center no-repeat; background-size:100% auto; }
    .slider .swiper-button-next:after,
    .slider .swiper-button-prev:after { display:none; }
    

/* *******************
    pc 
******************** */
.tit_area { background:#000 url('../images/event/20260731/bg_tit.png') center bottom no-repeat; background-size:auto 100%; }
    .tit_area .sub { top:8%; left:50%; transform:translateX(-50%); max-width:485px; width:40vw; 
        /*animation: balloonBouncyPause 1.2s ease-in-out infinite;*/
        animation: titPopUpSub 3s ease-in-out infinite;
        animation-delay: 0s;
    }
    /*
    @keyframes balloonBouncyPause {
        0%, 20%, 60%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        10%, 40% {
            transform: translateX(-50%) translateY(-10%);
        }
    }*/
    @keyframes titPopUpSub {
        0%, 20%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        10% {
            transform: translateX(-50%) translateY(-10%);
        }
    }
    @keyframes titPopUp {
        0%, 30%, 100% {
            transform: translateY(0);
        }
        15% {
            transform: translateY(-10%);
        }
    }
    .tit_area .obj01_01 { left:12%; top:11%; max-width:140px; width:12vw; animation:shakeBadge 2s infinite linear; }
    @keyframes shakeBadge {
        0%, 90%, 100% { transform: rotate(0deg); }
        10%, 30% { transform: rotate(-10deg); }
        20%, 40% { transform: rotate(10deg); }
        50% { transform: rotate(-5deg); }
        60% { transform: rotate(5deg); }
        70% { transform: rotate(-2deg); }
        80% { transform: rotate(2deg); }
    }
    .tit_area .obj01_02,
    .tit_area .obj01_03,
    .tit_area .obj01_04 { left:15%; top:21%; max-width:80px; width:7vw; 
        /* animation: electricShock 1.5s infinite cubic-bezier(.36,1.04,.68,.98);
        animation-delay: 0s, 0.12s, 0.25s; */
    }
    .tit_area .obj01_02 { animation-delay: 0s; }
    .tit_area .obj01_03 { animation-delay: 0.13s; }
    .tit_area .obj01_04 { animation-delay: 0.26s; }
    @keyframes electricShock {
        0%   { transform: translate(0,0) scale(1) rotate(0); }
        10%  { transform: translate(-2px, 3px) scale(1.07) rotate(-3deg);}
        20%  { transform: translate(2px, -2px) scale(0.94) rotate(2deg);}
        30%  { transform: translate(-1px, 1px) scale(1.03) rotate(-2deg);}
        40%  { transform: translate(2px, -3px) scale(1.04) rotate(2deg);}
        50%  { transform: translate(-2px, 2px) scale(0.97) rotate(-1deg);}
        60%  { transform: translate(1px, -2px) scale(1.08) rotate(2deg);}
        70%  { transform: translate(-3px, 1px) scale(0.95) rotate(-2deg);}
        80%  { transform: translate(2px, 0px) scale(1.02) rotate(1deg);}
        90%  { transform: translate(-1px, 2px) scale(0.99) rotate(-1deg);}
        100% { transform: translate(0,0) scale(1) rotate(0);}
    }
    .tit_area .obj02_01,
    .tit_area .obj02_02,
    .tit_area .obj02_03 {
        right: 12%;
        top: 16%;
        max-width: 93px;
        width: 7vw;
    }
    .tit_area .obj02_01,
    .tit_area .obj02_02,
    .tit_area .obj02_03 { right:12%; top:16%; max-width:93px; width:7vw; 
        /*animation: electricShockUpRandom 2s infinite cubic-bezier(.36,1.04,.68,.98);*/
    }
    @keyframes electricShockUpRandom {
        0% {
            transform: translateY(0) scale(1) rotate(0deg);
        }
        10% {
            transform: translateY(-8px) scale(1.08) rotate(-8deg);
        }
        25% {
            transform: translateY(-20px) scale(0.95) rotate(8deg);
        }
        40% {
            transform: translateY(-32px) scale(1.10) rotate(-12deg);
        }
        55% {
            transform: translateY(-45px) scale(0.97) rotate(12deg);
        }
        70% {
            transform: translateY(-30px) scale(1.05) rotate(-6deg);
        }
        85% {
            transform: translateY(-12px) scale(1.02) rotate(6deg);
        }
        100% {
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }
    .tit_area .obj02_01 { animation-delay: 0s; }
    .tit_area .obj02_02 { animation-delay: 0.11s; }
    .tit_area .obj02_03 { animation-delay: 0.27s; }

    .tit_area .txt01 { top:15%; left:20.5%; max-width:190px; width:15vw; }
    .tit_area .txt02 { top:17%; left:36%; max-width:180px; width:14.5vw; }
    .tit_area .txt03 { top:14%; left:51%; max-width:170px; width:14vw; }
    .tit_area .txt04 { top:17%; left:65%; max-width:175px; width:13vw; }
    .tit_area .txt01 {
        animation: titPopUp 3s ease-in-out infinite;
        animation-delay: -1.2s;
    }
    .tit_area .txt02 {
        animation: titPopUp 3s ease-in-out infinite;
        animation-delay: -0.9s;
    }
    .tit_area .txt03 {
        animation: titPopUp 3s ease-in-out infinite;
        animation-delay: -0.6s;
    }
    .tit_area .txt04 {
        animation: titPopUp 3s ease-in-out infinite;
        animation-delay: -0.3s;
    }

.tab_container { position:relative; }
    .tab_area { z-index:3; position:absolute; width:100%; top:0px; left:0px; background:#1D2320; }
    .tab_area.fixed { position:fixed; }
        .tab_area .inner { display: flex; }
        .tab_area a { flex:1 1 0; display:inline-block; width:100%; max-height:102px; height:10vw; }
            .tab_area a:nth-child(1) { background:url('../images/event/20260731/tab01.png') center no-repeat; background-size:auto 100%;}
                .tab_area a:nth-child(1).on { background:url('../images/event/20260731/tab01_on.png') center no-repeat; background-size:auto 100%;}
            .tab_area a:nth-child(2) { background:url('../images/event/20260731/tab02.png') center no-repeat; background-size:auto 100%;}
                .tab_area a:nth-child(2).on { background:url('../images/event/20260731/tab02_on.png') center no-repeat; background-size:auto 100%;}
            .tab_area a:nth-child(3) { background:url('../images/event/20260731/tab03.png') center no-repeat; background-size:auto 100%;}
                .tab_area a:nth-child(3).on { background:url('../images/event/20260731/tab03_on.png') center no-repeat; background-size:auto 100%;}
            .tab_area a:nth-child(4) { background:url('../images/event/20260731/tab04.png') center no-repeat; background-size:auto 100%;}
                .tab_area a:nth-child(4).on { background:url('../images/event/20260731/tab04_on.png') center no-repeat; background-size:auto 100%;}
            .tab_area a:nth-child(5) { background:url('../images/event/20260731/tab05.png') center no-repeat; background-size:auto 100%;}
                .tab_area a:nth-child(5).on { background:url('../images/event/20260731/tab05_on.png') center no-repeat; background-size:auto 100%;}
        .tab_area span { display:none; }

    .sec01 { background:linear-gradient(180deg, #05100A 90%, #25764A 130%); }

    .sec02 { background:#05110A; }
        .sec02 .video_area { overflow:hidden; position:absolute; top:18%; left:50%; transform:translateX(-50%); max-width:1200px; width:100%; border-radius:30px; border:1px solid #393a37; cursor:pointer; }
        .sec02 .video_area img { position:absolute; top:0px; left:0px; }
        .sec02 .video_area video { width:100%; vertical-align:top; }

    .sec03,
    .sec04,
    .sec05 { background:#29C57C; }
        .sec05 .obj03_01,
        .sec05 .obj03_02,
        .sec05 .obj03_03 { left:10%; top:18.5%; max-width:120px; width:11vw; 
            animation: electricShock 1.5s infinite cubic-bezier(.36,1.04,.68,.98);
            animation-delay: 0s, 0.12s, 0.25s;
        }
        .sec05 .obj04_01,
        .sec05 .obj04_02,
        .sec05 .obj04_03 { right:13.5%; top:16%; max-width:80px; width:8vw; 
            animation: electricShock 1.5s infinite cubic-bezier(.36,1.04,.68,.98);
            animation-delay: 0s, 0.12s, 0.25s;
            animation-delay: 0.13s;
        }

    .sec03 .slider { top:29%; }

    .sec04 .slider { top:31%; }
    
    .sec06 { background:#5AA8FF; }
        
        .sec06 .obj05_01,
        .sec06 .obj05_02,
        .sec06 .obj05_03 { left:13%; top:19.5%; max-width:190px; width:16vw;  }
        .sec06 .obj05_01,
        .sec06 .obj06_02 { animation: bbangpare 1.3s infinite; }
        @keyframes bbangpare {
            0% {
                opacity: 1;
            }
            30% {
                opacity: 1;
            }
            60% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        .sec06 .obj06_01,
        .sec06 .obj06_02,
        .sec06 .obj06_03 { right:13%; top:20%; max-width:190px; width:16vw; }
        .sec06 .obj05_02,
        .sec06 .obj06_01 { animation:bbangpare 1.3s infinite; animation-delay:0.3s; }
        .sec06 .btn { position:absolute; left:50%; bottom:11%; transform:translateX(-50%); max-width:670px; width:53vw; }

    .sec07 { background:#459DFF; }
        .sec07 .ch { overflow:hidden; position:absolute; top:10%; left:50%; transform:translateX(-50%); max-width:160px; width:15vw; border-bottom:3px solid #000; }
            .sec07 .ch img { transform:translateY(100%); }
        .sec07 .btn_group { left:50%; bottom:15%; max-width:1200px; width:100%; }
        .sec07.current .ch img { transform:translateY(0); transition:all 0.3s ease-in-out; }

        

/* *******************
    mobile  
******************** */
@media all and (max-width:1200px) { 
    
    .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; }   

    .inner { max-width:100%; padding:0 2vw; }
    .tit_area .obj02_01,
    .tit_area .obj02_02,
    .tit_area .obj02_03 { top:19%; right:15%; }

    .sec02 .video_area { width:97%; border-radius:15px; }
    
    .sec07 .btn_group { width:96%; }
    .sec07 .ch { top:8.5%; border-width:2px; }

    .slider_list { margin:0 auto 2vw; display:flex; width:90%; padding:5px; }
    .slider_con { margin:0 auto; width:96%; }
    .slider .swiper-button-next,
    .slider .swiper-button-prev { display:none; }
}

@media all and (max-width:750px) { 
    
    .top_banner { top:10vw; }
    .sec07 .ch { border-width:1px; }
    .sec06.current + .sec07 .ch img { transform:translateY(0); transition:all 0.3s ease-in-out; }

    @keyframes electricShock {
        0%   { transform: translate(0,0) scale(1) rotate(0); }
        10%  { transform: translate(-1px, 1.5px) scale(1.07) rotate(-1.5deg);}
        20%  { transform: translate(1px, -1px) scale(0.94) rotate(1deg);}
        30%  { transform: translate(-0.5px, 0.5px) scale(1.03) rotate(-1deg);}
        40%  { transform: translate(1px, -1.5px) scale(1.04) rotate(1deg);}
        50%  { transform: translate(-1px, 1px) scale(0.97) rotate(-0.5deg);}
        60%  { transform: translate(0.5px, -1px) scale(1.08) rotate(1deg);}
        70%  { transform: translate(-1.5px, 0.5px) scale(0.95) rotate(-1deg);}
        80%  { transform: translate(1px, 0px) scale(1.02) rotate(0.5deg);}
        90%  { transform: translate(-0.5px, 1px) scale(0.99) rotate(-0.5deg);}
        100% { transform: translate(0,0) scale(1) rotate(0);}
    }
    @keyframes electricShockUpRandom {
        0% {
            transform: translateY(0) scale(1) rotate(0deg);
        }
        10% {
            transform: translateY(-4px) scale(1.08) rotate(-4deg);
        }
        25% {
            transform: translateY(-10px) scale(0.95) rotate(4deg);
        }
        40% {
            transform: translateY(-16px) scale(1.10) rotate(-6deg);
        }
        55% {
            transform: translateY(-22.5px) scale(0.97) rotate(6deg);
        }
        70% {
            transform: translateY(-15px) scale(1.05) rotate(-3deg);
        }
        85% {
            transform: translateY(-6px) scale(1.02) rotate(3deg);
        }
        100% {
            transform: translateY(0) scale(1) rotate(0deg);
        }
    }

}