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

/* common */
img { vertical-align:top;}

.btn { z-index:10; position:absolute; display:inline-block; left:50%; transform:translateX(-50%); max-width:990px; width:79vw; }
.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:7vw; }
    .logo_group .login { margin-right:10px; 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; }
   
   
.inner { position:relative; margin:0 auto; max-width:1280px; width:100%; }

/* motion */
.motion img { position:absolute; }

.pc_area { display:inline-block !important; }
.mo_area { display:none !important; }

/* *******************
    pc 
******************** */
.event_wrap { overflow:hidden; width:100%; }
.event_container div { text-align:center; }
.event_container div > img { margin:0 auto; max-width:1280px; width:100%; }

.slider { position:absolute; left:50%; transform:translateX(-50%); }
.tab_style { margin:0 auto 25px; padding:10px; display:flex; justify-self:center; gap:17px;width:1085px; border:2px solid #ffc3cd; box-shadow:0 4px 0 0 #FFD6DF; border-radius:50px; background:#fff; }
    .tab_style li.on { position:relative; background:#FF879B url('../images/event/20251107/bg_on.svg') 3% 1% no-repeat; border-radius:50px; }
    .tab_style li.on img { filter:brightness(0) invert(1); }
.con_style { position:relative; padding:40px 60px; border:2px solid #ffc3cd; box-shadow:0 4px 0 0 #FFD6DF; border-radius:35px; margin:0 auto; width:1085px; background:#fff; }
.con_style .tab_con { overflow:hidden; }
.con_style .swiper-button-next, 
.con_style .swiper-button-prev { width:70px; height:76px; }
.con_style .swiper-button-next { right:-90px; background:url('../images/event/20251107/btn_on.png') no-repeat; background-size:100% auto; transform:scaleX(-1); }
.con_style .swiper-button-prev { left:-90px; background:url('../images/event/20251107/btn_on.png') no-repeat; background-size:100% auto; }
    .con_style .swiper-button-next:after, 
    .con_style .swiper-button-prev:after { display:none; }
    .con_style .swiper-button-next.swiper-button-disabled { opacity:1; background:url('../images/event/20251107/btn.png') no-repeat; background-size:100% auto; }
    .con_style .swiper-button-prev.swiper-button-disabled { opacity:1; background:url('../images/event/20251107/btn.png') no-repeat; background-size:100% auto; }

.tit_area { position:relative; background:#07010f url('../images/event/20251107/bg_tit_off.png') center no-repeat; }
        .tit_area:before { content:""; opacity:0; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#07010f url('../images/event/20251107/bg_tit.png') center no-repeat;  }
        .tit_area.action:before { opacity:1; transition:all 1s ease-in-out; }
    .tit_area:after { content:""; position:absolute; top:-90px; left:50%; transform:translateX(-50%); display:block; width:100%; height:284px; background:url('../images/event/20251107/bg_tit_top.png') center bottom no-repeat; background-size:auto 100%; }
    .tit_area > img { z-index:2; position:relative; max-width:1280px; width:100%; }
    .tit_area .motion img { right:-3%; bottom:28%; max-width:320px; width:25vw; animation:floatUpDown 3s ease-in-out infinite; }
    @keyframes floatUpDown {
        0%, 50%, 100% {
            transform: translateY(0);
        }
        25%, 75% {
            transform: translateY(5%);
        }
    }

    .tit_area .txt { position:absolute; top:39.5%; left:50%; transform:translateX(-50%); display:block; width:710px; height:132px; background:url('../images/event/20251107/tit_txt.png') center no-repeat; background-size:100% auto; }
        .tit_area.action .txt { opacity:1; transition:all 1s ease-in-out;background:url('../images/event/20251107/tit_txt_on.png') center no-repeat; background-size:100% auto; }
    .tit_area a { position:absolute; right:13%; top:22%; max-width:108px; width:9vw; animation:clicky 2s infinite; }
    @keyframes clicky {
        0%, 20%, 30%, 70%, 90%, 100% {
            transform: translateY(0); /* 원래 위치 */
        }
        10%, 80% {
            transform: translateY(-5px); /* 위로 살짝 이동 */
        }
    }
    @keyframes clicky50 {
        0%, 20%, 30%, 70%, 90%, 100% {
            transform: translate(-50%, 0); /* 원래 위치 */
        }
        10%, 80% {
            transform: translate(-50%, -5px); /* 위로 살짝 이동 */
        }
    }

.con00 { background:#EBF2FF; }
    .con00 .video_area { position:absolute; top:37%; left:50%; transform:translateX(-50%); max-width:1080px; width:85vw; }
    .con00 .video_area video { position:absolute; top:0px; left:0px; width:100%; }

.con01 { position:relative; background:#FFE8F0; }
    .con01 .slider { top:42%;  }

.con02 { position:relative; background:#FFDBE8; }
    .con02 .slider { top:24%;  }

.con03 { position:relative; background:#FFE8F0; }
    .con03 .slider { top:20.5%; }
    .con03 .btn_group { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); max-width:770px; width:65vw; }
    .con03 .btn_group span { position:absolute; left:50%; top:-30%; transform:translateX(-50%); max-width:405px; width:40vw; animation:clicky50 2s infinite; }

.con04 { position:relative; background:#EBF2FF url('../images/event/20251107/bg_con04.png') center no-repeat; }

.con05 { position:relative;
         background:
            url('../images/event/20251107/bg_con05_top.gif') center top repeat-x,
            url('../images/event/20251107/bg_con05.gif') center top repeat-x,
            #CBE2FF;
        }
    .con05 .inner > img { z-index:2; position:relative; }
    .con05 .con05_re { position:absolute; top:27%; left:50%; transform:translateX(-50%); max-width:1070px; width:85%; }
    .con05 .con05_re li { opacity:0; margin-top:2.5%; max-height:176px; height:14vw; text-align:right; transform:translateY(-10%); }
        .con05 .con05_re li:nth-child(1) { text-align:left; }
        .con05 .con05_re li:nth-child(2) { margin-top:-13.5%; max-height:340px; height:27vw; }
        .con05 .con05_re li:nth-child(3) { text-align:left; margin-left:37px; }
    .con05 .con05_re li img { width:auto; height:100%; }
    .con05.current .con05_re li { opacity:1; transform:translateY(0%); transition:all 0.5s ease-in-out; }
        .con05.current .con05_re li:nth-child(1) { transition-delay:0; }
        .con05.current .con05_re li:nth-child(2) { transition-delay:0.3s; }
        .con05.current .con05_re li:nth-child(3) { transition-delay:0.6s; }
        .con05.current .con05_re li:nth-child(4) { transition-delay:0.9s; }
    .con05 .ssaksu { top:-2%; left:12.5%; max-width:302px; width:25vw; animation:floatUpDown 3s ease-in-out infinite; }
    .con05 .gpink { top:2.5%; right:10.5%; max-width:294px; width:24vw; animation:floatUpDown 3.5s ease-in-out infinite; }

.con06 { position:relative; background:#D6CCFF url('../images/event/20251107/bg_con06.gif') center no-repeat; }
    .con06 > img { z-index:2; position:relative; margin-top:-50px !important; }
    .con06 .btn { bottom:5.5%; max-width:770px; width:60vw; animation:btnUpDown 2s ease-in-out infinite; }
    @keyframes btnUpDown {
        0%, 50%, 100% {
            transform: translate(-50%, 0);
        }
        25%, 75% {
            transform: translate(-50%, 3%);
        }
    }


/* *******************
    mobile 
******************** */
@media all and (max-width:1280px) { 

    .logo_group { padding:0 4vw; top:3.5vw; }
    .logo_group div { gap:2vw; }
    .logo_group .login { margin-right:5px; padding:1vw 2vw; font-size:0.5rem; border-width:1px; }

    .tit_area,
    .tit_area.action:before,
    .con04 { background-size:150% auto; }
    .con05 { background-size:5% auto, 150% auto; }
    .tit_area:after { top:-2vw; height:12vw; }
    .tit_area .motion img { right:1%; }
    .tit_area .txt { width:55vw; height:11vw; }

    .tab_style,
    .con_style { border-width:1px; box-shadow:0 2px 0 0 #FFD6DF; }
    .tab_style { gap:0; margin-bottom:1.5vw; padding:0.6vw; width:85vw; }
    .tab_style li.on { background-size:3.5vw auto; }
    .con_style { padding:3vw 4vw; width:85vw; border-radius:2vw; }
    .con_style .swiper-button-next, 
    .con_style .swiper-button-prev { width:5vw; height:6vw; }
    .con_style .swiper-button-next { right:-7vw; }
    .con_style .swiper-button-prev { left:-7vw; } 
    
    .con05 .con05_re li:nth-child(3) { margin-left:2.5vw; }

    .con06 > img { margin-top:-5% !important; }


   
}


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

}