@charset "UTF-8";

div.course-wrap section.course-section{margin-bottom: 6rem;}
div.course-wrap section.course-section:last-of-type{margin-bottom: 0;}

/****** course table ******/
div.course-wrap table.course-table{text-align:center; }
div.course-wrap table.course-table th{border-right:0;}
div.course-wrap table.course-table tbody td{font-size: 1rem; font-family:'NanumNeo_B',sans-serif;}
div.course-wrap table.course-table tbody td.tit{word-break: break-all;}
div.course-wrap table.course-table tbody td.tit,
div.course-wrap table.course-table tbody td.professor{font-family:'NanumNeo_EB',sans-serif;}
div.course-wrap table.course-table tbody td.tit a,
div.course-wrap table.course-table tbody td.professor a{color:var(--color-main01);}
div.course-wrap table.course-table tbody td.time{}
div.course-wrap table.course-table tbody td.time ul.week{display:flex; align-items:center; justify-content:center; gap:0.25rem; font-size:0.85rem; margin-bottom:0.3rem;}
div.course-wrap table.course-table tbody td.time ul.week > li{font-family:'NanumNeo_B',sans-serif; width:1.55rem; height: 1.55rem; line-height:1.55rem; text-align:center; background: var(--color-gray300); border-radius: 5px; color: #777;}
div.course-wrap table.course-table tbody a.state{font-family:'NanumNeo_B',sans-serif; padding:0.5rem 0.8rem; border-radius: 4px; display:inline-block; font-size:1rem; transition:0.3s; -webkit-transition:0.3s;}
div.course-wrap table.course-table tbody a.state.state01{background:var(--color-main01); color: #fff;}
div.course-wrap table.course-table tbody a.state.state02{border: 2px solid #333; background: #fff;}
div.course-wrap table.course-table tbody a.state.state03{background:var(--color-gray300); border-color:#eee; color:#9f9f9f;}
div.course-wrap table.course-table tbody a.plan{font-family:'NanumNeo_B',sans-serif; padding:0.5rem 0.8rem; border-radius: 4px;  display:inline-block; font-size:1rem; background: var(--color-main04); color: #fff; transition:0.3s; -webkit-transition:0.3s;}
@media(hover:hover){ 
	div.course-wrap table.course-table tbody tr:hover{background:#f9f9f9;}
	div.course-wrap table.course-table tbody a.state.state01:hover,
	div.course-wrap table.course-table tbody a.plan:hover{transform: translateY(-0.25rem);}
}

/****** course view ******/
div.course-wrap.view{}
div.course-wrap.view div.top{position: relative; width:100%; min-height: 13rem; margin-bottom: 6rem; background: url('../img/course_intro_bg.png')center/cover no-repeat; border-radius: 1rem; padding: 2rem; display: flex; flex-direction:column; justify-content:center; align-items: center;}
div.course-wrap.view div.top div.name{width:fit-content; color: #fff; font-family: 'NanumNeo_EB',sans-serif; text-align: center; font-size: 2rem; padding-bottom:0.3rem; margin-bottom: 1.5rem;}
div.course-wrap.view div.top a.top-btn{font-family: 'NanumNeo_B',sans-serif; display: inline-block; margin: 0 auto; padding: 0.5rem 1.125rem; border-radius: 4px;}
div.course-wrap.view div.top a.btn-apply{color:var(--color-main01); background: #fff; box-shadow: 0 18px 28px rgba(0,0,0,0.2); animation:moveBtn 2.25s linear infinite;}
div.course-wrap.view div.top a.btn-done{background: rgba(255,255,255,.2);  color: #fff; border: 2px solid rgba(255,255,255,.2);}
div.course-wrap.view div.top a.btn-back{display: inline-block; font-size: 1.125rem; position: absolute; z-index:1; right: 0; bottom: -3rem; height: 2rem; line-height: 2rem; border-bottom: 1px solid #333; padding-left: 2rem; font-family: 'NanumNeo_EB',sans-serif;}
div.course-wrap.view div.top a.btn-back::before{content: ''; display: block; width: 1rem; height: 1rem; background: url('../img/ico_arrow.svg') center / 100% auto no-repeat; position: absolute; top: 50%;  left: 0; transform: translateY(-50%) rotate(180deg);}
div.course-wrap.view div.mid{margin-bottom: 4rem;}
div.course-wrap.view div.bot div.con{margin-bottom: 3rem;}
div.course-wrap.view div.bot div.con div.viewer{width:60%; height:60rem; margin: 0 auto;}
div.course-wrap.view div.bot div.con div.viewer iframe{width: 100%; height: 100%;}
div.course-wrap.view div.bot div.con.con01 div.btn-center-wrap a{margin-bottom: 1.25rem;}
@keyframes moveBtn {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 강의계획서 */
div.course-plan{padding: 1.25rem; font-size: 1rem; position: relative;}
div.course-plan div.cp-top{margin-bottom: 4rem;}
div.course-plan div.cp-mid{margin-bottom: 4rem;}
div.course-plan div.cp-mid div.contents a.c-btn.download.confirm{margin-bottom: 1rem;}
div.course-plan div.cp-mid div.contents div.pdf-wrap{width: 100%; height:40rem; text-align: center;}
div.course-plan div.cp-mid div.contents div.pdf-wrap iframe{width:100%; height: 100%;}
div.course-plan div.cp-mid div.contents div.con{margin: 3rem 0;}
div.course-plan div.cp-mid{}
div.course-plan div.cp-bot{}


/* 강사소개 모달창 */
div.course-wrap div.prof-modal-wrap{}
div.course-wrap div.prof-modal-wrap div.prof-modal{}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal{min-width: 800px;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mhead{background: var(--color-main01); color: #fff; padding:1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: 1.5rem 1.5rem 0 0;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mhead p.prof-name{font-size: 1.5rem; font-family:'NanumNeo_EB',sans-serif; display: flex; align-items: center;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mhead p.prof-name span.pos{font-size: 1rem; font-family:'NanumNeo_R',sans-serif; display: inline-block; margin-left: 1.25rem}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mhead a.modal-close{ width: 2rem; height: 2rem; background: url('../img/ico_close_wh.svg') center / 100% auto no-repeat; transition: 0.3s; -webkit-transition: 0.3s;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody{padding: 2rem;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top{display: flex;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top div.img{width: 9rem; height: 10rem;} 
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top div.img img{width: 100%; height: 100%; object-fit: cover; vertical-align: bottom;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info{width: calc(100% - 9rem); padding-left: 2rem;} 
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info > li{font-size: 1.125rem; margin-bottom: 1.25rem; display: flex;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info > li:last-child{margin-bottom: 0;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info > li span{min-width: 5rem; margin-right: 1rem; display: inline-block;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.bot{overflow-y: auto; max-height: 24rem; margin-top: 2rem;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.bot div.career-wrap{}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.bot div.career-wrap div.career div.c-tit{font-size:1.125rem; font-family:'NanumNeo_EB',sans-serif; background: #e0f1ff; padding: 0.8rem 1rem; border-radius: 0.5rem;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.bot div.career-wrap div.career div.c-con{padding: 1rem; margin-bottom: 1rem;}
div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.bot div.career-wrap div.career div.c-con ul.list01 > li{font-size: 1rem;}
@media(hover:hover){
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mhead a.modal-close:hover{transform: rotate(180deg);}
}


/****** 반응형 ******/
@media screen and (max-width:1600px){}
@media screen and (max-width:1440px){
	
	div.course-wrap{width:100%;}
}
@media screen and (max-width:1280px){
	


}
@media screen and (max-width:1024px){
	
	/****** course table ******/
	div.course-wrap table.course-table colgroup{display:none;}
	div.course-wrap table.course-table thead{display:none;}
	div.course-wrap table.course-table,
	div.course-wrap table.course-table tbody,
	div.course-wrap table.course-table tr,
	div.course-wrap table.course-table th,
	div.course-wrap table.course-table td{display:block; width:100%; border:0;}
	div.course-wrap table.course-table tbody{display:flex; justify-content:space-between; flex-wrap:wrap;}
	div.course-wrap table.course-table tbody tr{width:48%; border-radius:0.5rem 0.5rem 0 0; overflow:hidden; margin-bottom:3rem;}
	div.course-wrap table.course-table tbody tr td{border:0; text-align:right; position:relative; min-height:3.18rem; border-bottom:1px solid #ddd; padding: 1rem;}
	div.course-wrap table.course-table tbody tr td:nth-child(odd){background:var(--color-gray200);}
	div.course-wrap table.course-table tbody tr td:last-child{border-bottom:1px solid #ddd;}
	div.course-wrap table.course-table tbody tr td:before{content:attr(data-label); display:block; position:absolute; top:50%; left:0.5rem; transform: translateY(-50%); font-family:'NanumNeo_EB',sans-serif;}
	div.course-wrap table.course-table tbody tr td.tit{text-align:center; background:var(--color-main01); color:#fff; padding:1.25rem 0.5rem; border-bottom:0;}
	div.course-wrap table.course-table tbody tr td.tit a{color:inherit;}
	div.course-wrap table.course-table tbody tr td.tit:before{display:none;}
	div.course-wrap table.course-table tbody tr td.time{display:flex; gap:0.5rem; justify-content:flex-end; align-items:center; flex-wrap:wrap;}
	div.course-wrap table.course-table tbody tr td.time ul.week{margin-bottom:0;}
	div.course-wrap table.course-table tbody tr td.time ul.week > li{width:1.5rem; height:1.5rem; line-height:1.5rem; border:1px solid #ccc; background:#fff;}
	div.course-wrap table.course-table tbody tr td.period br{display:none;}
	div.course-wrap table.course-table tbody tr.noList{width:100%; border-radius:0; border-top:1px solid #ddd;}
	div.course-wrap table.course-table tbody tr.noList td{ text-align:center; background:#f5f5f5; border:0; color:#777; border-bottom:1px solid #ddd; padding:1rem;}

	/* course view */
	div.course-wrap.view div.bot div.con div.viewer{width: 70%; height: 52rem;}

	/* 강사소개 모달창 */
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal{width: 80%; min-width: unset;}

}
@media screen and (max-width:800px){
	/* course view */
	div.course-wrap.view div.bot div.con div.viewer{width: 100%; height: 50rem;}

	

}
@media screen and (max-width:640px){

	/* course view */
	div.course-wrap.view div.bot div.viewer{height: 40rem;}

	/* 강사소개 모달창 */
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top div.img{width: 8rem; height: 9rem;}
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info{width: calc(100% - 8rem); padding-left: 1.5rem;}
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info > li{font-size: 1rem;}
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info > li span{min-width: 4rem;}

}
@media screen and (max-width:480px){
	
	/****** course table ******/
	div.course-wrap table.course-table tbody tr{width:100%;}

	/* course view */
	div.course-wrap.view div.top{min-height: 10rem;}
	div.course-wrap.view div.top div.name{font-size: 1.8rem;}
	div.course-wrap.view div.bot div.con div.viewer{height: 36rem;}

	/* 강사소개 모달창 */
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody{padding: 1.5rem;}
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top div.img{display: none;}
	div.course-wrap div.prof-modal-wrap div.prof-modal div.modal div.mbody div.top ul.info{width: 100%; background: #f5f5f5; padding: 1rem; border-radius: 0.5rem;}


}
@media screen and (max-width:400px){
	

}
@media screen and (max-width:320px){}