@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; }
/*
.btn 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);
        }
    }
    @media all and (max-width:650px) { 
        @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);
            }
        }
    }
    .btn span { position:absolute; right:20%; bottom:-29%; max-width:76px; width:6vw; }

.btn_group { position:absolute; left:50%; transform:translateX(-50%); max-width:1400px; width:93.5vw; }
.btn_group .btn { position:static; transform:translateX(0); }
    .btn { position:absolute; left:50%; transform:translateX(-50%); display:inline-block; max-width:1400px; width:93.5vw; }
    .btn span { position:absolute; bottom:2%; right:13%; max-width:61px; width:5vw; 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);
        }
    }
*/
.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:1240px; 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:1240px; 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:1240px; width:100%; }

.tit_area { background:url('../images/event/20251121/bg_tit.png') center 72% no-repeat,
                       url('../images/event/20251121/bg_tit_back.gif') center top repeat-x,
                       linear-gradient(180deg, #FFF4EA 0%, #FFF1E5 100%); 
          }
    .tit_area .tip { position:absolute; top:9.5%; left:49.5%; transform:translateX(-50%); max-width:380px; width:30vw; animation:tipCon 2s ease-in-out infinite; }
    .tit_area .ch { position:absolute; bottom:5%; right:-6%; max-width:335px; width:28vw; }
    .tit_area .video_area { position:absolute; top:51.9%; left:50%; transform:translateX(-50%); max-width:830px; width:67vw; }
    .tit_area .video_area video,
    .tit_area .video_area img { position:absolute; top:0px; left:0px; width:100%; }
    .tit_area .video_area iframe  { position:absolute; top:0px; left:0px; width:100%; max-height:404px; height:32.5vw; }
.tit_area .left,
.tit_area .right { position:absolute; top:0px; max-width:370px; width:30vw; }
.tit_area .left { left:0px; }
.tit_area .right {  right:0px; }

.con01 { background:url('../images/event/20251121/bg_con01.png') center 66% no-repeat,
                    linear-gradient(180deg, #fff2e6 0%, #fff4ea 100%); }
    .con01 .obj01 { position:absolute; right:7%; top:26%; max-width:192px; width:16vw; animation:sticker02 3s infinite ease-in-out; }
    .con01 .obj02 { position:absolute; left:2%; top:50.5%; max-width:158px; width:13vw; animation:sticker01 3s infinite ease-in-out; }

.con02 { background:url('../images/event/20251121/bg_con02.png') center bottom no-repeat,
                    linear-gradient(to bottom, #e6f4ff 0%, #e6f4ff 92.5%, #fff 92.5%, #fff 100%); }
    .con02 .bg01 { position:absolute; top:29%; left:8%; max-width:110px; width:10vw; animation:sticker01 3s infinite ease-in-out; }
    .con02 .bg02 { position:absolute; bottom:46%; right:3%; max-width:96px; width:8vw; animation:sticker02 3s infinite ease-in-out; }
    .con02 .btn_area { position:absolute; bottom:4%; left:50%; transform:translateX(-50%); max-width:1208px; width:97vw; }

.con03 { background:url('../images/event/20251121/bg_con03.gif') center repeat; }
    .con03 .tip { position:absolute; right:26%; bottom:28.5%; max-width:196px; width:16vw; animation:tipCon02 2s ease-in-out infinite; }
    .con03 .btn_area { position:absolute; bottom:6%; left:50%; transform:translateX(-50%); max-width:1208px; width:97vw; }


@keyframes tipCon {
    0%, 10%, 30%, 50%, 100% {
        transform:translate(-50%, 0);
    }
    20%, 40% {
        transform:translate(-50%, -10%);
    }
}
@keyframes tipCon02 {
    0%, 10%, 30%, 50%, 100% {
        transform:translateY(0);
    }
    20%, 40% {
        transform:translateY(-10%);
    }
}
@keyframes sticker01 {
    0%, 50%, 100% { transform: rotate(0deg); }
    20%, 70% { transform: rotate(-8deg); }
}
@keyframes sticker02 {
    0%, 50%, 100% { transform: rotate(0deg); }
    20%, 70% { transform: rotate(8deg); }
}
/* *******************
    mobile 
******************** */
@media all and (max-width:1240px) { 

    .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 { background-size:110% auto,
                                16% auto,
                                100% 100%; }
    .con01 { background-size:130% auto,
                        100% 100%; }
    .con02 { background-size:150% auto,
                        100% 100%; }
    .con03 { background-size:5% auto,
                        100% 100%; }
   
}


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

}