@charset "utf-8"; 
.evt_wrp{position: relative; width: 100%; overflow: hidden;}
.evt_wrp strong{font-weight: 900;}
.evt_wrp .small{font-size: 14px; text-align: center; font-weight: 300; padding-top: 20px; display: block;}

.evt_wrp img{width: 100%; vertical-align: top;}
.evt_wrp .tit{position: relative; width: fit-content; margin: 0 auto; padding-bottom: 50px;}

.evt_wrp .txt{position: relative; width: fit-content; margin: 0 auto; padding: 0 0 20px;}
.evt_wrp .txt.top{padding-top: 70px;}
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto;}

.evt_wrp .visual{background: #000; height: 822px;}
.evt_wrp .visual .txt{padding: 60px 0 120px;}
.evt_wrp .back_right{position: absolute; top: 100px; left: 50%; animation:slide-in-left 3s  cubic-bezier(.25,.46,.45,.94) alternate infinite;}

@keyframes slide-in-left{0%{transform: translateX(-1000px); opacity: 0} 100%{transform: translateX(0); opacity: 1;}}

.evt_wrp .visual_typo{position: absolute; top: 360px; right: -50px;}
.evt_wrp .con1_typo{position: absolute; top: 225px; left: 470px;}

.fixed_barBnr{width: 100%; position: fixed; bottom: 0; z-index: 11; text-align: center;}
.bar{background: #c5b265; font-size: 35px; color: #000; width: 1000px; margin: 0 auto; border-radius: 10px 10px 0 0; padding: 17px; font-weight: 900; display: flex; justify-content: center; align-items: center;}
.bar span{margin-right: 15px; font-weight: 500; color: #433601;}
.bar .evt_btn{background: #af0029; border-radius: 50px; color: #fff; padding: 10px 40px; font-size: 23px; display: inline-block; margin-left: 20px;}

.evt_wrp .conts_inline{overflow: hidden; text-align: center;}
.evt_wrp .conts_inline li{display: inline-block; margin: 20px 15px;}
.evt_wrp .vod-cover li{height: 330px; vertical-align: bottom;}
.evt_wrp .drop{border-radius: 5px; box-shadow: 5px 4px 11px 10px rgba(0,0,0,0.1);}

#popupLecVod .div_layer{background: #000; width: 45%; height: 50%; border-radius: 5px; position: relative;}
#popupLecVod .pop_vod{border: 1px solid #000; border-radius: 5px;}

.evt_wrp .sub{background: #253845;}
.evt_wrp .tab_wrp{background: #000;}

.point_tabWrap{overflow: hidden; text-align: center; width: 1200px; margin: 0 auto;}
.tch_tab{background: #000; float: left; width: 399px; color: #d5d5d5; cursor: pointer; font-weight: 700; text-align: center; font-size: 22px; padding: 28px 0; margin: 0;}
.tch_tab span{display: block; font-size: 26px;}
.tch_tab.active,
.tch_tab:hover{background: #fff; color :#000; font-weight: 900;}
.tch_tab i{color: #00a698;}
.tch_tab.active{padding-bottom: 0;}
.tch_tab.active span{padding-bottom: 25px; border-bottom: 3px solid; width: fit-content; margin: 0 auto;}

.tch_tab:nth-child(2){border: 1px solid rgba(255,255,255,0.5); border-top: 0; border-bottom: 0;}
.tch-tab-conts{padding-bottom: 100px;}

* [class^="bg_"]{position: relative; padding: 100px 0;}
.evt_wrp .bg_01{background: #fff;}
.evt_wrp .bg_02{background: #222;}
.evt_wrp .bg_03{background: #253845;}

.evt_wrp .bg_01:nth-child(2){padding-bottom: 0;}

.evt_wrp .lecBuy{background: #000}

.evt_wrp .txt-tit{font-size: 20px; font-weight: 800; color: #fff; width: fit-content; margin: 20px auto 0;}
.evt_wrp .typo_pop{position: absolute; top: -24px; right: -110px;}

.evt_wrp .notice{width: 940px; margin: 0 auto; padding: 10px; text-align: left; color: #fff; line-height: 1.5; font-size: 17px;}
.evt_wrp .notice strong{font-size: 22px; border-bottom: 1px solid; display: block; padding-bottom: 5px; margin-bottom: 10px;}
.evt_wrp .notice i{padding-left: 10px; display: block;}
.evt_wrp .notice i::before{content: '\00B7'; margin-left: -10px; padding-right: 5px;}
.evt_wrp .notice span{padding: 0 20px; display: block;}
.evt_wrp .notice span::before{content: '\002D'; margin-left: -10px;}

.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);}}

/* slide */
.evt_wrp .review_box{position: relative; width: 1008px; margin: 0 auto; height: 213px;}
.evt_wrp .review_box img{height: auto;}
.evt_wrp .review_box .swiper-container{margin: 0; padding-top: 0 !important;}
.evt_wrp .review_box .swiper-button-prev{position: absolute; top: 90px; left: -15px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; width: 40px; height: 40px; color: #fff; font-weight: 900}
.evt_wrp .review_box .swiper-button-next{top: 90px; right: -15px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; width: 40px; height: 40px; color: #fff; font-weight: 900;}   
.evt_wrp .review_box .swiper-button-prev::after,
.evt_wrp .review_box .swiper-button-next::after{font-size: 20px;}  

.evt_wrp .slide_box2{position: relative; width: 1020px; height: 282px; margin: 20px auto 0;}
.evt_wrp .slide_box1 img,
.evt_wrp .slide_box2 img{height: auto;}
.evt_wrp .slide_box1 .swiper-container,
.evt_wrp .slide_box2 .swiper-container{margin: 0; padding-top: 0 !important;}
.evt_wrp .slide_box1 .swiper-button-prev,
.evt_wrp .slide_box2 .swiper-button-prev{position: absolute ; top: 150px; left: -20px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; width: 40px; height: 40px; color: #fff; font-weight: 900}
.evt_wrp .slide_box1 .swiper-button-next,
.evt_wrp .slide_box2 .swiper-button-next{top: 150px; right: -20px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; width: 40px; height: 40px; color: #fff; font-weight: 900;}   
.evt_wrp .slide_box1 .swiper-button-prev::after,
.evt_wrp .slide_box1 .swiper-button-next::after,
.evt_wrp .slide_box2 .swiper-button-prev::after,
.evt_wrp .slide_box2 .swiper-button-next::after{font-size: 20px;}  

.bg_02 .conts_inline li:last-child{margin-left: 35px;}


/* 공통 수강 신청 */
#buy .tit{padding-top: 100px;}
.bg_lecBuy{padding-top: 0;}
.lecList{width: 1200px; margin: 0 auto;}

.lec_tabWrap{overflow: hidden; text-align: center;}
.lec_tab{background: #555; display: inline-block; width: 27%; color: #eee; cursor: pointer; border-radius: 3px; font-weight: 700; padding: 20px 0; font-size: 22px; margin: 0 10px 50px;}
.lec_tab.active,
.lec_tab:hover{background: #16f5c3; color :#000; font-weight: 900;}


/* 상품 리스트 */
.lectureList{width: 1200px; margin: 0 auto; padding-bottom: 60px;}
.evt_wrp .lec_detail{background: #fff; position: relative; display: inline-block; text-align: left; padding: 35px 25px; border-radius: 10px; display: inline-grid;}

.evt_wrp .lec_detail .pop_typo{position: absolute; top: 20px; left: 20px; background: #f40469; color: #fff; border-radius: 50%; width: 60px; height: 60px; display: grid; align-items: center; text-align: center; font-size: 15px; font-weight: 900;}

.evt_wrp .lec_detail .lec_tit{position: relative; font-weight: 900; text-align: center; font-size: 32px; padding-bottom: 5px;}
.evt_wrp .lec_detail .lec_tit i{font-size: 17px; color: #333; font-weight: 500; display: block;}
.evt_wrp .lec_detail > form > em{display: block; font-weight: 900; font-size: 20px; padding-bottom: 5px; text-align: center;}
.evt_wrp .sale{text-decoration: line-through;}

.evt_wrp .lec_detail:nth-child(1) .lec_tit{color: #f40469;}
.evt_wrp .lec_detail:nth-child(2) .lec_tit{color: #5e36ee;}
.evt_wrp .lec_detail:nth-child(3) .lec_tit{color: #0fb3bd;}
.evt_wrp .lec_detail:nth-child(3) {background: #f5f5f5;}

.evt_wrp .lec_detail .lec_tit span{position: absolute; top: -20px; right: -10px; width: 65px; height: 65px; background: #f40469; color: #fff; text-align: center; font-weight: 800; display: grid; align-items: center; border-radius: 50%; font-size: 15px;}

#tch_con2{background: #fff url('https://image.engineerlab.co.kr/user/event/2024/1024/imgs/bg_tab2.png') no-repeat center 20px;}
.colorP{color: #f40469;}

.evt_wrp .lec_detail .info_box{background: #e7eff1; font-size: 14px; font-weight: 600; line-height: 20px; border-radius: 3px; text-align: left; /* margin: 5px 0 10px; padding: 15px 20px; min-height: 130px; */padding: 8px 20px;}
.evt_wrp .lec_detail .info_box p::before { content: '\2713'; margin-right: 5px; color: #0fb3bd;}

.evt_wrp .con_txt{border-top: 1px solid #efefef; padding: 10px 5px ; font-size: 15px;}
.evt_wrp .con_txt > span{display: inline-block;}
.evt_wrp .con_txt > div{padding-top: 5px;}
.evt_wrp .con_txt > div,
.evt_wrp .con_txt > span:first-child{font-size: 13px; font-weight: 600; padding-left: 10px; width: 20%;}
.evt_wrp .con_txt > div::before,
.evt_wrp .con_txt > span:first-child::before{content: ' \00B7' ;margin-left: -10px; padding-right: 3px;}
.evt_wrp .con_txt > span:last-child{text-align: right; width: 76%;}
.con_txt.book{min-height: 122px;}

.evt_wrp .con_txt.height{height: 99px;}
.evt_wrp .lec_detail .soon {background: #efefef; padding: 18px; text-align: center; font-size: 20px;}
.evt_wrp .lec_detail .price ul{overflow: hidden; display: flex; align-items: baseline;}
.evt_wrp .lec_detail .price li{float: left;}
.evt_wrp .lec_detail .price li:first-child{color: #818181; font-size: 14px; width: 28%;}
.evt_wrp .lec_detail .price li:last-child{text-align: right; width: 72%;}
.evt_wrp .lec_detail .price s{font-size: 14px; color: #5a5a5a;}
.evt_wrp .lec_detail .price span{color: #f40469; font-weight: 700; font-size: 15px; padding-right: 10px;}
.evt_wrp .lec_detail .price em{font-weight: 900; letter-spacing: -1px;}

.evt_wrp .lec_detail .btn_buy{width: 60%; margin: 20px auto 0; padding: 15px 0; display: block; background: #000; color: #fff; font-weight: 800; font-size: 20px; border-radius: 50px; text-align: center;    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translate(-50%);}


.evt_wrp .noti_txt{position: relative; width: fit-content; text-align: center; font-weight: 800; color: #fff; line-height: 1; margin: 40px auto 0;}
.evt_wrp .noti_txt .arrow{position: absolute; top: -3px; margin-left: 30px;}
.evt_wrp .noti_txt .arrow::after {display: inline-block; content: ''; width: 9px; height: 9px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(135deg); position: absolute; top: 7px; right: 9px;}
.evt_wrp .btn_noti{text-align: right; position: absolute; top: -2px; right: 0;}
.evt_wrp .btn_noti a{display: inline-block; color: #fff; border: 1px solid #fff ;padding: 5px 20px; border-radius: 2px; margin-left: 10px;}



/* PC 와이드 */
@media screen and (min-width: 821px) {  
.lecBuy{text-align: center; padding-bottom: 70px;}

.lectureList .inner{width: 1130px; margin: 0 auto;}
    
.evt_wrp .lec_detail{width: 35%; margin: 0 8px; height: 445px;}
.evt_wrp .lecList .inner{width: 1200px; margin: 0 auto;}
.evt_wrp .lec_detail .price em{font-size: 26px;}

.notice_wp{position: relative; width: 1200px; margin: 0 auto;}
.evt_wrp .noti_txt{font-size: 22px;}

.evt_wrp .project{width: 1200px; margin: 0 auto;}    
.evt_wrp .project table thead th{font-size: 20px;}
.evt_wrp .project table tbody th{font-size: 18px;}
}



/* 모바일 */
@media screen and (max-width: 820px){
  .evt_wrp .tit,
  .evt_wrp .inner{width: 95%;}
  .evt_wrp .tit{width: 95%; padding-bottom: 5%;}  
  .evt_wrp .txt{width: 140%; margin-left: -20%; font-size: 30px !important; padding-bottom: 0;}
  
  .evt_wrp .visual img{width: 100%;} 
  .evt_wrp .visual{margin: 0 auto; height: 292px;}
  .evt_wrp .visual_typo{width: 17%; top: 90px; right: -5px;}
  .evt_wrp .con1_typo{top: 76px; left: 165px; width: 13%;}
  
  
  .evt_wrp .conts_inline li{width: 82%; margin: 15px 0;}
  .evt_wrp .txt.top{padding-top: 30px; width: 126%; margin-left: -12.5%;}
  .evt_wrp .drop { box-shadow: 2px 2px 7px 6px rgba(0, 0, 0, 0.1);}
  * [class^="bg_"]{position: relative; padding: 10% 0;}
  .evt_wrp .visual .inner{width: 115%; margin-left: 14px; padding-top: 20px;}
  .evt_wrp .visual .inner.txt{padding: 30px 0 90px;}
  .quick{display: none;}

  .evt_wrp .back_right{width: 90%; top: 19px;}

  .evt_wrp .bg_02 .conts_inline li{width: 95%; display: block; margin: 0 auto;}
  .evt_wrp .slide_box,
  .evt_wrp .slide_box2{width: 90%; margin: 20px auto 0px; height: fit-content;}

  .evt_con #tch_con1 .conts_inline li{ margin: 10px 4px;}
  .evt_con .bg_01:nth-child(4) .txt.top,
  .evt_con .bg_01:nth-child(4) .conts_inline{display: none;}
  .evt_con .bg_01:nth-child(4) .tit{width: 42%;}

  .evt_wrp .review_box{width: 90%; height: fit-content;}
  .evt_wrp .review_box .swiper-button-prev{top: 40px;} 
  .evt_wrp .review_box .swiper-button-next{top: 40px;}   

  .card{width: 90%; padding: 25px;}
  .card li:first-child{width: 60%; margin-bottom: 20px;}
  .card li .ponter{width: 60px;}

  .bar{width: 100%; display: block; text-align: center; font-size: 22px; padding: 10px 0;}
  .bar_bnr li strong{font-size: 35px; width: 43px; display: inline-block; letter-spacing: -1px;}
  .bar_bnr li div{display: inline-block ;margin-right: 10px; color: #af0029; font-size: 22px;}
  .bar .evt_btn{font-size: 18px; width: 40%; padding: 5px 0;}
  
  .point_tabWrap{width: 100%;}
  .tch_tab{width: 33.3%; font-size: 15px; padding: 18px 0 20px;}
  .tch_tab span{font-size: 11px;}
  .tch_tab.active span{padding-bottom: 17px;}
  .tch-tab-conts{padding-bottom: 50px;}

  .evt_wrp .lectureList{width: 95%; text-align: center; padding-bottom: 20px;}
  .evt_wrp .lec_detail .lec_tit{font-size: 24px;}
  .evt_wrp .lec_detail .lec_tit br{display: none;}
  .evt_wrp .con_txt > span:last-child{width: 78%; font-size: 13px;}

  .evt_wrp .slide_box1 .swiper-button-prev, 
  .evt_wrp .slide_box2 .swiper-button-prev{top: 45px; left: -15px;}
  .evt_wrp .slide_box1 .swiper-button-next,
  .evt_wrp .slide_box2 .swiper-button-next {
  top: 45px; right: -15px;}

  .evt_con .bg_01:nth-child(5) .tit{width: 50%;}
  .evt_con .bg_03:nth-child(6) .tit{width: 70%;}
  .evt_wrp .typo_pop{top: 90px; right: 20px; width: 23%;}

  .evt_wrp .txt-tit{font-size: 12px; font-weight: 500;}
  .evt_wrp .lec_detail{margin-bottom: 10px;}
  .evt_wrp .lec_detail .price em{font-size: 20px;}
  .evt_wrp .notice{width: 95%; padding-bottom: 50px;}    
  #buy .tit{padding-top: 60px;}
  .bar span{margin-right: 0;}
  #tch_con1 .tit{margin: 0 auto;}
  #tch_con2{background-size: 110%;}
  .evt_wrp .lec_detail .btn_buy{padding: 10px 0;}
}



