@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:97%; text-align:center; }
    .btn_group a { display:inline-block; }
    .btn_group a + a { 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:inherit; }
    .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; }

/* *******************
    pc 
******************** */
.event_wrap { overflow:hidden; position:relative; }
.event_wrap .motion > img { position:absolute; }
.event_wrap .tit { z-index:2; position:relative; }
.event_wrap .inner { position:relative; margin:0 auto; max-width:1240px; width:100%; }

.tit_area { overflow:hidden; position:relative; background:url('../images/event/20260624/bg_tit.png') 45% top no-repeat,
                                                            linear-gradient(180deg, #FFC6C0 -37.97%, #FFCEC9 -3.23%, #FFE1C3 18.69%, #FFEABD 50.43%); }
    .tit_area .ch { z-index:2; left:-18%; bottom:4%; max-width:470px; width:35vw; }
    .tit_area .fire { z-index:2; right:-10%; bottom:4%; max-width:133px; width:13vw; }
    .tit_area .twinkle01 { z-index:2; left:11%; bottom:27%; max-width:25px; width:2vw; animation:twinkle 1.4s ease-in-out infinite; }
    .tit_area .twinkle02 { z-index:2; left:13.5%; bottom:26%; max-width:14px; width:1vw; animation:twinkle 1.4s ease-in-out infinite; animation-delay:0.5s; }
    @keyframes twinkle { 
        0% , 100% { opacity:0.3; transform:scale(0.6); } 
        50% { opacity:1; transform:scale(1); } 
    }

    .map_area { position:absolute; top:27%; left:50%; transform:translateX(-50%); max-width:1340px; width:110vw; }
    .map_area p { position:absolute; }
        .map_area .stage01 { top:33%; left:50%; transform:translateX(-50%); max-width:375px; width:31vw; }
        .map_area .stage02 { top:65%; left:24%; max-width:342px; width:29vw; }
        .map_area .stage03 { top:65%; right:17%; max-width:314px; width:27vw; }
    .map_area ul { display:none; position:absolute; gap:4%; }
        .map_area ul li { max-width:179px; width:15vw; max-height:218px; height:19vw; }
        .map_area ul li span { display:none; }
    .map_area .stage01_list { display:flex; top:40%; left:9%; width:100%; }
        .map_area .week01 { background:url('../images/event/20260624/ch_week01.png') no-repeat; background-size:100% auto; }
        .map_area .week02 { background:url('../images/event/20260624/ch_week02.png') no-repeat; background-size:100% auto; }
        .map_area .week03 { background:url('../images/event/20260624/ch_week03.png') no-repeat; background-size:100% auto; }
        .map_area .week04 { background:url('../images/event/20260624/ch_week04.png') no-repeat; background-size:100% auto; }
        .map_area .week05 { background:url('../images/event/20260624/ch_week05.png') no-repeat; background-size:100% auto; }
        /* fin */
        .map_area .week01.fin { background:url('../images/event/20260624/ch_week01_on.png') no-repeat; background-size:100% auto; }
        .map_area .week02.fin { background:url('../images/event/20260624/ch_week02_on.png') no-repeat; background-size:100% auto; }
        .map_area .week03.fin { background:url('../images/event/20260624/ch_week03_on.png') no-repeat; background-size:100% auto; }
        .map_area .week04.fin { background:url('../images/event/20260624/ch_week04_on.png') no-repeat; background-size:100% auto; }
        .map_area .week05.fin { background:url('../images/event/20260624/ch_week05_on.png') no-repeat; background-size:100% auto; }
    .map_area .stage02_list { display:flex; justify-content:space-between; top:72%; left:21.5%; max-width:406px; width:34vw; }
        .map_area .month01 { background:url('../images/event/20260624/ch_month07.png') no-repeat; background-size:100% auto; }
        .map_area .month02 { background:url('../images/event/20260624/ch_month08.png') no-repeat; background-size:100% auto; }
        /* fin */
        .map_area .month01.fin { background:url('../images/event/20260624/ch_month07_on.png') no-repeat; background-size:100% auto; }
        .map_area .month02.fin { background:url('../images/event/20260624/ch_month08_on.png') no-repeat; background-size:100% auto; }
    .map_area .stage03_list { display:flex; top:72%; right:21.5%; max-width:176px; width:15vw; }
        .map_area .class01 { background:url('../images/event/20260624/ch_class.png') no-repeat; background-size:100% auto; }
        /* fin */
        .map_area .class01.fin { background:url('../images/event/20260624/ch_class_on.png') no-repeat; background-size:100% auto; }

    .tit_area .level { right:26%; top:14%; max-width:397px; width:32vw; animation: levelPop 1.2s forwards ease-in-out; }
    @keyframes levelPop {
        0%, 80%, 100% { transform: scale(1);}
        40% { transform: scale(1.10);}
        60% { transform: scale(0.96);}
    }
    
    .tit_area.current .stage01 { animation: liDominoUp01 0.8s forwards; }
    .tit_area.current .stage02,
    .tit_area.current .stage03 { animation: liDominoUp02 0.8s forwards; }
    .tit_area.current .stage02 { animation-delay: 0.14s; }
    .tit_area.current .stage03 { animation-delay: 0.28s; }
    @keyframes liDominoUp01 {
        0%, 100% { transform: translate(-50%, 0); }
        50%{ transform: translate(-50%, -35%); }
    }
    @keyframes liDominoUp02 {
        0%, 100% { transform: translateY(0); }
        50%{ transform: translateY(-35%); }
    }

.con01 { background:#D5E8B4 url('../images/event/20260624/bg_con01.png') center top repeat-x; }
    .con01 .stage01,
    .con01 .stage02,
    .con01 .stage03 { transform:scale(0); }
    .con01 .stage01 { left:11%; top:26%; max-width:153px; width:13vw; }
    .con01 .stage02 { left:44%; top:26%; max-width:153px; width:13vw; }
    .con01 .stage03 { right:11%; top:26%; max-width:164px; width:13.5vw; }
    .con01.current .stage01,
    .con01.current .stage02,
    .con01.current .stage03 { animation: popIn 0.6s forwards; }
        .con01.current .stage02 { animation-delay:0.2s; }
        .con01.current .stage03 { animation-delay:0.4s; }
    @keyframes popIn { 
        0% { transform: scale(0); } 
        80% { transform: scale(1.1); } 
        100% { transform: scale(1); } 
    }

/* 뿅하고 나타나는 효과 */
.pop-in {
    animation: popIn 0.5s cubic-bezier(.17,.67,.83,.67) forwards;
}

.con02 { background:#FFF6C8 url('../images/event/20260624/bg_con02.png') center bottom no-repeat; }
    .class_area { position:absolute; top:18.5%; left:50%; transform:translateX(-50%); max-width:1180px; width:95.4vw; }
    .class_area .class_tit { display:flex; justify-content:space-between; margin:0 auto 2.7%; max-width:715px; width:75vw; }
    .class_area .class_tit a { display:inline-block; width:22%; max-height:65px; height:6.5vw; }
        .class_tit .ko { background:url('../images/event/20260624/ko.svg') center no-repeat; background-size:100% auto; }
        .class_tit .math { background:url('../images/event/20260624/math.svg') center no-repeat; background-size:100% auto; }
        .class_tit .soc { background:url('../images/event/20260624/soc.svg') center no-repeat; background-size:100% auto; }
        .class_tit .sci { background:url('../images/event/20260624/sci.svg') center no-repeat; background-size:100% auto; }
        .class_tit .ko.on { background:url('../images/event/20260624/ko_on.svg') center no-repeat; background-size:100% auto; }
        .class_tit .math.on { background:url('../images/event/20260624/math_on.svg') center no-repeat; background-size:100% auto; }
        .class_tit .soc.on { background:url('../images/event/20260624/soc_on.svg') center no-repeat; background-size:100% auto; }
        .class_tit .sci.on { background:url('../images/event/20260624/sci_on.svg') center no-repeat; background-size:100% auto; }
    .class_area .class_tit a span { display:none; }
    .con02 .swiper-button-prev,
    .con02 .swiper-button-next { width:70px; height:70px; }
        .con02 .swiper-button-prev { left:-10%; background:url('../images/event/20260624/btn_prev.png') no-repeat; background-size:100% auto; }
        .con02 .swiper-button-next { right:-10%; background:url('../images/event/20260624/btn_next.png') no-repeat; background-size:100% auto; }
    .con02 .swiper-button-prev:after,
    .con02 .swiper-button-next:after { display:none; }

.con03 { background:#FFDFE8; }
    .con03 .btn_group { bottom:13%; }
    .con03.current .btn_group a:nth-child(1),
    .con03.current .btn_group a:nth-child(2),
    .con03.current .btn_group a:nth-child(3) { animation: liDominoUp03 0.8s forwards; }
    .con03.current .btn_group a:nth-child(2) { animation-delay: 0.14s; }
    .con03.current .btn_group a:nth-child(3) { animation-delay: 0.28s; }
    @keyframes liDominoUp03 {
        0%, 100% { transform: translateY(0); }
        50%{ transform: translateY(-10%); }
    }
    .con03 .btn_group a:hover { transform:scale(0.99) !important; transition:transform 0.3s ease-in-out !important; }
    

/* *******************
    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; }   

    .tit_area,
    .con01,
    .con02 { background-size:auto 100%; }

    .tit_area .ch { left:-12%; }
    .tit_area .fire { display:none; }
    .tit_area .twinkle01 { left:15%; bottom:25%; }
    .tit_area .twinkle02 {left:17.5%; bottom:24.5%; }

    .con02 .swiper-button-prev,
    .con02 .swiper-button-next { display:none; }

    


}