@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');
@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

body { }

/* common */
img { vertical-align:top;}
.btn_group .btn + .btn { margin-top:1.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:-2%; bottom:-30%; max-width:68px; 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: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; }
    .logo_group .choco { position:relative; max-width:68px; width:6vw; }
    .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:1300px; width:100%; text-align:center; }
.inner .motion img { position:absolute; }

/* banner & nav */
.flot_banner { z-index:10; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; max-width:1200px; width:100%; }
.flot_banner a { padding:0px !important; }
    .flot_banner.fixed { position:fixed; }

.flot_nav { z-index:49; position:fixed; right:2%; top:30%; } /* 26.02.09 미래엔 수정 z-index */
    @media (min-width: 1920px) {
        .flot_nav {
            right: calc(52% - 960px);
            right: min(calc(52% - 960px), 1920px); /* 최대 1920px 제한 */
        }
    }
.flot_nav { position:fixed; width:172px; }
    .flot_nav .ch { position:absolute; top:-110px; left:50%; transform:translateX(-50%); }
    .flot_nav .hand { z-index:3; position:absolute; top:-10px; right:40px; }

    .nav_list { z-index:2; position:relative; overflow:hidden; background:#fff; border:2px solid #553CB4; border-radius:20px; box-sizing:border-box; box-shadow:0 3.995px 0 0 #362287; }
    .nav_list a { position:relative; display:inline-block; width:100%; height:90px; line-height:80px; text-align:center; border-top:1px solid #CAC0D7; }
        .nav_list a:first-child { border-top:0px; }
        .nav_list a img { display:inline-block; vertical-align:middle; }
    .nav_list a.on { background:#DDD4FF; }
.flot_nav .btn_top { display:inline-block; margin-left:25%; width:82px; }
.flot_nav .btn_top img { width:100%;}
    /*.nav_list .btn_top img { display:inline-block; vertical-align:middle; }*/


/* 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_wrap { overflow:hidden; }
.event_wrap .tit { z-index:2; position:relative; }

.img_area .slider_paging { z-index:2; position:absolute; top:0px; left:0px; width:100%; display:flex; max-height:80px; height:6vw; } 
    .img_area:before { content:""; z-index:2; position:absolute; left:50%; transform:translateX(-50%); display:inline-block; max-width:1235px; width:100vw; max-height:140px; height:10.8vw; background:url('../images/event/20260508/con_bot.png') center bottom no-repeat; background-size:auto 100%; }
    .img_area .slider_paging { background:#F3F3F3; }
        .img_area .slider_paging a { flex:1 1 0; width:100%; min-width:0; box-sizing:border-box; }
            .img_area .slider_paging a span { display:none; }
        .img_area .slider_paging a.on { border-top:4px solid #9A80FF; box-sizing:border-box; }

.tit_area {
    background: url('../images/event/20260508/bg_cloud.png') center no-repeat,
                linear-gradient(180deg, #B9F8FF -2.17%, #E4F8FF 55.56%);
}
    .tit_area .flag { z-index:1; top:38.5%; left:22%; max-width:145px; width:11vw; animation:flagUp 1s ease forwards; }
        
.container { position:relative; background:#8FDCFC url('../images/event/20260508/bg_sea.png') center top no-repeat; }
    .tit_txt .ch { position:absolute; bottom:6%; left:17%; max-width:804px; width:63vw; }
    .tit_txt .talk { top:-6.3%; right:23%; max-width:297px; width:20vw; animation: balloonFloat 2.5s ease-in-out infinite; }
    .tit_txt .bok01 { top:-16%; left:-24%; max-width:238px; width:16vw; }
    .tit_txt .bok02 { top:6.7%; left:-14%; max-width:206px; width:14vw; }
        .bok03 { position:absolute; top:4%; right:-2%; max-width:233px; width:16vw; }
        .bok04 { position:absolute; top:7.5%; right:-1.5%; max-width:407px; width:28vw; }
    .tit_txt .obj01 { top:-22%; right:-10%; max-width:241px; width:16vw; }
    .tit_txt .obj02 { top:32.2%; right:2%; max-width:103px; width:7vw; }
    
    .tit_txt .bok01 { animation: float-bok01 4s infinite ease-in-out; }
    .tit_txt .bok02 { animation: float-bok02 3.7s infinite ease-in-out; }
    .bok03          { animation: float-bok03 4.5s infinite ease-in-out; }
    .bok04          { animation: float-bok04 3.9s infinite ease-in-out; }
    .tit_txt .obj01 { animation: float-obj01 5.1s infinite ease-in-out; }
    .tit_txt .obj02 { animation: float-obj02 4.3s infinite ease-in-out; }

    .sec01 .tit { left:-13.5%; top:-1%; max-width:1340px; width:103vw; animation: plane-float-move 5s infinite ease-in-out; }
    .sec01 .pen { left:29%; bottom:6%; max-width:73px; width:5vw; animation: float-obj02 4.3s infinite ease-in-out; }
    .sec01 .video_area { position:absolute; top:15%; left:50%; transform:translateX(-50%); width:75%; }
    .sec01 .video_area img { position:absolute; top:0px; left:0px; cursor:pointer; }
    .sec01 .video_area img,
    .sec01 .video_area video { width:100%; }
    

    .sec02 .ch { right:16%; top:7.2%; max-width:179px; width:14vw; }
        .sec02.current .ch { top:2.2%; transition:top 0.2s ease-in-out; }
    .sec02 .flag { z-index:3; right:-2%; bottom:9.4%; max-width:189px; width:14.5vw; }
    .sec02 .img_area { z-index:3; position:absolute; top:24%; left:50%; transform:translateX(-50%); width:65.5%; }
        .sec02 .img_area:before { display:none; }
        .sec02 .img_area .swiper { overflow:hidden; border-radius:15px; }
        .sec02 .img_area .swiper-pagination { bottom:-9%; }
        .sec02 .img_area .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
        .sec02 .img_area .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { width:10px; height:10px; background:#7855FF; }
        .sec02 .img_area .swiper-pagination-bullet-active { width:35px !important; border-radius:10px !important; }

    .sec03 .ch { left:16%; top:6.8%; max-width:260px; width:20vw; }
        .sec03.current .ch { top:-0.8%; transition:top 0.2s ease-in-out; }
    .sec03 .obj { z-index:5; right:-3%; bottom:-1.6%; max-width:168px; width:12.5vw; }
    .sec03 .img_area { z-index:3; position:absolute; top:20.9%; left:50%; transform:translateX(-50%); width:92.4%; }
        .sec03 .img_area .slider_paging a:nth-child(1) { background:url('../images/event/20260508/con03_01.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(2) { background:url('../images/event/20260508/con03_02.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(3) { background:url('../images/event/20260508/con03_03.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(4) { background:url('../images/event/20260508/con03_04.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(1).on { background:#7855FF url('../images/event/20260508/con03_01_on.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(2).on { background:#7855FF url('../images/event/20260508/con03_02_on.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(3).on { background:#7855FF url('../images/event/20260508/con03_03_on.svg') center no-repeat; }
        .sec03 .img_area .slider_paging a:nth-child(4).on { background:#7855FF url('../images/event/20260508/con03_04_on.svg') center no-repeat; }
    .sec03 .img_area:before { bottom:-16%; }
   
    .sec04 .ch { right:7%; top:7%; max-width:190px; width:15vw; }
        .sec04.current .ch { top:1%; transition:top 0.2s ease-in-out; }
    .sec04 .map { z-index:5; left:2%; bottom:13.4%; max-width:248px; width:19.5vw; }
    .sec04 .obj { z-index:5; right:0%; bottom:13.4%; max-width:123px; width:8.5vw; }
    .sec04 .img_area { z-index:3; position:absolute; top:20%; left:50%; transform:translateX(-50%); width:92.4%; }
        .sec04 .img_area .slider_paging a:nth-child(1) { background:url('../images/event/20260508/con04_01.svg') center no-repeat; }
        .sec04 .img_area .slider_paging a:nth-child(2) { background:url('../images/event/20260508/con04_02.svg') center no-repeat; }
        .sec04 .img_area .slider_paging a:nth-child(3) { background:url('../images/event/20260508/con04_03.svg') center no-repeat; }
        .sec04 .img_area .slider_paging a:nth-child(1).on { background:#7855FF url('../images/event/20260508/con04_01_on.svg') center no-repeat; }
        .sec04 .img_area .slider_paging a:nth-child(2).on { background:#7855FF url('../images/event/20260508/con04_02_on.svg') center no-repeat; }
        .sec04 .img_area .slider_paging a:nth-child(3).on { background:#7855FF url('../images/event/20260508/con04_03_on.svg') center no-repeat; }
    .sec04 .img_area:before { bottom:-14%; }

    .sec05 {
        background-image: url('../images/event/20260508/con05_bg.png'),
                          url('../images/event/20260508/con05_back.png');
        background-position: center top, center top;
        background-repeat:no-repeat, repeat-x;
        background-size:auto 100%, auto 100%;
    }
    .sec05 .talk { bottom:32.5%; right:7.5%; max-width:320px; width:26vw; animation: balloonFloat 2.5s ease-in-out infinite; }
    .sec05 .btn_group { position:absolute; left:7.5%; bottom:22%; display:flex; gap:3%; width:84%; height:4%; }
    .sec05 .btn_group a { position:relative; flex:1 1 0; }
    .sec05 .btn_group a em { display:none; }
    .sec05 .btn_group a span { position:absolute; right:-2%; bottom:-30%; max-width:68px; width:6vw; }
    .sec05 .btn_group a:hover span { animation:moveCursor 2s infinite;}
    .sec05 .btn { bottom:3.5%; max-width:1000px; width:77vw; }
        .sec05 .btn:hover { bottom:4%; transition:bottom 0.3s ease-in-out; }

    /* action */
    @keyframes flagUp {
        from { top:38.5%; }
        to { top:20.5%; }
    }
    @keyframes balloonFloat {
        0% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0); }
    }
    @keyframes float-bok01 {
        0%   { transform: translateY(0px)     rotate(-1deg);}
        25%  { transform: translateY(-7px)   rotate(1deg);}
        50%  { transform: translateY(-15px)   rotate(-2deg);}
        75%  { transform: translateY(-7px)   rotate(1deg);}
        100% { transform: translateY(0px)     rotate(-1deg);}
    }
    @keyframes float-bok02 {
        0%   { transform: translateY(0px)     rotate(2deg);}
        30%  { transform: translateY(-5px)   rotate(-1deg);}
        50%  { transform: translateY(-12px)   rotate(0deg);}
        80%  { transform: translateY(-5px)    rotate(2deg);}
        100% { transform: translateY(0px)     rotate(2deg);}
    }
    @keyframes float-bok03 {
        0%   { transform: translateY(0px)     rotate(-2deg);}
        20%  { transform: translateY(-8px)    rotate(0deg);}
        65%  { transform: translateY(-9px)   rotate(1deg);}
        90%  { transform: translateY(-5px)    rotate(-2deg);}
        100% { transform: translateY(0px)     rotate(-2deg);}
    }
    @keyframes float-bok04 {
        0%   { transform: translateY(0px)     rotate(0deg);}
        40%  { transform: translateY(-6px)   rotate(-2deg);}
        65%  { transform: translateY(-12px)   rotate(0deg);}
        80%  { transform: translateY(-4px)    rotate(2deg);}
        100% { transform: translateY(0px)     rotate(0deg);}
    }
    @keyframes float-obj01 {
        0%   { transform: translateY(0px)     rotate(-3deg);}
        15%  { transform: translateY(-3px)    rotate(0deg);}
        60%  { transform: translateY(-6px)   rotate(2deg);}
        100% { transform: translateY(0px)     rotate(-3deg);}
    }
    @keyframes float-obj02 {
        0%   { transform: translateY(0px)     rotate(2deg);}
        30%  { transform: translateY(-5px)   rotate(-1deg);}
        55%  { transform: translateY(-10px)   rotate(2deg);}
        100% { transform: translateY(0px)     rotate(2deg);}
    }
    @keyframes plane-float-move {
        0%   { transform: translateX(0px) rotate(0deg);}
        25%  { transform: translateX(7px) rotate(1deg);}
        50%  { transform: translateX(13px) rotate(0deg);}
        75%  { transform: translateX(5px) rotate(-1deg);}
        100% { transform: translateX(0px) rotate(0deg);}
    }


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

    .img_area .slider_paging a { background-size:auto 1.8vw !important; background-position:center; }
    .img_area .slider_paging a.on { border-top:2px solid #9A80FF; background-position:center -2px; }

    .tit_area { background-size:180% auto; }
    .container { background-size:262% auto; }

    .sec02 .flag { right:3%; }
    .flot_nav { display:none; }

}

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

    .pc_area { display:none; }
    .mo_area { display:block; }

    .sec02 .flag { right:3%; }
    .sec02 .img_area .swiper { border-radius:7px; }
    .sec02 .img_area .swiper-pagination { bottom:-12%; }
    .sec02 .img_area .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { width:7px; height:7px; }
    .sec02 .img_area .swiper-pagination-bullet-active { width:17px !important; border-radius:7px !important; }

    /* action */
    @keyframes flagUp {
        from { top:19.25%; }
        to { top:10.25%; }
    }
    @keyframes balloonFloat {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0); }
    }
    @keyframes float-bok01 {
        0%   { transform: translateY(0px)     rotate(-0.5deg);}
        25%  { transform: translateY(-7.5px)   rotate(0.5deg);}
        50%  { transform: translateY(-15px)   rotate(-1deg);}
        75%  { transform: translateY(-7.5px)   rotate(0.5deg);}
        100% { transform: translateY(0px)     rotate(-0.5deg);}
    }
    @keyframes float-bok02 {
        0%   { transform: translateY(0px)     rotate(1deg);}
        30%  { transform: translateY(-5px)   rotate(-0.5deg);}
        50%  { transform: translateY(-12.5px)   rotate(0deg);}
        80%  { transform: translateY(-2.5px)    rotate(1deg);}
        100% { transform: translateY(0px)     rotate(1deg);}
    }
    @keyframes float-bok03 {
        0%   { transform: translateY(0px)     rotate(-1deg);}
        20%  { transform: translateY(-4px)    rotate(0deg);}
        65%  { transform: translateY(-9px)   rotate(0.5deg);}
        90%  { transform: translateY(-2.5px)    rotate(-1deg);}
        100% { transform: translateY(0px)     rotate(-1deg);}
    }
    @keyframes float-bok04 {
        0%   { transform: translateY(0px)     rotate(0deg);}
        40%  { transform: translateY(-6.5px)   rotate(-1deg);}
        65%  { transform: translateY(-12.5px)   rotate(0deg);}
        80%  { transform: translateY(-3.5px)    rotate(1deg);}
        100% { transform: translateY(0px)     rotate(0deg);}
    }
    @keyframes float-obj01 {
        0%   { transform: translateY(0px)     rotate(-1.5deg);}
        15%  { transform: translateY(-3px)    rotate(0deg);}
        60%  { transform: translateY(-8.5px)   rotate(1deg);}
        100% { transform: translateY(0px)     rotate(-1.5deg);}
    }
    @keyframes float-obj02 {
        0%   { transform: translateY(0px)     rotate(1deg);}
        30%  { transform: translateY(-5.5px)   rotate(-0.5deg);}
        55%  { transform: translateY(-10px)   rotate(1deg);}
        100% { transform: translateY(0px)     rotate(1deg);}
    }
    @keyframes plane-float-move {
        0%   { transform: translateX(0px) rotate(0deg);}
        25%  { transform: translateX(7.5px) rotate(0.5deg);}
        50%  { transform: translateX(13px) rotate(0deg);}
        75%  { transform: translateX(6.5px) rotate(-0.5deg);}
        100% { transform: translateX(0px) rotate(0deg);}
    }

    
}