@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: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:8vw; text-align:left; }
.logo_group .login { 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:1200px; width:100%; }

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

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

/* *******************
    pc
******************** */
.event_wrap { overflow:hidden; position:relative;
    background-color:#FFECBD;
    background-image:url('../images/event/20251024/bg_left.png'),
                     url('../images/event/20251024/bg_right.png');
    background-position: left 26%, right 62%;
    background-repeat: no-repeat, no-repeat;
}
.event_container { position:relative; z-index:1; margin:130px auto 120px; padding:clamp(5vw, 5vw, 88px) clamp(4vw, 4vw, 78px) clamp(5vw, 5vw, 54px);
                   max-width:1200px; width:92%; background:#fff; border-radius:8px;
                }
    .event_container:before { content:""; position:absolute; top:0px; right:0px; display:inline-block; width:3vw; height:3vw; max-width:57px; max-height:54px; background:url('../images/event/20251024/paper.png') no-repeat; background-size:100%; }
    .event_container:after { content:""; z-index:1; position:absolute; top:12.5%; right:0px; display:inline-block; width:10vw; height:10vw; background:#fff; }
.event_container .txt { z-index:5; position:absolute; top:44px; left:60px; max-width:148px; width:10vw; }
.event_container .con_area { position:relative; }
.event_container .con_area:before { content:""; position:absolute; top:0px; left:-4vw; padding:0 4vw; width:100%; height:100px; background:url('../images/event/20251024/bg_con.png') center top no-repeat; background-size:100% auto; }

    .event_container h1,
    .event_container .con01,
    .event_container .con02,
    .event_container .con03 { z-index:2; position:relative; }

        .event_container h1 .grade { top:6%; right:0%; max-width:185px; width:15vw; animation:grade 1.2s infinite ease-in-out; }
        @keyframes grade {
            0%   { transform: scale(1); }
            40%  { transform: scale(0.96); }
            60%  { transform: scale(1.05); }
            80%  { transform: scale(0.98); }
            100% { transform: scale(1); }
        }
        .event_container .label { position:absolute; right:-5%; max-width:120px; width:10vw; }
            .event_container .label.pink { z-index:5; top:13%; }
            .event_container .label.gray { z-index:-1; top:14.5%; }


        .con01 .gpink { position:absolute; top:5%; left:6%; max-width:152px; width:12vw; animation:sticker01 2s infinite ease-in-out; }
        .con01 .pencil { position:absolute; top:24%; right:-3%; max-width:157px; width:12vw; animation:sticker02 2s infinite; }
        @keyframes sticker01 {
            0%, 50%, 100% { transform: rotate(0deg); }
            20%, 70% { transform: rotate(-8deg); }
        }
        @keyframes sticker02 {
            0%   { transform: rotate(0deg); }
            20%  { transform: rotate(-8deg); }
            35%  { transform: rotate(0deg); }
            55%  { transform: rotate(5deg); }
            100% { transform: rotate(0deg); }
        }


        .con02 .answer { position:absolute; top:41%; left:50%; transform:translateX(-50%); width:100%; display:flex; justify-content:space-between; }
            .con02 .badugi { z-index:2; position:absolute; top:0; left:10%; max-width:144px; width:11vw; transform:translateY(-87%); }
        .con02 .answer a { position:relative; display:inline-block; max-width:244px; width:20vw; }
            .con02 .answer a:hover:before { content:""; position:absolute; top:0px; left:0px; display:inline-block; width:100%; height:100%; }
            .con02 .answer a.grade3:hover:before { background:url('../images/event/20251024/grade3_on.png') no-repeat; background-size:100% auto; }
            .con02 .answer a.grade4:hover:before { background:url('../images/event/20251024/grade4_on.png') no-repeat; background-size:100% auto; }
            .con02 .answer a.grade5:hover:before { background:url('../images/event/20251024/grade5_on.png') no-repeat; background-size:100% auto; }
            .con02 .answer a.grade6:hover:before { background:url('../images/event/20251024/grade6_on.png') no-repeat; background-size:100% auto; }

        .con03 .perfect { top:-2.5%; left:-1%; max-width:245px; width:19vw; animation:sticker01 2s infinite ease-in-out; }
        .con03 .haru { top:10%; right:-4vw; max-width:200px; width:15vw; }
        .con03 .btn { bottom:0%; left:50%; transform:translateX(-50%); width:72%; }
        .con03 .star01 { top:-4%; left:17%; max-width:51px; width:4vw; animation:grade 1.2s infinite ease-in-out; }
        .con03 .star02 { bottom:-21%; right:25%; max-width:42px; width:3vw; animation:grade 1.5s infinite ease-in-out; }
        .con03 .star03 { top:-30%; right:17%; max-width:33px; width:3vw; animation:grade 2s infinite ease-in-out; }

        .bg_haru { z-index:-1; left:0px; top:30%; transform:translateX(-80%); max-width:168px; width:11vw; }
        .bg_ssaksu { right:0px; bottom:30%; transform:translateX(80%); max-width:133px; width:8vw; }
            .ch:before,
            .ch:after { content:""; z-index:1; position:absolute; display:inline-block; width:10vw; height:10vw; background:#fff; }
            .ch:before { left:0px; top:30%; }
            .ch:after { right:0px; bottom:30%; }

        .hand { z-index:5; position:absolute; top:50%; right:0px; max-width:448px; width:30vw; }
        .hand .pen { z-index:-1; position:absolute; animation:pen 3s infinite ease-in-out; }
        @keyframes pen {
            0%   { transform: rotate(0deg);}
            20%  { transform: rotate(-5deg);}
            50%  { transform: rotate(5deg);}
            70%  { transform: rotate(-5deg);}
            100% { transform: rotate(0deg);}
          }


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

    /* :: 로그인 부분 가이드 :: */
    .logo_group { padding:0 4vw; top:3vw; }
    .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; }
    .logo_group .login { margin-right:5px; padding:1vw 2vw; font-size:0.5rem; border-width:1px; }
    /* :: 로그인 부분 가이드 :: */

    .event_wrap { background-size:24% auto; }
    .event_container { margin:12vw auto 7vw; }
    .event_container .txt { top:3vw; left:4vw; }

    .hand { right:-5%; }

}


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

}

.modal-bg {display: none;width:100%;height:100%;position:fixed;top:0;left:0;right:0;background: rgba(0, 0, 0, 0.6);z-index:9;}
.modal-wrap {display: none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); width: 17.5rem;background:#fff;z-index:99; text-align: center;border-radius: 20px; box-shadow: unset;
  color: #111111; padding: 2.304rem 1.92rem 1.536rem;
}
.modal-wrap h1 {
  font-size: .896rem;
  line-height: 1.28rem;
  font-weight: 800;
  text-align: center;
}
.modal-wrap .modal-close {
  position: absolute;
  top: .768rem;
  right: .704rem;
  width: 1.408rem;
  height: 1.408rem;
  min-width: 1.408rem;
  min-height: 1.408rem;
  padding: 0;
  background: #111111 url('../images/event/240524/btn-pop-close.svg') no-repeat center center;
  background-size: 1.152rem;
  border-radius: 50%;
  transition: all .3s;
  cursor: pointer;
  font-size: 0;
}
.modal-wrap .modal-btn {
  margin-top: 1.536rem;
  width: 100%;
  background-color: #5a371d;
  border-bottom: .25rem solid rgba(0, 0, 0, .2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  border-radius: .5rem;
  height: 2.56rem;
  font-size: .896rem;
  color: #fff;
}