@charset "UTF-8";

/* 데스크탑 영역 */
@import url('https://fonts.cdnfonts.com/css/nanumsquare-neo');
.event240411-wrap {overflow: hidden; font-family: 'NanumSquare Neo'; letter-spacing: -1px; background-color: #F2FFE6;}
section {position: relative;}
article {position: relative; max-width: 100%; margin: auto;}
article img {width: 100%;}

/* 데스크탑 영역 */
@media all and (min-width: 768px) {
    .event240411-wrap {padding-bottom: calc((100vw / 1920) * 140);}
    section.cont01 .link-choco {position: absolute; z-index: 20; left: calc((100vw / 1920) * 362); top: calc((100vw / 1920) * 65); width: calc((100vw / 1920) * 75); height: calc((100vw / 1920) * 45);}
    section.cont01 .link-choco img {width: 100%; height: 100%;}
    section.cont01 .link-mirean {position: absolute; z-index: 20; right: calc((100vw / 1920) * 360); top: calc((100vw / 1920) * 69); width: calc((100vw / 1920) * 140); height: calc((100vw / 1920) * 37);}
    section.cont01 .link-mirean img {width: 100%; height: 100%;}
    section.cont01 .cont-area {position: absolute; left: 50%; top: calc((100vw / 1920) * 237); transform: translateX(-50%); width: calc((100vw / 1920) * 628); height: calc((100vw / 1920) * 800);}
    section.cont01 .cont-area .img-01 {position:absolute; z-index:1; left: 50%; bottom: 100%; transform: translate(-50%, calc((100vw / 1920) * 263)); width:calc((100vw / 1920) * 712); height: calc((100vw / 1920) * 278); background: url('../images/event/240411/pc/article_01_img_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .img-02 {position:absolute; z-index:1; left: calc((100vw / 1920) * -646); top: calc((100vw / 1920) * -232); width:640px; height: 404px; transform-origin: left top; background: url('../images/event/240411/pc/article_01_ani_01.png') no-repeat 0 0 / 640px auto;}
    section.cont01 .cont-area .img-03 {position:absolute; z-index:1; left: calc((100vw / 1920) * -6); top: calc((100vw / 1920) * -232); width:1280px; height: 366px; transform-origin: left top; background: url('../images/event/240411/pc/article_01_ani_02.png') no-repeat 0 0 / 1280px auto;}
    section.cont01 .cont-area .tit-01 {position:absolute; z-index:1; left: 50%; bottom: 100%; transform: translate(-50%, calc((100vw / 1920) * -68)); width:calc((100vw / 1920) * 397); height: calc((100vw / 1920) * 103); background: url('../images/event/240411/pc/article_01_tit_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .tit-02 {width:calc((100vw / 1920) * 628); height: calc((100vw / 1920) * 800); background: url('../images/event/240411/pc/article_01_tit_02.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-01 {position: absolute; z-index:2; top: calc((100vw / 1920) * 380); left: calc((100vw / 1920) * -240); width:calc((100vw / 1920) * 365); height: calc((100vw / 1920) * 182); background: url('../images/event/240411/pc/article_01_txt_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-02 {position: absolute; z-index:2; top: calc((100vw / 1920) * 590); left: calc((100vw / 1920) * -190); width:calc((100vw / 1920) * 399); height: calc((100vw / 1920) * 260); background: url('../images/event/240411/pc/article_01_txt_02.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-03 {position: absolute; z-index:2; top: calc((100vw / 1920) * 165); right: calc((100vw / 1920) * -283); width:calc((100vw / 1920) * 451); height: calc((100vw / 1920) * 216); background: url('../images/event/240411/pc/article_01_txt_03.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-04 {position: absolute; z-index:2; top: calc((100vw / 1920) * 407); right: calc((100vw / 1920) * -239); width:calc((100vw / 1920) * 335); height: calc((100vw / 1920) * 216); background: url('../images/event/240411/pc/article_01_txt_04.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-05 {position: absolute; z-index:2; top: calc((100vw / 1920) * 620); right: calc((100vw / 1920) * -253); width:calc((100vw / 1920) * 442); height: calc((100vw / 1920) * 225); background: url('../images/event/240411/pc/article_01_txt_05.png') no-repeat center center / contain;}
    /* section.cont02 {position:relative; z-index:200; height: calc((100vw / 1920) * 140);}
    section.cont02.fixed article {position: fixed; bottom: 0; left: 0; width: 100%;} */
    section.cont02 {position: fixed; bottom: 0; left: 0; width: 100%; z-index:200;}
    section.cont02 .link {display: block;}
    section.cont02 .link img {vertical-align: top;}
    section.cont05 .link {display: block; position: absolute; left: 50%; bottom: 5.3%; padding-top: 9%; width: calc((100vw / 1920) * 1200); transform: translateX(-50%); background-color: rgba(0,0,0,0);}
}

/* 모바일 영역 */
@media all and (max-width: 767px) {
    .event240411-wrap {padding-bottom: calc((100vw / 360) * 140);}
    section.cont01 .link-choco {position: absolute; left: calc((100vw / 360) * 20); top: calc((100vw / 360) * 20); width: calc((100vw / 360) * 53); height: calc((100vw / 360) * 32);}
    section.cont01 .link-choco img {width: 100%; height: 100%;}
    section.cont01 .link-mirean {position: absolute; right: calc((100vw / 360) * 20); top: calc((100vw / 360) * 23); width: calc((100vw / 360) * 96); height: calc((100vw / 360) * 26);}
    section.cont01 .link-mirean img {width: 100%; height: 100%;}
    section.cont01 .cont-area {position: absolute; left: 50%; top: 0; transform: translate(-50%, calc((100vw / 360) * 252));}
    section.cont01 .cont-area .img-01 {position:absolute; z-index:1; left: 50%; bottom: 100%; transform: translate(-50%, calc((100vw / 360) * 115)); width:calc((100vw / 360) * (973 / 3)); height: calc((100vw / 360) * (291 / 3)); background: url('../images/event/240411/mo/article_01_img_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .img-02 {display: none;}
    section.cont01 .cont-area .img-03 {display: none;}
    section.cont01 .cont-area .tit-01 {position:absolute; z-index:1; left: 50%; bottom: 100%; transform: translate(-50%, calc((100vw / 360) * -107)); width:calc((100vw / 360) * (867 / 3)); height: calc((100vw / 360) * (186 / 3)); background: url('../images/event/240411/mo/article_01_tit_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .tit-02 {width:calc((100vw / 360) * (762 / 3)); height: calc((100vw / 360) * (1032 / 3)); background: url('../images/event/240411/mo/article_01_tit_02.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-01 {position: absolute; z-index:1; top: calc((100vw / 360) * -48); left: calc((100vw / 360) * -24); width:calc((100vw / 360) * (365 / 3)); height: calc((100vw / 360) * (209 / 3)); background: url('../images/event/240411/mo/article_01_txt_01.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-02 {position: absolute; z-index:1; top: calc((100vw / 360) * -74); right: calc((100vw / 360) * -42); width:calc((100vw / 360) * (588 / 3)); height: calc((100vw / 360) * (321 / 3)); background: url('../images/event/240411/mo/article_01_txt_02.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-03 {position: absolute; z-index:1; bottom: calc((100vw / 360) * -80); left: calc((100vw / 360) * -30); width:calc((100vw / 360) * (459 / 3)); height: calc((100vw / 360) * (408 / 3)); background: url('../images/event/240411/mo/article_01_txt_03.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-04 {position: absolute; z-index:1; bottom: calc((100vw / 360) * -19); right: calc((100vw / 360) * -35); width:calc((100vw / 360) * (420 / 3)); height: calc((100vw / 360) * (219 / 3)); background: url('../images/event/240411/mo/article_01_txt_04.png') no-repeat center center / contain;}
    section.cont01 .cont-area .txt-05 {position: absolute; z-index:1; bottom: calc((100vw / 360) * -99); right: calc((100vw / 360) * -42); width:calc((100vw / 360) * (567 / 3)); height: calc((100vw / 360) * (305 / 3)); background: url('../images/event/240411/mo/article_01_txt_05.png') no-repeat center center / contain;}
    /* section.cont02 {position:relative; z-index:200; height: calc((100vw / 360) * 140);}
    section.cont02.fixed article {position: fixed; bottom: 0; left: 0; width: 100%;} */
    section.cont02 {position: fixed; bottom: 0; left: 0; width: 100%; z-index:200;}
    section.cont02 .link {display: block;}
    section.cont02 .link img {vertical-align: top;}
    section.cont05 .link {display: block; position: absolute; left: 50%; bottom: 1.95%; padding-top: 14.5%; width: calc((100vw / 360) * 320); transform: translateX(-50%); background-color: rgba(0,0,0,0);}
}

/* Animationa Section */
section {opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease;}
section.show {opacity: 1;transform: translateY(0);}
section.cont01 {transform: translateY(0px)}
section.cont02 {transform: none !important; opacity: 1;}

/* Animation Elements */
section.cont01 .cont-area .img-01 {transition:all 0.5s 0.3s ease; opacity: 0; scale: 0.75;}
section.cont01 .cont-area .img-02 {transition:all 0.9s 1.9s ease; opacity: 0;}
section.cont01 .cont-area .img-03 {transition:all 0.9s 1.9s ease; opacity: 0;}
section.cont01 .cont-area .tit-02 {transition:all 0.6s 0.1s ease; opacity: 0; scale: 0.75;}
section.cont01 .cont-area .txt-01 {transition:all 0.5s 0.5s ease; opacity: 0; scale: 0.5;}
section.cont01 .cont-area .txt-02 {transition:all 0.5s 0.6s ease; opacity: 0; scale: 0.5;}
section.cont01 .cont-area .txt-03 {transition:all 0.5s 0.7s ease; opacity: 0; scale: 0.5;}
section.cont01 .cont-area .txt-04 {transition:all 0.5s 0.8s ease; opacity: 0; scale: 0.5;}
section.cont01 .cont-area .txt-05 {transition:all 0.5s 0.9s ease; opacity: 0; scale: 0.5;}
section.cont01.show .cont-area .img-01 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .img-02 {opacity: 1;}
section.cont01.show .cont-area .img-03 {opacity: 1;}
section.cont01.show .cont-area .tit-02 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .txt-01 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .txt-02 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .txt-03 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .txt-04 {opacity: 1; scale: 1;}
section.cont01.show .cont-area .txt-05 {opacity: 1; scale: 1;}
@media all and (min-width: 768px) {
    section {transform: translateY(calc((100vw / 1920) * 100))}
    section.cont01 .cont-area .img-01 {transform: translate(-50%, calc((100vw / 1920) * 303)); transform-origin:left bottom;}
    section.cont01 .cont-area .img-02 {animation: leaf1InfinitePC 3s 2s steps(45, start) infinite;}
    section.cont01 .cont-area .img-03 {animation: leaf2InfinitePC 3s 2s steps(45, start) infinite;}
    section.cont01 .cont-area .txt-01 {animation: tooltipInfinitePC 2s ease infinite;}
    section.cont01 .cont-area .txt-02 {animation: tooltipInfinitePC 2s ease infinite;}
    section.cont01 .cont-area .txt-03 {animation: tooltipInfinitePC 2s ease infinite;}
    section.cont01 .cont-area .txt-04 {animation: tooltipInfinitePC 2s ease infinite;}
    section.cont01 .cont-area .txt-05 {animation: tooltipInfinitePC 2s  ease infinite;}
    section.cont01.show .cont-area .img-01 {transform: translate(-50%, calc((100vw / 1920) * 263))};
}
@media all and (max-width: 767px) {
    section {transform: translateY(calc((100vw / 360) * 50))}
    section.cont01 .cont-area .img-01 {transform: translate(-50%, calc((100vw / 360) * 135)); transform-origin:left bottom;}
    section.cont01 .cont-area .img-02 {display: none;}
    section.cont01 .cont-area .img-03 {display: none;}
    section.cont01 .cont-area .txt-01 {animation: tooltipInfiniteMO 2s ease infinite;}
    section.cont01 .cont-area .txt-02 {animation: tooltipInfiniteMO 2s ease infinite;}
    section.cont01 .cont-area .txt-03 {animation: tooltipInfiniteMO 2s ease infinite;}
    section.cont01 .cont-area .txt-04 {animation: tooltipInfiniteMO 2s ease infinite;}
    section.cont01 .cont-area .txt-05 {animation: tooltipInfiniteMO 2s ease infinite;}
    section.cont01.show .cont-area .img-01 {transform: translate(-50%, calc((100vw / 360) * 115))};
}
.event240411-wrap {
    --transformY: -10;
}

/* Animation Keyframes */
/* 말풍선 */
@keyframes tooltipInfinitePC {
    0% {
        /* 태양을 뷰포트 너머로 밀어냅니다. */
        transform: translateY(calc((100vw / 1920) * var(--transformY)));
    }

    50% {
        /* 태양을 기본 위치로 되돌립니다. */
        transform: translateY(0);
    }
    100% {
        /* 태양을 뷰포트 너머로 밀어냅니다. */
        transform: translateY(calc((100vw / 1920) * var(--transformY)));
    }

}
@keyframes tooltipInfiniteMO {
    0% {
        /* 태양을 뷰포트 너머로 밀어냅니다. */
        transform: translateY(calc((100vw / 360) * var(--transformY)));
    }

    50% {
        /* 태양을 기본 위치로 되돌립니다. */
        transform: translateY(0);
    }
    100% {
        /* 태양을 뷰포트 너머로 밀어냅니다. */
        transform: translateY(calc((100vw / 360) * var(--transformY)));
    }
}
/* 나뭇잎 */
@keyframes leaf1InfinitePC {
    0% {
        background-position: 0 404px;
    }

    100% {
        background-position: 0 -17776px;
    }
}

@keyframes leaf2InfinitePC {
    0% {
        background-position: 0 366px;
    }

    100% {
        background-position: 0 -16104px;
    }
}