@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%); width:100%; text-align:center; }
.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);
        }
    }
    .cursor span { position:absolute; right:-3%; bottom:-17%; max-width:68px; width:3.5vw; animation:moveCursor 2s infinite;}

.logo_group { z-index:15; position:absolute; padding:0 20px; width:100%; top:3%; left:50%; max-width:1250px; text-align:right !important; transform:translate(-50%); }
.logo_group a { display:inline-block; max-width:96px; width:8vw; }
.logo_group .choco { float:left; }
.logo_group .choco a { position:relative; max-width:75px; margin-right:18px; width:6vw; }
.logo_group .choco a:after { content:""; position:absolute; top:50%; right:-16px; transform:translateY(-50%); display:inline-block; width:1px; height:36px; background:#836A97; }
.logo_group .choco a + img { max-width:215px; width:12vw; }
    
.inner { position:relative; margin:0 auto; max-width:1250px; width:100%; }
.inner .motion img { position:absolute; }

/* *******************
    pc 
******************** */
.event_wrap { position:relative; overflow:hidden; width:100%; text-align:center; background:#FFF5B6 url('../images/event/20250224/bg_top.gif') center top repeat-x; }
.event_wrap .bg_area { background:url('../images/event/20250224/bg_tit.jpg') center top no-repeat; }

.event_wrap .tit_area { }
    .tit_area .tit_txt { top:23%; left:31%; max-width:367px; width:30vw; animation:bounce 3s infinite ease-in-out; }
    .tit_area .ch01 { top:65%; left:52%; max-width:290px; width:23vw;}
    .tit_area .ch02 { z-index:2; top:20%; right:14%; max-width:98px; width:7vw; }
    .tit_area .tit_btn { top:21%; right:4%; max-width:344px; width:28vw; }
    .tit_area .tit_btn:hover { animation:shake 4s infinite ease-in-out; }

    @keyframes bounce {
        0%, 20%, 40% { transform: translateY(0); }  /* 시작과 끝에서 원래 위치 */
        10%, 30% { transform: translateY(-15px); }  /* 위로 튀어오름 */
        50%, 100% { transform: translateY(0); } /* 멈춘 상태 유지 */
    }
    @keyframes shake {
        0%, 20% { transform: rotate(0deg); }  /* 원래 위치 */
        5%, 15% { transform: rotate(-5deg); } /* 왼쪽으로 흔들 */
        10% { transform: rotate(5deg); }  /* 오른쪽으로 흔들 */
        50%, 100% { transform: rotate(0deg); } /* 멈춘 상태 */
    } 

.event_wrap .content {}
    .content .ch01 { bottom:15.5%; right:21%; max-width:323px; width:25vw; }
    .content .ch02 { bottom:16%; left:29.5%; max-width:197px; width:16vw; }

.event_wrap .tab_conainer .tab_style { overflow:hidden; display:flex; justify-self:center; }
    .tab_style a { position:relative; display:inline-block; max-width:400px; width:40vw; }
    .tab_style a.on:before { content:""; position:absolute; top:7%; left:2%; max-width:40px; width:4vw; height:24px; background:url('../images/event/20250224/tab_on.png') left top no-repeat; background-size:100% auto; }

    .tab_conainer .tab_con { display:none; }
    .tab_conainer #con01 { display:block; background:#E5DFFF url('../images/event/20250224/tab01_bg_top.gif') center top repeat-x; }
        #con01 .top { background:url('../images/event/20250224/tab01_bg_tit.png') center no-repeat; }
        #con01 .last { background:#C8BAFF; }
    .tab_conainer #con02 { background:#FFDFE3 url('../images/event/20250224/tab02_bg_top.gif') center top repeat-x; }
        #con02 .top { background:url('../images/event/20250224/tab02_bg_tit.png') center no-repeat; }
        #con02 .last { background:#FFC4CB; }
        
        .tab_con .tab_arrow { position:relative; }
        .tab_con .tab_arrow > img { z-index:2; position:relative; }
        .tab_con .tab_arrow:before { content:""; position:absolute; left:-25%; bottom:26%; display:inline-block; width:1756px; height:180px; }
            .tab_con#con01 .tab_arrow:before { background:url('../images/event/20250224/tab01_arrow.png') center no-repeat; }
            .tab_con#con02 .tab_arrow:before { background:url('../images/event/20250224/tab02_arrow.png') center no-repeat; }
    
        .tab_conainer .tab_con p:nth-child(4) { position:relative; }
    .tab_conainer .tab_con p:nth-child(4) .btn { position:absolute; max-width:110px; width:9vw; }
        .tab_con#con01 p:nth-child(4) .btn { right:8.5%; bottom:12.5%; }
        .tab_con#con02 p:nth-child(4) .btn { right:2%; bottom:9%; }

.event_wrap .bot_area { background:#FFF5B6 url('../images/event/20250224/bg_bot.gif') center no-repeat; }
    .bot_area .btn_group { bottom:14%; padding:0 2%; }
    .bot_area .btn_group a { display:inline-block; }
    .bot_area .btn_group a + a { margin-top:3.2%; }
    .bot_area .mojimoji { position:absolute; top:9%; left:54%; max-width:685px; width:58vw; transform:translate(-50%, 0); transition:all 0.5s; }
    .bot_area.action_on .mojimoji { transform:translate(-50%, 0) !important; }
    .bot_area.action .mojimoji { transform:translate(-50%, 40%); }

.event_wrap .banner { z-index:11; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); max-width:1200px; width:100%; }
    .event_wrap .banner.fixed { position:fixed; }
    
/* *******************
    mobile  
******************** */
@media all and (max-width:1250px) { 
    .tab_conainer #con01 { background-size:2.1% auto; }
    .tab_conainer #con02 { background-size:1.3% auto; }
    .event_wrap { background-image:none; }
    .event_wrap .bg_area,
    .event_wrap .tit_area,
    #con01 .top,
    #con02 .top { background-size:160% auto; }

    .tab_con .tab_arrow:before { display:none; }

}

@media all and (max-width:750px) { 
    .logo_group { top:2%; }
    .logo_group .choco a { margin-right:1vw; }
    .logo_group .choco a:after { right:-1.3vw; height:3vw; }

    .cursor span { animation:moveCursor 2s infinite; }
    @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);
        }
    }
    
    @keyframes bounce {
        0%, 20%, 40% { transform: translateY(0); }  /* 시작과 끝에서 원래 위치 */
        10%, 30% { transform: translateY(-7px); }  /* 위로 튀어오름 */
        50%, 100% { transform: translateY(0); } /* 멈춘 상태 유지 */
    }

}