@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');

body { } 

/* common */
img { vertical-align:top;}
.btn_group { z-index:2; position:absolute; left:50%; transform:translateX(-50%); }
.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);
        }
    }
    @media all and (max-width:980px) {
        @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);
            }
        }
    }
    .cursor span { position:absolute; right:2%; bottom:-17%; max-width:60px; width:4vw; 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:1240px; text-align:right !important; transform:translate(-50%); }
.logo_group div a { display:inline-block; vertical-align:middle; }
.logo_group .logo_choco { display:flex; gap:32px; }
    .logo_group .choco { position:relative; max-width:90px; width:10vw; }
        .logo_group .choco:before { content:""; position:absolute; top:50%; right:-16px; transform:translateY(-50%); display:inline-block; width:1px; max-height:36px; height:5vw; background:#000; }
    .logo_group .award { max-width:215px; width:24vw; }
    .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:122px; width:13vw; }

    
.inner { position:relative; margin:0 auto; max-width:1100px; width:100%; }
.inner .motion img { position:absolute; }

/* *******************
    pc 
******************** */
.event_wrap { position:relative; overflow:hidden; }

.tit { background:#F78897 url('../images/event/20250328/bg_top.png') repeat left bottom; }
    .tit .obj { top:39%; left:-4%; max-width:120px; width:11vw; }
    .tit .ch01 { top:2.5%; left:-37%; max-width:660px; width:60vw; animation:shakeImg01 1s ease-in-out infinite; }
    .tit .ch02 { top:53%; right:-14%; max-width:373px; width:34vw; animation:shakeImg02 1s ease-in-out infinite; }
    .tit .ch { top:40.5%; right:7.8%; max-width:220px; width:20vw; }

.event_wrap .event_con { position:relative; }
    .tab_area { z-index:5; position:absolute; top:-79px; width:100%; left:50%; transform:translateX(-50%); background:#F78897 url('../images/event/20250328/bg_top.png') repeat left bottom; }
    .tab_area .inner { max-width:1000px; width:95%;  }
        .tab_area.fixed { position:fixed; top:0px; }
    .tab_area a { display:inline-block; position:absolute; bottom:-80px; max-width:260px; width:25vw; }
        .tab_area a:nth-child(1) { left:0; }
        .tab_area a:nth-child(2) { left:calc(100%/4); }
        .tab_area a:nth-child(3) { left:calc(100%/2); }
        .tab_area a:nth-child(4) { left:calc(100% - 100%/4); }
    .tab_area a img { width:100%; }
    .tab_area a.on { z-index:2; }

    .con01 { background:#FFD2D9; }

    .con02 { background:#DEEFC0; }

    .con03 { background:#FFE5B1; }

    .con04 { background:#E4D5F9; }

    .con05 { overflow:hidden; position:relative; background:#FFBDC6 url('../images/event/20250328/bg_con05.png') center top repeat; }
        .con05:before { content:""; position:absolute; left:50%; bottom:-8%; transform:translateX(-50%); display:inline-block; width:140%; height:54%; background:#FFDCE1; border-radius:100%; }
        .con05.test01:before { height:30%; }

.event_wrap .btn_group { bottom:3%; max-width:640px; width:60vw; }
.event_wrap .btn_group .point { position:absolute; left:50%; top:-20%; transform:translateX(-50%); display:block; max-width:174px; width:15vw; animation:bounce 1s ease-in-out infinite; }
.event_wrap .con05 .btn_group { bottom:13%; }
.event_wrap .con05 .btn_group a img:first-child { position:absolute; top:0px; left:50%; transform:translateX(-50%); max-width:480px; width:50vw; animation:bounce 1s ease-in-out infinite;}

.event_wrap .banner { z-index:10; position:absolute; left:50%; bottom:0px; transform:translateX(-50%); max-width:993px; width:90vw; }
    .event_wrap .banner.fixed { position:fixed; }

nav { z-index:30; position:fixed; right:2%; top:30%; width:128px; }
@media (min-width: 1920px) {
    nav {
        right: calc(52% - 960px);
        right: min(calc(52% - 960px), 1920px); /* 최대 1920px 제한 */
    }
}
nav .nav_area { overflow:hidden; border:1px solid #5A371E; border-radius:25px; box-sizing:border-box;  }
nav .ch { position:absolute; top:-46px; left:50%; transform:translateX(-50%);}
nav .link { overflow:hidden; background:#fff; }
nav .link a { display:block; height:56px; border-top:1px solid #ded7d2; }
    nav .link a span { display:none; }
    nav .link a:first-child { border-top:0px; }
    /* nav menu */
    nav .link a:nth-child(1) { background:url('../images/event/20250328/nav01.svg') center no-repeat; }
    nav .link a:nth-child(2) { background:url('../images/event/20250328/nav02.svg') center no-repeat; }
    nav .link a:nth-child(3) { background:url('../images/event/20250328/nav03.svg') center no-repeat; }
    nav .link a:nth-child(4) { background:url('../images/event/20250328/nav04.svg') center no-repeat; }
    nav .link a:nth-child(5) { background:url('../images/event/20250328/nav05.svg') center no-repeat; }
    nav .link a:nth-child(1).on { background:#5A371E url('../images/event/20250328/nav01_on.svg') center no-repeat; }
    nav .link a:nth-child(2).on { background:#5A371E url('../images/event/20250328/nav02_on.svg') center no-repeat; }
    nav .link a:nth-child(3).on { background:#5A371E url('../images/event/20250328/nav03_on.svg') center no-repeat; }
    nav .link a:nth-child(4).on { background:#5A371E url('../images/event/20250328/nav04_on.svg') center no-repeat; }
    nav .link a:nth-child(5).on { background:#5A371E url('../images/event/20250328/nav05_on.svg') center no-repeat; }
nav .btn_top { position:relative; display:block; padding-left:10px; height:40px; text-align:center; background:#ded7d2; box-sizing:border-box; }
nav .btn_top img { position:absolute; top:50%; left:50%; transform:translate(-45%, -50%); }

/* motion */
@keyframes shakeImg01 {
    0%, 90%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(1deg); }
    60% { transform: rotate(-1deg); }
  }
@keyframes shakeImg02 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }
@keyframes bounce {
    0%, 100% {
      transform: translate(-50%, 0);
    }
    50% {
      transform: translate(-50%, -15%);
    }
}


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

    .logo_group { padding:0 4vw; top:3.5vw; }
    .logo_group .logo_choco { gap:2.5vw; }
        .logo_group .choco:before { right:-1.5vw; }
    .logo_group .login { margin-right:5px; padding:1vw 2vw 0.5vw; font-size:0.5rem; border-width:1px; }
    .logo_group .logo_miraen { width:50vw; }

    .tit,
    .tab_area { background-size:150% auto; }
    .con05 { background-size:170% auto; }

    

    /* motion */
    @keyframes cloud01 {
        0% {
        transform: translateX(0px);
        }
        50% {
        transform: translateX(20px);
        }
        100% {
        transform: translateX(0px);
        }
    }
    @keyframes cloud02 {
        0% {
        transform: translateX(0px);
        }
        50% {
        transform: translateX(-20px);
        }
        100% {
        transform: translateX(0px);
        }
    }
    @keyframes bounceBubble {
        0%, 100% {
        transform: translateY(0);
        }
        50% {
        transform: translateY(-5px);
        }
    }
    @keyframes fadeUp {
        0% {
        opacity: 0;
        transform: translateY(15px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }

}


@media all and (max-width:1070px) { 
    .tab_area,
    .tab_area a { top:-0.7%; }

    nav { display:none; }
}