@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:relative; display:inline-block; }
    .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);
        }
    }
    .btn span { position:absolute; max-width:44px; width:4vw; bottom:12%; right:8%;  }
*/
.btn_group { position:absolute; left:50%; transform:translateX(-50%); max-width:1216px; width:93.5vw; }
.btn_group .btn { position:static; transform:translateX(0); }
    .btn { position:absolute; left:50%; transform:translateX(-50%); display:inline-block; max-width:1216px; 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:35px; left:50%; max-width:1240px; text-align:right !important; transform:translate(-50%); }
.logo_group div a { display:inline-block; vertical-align:middle; }
    .logo_group .choco { position:relative; max-width:90px; width:18vw; filter:brightness(0) invert(1); text-align:left; }
    .logo_group .miraen { max-width:122px; width:13vw; }
   
.inner { position:relative; margin:0 auto; max-width:1030px; width:100%; }

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

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

/* *******************
    pc 
******************** */
.event_container { position:relative; }

.tit_area,
.event_container > div { text-align:center; }
.event_container > div img { display:inline-block; }

.top_banner { text-align:center; background:#4e2f1a url('../images/event/20250422/bg_banner_top.jpg') center no-repeat; }

.tit_area { position:relative; background:url('../images/event/20250422/bg_tit_pc.jpg') center no-repeat; background-size:cover; }
.tit_area:before { content:""; position:absolute; left:0px; bottom:0px; display:inline-block; width:100%; max-height:245px; height:23vw; background:#FF536E; opacity:0.8; }
.tit_area .tit_con h1 > img { z-index:2; position:relative; }
.tit_area .tit_con h1 .motion img { z-index:1; top:20.5%; right:24%; max-width:114px; width:11vw; }
    .tit_con.action h1 .motion img { top:17.5%; right:21%; transition:all 0.5s; }

.con02,
.con04,
.con06 { background:#ffe3e8; }

.img_group h2 { display:none; }
.img_group ul { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:20px; padding:0 15px; width:100%; box-sizing:border-box; }
.img_group ul li { overflow:hidden; border-radius:20px; border:1px solid #ccc; }

.link_group a { position:absolute; display:inline-block; max-width:222px; width:21.5vw; max-height:58px; height:6vw; }
.link_group a span { display:none; }

.con01 .img_group .con0101 { top:12.7%; }
.con01 .img_group .con0102 { top:43.3%; }

.con02 .tit { position:absolute; top:3.7%; left:50%; transform:translateX(-50%); max-width:376px; width:35vw; animation:bounce_tit 3s ease-in-out infinite; }
.con02 .link_group a:nth-child(1) { top:51.8%; right:25.6%; }
.con02 .link_group a:nth-child(2) { top:51.8%; right:3.4%; }
.con02 .link_group a:nth-child(3) { bottom:5%; left:28%; max-width:450px; width:44vw; }

.con03 .tit { position:absolute; top:6.5%; left:50%; transform:translateX(-50%); max-width:366px; width:35vw; animation:bounce_tit 3s ease-in-out infinite; }
.con03 .tab_box { position:absolute; top:29%; left:0px; padding:0 15px; width:100%; }
    .tab_style { display:flex; margin:0 0 40px; padding:10px; background:#f2f2f2; border-radius:100px; }
    .tab_style a { display:inline-block; flex:1; height:60px; line-height:60px; }
    .tab_style a img { vertical-align:baseline; }
        .tab_style a.on { background:#5A371E; border-radius:100px; }
        .tab_style a.on img { filter:brightness(0) invert(1); }
        
.con05 .tit img:nth-child(1) { position:absolute; top:14.3%; left:50%; transform:translateX(-50%); max-width:210px; width:20vw; animation:bounce_tit 3s ease-in-out infinite; }
.con05 .tit img:nth-child(2) { position:absolute; top:53%; left:50%; transform:translateX(-50%); max-width:133px; width:13vw; animation:bounce_tit 3s ease-in-out infinite; }

.tab_con > div { display:none; }
.tab_con > div#con03_con01 { display:block; }
    .tab_con .pc_list { margin:-30px 0 0 0; display:flex; flex-wrap: wrap; box-sizing:border-box; width:100%; }
    .tab_con .pc_list li { margin:30px 0 0 20px; width:calc(100%/2 - 10px); }
    .tab_con .pc_list li:nth-child(2n+1) { margin-left:0px; }
    .tab_con .pc_list li img { margin-bottom:15px; border-radius:20px; border:1px solid #ccc; }
    .tab_con .pc_list li p { font-family:'NanumSquareRound'; font-size:20px; color:#5A371E; font-weight:500; word-break:keep-all; line-height:1.5; }

.banner { z-index:5; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; width:100%; text-align:center; }
    .banner.fixed { position:fixed; }
.btn_top { z-index:5; display:none; position:fixed; right:0px; bottom:10%; width:68px; }

@keyframes bounce_tit {
    0%, 50%, 100% {
        transform: translate(-50%, 0);
    }
    10%, 30% {
        transform: translate(-50%, -5px);
    }
    20%, 40% {
        transform: translate(-50%, 5px);
    }
}
      
  

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

    .logo_group { padding:0 4vw; top:3vw; }
        .logo_group .logo_miraen { width:50vw; }

    /* basic */
    .pc_area { display:block !important; }
    .mo_area { display:none !important; }
    .pc_area img,
    .pc_area { width:100%; }

    .img_group ul { gap:1vw; padding:0 1vw; }

    .con01 .img_group .con0101 { top:12.5%; }
    .con01 .img_group .con0102 { top:43%; }
    
    .con03 .tab_box { padding:0 1vw; }
        .tab_style { margin:0 1.5vw 4vw; padding:1vw; }
        .tab_style a { height:6vw; line-height:6vw; }
        .tab_style a img { height:2.5vw; }

        .tab_con .pc_list li { margin-top:24px; }
        .tab_con .pc_list li p { font-size:0.57em; }
        
   
}


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

    .logo_group { position:fixed; left:0px; top:0px; padding:2vw; top:0; width:100%; background:#fff; transform:translateX(0); box-shadow:4px 4px 10px rgba(0, 0, 0, 0.25); }
    .logo_group .choco { filter:none; }
    .logo_group .mo_area img { width:auto; max-height:40px; height:10vw; }
  
    /* basic */
    .pc_area { display:none !important; }
    .mo_area { display:block !important; }
    .mo_area img,
    .mo_area { width:100%; }

    /* top banner */
    .top_banner { display:none; }

    /* tit */
    .tit_area { background:url('../images/event/20250422/bg_tit_mo.jpg') center bottom no-repeat; background-size:100% auto; }
    .tit_area:before { display:none; }
    .tit_area .tit_con { padding-top:11vw; }
    .tit_area .tit_con h1 .motion img { top:18.5%; right:11%; width:17vw; }
        .tit_con.action h1 .motion img { top:15.5%; right:7%; transition:all 0.5s; }

    .img_group ul { flex-direction:column; gap:13vw; padding:0 5vw; }
    .img_group ul li { border-radius:10px; }
        .con01 .img_group .con0101 { top:9.5%; }
        .con01 .img_group .con0102 { top:38.9%; gap:21vw; }
        .con01 .img_group li img { width:100%; }

    .con02 .tit { display:none; }
    .con02 .link_group a { max-width:255px; width:39vw; max-height:70px; height:11vw; }
    .con02 .link_group a:nth-child(1) { top:60%; left:9%; right:auto; }
    .con02 .link_group a:nth-child(2) { top:60%; right:9%; }
    .con02 .link_group a:nth-child(3) { bottom:12.1%; left:9%; max-width:82%; width:82vw; }

    .con03 .tit { top:10.5%; max-width:520px; width:80vw; }
    .con03 .tab_box { top:38.5%; padding:0px; }
        .tab_style { margin:0 5.5vw 4vw; padding:0; background:none; gap:2vw; }
        .tab_style a { height:10vw; line-height:10vw; background:#EFEBE9; border-radius:2vw;  }
        .tab_style a img { height:4.3vw; vertical-align:middle;}
            .tab_style a.on { border-radius:2vw; }
                  
    .con05 .tit img:nth-child(1) { top:9.8%; max-width:300px; width:45vw; }
    .con05 .tit img:nth-child(2) { top:51.5%; max-width:181px; width:28vw; }

        .mySwiper { padding-bottom:10vw !important; }
        .mySwiper ul li p { padding:0 10vw; font-family:'NanumSquareRound'; font-size:1.3em; color:#5A371E; font-weight:500; word-break:keep-all; line-height:1.5;}
        .mySwiper ul li img { margin-bottom:15px; border-radius:20px; border:1px solid #ccc; }
        .swiper-pagination-bullet { width:2vw !important; height:2vw !important; }
        .swiper-pagination-bullet-active { background:#5A371E !important; }

        .btn_top  { display:block; }
            

    @keyframes bounce_tit {
        0%, 50%, 100% {
            transform: translate(-50%, 0);
        }
        10%, 30% {
            transform: translate(-50%, -3px);
        }
        20%, 40% {
            transform: translate(-50%, 3px);
        }
    }
  }