@charset "UTF-8"; 
/* 메인페이지에 사용 푸터 포함  // 각 컴포넌트의 @media  해당 부분 하단에 작성 */
/* 임시적용 */
/* LNB 리뉴얼 전 임시 */

/* LNG 좌측 상단 전기기사, 전기산업기사, 전기공사기사 링크 */
.pc-menu .menu-item:first-child{position: relative;}
.pc-menu .elec-link01,
.pc-menu .elec-link02,
.pc-menu .elec-link03{position: absolute; left: -234px; font-weight: 700; font-size: 18px; padding: 5px; background-color: #fff; border: 2px solid #0A1AAD;}
.pc-menu .elec-link01 span,
.pc-menu .elec-link02 span,
.pc-menu .elec-link03 span{color:#0A1AAD;}
.pc-menu .elec-link01{}
.pc-menu .elec-link02{top: 77px;}
.pc-menu .elec-link03{top: 120px;}


.mainSection{padding:0 20px;}

section.mainSection > div{width: 1200px; margin: 0 auto;}
/* 키워드 + 검색 영역 */
.keywordArea{margin-top:25px; margin-bottom: 45px; display: flex; gap:50px;}
.keywordArea .keywordBox{display: flex; gap:10px;}
.keywordArea .keywordBox a{font-size: 14px; padding:10px 16px; border:1px solid #2D2D2D; border-radius: 20px;}
.keywordArea .keywordBox a:hover{background-color:#2656f6; border-color:#2656f6; color:#fff}
.keywordArea .searchBox{flex: 1; position:relative; width: 90%;}
.keywordArea .searchBox input{width:100%; padding:2px 30px 2px 16px; height:38px; border: 1px solid #E2E2E3; background: #F2F2F2; border-radius: 10px; font-size: 14px;}
.keywordArea .searchBox input:focus {outline: none;}
.keywordArea .searchBox a{position:absolute; top:9px; right:20px; display: inline-block;}
.keywordArea .searchBox a img{width: 19px; height: 19px;}

/* 메인 미드 티켓 링크 */
section.mainSection > div.mainTicketBanner{margin:0 auto 25px;}

.mainTicketBanner{ background-color:#eaf4fe; padding:24px; border-radius: 8px; display:flex; gap:10px; flex-wrap: wrap; margin-bottom: 20px;}
.mainTicketBanner a{width:49%; display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding:10px; border:1px solid #ddd; border-radius: 4px;}
.mainTicketBanner span{font-size: 18px; font-weight: 600;}
.mainTicketBanner span em{color:#246bfd;}
.mainTicketBanner span:first-child{flex: 1 1 100px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap;}
.mainTicketBanner span:last-child{padding: 8px 15px; background: #e2e2e3; font-size: 14px; border-radius: 14px; font-weight: 500; flex: none; margin-left: auto}

.mainTicket-left{position: absolute; left: -160px; top: 0;}

.mainTicketBannerMo,
.mainTicketBannerMo-sub{display: none;}
.mainTicketBannerMo > a{flex:1; border-radius: 4px; display: block; padding:20px 25px 20px 50px; position:relative}

@media (max-width: 1530px){
    .mainTicket-left{display: none;}}
@media (max-width: 1200px){
    section.mainSection > div,
    .mainTicketBanner{width:100%}
}
@media (max-width: 749px){
    .mainTicketBanner{margin-top: 25px;}
}
@media (max-width: 649px){
    .mainTicketBanner{display:none}
    section.mainSection > .mainTicketBannerMo{display:flex; margin:20px auto;}
    section.mainSection > .mainTicketBannerMo-sub{margin:25px 0 35px; display:block}
    .mainTicketBannerMo a{padding: 24px; border-radius: 12px; display: flex; justify-content: space-between;}
    .mainTicketBannerMo em{padding:12px 20px; background: #d1d1d1; font-size: 14px; border-radius: 18px; font-weight: 500;}
    .mainTicketBannerMo span{color:#fff; font-size: 18px;}
    .mainTicketBannerMo p{font-weight: 600;}
    .mainTicketBannerMo-sub .box_btnMore{margin-bottom: 10px;}
    .mainTicketBannerMo-sub .box_btnMore h3.tit{font-size: 18px;}

}

/* 197px가 원본 */
/* .contents.main .main-wrap{padding-bottom:92px;} */
@media (max-width: 1440px){
    .topTitleBanner,
    .mainRightBanner,
    .Welcome-link{display:none !important}
    .contents.main{top: 0px;}
    .contents.main .main-wrap{padding-bottom:0px;}
}

.testData{font-weight: 600; font-size: 20px;}
.testData span{color: #E91E63;}

/* 메인 상단 스카이 배너 */
.topTitleBanner{position: relative; z-index: 999; display: none;}
.topTitleBanner .topBannerBig.topBanner01{display: flex; background: #fcce00; height: 78px; align-items: center; justify-content: center;}
.topTitleBanner .topBannerBig.topBanner01 span{font-size: 32px; font-weight: 800; color: #fff;}

.topTitleBanner .topBannerBig.topBanner02{display: flex; background: linear-gradient(90deg, #0400f4 0%, #0400e7 100%); height: 78px; align-items: center; justify-content: center;}
.topTitleBanner .topBannerBig.topBanner02 span{font-size: 32px; font-weight: 800; color: #fff;}

.topTitleBanner .bannerClose{color:#fff; font-size: 14px; font-weight: 500; position: absolute; top:20px; right:50px;}

/* 메인 상단 - 첫방문 안내 메뉴 */
.main-header-top{position: relative;}
.Welcome-link{position:absolute; top:0; left:0; z-index: 99; height: 44px; overflow: inherit;}
.Welcome-link p{position:inherit; z-index:9; min-width:200px; cursor: pointer; color: #0038C7; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; height: 44px; line-height: 42px; background-color: #fff; border:solid #2753D6; border-width: 1px; text-align: center;}
.Welcome-link p em{color: #0078E8;}
.Welcome-link p:after{content: ''; position: absolute; top: -1px; right: -24px; width: 24px; height: 44px; background: url(../img/main_new/btn-welcome-close.png) center/cover no-repeat;}
.Welcome-link.on p:after{background: url(../img/main_new/btn-welcome-open.png) center/cover no-repeat;}
.Welcome-link.on ul{transform: translateY(-405px); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);}
/* 닫힐때 */
.Welcome-link ul{transform: translateY(0px); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); padding-top: 43px;}
.Welcome-link li{position: relative; border: 1px solid #2753D6;}
.Welcome-link li:after{content: ''; position: absolute; top: 50%; right: 16px; width: 5px; height: 9px; background: url(../img/main_new/main_arrow.svg) center/cover no-repeat;}
.Welcome-link li a{min-width:198px; background-color: #fff; display: block; padding:15px 24px 15px 18px; font-size: 14px; font-weight: 600; letter-spacing: -1.12px; text-align: center; line-height: 20px;}
.Welcome-link li a span{display: block; color:#2753D6}
.Welcome-link li + li{border-top-width: 0px;}
.Welcome-link li:hover:after,
.Welcome-link li.eq:after{background: url(../img/main_new/main_arrow_w.svg) center/cover no-repeat;}
.Welcome-link li:hover a,
.Welcome-link li.eq a{background-color: #12184B; color: #81FF7E; border-color: #12184B;}
.Welcome-link li:hover a span,
.Welcome-link li.eq a span{color: #81FF7E;}
.Welcome-link li.bb-none{border-bottom-width: 0;}

.ibt-counting{border: 1px solid #111; padding:6px;}
.ibt-counting,
.Welcome-link-mo .ibt-counting{text-align: center; background: #fff;}
.Welcome-link-mo .ibt-counting{padding:10px; display: flex; gap: 10px; align-items: center; padding:10px 20px; border:none;}
.ibt-counting h3,
.Welcome-link-mo .ibt-counting h3{font-size: 14px; font-weight: 600; letter-spacing: -0.5px;}
.ibt-counting h3{padding-bottom: 6px;}
.Welcome-link-mo .ibt-counting h3{padding-bottom: 0px;}
.ibt-counting h3 em,
.Welcome-link-mo .ibt-counting h3 em{color:#2753D6}
.ibt-counting span{padding:8px 0;}
.ibt-counting span,
.Welcome-link-mo .ibt-counting span{background-color: #011339; display: block; color: #BFD4FF; font-weight: 500;}
.Welcome-link-mo .ibt-counting span{padding:10px; font-size: 14px;}
.ibt-counting span em,
.Welcome-link-mo .ibt-counting span em{animation: blink-effect-count 1s step-end infinite;}
.ibt-counting p{text-align: right; font-size: 10px; margin-top: 5px; font-weight: 500;}

@keyframes blink-effect-count {
    50% {
      opacity: 0; 
   }
 }

/* 메인 상단 - 첫방문 안내 메뉴 모바일 */
.Welcome-link-mo{position: relative; background-color: #fff;}
.Welcome-link-mo p{position:relative; padding:0 25px; color: #0038C7; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; height: 38px; line-height: 36px; background-color: #fff; border:solid #E2E2E3; border-width: 1px 0;}
.Welcome-link-mo p em{color: #0078E8;}
.Welcome-link-mo p:after{content: ''; position: absolute; top: 10px; right: 21px; width:8px; height: 15px; background: url(../img/main_new/main_arrow.svg) center/cover no-repeat; transform: rotate(90deg);}
.Welcome-link-mo.on p:after{transform: rotate(270deg);}
.Welcome-link-mo ul{transform: translateY(-427px); position: absolute; top: 38px; background-color: #fff; z-index:99; width: 100%;}
.Welcome-link-mo.on ul {transform: translateY(0px); min-height: 500px;}
.Welcome-link-mo li{background: url(../img/main_new/main_arrow_B.svg) center right 20px/8px no-repeat}
.Welcome-link-mo li + li{border-top: 1px solid #E2E2E3;}
.Welcome-link-mo li:last-child{border-bottom: 1px solid #E2E2E3;}
.Welcome-link-mo li a{display: block; padding:9px 25px; font-size: 14px;}

/* 메인 슬라이드 */
.mainSwiperArea {position:relative; height:300px;}
.mainSwiperArea .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.mainBannerSlide {width: 100%; height:300px}
.mainBannerSlide .pageNationArea{position: absolute; height: 100%;   
     top: -21px; right: 52px;}
.mainBannerSlide .pageNation{width:150px; position: absolute; bottom:4px; 
    right:300px; color:#fff; font-size: 13px; z-index: 19;}

.mainBannerTextArea {position: relative; bottom: 58px; left: 0; right:0;}
.mainBannerTextArea .sub{width: 1200px; margin:0 auto}
.mainBannerTextArea .textSwiperArea{display: flex; gap:15px; margin: unset !important;}
.mainBannerTextArea .pageNation{width: 150px; position: relative;
      flex:none; display: flex; }
.mainBannerTextArea .pageNation .swiper-button-next,
.mainBannerTextArea .pageNation .swiper-button-prev{
     width: 5px; height:40px;  background-repeat: no-repeat; 
    background-size: contain;}
.mainBannerTextArea .pageNation .swiper-button-next::after,
.mainBannerTextArea .pageNation .swiper-button-prev::after{content: none;}
.mainBannerTextArea .pageNation .swiper-button-next{ background-image: url(../img/pages/main/main_btn_next.png);}
.mainBannerTextArea .pageNation .swiper-button-prev{ background-image: url(../img/pages/main/main_btn_prev.png);}

.mainBannerTextArea .swiper-pagination{color:#fff}
.mainBannerText .swiper-slide {height: 100%; opacity: 0.4; color:rgba(255,255,255,0.5); font-size: 13px; cursor: default; 
    display:block; text-align: center; 
    padding:10px;
    background-color:#7A7B84; 
    width:100%;
    /* border-top:1px solid #eee;  */
    height:40px;
}
.mainBannerText .swiper-slide-thumb-active {opacity: 1; color:rgba(255,255,255,1);}
.mainBannerText .swiper-slide a{
    color:#fff;
    z-index: 1;
    position: relative;
}

.mainBannerText .swiper-slide-thumb-active a{border-top:none;}
.mainBannerText .swiper-wrapper .swiper-slide{position: relative; border-radius: 5px;}
.mainBannerText .swiper-wrapper .swiper-slide:before { 
    content:''; display:block; position:absolute; left:0; top:0; width:0; 
    height:100%; background:#212121; z-index: 0;border-radius: 5px;}
/* .mainBannerText .swiper-wrapper .swiper-slide:before { 
    content:''; display:block; position:absolute; left:0; top:0; width:0; 
    height:1px; background:#fff;} */
.mainBannerText .swiper-wrapper .swiper-slide-thumb-active.swiper-slide:before { width:100%; transition:4s;}

@media (max-width: 1199px){
    .mainSwiperArea {height:360px;}
    .mainBannerSlide {height: 100%;}
    .mainBannerSlide .pageNation{right: 0;}
    .mainBannerTextArea .sub{width: 100%;}
    .mainBannerText .swiper-wrapper .swiper-slide{min-width: unset;}
    .mainBannerTextArea .textSwiperArea{gap:0; width: 100% !important;}
    .mainBannerTextArea .textSwiperArea .pageNation{width:110px}
}

@media (max-width: 1024px){
    .mainSwiperArea {height:320px;}
    .mainBannerTextArea .textSwiperArea .pageNation{width:100px}
}

/* 메인 슬라이드 오른쪽 메뉴 */
.mainRightBanner{width: 430px; height:auto; position: absolute; top: 8px; right:10px; z-index: 9;}
.mainRightBanner .Rbanner01{ position: relative; display: flex; gap:10px 2%; height: 138px; flex-wrap: wrap;}
.mainRightBanner a{width: 100%; height:100%; display: block; flex:48%; background-color: #fff; border-radius: 8px; text-align: center; padding:20px 0}
.mainRightBanner p{font-size: 18px; color:#fa5718; line-height: 28px; font-weight: 600;}
.mainRightBanner em{display: block; font-size: 14px; color:#444}
.mainRightBanner span{margin-top: 10px; background-color: #e2e2e3; color:#000; padding:8px 26px; border-radius: 24px; display: inline-block;}

/* 모바일 - 메인 빅베너 */
.moBanner{display: none; flex-direction: column;}
.moBanner .moSwiper{width: 100%; height: 100%; position: relative;}
.moBanner .moSwiper .moPagination{display: inline-block; position: absolute; top: 9px; right: 9px; left:unset; width: unset; padding: 0 12px; height: 22px; line-height: 22px; font-size: .75rem; font-weight: 700; color: #fff; border-radius: 20px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 4px 0 rgba(0,0,0,.13); z-index: 70;}
.moBanner .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 899px){
    .mainSwiperArea{display: none;}
    .moBanner{display:flex}
}

/* 모바일 - 상단 슬라이드 배너 */
.moTopTitleArea{height:45px; display: none;}
.moTopTitleArea .moTopBanner{height:40px; display: flex;}
.moTopTitleArea .moTopBanner > a {width: 100%; height:40px; text-align: center;}
.moTopTitleArea .moTopBanner > a img{max-width: 360px;}
.mo-heder-tag-area{display: none;}
@media (max-width: 1439px){
    .moTopTitleArea{display: block;}
    .mo-header.main-header{top:45px}
    .contents.main{padding-top:100px !important}
    .mo-menu.main-mo-menu{top:100px}
}
@media (max-width: 749px){
    .contents.main{padding-top:140px !important}
    /* .contents.main{padding-top:95px !important} */
    .mo-heder-tag-area{padding:10px 0; position: fixed; top: 95px; left: 0; right: 0; background: #fff; display: block}
    .mo-heder-tag-area ul{display: flex;}
    .mo-heder-tag-area li{flex: 1; text-align: center;}
    .mo-heder-tag-area li + li{border-left:1px solid #aaa}
    .mo-heder-tag-area a{display: block; height: 100%; line-height: 20px;}
}
@media (max-width: 449px){
    .mo-heder-tag-area a{font-size: 14px;}
}
/* 강의소개 */
.tit_pag{padding-top: 40px;}


.tabMenu{position:relative}
.menuList{display:flex; justify-content: space-between;}
.menuList > div {width: 130px; text-align: center; 
    cursor: pointer; display: inline-block; 
    padding: 10px 0;     background-color: #F4F4F4;
    border: 1px solid #DADADA; color:#888}
.menuList > div.on {   
     color: #2656F6;
    background-color: #fff;
    border: none;
    border-top: 1px solid #2656f6;
    border-left: 1px solid #2656f6;
    border-right: 1px solid #2656f6;
}
.menuList > div a{font-size: 16px; font-style: normal; font-weight: 500;}
.menuList > div.on a{font-weight: 700;}
.contArea{width:100%; height: 280px; margin-top: 15px;}
.contArea > div {display: none;}
.contArea > div.show {display: block;}

/* 무료강의 */
.eduArea{display: flex; gap:16px; /* overflow-y:hidden; */overflow: hidden;}
.eduArea::-webkit-scrollbar{height:4px;}
.eduArea::-webkit-scrollbar-thumb{background-color: #ffffff;}
.eduArea::-webkit-scrollbar-track {background-color: rgb(255, 255, 255);}

.eduArea li{width:290px; flex:none;}
.eduArea img{height:170px; width: 100%;}
.eduArea p{position:relative; margin-top:30px; color: #2D2D2D; font-size: 16px; letter-spacing: -0.32px;}
.eduArea p::before{position:absolute; top:-20px; left:0; color: #fff; font-size: 12px; letter-spacing: -0.18px; padding:2px 4px; border-radius: 4px;}
.eduArea li.new p::before{content: 'NEW'; background-color:  #fa5718;}
.eduArea li.best p::before{content: 'BEST'; background-color:  #26a300;}
.eduArea span{display: block; margin-top:8px; color: #767676; font-size: 14px; letter-spacing: -0.24px;}
/* 강의 section 인강, 교제 */
.eduArea.view{gap:12px;}
.eduArea.view li{width:390px; padding-bottom: 0;}
.eduArea.view img{height:268px; width: 100%; border:1px solid #ccc;}

.bookList_books{width:100% !important;}


/* 타이틀 + 더보기 버튼  */
.box_btnMore{display:flex; justify-content: space-between; align-items: flex-end;}
.box_btnMore a.plus{cursor: pointer; color:#2656F6; font-size: 14px; font-weight: 400;}

.box_btnMore a.text{cursor: pointer; color:#2D2D2D; font-size: 16px; font-weight: 600; position:relative; display:block; padding-right: 12px;}
.box_btnMore a.text:after{content:''; position:absolute; width: 6px; height:12px; background: url(../img/main_new/main_arrow_B.svg) center/cover no-repeat; top: 5px; right: 0;}

/* 생생 합격 스토리 */
.mainStoryTit h2 {padding-top:20px}
.mainStoryTit h2 > span {position: relative;}
.mainStoryTit h2 > span:after,
.mainStoryTit h2 > span:before{content: ''; position: absolute; width: 30px; height: 60px; background: url(../img/main_new/ico_leaf.svg) center/contain no-repeat; bottom: -15px; left: -36px;}
.mainStoryTit h2 > span:after{left: unset; right:-36px; transform: rotateY(180deg);}
.mainStoryTit p{display: flex; justify-content: flex-end; align-items: center;}
.mainStoryTit p em{display: inline-block; width: 48px; height: 38px; background: url(../img/common/ico_story.svg) center/contain no-repeat}


/* BOOK  24.03.11 추가 */
.main_conts{padding-top: 30px;}
.tit{color: #2D2D2D; font-size: 24px; font-weight: 700; letter-spacing: 0px; font-family: 'Pretendard';}
.bookArea{padding: 15px 0 30px;}
.bookArea ul{overflow: hidden;}

.bookArea .mainmoTopBanner{display: none;}
.bookArea li{float: left; margin-left: 14px;}
.bookArea li:first-child{margin-left: 0;}



/* 이해적 커리큘럼 */
.mainLinkArea{background-color: #eaf4fe; margin: 20px auto; display: none;}

.mainLinkArea .curriculum{/* 24.0311 수정 padding: 30px 0; */display:none; padding: 50px 0; display: flex; justify-content: center; position: relative;}
.mainLinkArea .curriculum a{position: absolute; bottom: 34%; width: 19%; height: 16%;}
.mainLinkArea .curriculum .curri-link01{left: 0;}
.mainLinkArea .curriculum .curri-link02{left: 21%;}
.mainLinkArea .curriculum .curri-link03{left: 41%;}
.mainLinkArea .curriculum .curri-link04{right: 20%;}
.mainLinkArea .curriculum .curri-link05{right: 0;}
.mainLinkArea .curriculum .mo{display: none;}
@media (max-width: 768px){
    .box_btnMore a.plus{font-size:13px; }
    .mainLinkArea{display: block;}
    .mainLinkArea .curriculum .pc{display: none;}
    .mainLinkArea .curriculum .mo{display: block;}
    .mainLinkArea .curriculum a{bottom: 26%; width: 20%; height: 9%;}
    .mainLinkArea .curriculum .curri-link01{left: 5%;}
    .mainLinkArea .curriculum .curri-link02{left: 28%;}
    .mainLinkArea .curriculum .curri-link03{left: 52%;}
    .mainLinkArea .curriculum .curri-link04{right: 5%;}
    .mainLinkArea .curriculum .curri-link05{display: none;}
}

@media (max-width: 560px){
    .mainLinkArea .curriculum .curri-link01{left: 1%;}
    .mainLinkArea .curriculum .curri-link02{left: 27%;}
    .mainLinkArea .curriculum .curri-link03{left: 54%;}
    .mainLinkArea .curriculum .curri-link04{right: 1%;}
}
@media (max-width: 380px){
    .mainLinkArea .curriculum a{bottom: 27%;}
}

/* 유튜브 */
.youtube_bg_colon{background-color: #f5f5f5; padding:70px 20px;}
.main_conts_youtube{overflow: visible !important;}
.mainStoryArea{gap:14px; overflow:hidden;}
.youtube_bg{
    flex-direction: column; 
    gap:10px; 
    width:355px !important;
}
.youtube_bg_item{position: relative;}
.youtube_bg:hover img{transform: scale(1.05); border-radius: 15px;overflow: visible ;}
.youtube_bg img{border-radius:15px;}
.youtube_bg_tag span{font-size:12px; padding:5px 10px; border-radius:20px; color:#fff;}
.youtube_bg_tag_ {background:#2C2CFF;}
.youtube_bg_tag_new{background:#FF4256;}
.youtube_bg_tag, 
.youtube_bg_title{width:100%; text-align: left; margin-top: 10px;}
.youtube_bg_title p {font-size:18px;}

/* 유튜브처럼 버튼 */
.youtube_bg_more_left, 
.youtube_bg_more_right{
    position: absolute;
    top: 80px;
    z-index: 15;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    cursor:pointer;
}
.youtube_bg_more_left{
    left: -16.5px ;
}

.youtube_bg_more_right{
    right: -16.5px ;
}

@media (max-width: 768px){
    .youtube_bg_colon{padding: 50px 20px !important;}
    .main_conts_youtube{text-align: center; overflow: visible !important;}
    .mainStoryArea{justify-content: center;}
    .youtube_bg_title p{font-size:16px;}
    .mainStoryArea{overflow: visible !important;}
    .youtube_bg:hover img{transform: none !important;}
    .youtube_bg_more_left{left: 0;}
    .youtube_bg_more_right{right: 0;}
}


/* 메인 공지 */
.infoArea{margin-top: 70px !important;}
.mainNotiArea{display: grid;
grid-template-columns: 1fr 1fr;gap:13px; padding-bottom: 20px;}
.mainNotiArea li{border: 0; background-color: #fff; padding: 30px; overflow: hidden; 
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.06);
    border-radius: 15px;}
.mainNotiArea li.bdGray01_3{grid-column: 1; justify-content: space-between;
    display: flex;gap: 16px;
    grid-row: 2;margin: 66px 0;}
.mainNotiArea li.bdGray01_4{grid-column: 2;grid-row: 2;margin: 66px 0;padding:15px 30px;}
.mainNotiArea li.bdGray01_4 .mt15{margin-top: 0 !important;}
.mainNotiArea li:hover{box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);}

.m_tit{display:none !important;}

/* 모바일: 768px 이하 */
@media (max-width:768px){
    .infoArea{margin: 40px 0 !important;}
    .tit.tit_com.tit_3,
    .tit.tit_com.tit_4 {
        display: none;
    }
    .m_tit{display:block !important; padding-top:20px;}
    .see_more_tit{display:flex !important;}

    .mainNotiArea {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 20px;
    }
    .bdGray01_3 { margin: 0 !important;}
    .bdGray01_4 {margin: 0 !important;}
    .bdGray01_3 img{height: 33px;}
    .mainNotiArea li{padding:22px;}
    .bdGray01_3 a{padding:15px 0 !important;}
    .bdGray01_3 a p{
        font-size:14px !important;
    }
    .bdGray01_3 a p span{
        font-size: 12px !important;
    }

}

.bdGray01_3 a{
    background-color: #F4F4F4;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    flex-flow: column;
}

/* 고객센터 애니메이션 효과 */
.customer-link-css:hover,
.customer-link-css:focus {
    background: #eaf4fe;
    box-shadow: 0 2px 9px 0 rgba(53, 103, 216, 0.11);
}
.customer-link-css:hover img,
.customer-link-css:focus img {
    transform: scale(1.13) rotate(-6deg);
    filter: brightness(1.13) drop-shadow(0 2px 8px #92bbf8c0);
    /* Shake animation */
    animation: shake-center-quick 0.24s linear;
}
@keyframes shake-center-quick {
  10% { transform: scale(1.13) rotate(-9deg);}
  25% { transform: scale(1.12) rotate(6deg);}
  40% { transform: scale(1.13) rotate(-6deg);}
  60% { transform: scale(1.14) rotate(4deg);}
  85% { transform: scale(1.12) rotate(-4deg);}
  100%{ transform: scale(1.13) rotate(-6deg);}
}
.customer-link-css:hover p span {
    color: #3567d8;
    text-decoration: underline;
    font-weight: 700;
}
.bdGray01_3 a{
    text-align: center;
}
.bdGray01_3 a img{
    margin-bottom: 10px;
}
.bdGray01_3 a p{
    font-weight: 700;
    font-size:20px;
    text-align: center;
}
.bdGray01_3 a p span{
    font-size: 16px;
    color:#767676;
    font-weight: 400;
}

.tit_com{margin-top: 25px;}
.tit_3{grid-column:1; grid-row:2;}
.tit_4{grid-column:2; grid-row:2;}


/* 공지 style 01 */
.notiBox01 a{color:#2D2D2D; padding:10px 0; border-bottom: 1px solid #E2E2E3; display: block;}
.notiBox01 a:last-child{border-bottom: none;}
.notiBox01 p{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/* 메인 자주하는 질문 */
.faqArea{margin-top: 30px;}
.faq-Swiper {width:100%}
.faq-Swiper .swiper-slide{display:flex; background: url(../img/main_new/btn-qna-link.svg) top 10px right 10px/28px no-repeat; border-radius: 8px; border: 1px solid #E4E4E4;}
.faq-Swiper .swiper-slide > a{padding:25px 25px 15px; display: block;}
 .faq-Swiper .swiper-slide .tag-area{margin-bottom:25px}
.faq-Swiper .swiper-slide .tag-area span{color: #888; font-size: 15px; font-weight: 600; letter-spacing: 0.64px; display:block}
.faq-Swiper .swiper-slide p{min-height: 42px; color: #4A4A4A; word-break: keep-all; font-size: 18px; font-weight: 700; letter-spacing:-0.36px;}
.faq-Swiper .swiper-slide .info-area{font-size: 14px; line-height: 22px; min-height: 70px; max-height: 70px; overflow: hidden;} 

@media (max-width: 1200px){
    .faqArea{margin-bottom: 30px;}
    .link_book{background-size: 146px; padding-left: 180px;}
}

@media (max-width: 980px){
    .faq-Swiper .swiper-slide p{border-bottom:1px solid #000; padding-bottom:10px}
    .faqArea .box_btnMore{flex-direction: column; align-items: flex-start;}
    .faqArea .box_btnMore span{ flex:none; margin-left: auto;}
    .box_btnMore a.text{font-size: 14px;}
    .box_btnMore a.text:after{top:3px}
}

/* 푸터 - 웹 */
.footerPc{background-color: #2e2b36; padding: 65px 0 75px;}
.footerPc .inner{width: 1200px;}
.footerPc .info{display: flex; align-items: center; margin-bottom: 35px; gap: 40px;}
.footerPc .info .logo{width: 166px; height: 43px;}
.footerPc .info .links{display: flex; gap: 15px;}
.footerPc .info .links a{position: relative; font-size: 14px; letter-spacing: -0.14px; color: #f7f7f7;}
.footerPc .info .links a + a:after{content: ''; position: absolute; left: -7px; top:6px; width:1px; height:8px; background-color: #858585;}
.footerPc .company{display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
.footerPc .company .content {font-size: 14px; color: #c5c5c5; display: flex; flex-direction: column; gap:5px}

.footerPc .sns-links{display: flex; gap:20px}

/* 푸터 - 패밀리사이트(web) */
.familySiteBox{flex: none; display: block; margin-left: auto; width:300px; padding:10px 28px; position:relative; border: 1px solid #fff; background-color: #2e2b36;}
.familySiteBox .familyView{display:flex; justify-content: space-between; cursor:pointer;}
.familySiteBox ul{display: none; width:300px; height: 300px; padding:16px 28px; overflow: auto; position:absolute; bottom:40px; left:0; background-color: #2e2b36; z-index:999; border-bottom:2px solid #2e2b36; transition: 0.1s ease-in-out;}
.familySiteBox li{margin-bottom: 8px;}
.familySiteBox dt{color:#48edef; padding-bottom:8px; margin-bottom:4px; border-bottom: 1px solid #777; font-family: 'Malgun Gothic'; letter-spacing: -1px;}
.familySiteBox dd a{padding-left: 6px; color:#fff; line-height: 1.5; font-family: 'Malgun Gothic';}
.familySiteBox dd .pp{color:#c0e7fe; letter-spacing: -1px;}

/* 패밀리 사이트 애니메이션 */
.familyView .arrow{
    position:relative; 
    width: 16px; 
    height: 16px; 
    border-radius: 10px; 
    transition: 0.2s ease-in-out; 
}
.familyView .arrow span{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 16px; 
    height: 2px; 
    background: #fff; 
    transform-origin: center; 
    transform: translate(-50%, -50%) rotate(45deg); 
}
.familyView .arrow span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg); 
}
.familyView .arrow.on{transform: rotate(45deg);}

/* 푸터 - 모바일 */
.footerMo {display: none;}
.footerMo .content {
    background-color: #2e2b36; 
    text-align: center; 
    padding: 26px 22px 115px; /* 26px 22px 52px; */
    display: flex; 
    gap: 25px; 
    flex-direction: column; 
}
.footerMo .content .sns-links {
    display: flex; 
    justify-content: center; 
    align-items: center; 
gap:20px}
.footerMo .content .links {
    display: flex; 
    align-items: center; 
    justify-content: center; 
gap:10px}
.footerMo .content .links a{
    color:#f7f7f7; 
    font-size: 13px; 
    font-weight: 400; 
}
.footerMo .company{margin-top: 20px;}
.footerMo .content .companyName,
.footerMo .companyinfo{color:#f7f7f7; font-size: 13px;}
.footerMo .companyinfo{
    padding-top:20px; 
    font-size: 13px; 
    color: #c5c5c5; 
    display: none; 
}
.footerMo .content .companyName.on + .companyinfo{
    display: flex; 
    flex-direction: column; 
    gap:4px; 
}

.footerMo .content .companyName span{
    width: 14px; 
    height: 14px; 
    background: url(../img/common/arrow_right.png) center left/cover; 
    display: inline-block; 
    vertical-align: top; 
    transform: rotate(90deg); 
    margin-left: 10px; 
    transition: all ease 0.7s;}
.footerMo .content .companyName.on span{
    transform:rotate(0.75turn)
}
@media (max-width: 1520px){
    .tabMenu .wingBanner{display:none;}
}
@media (max-width: 1199px){
    .footerPc .inner{width: 100%; padding: 0 20px;}
}
@media (max-width: 1140px){
  
    .mainSection .tit_pag {padding-top:30px;}
    .keywordArea{flex-direction: column-reverse; align-items: center; margin-top:25px; margin-bottom: 15px;}
    .keywordArea .searchBox{display:none}
    .keywordArea .keywordBox a{font-size: 12px; padding: 8px 14px; flex:none}
    .keywordArea .keywordBox{overflow-x: auto; padding-bottom: 10px;}
    .contents.main{padding-bottom:0px !important}
    .eduArea{overflow-y:hidden; 
        overflow-x: auto; 
   }
    .eduArea p{margin-top: 26px;}
    .eduArea.view li{width: 335px;}
    .eduArea.view img{height: 230px;}
    .tagArea li a span{font-size:12px}
    .tagArea li + li::after{
        left: -100%; 
        margin-left: 5px; 
   }

    /* 24.03.11 추가 */
    .contArea{height: 16.5rem;}
    .main_conts{padding-top: 10px;}
    .tit{font-size: 18px; letter-spacing: -.4px;}
    .bookArea ul{display: none;}
    .bookArea .mainmoTopBanner{display: block;}
}
@media (max-width: 895px){
    .mainStoryTit p{margin-top: 30px;}
    .mainStoryTit p em{width: 38px; height: 28px;}
    .footerPc{display:none}
    .footerMo{display: block;}
    .tagArea li + li::after{width:6px; height:10px; background-size: cover; top: 46%; margin-left: 0px;}
}

@media (max-width: 749px){
    .keywordArea{display:none}
}

@media (max-width: 599px){
    .tagArea li:nth-child(2)::after{left:-5px}
    .tagArea li:nth-child(3)::after{left:-10px}
    .tagArea li:nth-child(4)::after{left:-5px}
    .tagArea li:nth-child(5)::after{left:-5px}
}
@media (max-width: 380px){
    .tagArea li a span{font-size:11px}
}

/* main GNB */
/* mo - top btn */
.btnTopMenu {display: flex; gap:10px}
.btnTopMenu a img{width:100%; height:100%;}
.btnTopMenu .btnSearch{width: 18px; height: 18px;}
.btnTopMenu .btnJoin{width: 18px; height: 18px;}
.btnTopMenu .btnLogin{width: 18px; height: 18px;}
.btnTopMenu .btnMy{width: 18px; height: 18px;}
.btnTopMenu .btnLogout{width: 18px; height: 18px;}


.cs-area{display: none;}
@media (max-width: 599px){
    /* main CS */
    .cs-area{font-family: Pretendard; display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; width: 100%;}
    .cs-area ul{display: flex;}
    .cs-area li{flex:1; text-align: center;}
    .cs-area li a{ font-size: 14px; font-weight: 500; padding:16px 0 16px 20px; display: block; width: 100%; height: 100%;}
    .cs-area li:nth-child(1){color:#111; background:#FFCC00 url(../img/main_new/icon_kakao-black.svg) center left 17% no-repeat;}
    .cs-area li:nth-child(2){color:#fff; background:#031B81 url(../img/main_new/icon_tel-fff.svg) center left 20% no-repeat;}
    .cs-area li:nth-child(3){color:#111; background:#fff url(../img/main_new/icon_bell.svg) center left 20% no-repeat;}
}


/*메인 미니배너 추가*/
.pc-header .btns{position: relative;}
.pc-header .main-top-mini{position: absolute; width: 210px; height: 60px; background: url(../img/main_new/main_top_mini.png) center/contain no-repeat; right: -220px; top: -10px;}
.pc-header .main-top-mini a{width: 100%; height: 100%;}


/* 엔진어랩을 선택한 이유 */
.passed_do{background:linear-gradient(352deg, #4860FF 0%, #3E51F0 40%, #739bff 100%); padding:70px 20px;}
.passed_do_flex {
    display: flex; 
    justify-content: space-between; 
    gap: 20px;
    opacity: 0;
    transform: translateY(30px);
}
.passed_do_flex.animate {
    animation: passedDoFadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes passedDoFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.passed_do_padbox{
    background:radial-gradient(120% 100% at 10% 0%, #3e51f0 0%, #394ded 60%, #3b64eb 100%); 
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, .08);
    box-shadow: 0 16px 40px -8px rgba(15, 40, 110, .28);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px; 
    color:#fff;
    text-align: center;
    width: 530px;
    height: 420px;
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}
.passed_do_padbox.animate {
    animation: padboxPopIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards;
}

@keyframes padboxPopIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.passed_do_padbox p{
    line-height: 2;
    font-size:24px;
    opacity: 0;
    transform: translateY(20px);
}
.passed_do_padbox.animate p{
    animation: padboxTextFadeIn 0.5s 0.6s ease-out forwards;
}

.passed_do_padbox h2{
    font-size:48px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
}
.passed_do_padbox.animate h2{
    animation: padboxH2PopIn 0.5s 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.passed_do_padbox img{
    opacity: 0;
    transform: scale(0.8);
}
.passed_do_padbox.animate img{
    animation: padboxImgPopIn 0.6s 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes padboxImgPopIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes padboxTextFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes padboxH2PopIn {
    to {
        opacity:1;
        transform: translateY(0) scale(1);
    }
}

.passed_do_list{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.passed_do_list li{
    border-radius: 15px;
    padding:20px;
    background-color:#fff;
    flex: 1 1 45%;
    display: flex;
    justify-content: space-between;
    font-size:20px;
    position: relative;
    opacity: 0;
    transform: translateY(25px) scale(0.98);
}
.passed_do_list.animate li{
    animation: passedDoListFadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.passed_do_list.animate li:nth-child(1){animation-delay:1.0s;}
.passed_do_list.animate li:nth-child(2){animation-delay:1.15s;}
.passed_do_list.animate li:nth-child(3){animation-delay:1.3s;}
.passed_do_list.animate li:nth-child(4){animation-delay:1.45s;}
.passed_do_list.animate li:nth-child(5){animation-delay:1.6s;}
.passed_do_list.animate li:nth-child(6){animation-delay:1.75s;}

@keyframes passedDoListFadeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.passed_do_list li strong{
    font-size:40px;
    font-weight: 900;
    color:#2656F6;
    display: inline-block;
    opacity: 0;
    transform: scale(0.85);
}
.passed_do_list.animate li strong{
    animation: numberPop 0.4s cubic-bezier(0.23,1, 0.32,1) forwards;
    animation-delay: 1.35s;
}
.passed_do_list.animate li:nth-child(1) strong{animation-delay:1.2s;}
.passed_do_list.animate li:nth-child(2) strong{animation-delay:1.35s;}
.passed_do_list.animate li:nth-child(3) strong{animation-delay:1.5s;}
.passed_do_list.animate li:nth-child(4) strong{animation-delay:1.65s;}
.passed_do_list.animate li:nth-child(5) strong{animation-delay:1.8s;}
.passed_do_list.animate li:nth-child(6) strong{animation-delay:1.95s;}

@keyframes numberPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.stat-icon{
    padding-top:30px;
    opacity: 0;
    transform: translateX(-12px);
}
.passed_do.animate .stat-icon{
    animation: iconInL 0.6s 1.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes iconInL {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stat-icon-1{
    padding-right:19px;
}

.passed_do_list_text{
    padding-top:10px;
    opacity: 0;
}
.passed_do_list_text.animate{
    animation: textBlockFadeIn 0.5s 1.85s ease-out forwards;
}

@keyframes textBlockFadeIn {
    to {
        opacity: 1;
    }
}

.passed_do_list_text p{
    font-size:14px;
    color:#ccc;
    line-height: 1.5;
    font-weight: 300;
    /* Fade-in as part of block */
    animation: none;
}

.passed_mo{
    display:none;
}

@media (max-width: 760px){
    .passed_pc{display: none;}
    .passed_mo{display: block; color:#fff;}
    .passed_mo p{color:#fff;}
    .passed_do{padding:50px 20px;}
    .passed_do_flex{flex-direction: column;}
    .passed_do_list_text p{
    font-size:12px;
    }
    .passed_do_list li{
        width:48%;
        flex: none;
        height: 141px;
    }
    .stat-text{
        font-size:14px;
    }
    .passed_do_list li strong{
        font-size:24px;
    }
    .stat-icon {
        position: absolute;
        right:10px;
        bottom:10px;
        padding-right:0;
    }
    .stat-icon-1 img{
        width: 55px;
    }
    .stat-icon-2 img{
        width: 80px;
    }
    .stat-icon-3 img{
        width: 70px;
    }
    .stat-icon-4 img{
        width: 80px;
    }
}




/* 엔지니어랩 합격생들 */
.candidate{padding:70px 20px;}

.youtube_tit{display: flex; justify-content: space-between; align-items: center;}

.candidate_flex{display: flex; gap:20px; justify-content: space-between;overflow: visible;}
.candidate_flex li{ flex-flow: column; display: flex; width: 33.333%; gap:10px;}

.candidate_bg_item{
    position:relative;
}

.candidate_bg_item img{
    filter: brightness(1.13) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.candidate_bg img{
    transition: transform 0.3s ease;
}

.candidate_bg:hover img{
    filter: grayscale(0%);
}

.candidate_title p{
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.candidate_play_icon{
    position:absolute; 
    right:0;
    left:50%; 
    bottom:10%; 
    font-size:100px; 
    color:#fff;; 
    text-shadow:0 2px 8px rgba(0,0,0,.24);
}

/* 합격자 리스트 */
.eduf-winner-contents{overflow: hidden; height: 200px;width:100% !important;
     margin: 30px auto; position: relative; left:50%; transform: translateX(-50%);
    }
.winner-track-title{position: absolute; top: 70%; left: 50%; 
    transform: translate(-50%, -50%); padding: 10px; background:#394ded ;
    border-radius:33px;display:inline-flex;align-items:center;z-index: 10;
    padding:7px 30px;gap:10px;}
    
.winner-track-title-icon{vertical-align:middle;animation:winner-track-title-icon 1.2s linear infinite;}
.winner-track-title span{font-size:16px;font-weight:700;color:#fff;}

/* 업데이트 중 돌리기 */
@keyframes winner-track-title-icon {
    0%   { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.winner-track{position: absolute; top: 0; left: 0; width: 100%;}
.winner-slide{ 
    display: grid; grid-template-columns: repeat(6, 1fr);
}
.winner-slide p{font-weight: 300;color:#808080;}
.winner-name{white-space: nowrap; font-weight:700; font-size: 16px; text-align: center; line-height: 33px;}

@media (max-width: 760px){
  .candidate{padding:50px 20px;}
  .candidate_flex li{flex: 1;}
  .candidate_title p{font-size: 11px;text-align: left;}
 .eduf-winner-contents{overflow: hidden; width: 72%; height: 30vw; margin: 0 auto;}
 .winner-slide{display: grid; grid-template-columns: repeat(3, 1fr);}
 .candidate_bg_item a i{font-size: 40px;}
 .winner-name{font-size: 9px;line-height: 3;}
 .winner-track-title{padding:7px 3px; width:60%; display:flex; justify-content: center;}
 .winner-track-title span{font-size:12px;font-weight:400;}
.winner-slide p{font-size:12px; line-height:1.8;}
 
}


/* 더보기 */
.see_more_tit{display: flex; justify-content: space-between; align-items: center;}
.see_more_tit_4{display: flex; justify-content: space-between;}
.see_more_tit_4 a{padding-top:7px;}

/* 모바일더보기 */
@media (max-width: 760px){
    .see_more_tit_4{display: none;}
}