/* common */
.evt_wrap { position:relative; max-width:640px; margin:0 auto; overflow:hidden; }
.evt_wrap img:not(.slider-lazy-image) { display:block; width:100% }
.pos_r { position: relative; }
.fc_red { color:#FF0000; }
.mt-1 { margin-top: -1px; }

.con01 { background: #000; padding-bottom: 45vw; }
.con01 .title { position: absolute; top: 25vw; right: 0; animation: slide 0.7s ease-in-out forwards; }
.con01 .fire_bg { width: 50% !important; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; animation: dundun 1s linear alternate infinite; }
.con01 .fire { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); animation: dundun 1s linear alternate infinite; }
.con01 .bxslider-default { width: 90%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.con01 .bxslider img { border-radius: 20px; }
.con01 .sys_f { position: absolute; top: 11vw; right: 5vw; font-size: 5vw; color: #fcf0e8; }
@keyframes slide {
 from { right: -70%; }
 to { right: 0; }
 }
@keyframes dundun {
 from { bottom: 3vw; }
 to { bottom: 0; }
 }

.con02 { background-color: #191919; padding-bottom: 10vw; }
.con02 .tab_area { margin-top: 6vw; }
.tab_area ul { display: flex; justify-content: center; gap: 20px; }
.tab_area ul li { width: 32%; border-bottom: 1px solid #5c5c5c; padding-bottom: 1vw; margin-bottom: 3vw; }
.tab_area ul li.on { border-bottom: 1px solid #ff1f2f; }
.tab_area ul li:last-child.on { border-bottom: 1px solid #0078ff; }
.tab_area ul li a { color: #5c5c5c; font-size: 6vw; text-align: center; }
.tab_area ul li.on a { color: #ff1f2f; }
.tab_area ul li:last-child.on a { color: #0078ff; }
.tab_area div .sys_f { position: absolute; top: 93.5vw; left: 24vw; font-size: 4.5vw; font-weight: bold; color: #fff; }
.tab_btn { position: absolute; bottom:14vw; left: 50%; transform: translateX(-50%); width: 100%; height: 12vw; }

.con02 .sys_f { position: absolute; top: 23vw; left: 28vw; font-size: 9.5vw; font-weight: bold; font-style: italic; color: #ff1f2f; }

.con02_add, .con12 { background-color: #191919; padding-bottom: 10vw; }

.con04 .sd_box { position: absolute; top: 51%; left: 50%; transform: translateX(-50%); width: 90%; }
/* 상하단 가격단 - con02, con12 */
.lect { width: 87vw; max-width: 545px; height: 36vw; max-height: 225px; position: absolute; top: 18%; left: 48%; transform: translateX(-50%); }
.lect .dc { position: absolute; top: 15%; left: 6.5%; padding: 1% 2%; font-size: 2.6vw; color: #606060; border-radius: 5px; width: 27.9%; text-align: center; }
.lect .lect_info { position: absolute; top: 65%; left: 6.5%; font-size: 3vw; color: #606060; letter-spacing: -0.7px; }
.lect .price { position: absolute; top: 65%; right: 36%; font-size: 3.8vw; color: #767676; text-decoration: line-through; }
.lect .dc_price { position: absolute; top: 61%; right: 9%; font-size: 5vw; font-weight: bold; color: #222; }
.lect .dc_price span { font-size: 5.2vw; }
.lect .add_info { position: absolute; top: 46vw; left: 0; font-size: 2.1vw; color: #606060; width: 100%; text-align: center; }

.lect02 { top: unset; bottom: 46vw; }
.lect02 .dc_price { right: 10%; }

.lect .lect_info2 { position: absolute; top: 35vw; left: 6vw; font-size: 3vw; color: #606060; }
.lect .price2 { position: absolute; top: 35vw; right:36%; font-size: 3.8vw; color: #767676; text-decoration: line-through; }
.lect .dc_price2 { position: absolute; top:34vw; right: 7vw; font-size: 5vw; font-weight: bold; color: #222; }
.lect .dc_price2 span { font-size: 5.2vw; }

/* 수강신청 팝업 */
.pop_wrap { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; }
.pop_wrap .bg { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.5); }
.pop_wrap .pop_con { width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pop_wrap .pop_con .pop { display: none; }
.pop_wrap.pop_wrap2 .month { position: absolute; top: 17.6vw; left: 16%; font-size: 6vw; color: #ff1f2f; font-weight: 600; }
.pop_wrap.pop_wrap2 .month.blue { color: #0078ff; }

.con08 { padding-bottom: 15vw; background: #000; }
.con08 .bx-wrapper .bx-pager { bottom: -7vw; }
.con08 .bx-wrapper .bx-pager.bx-default-pager a { background-color: #4c4c4c; border-radius: 25px; }
.con08 .bx-wrapper .bx-pager.bx-default-pager a.active { width: 8vw; background-color: #ff0024; }

.con09 { background: #000; padding-bottom: 20%; }
.con09 .bxslider-default { width: 80%; margin: 0 auto; }
.con09 .bxslider img { border-radius: 20px; }
.con09 .bx-wrapper .bx-controls-direction a { width: 25px; height: 45px; background: url(https://cdn.hackersut.com/m/img/event/2024/08/1400/con09_arrow.png); background-size: cover; }
.con09 .bx-wrapper .bx-controls-direction a.bx-prev { left: -8vw; transform: scale(-1); }
.con09 .bx-wrapper .bx-controls-direction a.bx-next { right: -8vw; }


.con_eng { background: url(https://cdn.hackersut.com/m/img/event/2024/08/1400/re_260102/eng_bg.jpg)0 0 no-repeat; padding-bottom: 20%; }
.con_eng .cg_img { margin-top: -20%; }
.con_eng .lect_list { margin: 0 auto; width: 90%; display: flex; flex-wrap: wrap; z-index: 2; position: relative; }
.lect_list li { width: calc(100% / 4); background: url(https://cdn.hackersut.com/www/images/event/2024/08/1400/re_260102/eng_tab.png) 3px 0 / 800% no-repeat; height: 0; padding-bottom: 33vw; font-size: 0; }
.lect_list li:nth-of-type(2) { background-position-x: 14%; }
.lect_list li:nth-of-type(3) { background-position-x: 28.2%; }
.lect_list li:nth-of-type(4) { background-position-x: 42.3%; }
.lect_list li:nth-of-type(5) { background-position-x: 56.6%; }
.lect_list li:nth-of-type(6) { background-position-x: 70.9%; }
.lect_list li:nth-of-type(7) { background-position-x: 84.9%; }
.lect_list li:nth-of-type(8) { background-position-x: 99.1%; }
.lect_list li.on { background-position-y: 100%; }


.con_eng .pub_vid_box { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 90%; z-index: 2; height: 19%; border-radius: 14px; overflow: hidden; }
.con_eng .thum { position: absolute; bottom: 6.8%; left: 50%; transform: translateX(-50%); width: 90%; border-radius: 14px; overflow: hidden; }
.con_eng .thum::before { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: block; content: ''; width: 100%; height: 100%; z-index: 2; }
.con_eng .thum::after { position: absolute; top: 0; left: 0; background: url('https://cdn.hackersut.com/www/images/event/2024/08/1400/re_260102/eng_play-btn.png')0 0/100% no-repeat; display: block; content: ''; width: 100%; height: 100%; z-index: 3; }
.con_eng .thum img { width: 100%; }
#m01 { width: 100%; height: 100%; }
#m01 video { width: 100%; height: 100%; }

.con_math { background: #0372b8; }
.con_math .lect_list { margin: 0 auto; width: 70%; display: flex; position: absolute; top: 15%; left: 50%; transform: translateX(-50%); }

.con_math .lect_list li { width: calc(100% / 3); background: url(https://cdn.hackersut.com/www/images/event/2024/08/1400/re_260102/math_tab.png) 3px 0 / 300% no-repeat; }
.con_math .lect_list li:nth-of-type(2) { background-position-x: 48%; }
.con_math .lect_list li:nth-of-type(3) { background-position-x: 97%; }
.con_math .lect_list li.on { background-position-y: 98%; }

.con_math .pub_vid_box { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; z-index: 2; height: 22%; border-radius: 14px; overflow: hidden; }
.con_math .thum { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; border-radius: 14px; overflow: hidden; }
.con_math .thum::before { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: block; content: ''; width: 100%; height: 100%; z-index: 2; }
.con_math .thum::after { position: absolute; top: 0; left: 0; background: url('https://cdn.hackersut.com/www/images/event/2024/08/1400/re_260102/math_play-btn.png')0 0/100% no-repeat; display: block; content: ''; width: 100%; height: 100%; z-index: 3; }
.con_math .thum img { width: 100%; }


@media (min-width: 640px){
 .con01 { padding-bottom: 300px; }
 .con01 .title { top: 165px; }

 .con01 .sys_f { top: 73px; right: 60px; font-size: 30px; }
 .con02 .sys_f { top: 150px; left: 105px; font-size: 46px; }

 .lect .dc { left: 30px; font-size: 19px; }
 .lect .price { font-size: 24px; }
 .lect .lect_info { left: 30px; font-size: 18px; }
 .lect .dc_price { font-size: 30px; }
 .lect .dc_price span { font-size: 50px; }

 .lect02 { bottom: 105px; }
 .con12 .lect02 { bottom: 207px; }
 }