@charset "utf-8"; 
.floating_menu.mo{display: none;}

.evt_wrp{position: relative; width: 100%; line-height: 1.2; letter-spacing: -1px;} 
.evt_wrp img{vertical-align: top;} 
.evt_wrp i{font-style: normal;}
.evt_wrp strong{font-weight: 900;}
.evt_wrp .ttl,
.evt_wrp .inner, 
.evt_wrp .ttl .small{position: relative; width: fit-content; margin: 0 auto;} 
.evt_wrp .ttl{padding-bottom: 50px;} 

/* visual */
.evt_wrp .visual{background: #2dade8 url('https://img.megastudyacademy.co.kr/campus/mbc/event/2026/0317_jobcenter/bg_visual.png') no-repeat center 0; display: grid;}
.evt_wrp .visual .object,
.evt_wrp .visual .typo{grid-area: 1 / 1;}
.evt_wrp .visual .object{width: fit-content; margin: 0 auto; padding-top: 185px;}
.evt_wrp .visual .typo{width: fit-content; margin: 0 auto; padding: 100px 0; z-index: 2;}

.evt_wrp .notice{width: 1000px; margin: 0 auto; padding: 35px 30px; font-size: 16px;}
.evt_wrp .notice.border{border: 1px solid; line-height: 1.7;}
.evt_wrp .notice span{color: #555;}
.evt_wrp .notice > p,
.evt_wrp .notice > div{padding-left: 30px;}
.evt_wrp .notice > div p{padding: 2px 0 2px 15px; line-height: 1.5;}
.evt_wrp .notice > div p strong{font-weight: 700;}
.evt_wrp .notice > p::before{content: '\00B7'; margin-left: -14px; margin-right: 5px;}
.evt_wrp .notice > div p::before{content: '-'; margin-left: -14px; margin-right: 5px;}

.evt_wrp details{position: relative;}
.evt_wrp details summary{position: relative; padding-bottom: 15px; font-size: 28px; font-weight: 800; cursor: pointer; list-style-type: none; text-align: center; border-bottom: 1px solid;}
summary::-webkit-details-marker {display: none;}
.evt_wrp details summary .arrow{position: absolute; top: 8px; right: 355px;}
.evt_wrp details[open] summary{margin-bottom: 30px;}
.evt_wrp details[open] summary .arrow::after {position: absolute; top: 8px; left: 10px; content: ''; width: 12px; height: 12px; border-top: 3px solid #000;border-right: 3px solid #000; transform: rotate(-45deg);}
.evt_wrp details summary .arrow::after {position: absolute; top: 0; left: 10px; content: ''; width: 12px; height: 12px; border-top: 3px solid #000; border-right: 3px solid #000; transform: rotate(135deg);}

.evt_wrp details em{display: block; font-weight: 700;}

.evt_wrp .btn{position: relative; width: 100%; z-index: 9; transform: translateY(0); transition: transform .35s ease;}
.evt_wrp .btn.hide{transform: translateY(100px);}
.evt_wrp .btn.fixed{position: fixed; left: 0; bottom: 0;}
.evt_wrp a{background: #333; width: 420px; height: 80px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; border-radius: 10px 10px 0 0; color: #fff;}
.evt_wrp a span{background: #fff; border-radius: 50%; color: #000; width: 22px; height: 22px; font-size: 16px; margin: 5px 0 0 10px; font-size: 18px; justify-content: center; display: flex; align-items: center;}
.evt_wrp a .right{animation: slide-right .5s both infinite alternate;} 
@keyframes slide-right{0%{transform: translateX(0);} 100%{transform: translateX(5px);}} 


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

.evt_wrp .bg_01{background: linear-gradient(#fff 20%, #ecf3f6);}
.evt_wrp .bg_02{background: #fff; padding-bottom: 0;}
.evt_wrp .bg_03{background: #ecf3f6;}
.evt_wrp .bg_04{background: #ff0075;}
.evt_wrp .bg_notice{padding: 50px 0;}

.evt_wrp .con2{padding-bottom: 80px;}

.evt_wrp .bg_01 .inner.up-on-scroll{padding: 30px 0 70px;}
.evt_wrp .bg_01 .dungdung{position: absolute; top: 30px; left: 0;}
.evt_wrp .bg_02 .con2{padding-bottom: 80px;}
.evt_wrp .bg_03 .blink{position: absolute; top: 158px; right: 225px;}

.evt_wrp .small{font-size: 13px; padding-top: 30px;} 
.evt_wrp .small span{display: block; text-align: center; padding-top: 5px;}
.evt_wrp .small span::before{content: '\002A'; margin: 0 5px 0 -10px;}

.evt_wrp .color_y{color: #fff000;}


/* popup */
.pop_wrp{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; font-size: 15px; z-index: 1000; overflow: hidden;}
.pop_wrp .popup{position: relative; width: fit-content;}
.pop_wrp .popup img{border-radius: 10px; border: 2px solid;}
.pop_wrp .closeX{position: absolute; right: 5px; bottom: 8px; font-size: 38px; font-weight: 800; cursor: pointer;}


.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: 1200px){
.btn a br,
.btn em,
.evt_wrp .notice br{display: none;}
}

/* mo */
@media screen and (max-width: 1024px){
    .evt_wrp .inner{width: 92%; margin: 0 auto; text-align: center;}
    .evt_wrp .ttl{width: 90%; padding-bottom: 3rem; text-align: center;}
    .evt_wrp * [class^="bg_"] {padding: 12% 0;}
    .evt_wrp .visual{background-size: 120%; background-position-y: bottom; height: 38rem;}
    .evt_wrp .visual .object{    padding-top: 80px;}
    .evt_wrp .visual .typo {padding: 40px 0;}
    .evt_wrp .bg_02 .con2{padding-bottom: unset;}
    .evt_wrp .btn{position: fixed; left: 0; bottom: 0; width: 99%; height: 5.8rem;}
    .evt_wrp .btn .inner{display: flex; justify-content: center; align-items: center; width: 100%;}
    .evt_wrp .btn a{width: 47%; display: block; margin: 0 1px; padding: 12px 10px;  font-size: 14px;letter-spacing: 0;}
    .evt_wrp .btn a span{display: none;}
    .evt_wrp .bg_03 .blink{top: 62px; right: 88px; width: 2.5rem;}
    .evt_wrp .bg_01 .inner.up-on-scroll{padding: 0 0 30px;}
    .evt_wrp .notice{width: 90%; font-size: 14px; padding: 20px 30px;}
    .evt_wrp .bg_notice{padding: 5% 0 !important;}
    .evt_wrp .notice em{display: none;}
    .evt_wrp .notice > p, 
    .evt_wrp .notice > div{padding-left: 0;}
    .evt_wrp .notice > div p{padding: 2px 0 2px 10px;}
    .evt_wrp .notice > div p::before{margin-left: -10px;}
    .evt_wrp details{width: 100% !important;}
    .evt_wrp details summary{font-size: 22px;}
    .evt_wrp details summary .arrow{top: 3px; right: 73px;}
    .evt_wrp details summary .arrow::after {top: 3px;}
    .evt_wrp .bg_01 .dungdung{top: -4px;}
}
@media screen and (min-width: 761px) and (max-width: 1024px){
    .evt_wrp * [class^="bg_"] { padding: 12% 0;}
}

@media screen and (min-width: 821px) and (max-width: 1024px){    
}