@charset "utf-8"; 
.evt_wrp{position: relative; width: 100%; overflow: hidden; cursor: default; letter-spacing: -0.5px;}
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto;}
.evt_wrp .tit{padding-bottom: 60px}

.evt_wrp .barbnr{position: fixed; bottom: 0; background: #ffd442; width: 100%; text-align: center; z-index: 9; height: 130px; height: 90px; display: flex; justify-content: center; align-items: center;}

.evt_wrp .visual_wrp{background: #2556e2;}
.evt_wrp .visual_wrp .visual{background: url('imgs/bg_visual.png') no-repeat center 0;  padding-bottom: 150px;}
.evt_wrp .visual_wrp .visual .inner{width: fit-content; margin: -50px auto; display: flex; justify-content: center;}
.evt_wrp .visual_wrp .typo{animation: slide-in-left .2s .35s cubic-bezier(.25,.46,.45,.94) both}
.evt_wrp .visual_wrp .visual_img{animation: slide-fwd-left .45s cubic-bezier(.25,.46,.45,.94) both}

@keyframes slide-in-left{0%{transform: translateX(-300px); opacity: 0;} 100%{transform: translateX(0); opacity: 1;}}
@keyframes slide-fwd-left{0%{transform: translateZ(0) translateX(100px)} 100%{transform: translateZ(160px) translateX(0)}}

/* tab */
.evt_wrp .tabs_vod{overflow: hidden; width: 1200px; margin: 0 auto 20px; border:2px solid; margin-bottom: 45px;}
.evt_wrp .tabs_vod li{float: left; background: #000; text-align: center; width: 50%; padding: 25px 0 18px; font-size: 28px; cursor: pointer; color: #a3a3a3;}
.evt_wrp .tabs_vod li:last-child{margin-right: 0;}
.evt_wrp .tabs_vod li.active{background: #2556e2; font-weight: 900; color: #fff;}

.evt_wrp .vod{background: #000;}
.evt_wrp .vod:hover{cursor: pointer;}


/* slide */
.evt_wrp .bg_02 .slide_box{position: relative; width: 100%; height: auto; margin: 0 auto 60px; overflow: hidden;}
.evt_wrp .bg_02 .slide_box .swiper-container{width: 100%; padding-top: 0 !important;}
.evt_wrp .bg_02 .slide_box .swiper-wrapper{transition-timing-function: linear !important; /* 부드러운 롤링 */}
.evt_wrp .bg_02 .slide_box .swiper-slide{width: auto !important;}
.evt_wrp .bg_02 .slide_box img{width: 100%; height: auto; display: block;}

.evt_wrp .bg_03 .bg_slide{background: url('imgs/bg_slide.png') no-repeat center -5px; width: 1234px; height: 749px; margin: 0 auto;}
.evt_wrp .bg_03 .slide_box{position: relative; width: 1156px; margin: 0 auto;}
.evt_wrp .bg_03 .slide_box img{height: auto;}
.evt_wrp .bg_03 .slide_box .swiper-container{margin: 0; padding-top: 0 !important;}
.evt_wrp .bg_03 .slide_box .swiper-button-prev{position: absolute; top: 320px; left: -85px;}
.evt_wrp .bg_03 .slide_box .swiper-button-next{position: absolute; top: 320px; right: -85px;}   

.evt_wrp .bg_03 .slide_box .swiper-button-prev:after{content: ''; width: 28px; height: 19px; border-top: 8px solid; border-right: 8px solid; border-color: #2556e2; transform: rotate(225deg);}
.evt_wrp .bg_03 .slide_box .swiper-button-next:after{content: ''; width: 28px; height: 19px; border-top: 8px solid; border-right: 8px solid; border-color: #2556e2; transform: rotate(45deg);}

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

.evt_wrp .bg_01{background: #e6e6e6}
.evt_wrp .bg_02{background: #fff;}
.evt_wrp .bg_03{background: #78d5ff;}
.evt_wrp .bg_04{background: #fff;}

.evt_wrp .con1_btn1{position: absolute; top: 215px; right: 41px;}
.evt_wrp .con1_btn2{position: absolute; top: 295px; right: 41px;}
.evt_wrp .con2_btn{position: absolute; top: -30px; right: -50px;}
.evt_wrp .con3_btn{position: absolute; top: -30px; right: -50px; z-index: 2;}
.evt_wrp .bg_03 .book{position: absolute; right: -100px; bottom: -90px; z-index: 2;}

.evt_wrp .btn_info1{position: absolute; right: 506px; bottom: 278px;}
.evt_wrp .btn_info2{position: absolute; right: 500px; bottom: 222px;}

.evt_wrp .dungdung{animation: updown 1s both infinite alternate;}
.evt_wrp .blink{animation: blink 1s infinite;}
.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);}}


/************** MO **************/

body,
.m_evt *{margin: 0; padding: 0;}
.m_evt{position: relative; width: 100%; overflow: hidden;}
.m_evt img{width: 100%; vertical-align: top;}

.m_evt .barbnr{position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; z-index: 99;}
.m_evt .inner{position: relative; margin: 0 auto;}
.m_evt .small{width: 90%; margin: 0 auto; font-size: 0.6rem; padding-bottom: 5%;}

.m_evt .visual_wrp{background: #2556e2;}
.m_evt .visual_wrp .visual{position: absolute; left: 0; bottom: 0; width: 100%; animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.m_evt .visual_wrp .typo{animation:fade-in-top .6s cubic-bezier(.39,.575,.565,1.000) both}
@keyframes fade-in-top{0%{transform:translateY(-100px); opacity: 0} 100%{transform: translateY(0);opacity: 1}}
@keyframes fade-in-bottom{0%{transform: translateY(60px); opacity:0} 100%{transform: translateY(0);opacity: 1}}

* [class^="con_"]{position: relative;}

.m_evt .con1{background: #e6e6e6;}
.m_evt .con2{color: #fff;}
.m_evt .con3{background: #78d5ff; padding-bottom: 12%;}
.m_evt .con4{color: #fff; padding-bottom: 12%;}

.m_evt .con2_btn{position: absolute; top: -0.5rem; right: 0.6rem; width: 15%;}

/* tab */
.m_evt .tabs_vod{overflow: hidden;width: 95%;margin: 0 auto 20px;border:2px solid;margin-bottom: 1rem;}
.m_evt .tabs_vod li{float: left; background: #000; text-align: center; width: 50%; padding: 0.8rem 0; font-size: 1rem; cursor: pointer; color: #a3a3a3;}
.m_evt .tabs_vod li:last-child{margin-right: 0;}
.m_evt .tabs_vod li.active{background: #2556e2; font-weight: 900; color: #fff;}

.m_evt .vod{background: #000; width: 92%; margin: 0 auto;}

.m_evt .button{display: block; width: 86%; margin: 0 auto;}


/* slide */
.m_evt .slide_box .swiper-slide{width: 70%; transition: transform 0.3s;}
.m_evt .slide_box{position: relative; margin: 0 auto;}
.m_evt .slide_box .swiper-button-prev{left: 20px;}
.m_evt .slide_box .swiper-button-next{right: 20px;}   

.m_evt .slide_box .swiper-button-prev:after{content: ''; width: 28px; height: 23px; border-top: 3px solid; border-right: 3px solid; border-color: #000; transform: rotate(225deg);}
.m_evt .slide_box .swiper-button-next:after{content: ''; width: 28px; height: 23px; border-top: 3px solid; border-right: 3px solid; border-color: #000; transform: rotate(45deg);}


/* 팝업 */
.pop_wp{display: flex; background: rgba(0,0,0,0.7); height: 100%; width: 100%; align-items: center; position: fixed !important; top: 0; left: 0; z-index: 99; justify-content: center;}
.div_pop{position: relative; width: 38rem; background: #fff; height: fit-content; max-height: 88%; border-radius: 10px; padding: 0.5rem 2rem 2rem;}
.div_pop *{font-size: 15px;} 

.div_pop a.closeX{position: absolute;top: 7px;right: 12px;font-size: 60px;height: 36px;line-height: 36px;font-weight: 100;text-align: center;cursor: pointer;color: #000;text-decoration: none;}
.div_pop a.closeX:hover{color: #ccc;}

.div_pop .pop_tit{text-align: center;padding: 0 0 7px;font-size: 25px;border-bottom: 2px solid #000;font-weight: 900;}
.div_pop strong{font-weight: 900; display: block; font-size: 16px;}

.div_pop .basis{overflow: hidden; display: flex; align-items: center; padding: 10px 0; border-top: 1px solid #eee; width: 100%;}
.div_pop .basis:first-child{border-top: 0;}
.div_pop .basis li{height: 67px;font-size: 16px;font-weight: 500;text-align: left;display: grid;align-items: center;color: #777;width: 90%;}
.div_pop .basis li:first-child{background: url('https://image.engineerlab.co.kr/user/event/2024/1021/imgs/object.png') no-repeat center 0; width: 30%; font-size: 13px; text-align: center; font-weight: 300; background-size: 70%; display: block; padding-top: 16px; letter-spacing: -0.8px; color: #000; background-size: contain;}

.m_evt .btn_show{width: 25%; margin: 0 auto; position: absolute; bottom: 10%; left: 38%;}
.m_evt .con1_btn1{position: absolute; top: 17.5%; right: 4%; width: 34%;}
.m_evt .con1_btn2{position: absolute; top: 26%; right: 4%; width: 34%;}


@media screen and (min-width: 845px){
    .m_evt{display: none;}  
    .div_pop{width: 30%; height: auto; padding: 2rem 0.5rem;}
    .div_pop .pop_conts{padding: 0 0.5rem 1rem; scroll-behavior: smooth; overflow-y: auto; max-height: 100vw; height: fit-content;}
    .pop_tabWrap{padding: 20px 0;}
    .div_pop .tit{margin: 0 0 10px;}
    .pop_tab{padding: 15px 0;}
    .div_pop .btn_line{font-size: 13px !important; display: block; width: fit-content; margin: 5px 0 0 0 !important;}
    } 
    
@media screen and (max-width: 845px) {
    .evt_wrp{display: none;}  
    .m_evt{display: block;}      
    .div_pop{width: 92%;height: auto;padding: 1.5rem 0.5rem;}
    .div_pop .pop_conts{padding: 0 0.5rem 1rem; scroll-behavior: smooth; overflow-y: auto; max-height: 100vw; height: fit-content;}
    .pop_tabWrap{padding: 20px 0;}
    .div_pop .tit{margin: 0 0 10px;}
    .pop_tab{padding: 15px 0;}
    .div_pop .btn_line{font-size: 13px !important; display: block; width: fit-content; margin: 5px 0 0 0 !important;}
}