@charset "utf-8"; 
.floating_menu,
.floating_menu.active{right: 1%;}

.evt_wrp{position: relative; width: 100%; overflow: hidden; cursor: default; letter-spacing: -0.5px;}
.evt_wrp img{vertical-align: top;}
.evt_wrp strong{font-weight: 700;}
.evt_wrp .tit,
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto; height: unset;}
.evt_wrp .tit{padding-bottom: 40px;}

.evt_wrp .visual_wrp{background: #080808;}
.evt_wrp .visual{background:url('https://img.megastudyacademy.co.kr/campus/mbc/event/2025/0925_beautytrend/bg_visual.png') no-repeat center 0; animation: alpha-left 1s both; transform-origin: left center;}
.evt_wrp .visual .inner{animation: scale-in-center .5s .6s cubic-bezier(.25,.46,.45,.94) both}

.evt_wrp .typo{position: absolute; top: 240px; left: 90px;} 
.evt_wrp .typo1{position: absolute; right: 230px; bottom: 230px; animation: bounce-in-fwd 1.1s .5s both;} 
.evt_wrp .typo2{position: absolute; right: 100px; bottom: 230px; animation: bounce-in-fwd 1.1s .8s both;} 

@keyframes bounce-in-fwd{0%{transform: scale(0); animation-timing-function:ease-in; opacity:0}38%{transform:scale(1); animation-timing-function:ease-out; opacity:1}55%{transform:scale(.7); animation-timing-function:ease-in}72%{transform:scale(1); animation-timing-function:ease-out}81%{transform:scale(.84); animation-timing-function:ease-in}89%{transform:scale(1); animation-timing-function:ease-out}95%{transform:scale(.95); animation-timing-function:ease-in}100%{transform:scale(1); animation-timing-function:ease-out}}

@keyframes alpha-left{0%{transform: translateX(-20px) scale(0.7); filter: blur(4px); opacity: 0} 100%{transform: translateX(0) scale(1); opacity: 1}}

@keyframes slide-in-elliptic-top-fwd{0%{transform:translateY(-600px) rotateX(-30deg) scale(0); transform-origin:50% 100%; opacity:0} 100%{transform:translateY(0) rotateX(0) scale(1); transform-origin:50% 1400px; opacity:1}}

.evt_wrp .con1{position: absolute; top: 205px; display: flex; align-items: center; width: 1200px; left: 0;}

* [class^="evt_txt_"]{font-size: 19px; font-weight: 700; color: #fff; position: absolute; top: 110px;}
.evt_wrp .evt_txt_1{left: 172px;}
.evt_wrp .evt_txt_2{right: 157px;}

* [class^="bg_"] {padding: 100px 0;}

.evt_wrp .bg_01{background: #fff;}
.evt_wrp .bg_02{background: #edf4f4;}
.evt_wrp .bg_03{background: #0d2c2c;}
.evt_wrp .bg_04{background: #fff;}

.evt_wrp .transfer{position: sticky; z-index: 2; padding-top: 35px;}
.evt_wrp .bg_transfer{position: absolute; top: -8px; left: 0;}
.evt_wrp .transfer_pop{position: absolute; top: -30px; left: 153px;}

.evt_wrp .btm_txt{background: #383b3f; padding: 35px; color: #efefef; font-size: 20px; line-height: 1.5; text-align: center; font-weight: 300;}
.evt_wrp .btm_txt strong{color: #fff;}

.evt_wrp .btn{background: #000; width: 765px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 900; border-radius: 5px;}
.evt_wrp .btn span{background: #fff; border-radius: 50%; color: #000; width: 30px; height: 30px; font-size: 21px; margin: 5px 0 0 10px; justify-content: center; display: flex; align-items: center; animation: slide-right .5s both infinite alternate;}
@keyframes slide-right{0%{transform: translateX(0);} 100%{transform: translateX(5px);}}


@keyframes bounce-in-fwd{0%{transform:scale(0);animation-timing-function:ease-in;opacity:0}38%{transform:scale(1);animation-timing-function:ease-out;opacity:1}55%{transform:scale(.7);animation-timing-function:ease-in}72%{transform:scale(1);animation-timing-function:ease-out}81%{transform:scale(.84);animation-timing-function:ease-in}89%{transform:scale(1);animation-timing-function:ease-out}95%{transform:scale(.95);animation-timing-function:ease-in}100%{transform:scale(1);animation-timing-function:ease-out}}

@keyframes scale-in-center{0%{transform:scale(0);opacity:1} 100%{transform:scale(1); opacity:1}}

.evt_wrp .notice{width: 1198px; margin: 50px auto 0; color: #fff; border: 1px solid rgba(255,255,255,0.5); font-size: 17px; padding: 30px 50px; line-height: 1.7; border-radius: 5px;}
.evt_wrp .notice p{padding-left: 10px;}
.evt_wrp .notice p::before{content: '\00B7'; margin: 0 5px 0 -10px;}

.evt_wrp .small{font-size: 12px; color: #111; position: absolute; right: 0; bottom: 30px;}
.evt_wrp .small::before{content: '\002A'; margin: 0 5px 0 -10px;}
.evt_wrp .small.__1{left: 105px; bottom: 100px;}
.evt_wrp .small.__2{right: 100px; bottom: 100px;}
.evt_wrp .bg_03 .small{right: 20px; bottom: 30px;}

.evt_wrp .dungdung{animation: updown 1s both infinite alternate;}
.evt_wrp .blink{animation: blink 1.5s infinite;}
.evt_wrp .delay{animation-delay: 0.5s;}
.evt_wrp .up-on-scroll{transition: transform .7s, opacity 1.7s;}

@keyframes blink{0%{opacity: 1} 50%{opacity:.2} 100%{opacity:1}}
@keyframes updown{ 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}}

@media screen and (min-width: 761px) {
    .evt_wrp .pc{display: block;}
    .evt_wrp .mo{display: none;}
    .btm_txt br{display: none;}
}

/* 모바일 */
@media screen and (max-width: 760px) {
    .evt_wrp .pc,
    .evt_wrp .small.__2{display: none;}
    .evt_wrp .mo{display: block;}
    .evt_wrp .visual{background-size: cover;}
    .evt_wrp .visual .txt{width: 50%; padding-top: 15%;}
    .evt_wrp .visual_pop {width: 15%; right: 13px;}
    .evt_wrp * [class^="bg_"] {padding: 15% 3%;}
    .evt_wrp .tit{width: 80%; margin-bottom: -20px;}
    .evt_wrp .con1{top: 7%; width: unset; padding: 20px;}
    .evt_wrp .btn{width: unset; padding: 15px 60px; height: unset; font-size: 20px;}
    .evt_wrp .btn span {width: 22px; height: 22px; font-size: 17px;}
    .evt_wrp .btm_txt{padding: 30px 10px; font-size: 17px;}
    .evt_wrp .notice{width: 100%; padding: 20px 30px; font-size: 14px; margin-top: 30px;}
    .evt_wrp .object_1 {position: absolute; top: 2px; left: 20px;}
    .evt_wrp .object_1 img {width: 30%;}
    .evt_wrp .object_2{position: absolute; top: 105px; right: 10px; width: 18%;}
    .evt_wrp .object_3{position: absolute; bottom: -16%; left: 5%;}
    .evt_wrp .object_3 img{width: 50%;}
    * [class^="evt_txt_"] {font-size: 11px; top: 34px;}
    .evt_wrp .evt_txt_1{left: 58px;}
    .evt_wrp .evt_txt_2{right: 58px;}
    .evt_wrp .small{font-size: 10px;}
    .evt_wrp .small.__1{left: 70px; bottom: -75px;}
    .evt_wrp .bg_03 .small{right: 20px; bottom: 20px;}
    .evt_wrp .btn span{align-items: start;}
    .evt_wrp .bg_01{padding-bottom: 20%;}
    .evt_wrp .typo{width: 10%; top: 30%; left: 8%;}
    .evt_wrp .typo1 {width: 10%; right: 20%; bottom: 31%;}
    .evt_wrp .typo2 {width: 10%; right: 11%; bottom: 31%;}
}