@charset "utf-8"; 
.pc{display: block;}
.mo{display: none;}
.consult_form_container .inner{border-top: 0;}

.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 .ttl,
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto;} 
.evt_wrp .ttl{padding-bottom: 50px;}

.evt_wrp .visual{background: #ffebe5 url('https://img.megastudyacademy.co.kr/campus/mbc/event/2026/0323_beyond_beauty/bg_visual.png') no-repeat center 0;}

.evt_wrp .list_horiz{width: fit-content; margin: 0 auto; text-align: center;}
.evt_wrp .list_horiz li{background: #fff1ed; position: relative; display: inline-block; margin: 0 5px; border-radius: 15px; padding: 0 50px;}
.evt_wrp .list_horiz li img{margin: 50px 0 -22px;}

.evt_wrp .con_box{background: #fff; width: 1200px; margin: 50px auto 0; padding: 70px; border-radius: 15px;}
.evt_wrp .con_box:last-child{padding-bottom: 0;}
.evt_wrp .con_box img{display: block; width: fit-content; margin: 0 auto;}
.evt_wrp .org{background: #ff463d; margin-top: 0; padding: 70px 60px;}

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

.evt_wrp .bg_01{background: #fff; padding-bottom: 0;} 
.evt_wrp .bg_02{background: linear-gradient(#fff 5%, #fae4dc);}
.evt_wrp .bg_03{background: #fff;} 
.evt_wrp .bg_04{background: #e94444;} 

.bg_04 .inner,
.bg_05 .inner{width: fit-content;}

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

.evt_wrp .btn{position: relative; width: 765px; margin: 30px auto 0;}
.evt_wrp .btn a{background: #000; height: 80px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 900; border-radius: 5px;} 
.evt_wrp .btn a 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);}} 

.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 .btm_txt br{display: none;}

.evt_wrp .small{font-size: 12px; color: #111; position: absolute; right: 0; top: -30px;} 
.evt_wrp .small::before{content: '\002A'; margin: 0 5px 0 -10px;} 

.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 (max-width: 1024px){
    .pc{display: none;}
    .mo{display: block;}

    .evt_wrp .visual{padding-top: 0;}
    .evt_wrp .inner{width: 92%;}
    .evt_wrp .visual{background-size: cover;}
    .evt_wrp .visual > .inner{width: 100%;}
    .evt_wrp .ttl{width: 80%; padding-bottom: 5%;}
    .evt_wrp .bg_01 .ttl{width: 72%;}
    .evt_wrp .list_horiz{width: 95%;}
    .evt_wrp .list_horiz li{border-radius: 5px; margin: 0; padding: 0 30px 17px;}    
    .evt_wrp .list_horiz li:first-child{margin-bottom: 5%;} 
    .evt_wrp .list_horiz li img{margin: 35px 0 -30px;}
    .evt_wrp .con_box{width: 95%; margin-top: 2rem; padding: 2rem 1.625rem; border-radius: 5px;}
    .evt_wrp .org{margin-top: 0;}

    * [class^="bg_"]{padding: 12% 0;}    
    .evt_wrp .bg_02{padding-top: 5%;}

    .evt_wrp .inner > p{margin: 0 auto; padding-top: 7%; width: 90%;}
    .bg_04 .inner, 
    .bg_05 .inner{text-align: center;}
    .evt_wrp .btn{width: 90%;}
    .evt_wrp .btn a{padding: 15px 60px; height: unset; font-size: 20px;} 
    .evt_wrp .btn a span{width: 22px; height: 22px; font-size: 17px;} 
    .evt_wrp .btm_txt{padding: 5% 10%; font-size: 17px;} 
    .evt_wrp .notice{width: 90%; padding: 5%; font-size: 14px; margin-top: 30px;}
    .evt_wrp .notice strong{padding-bottom: 6px; display: block;}
    .evt_wrp .notice p{line-height: 1.2; padding: 0 0 10px 0;}
    .evt_wrp .btm_txt br{display: block;}    
}