@charset "UTF-8";

/****** course table ******/
div.course-wrap h4.sub-tit{margin: 5rem 0 1rem 0;}
div.course-wrap table.course-table{text-align:center; font-size:1.125rem; border-top:2px solid var(--color-main04);}
div.course-wrap table.course-table tr{border-bottom:1px solid #ddd;}
div.course-wrap table.course-table th{border-right:1px solid #ddd; padding:1rem 0.5rem;}
div.course-wrap table.course-table th:last-child{border:0;}
div.course-wrap table.course-table td{border-right:1px solid #ddd; padding:1rem 0.5rem;}
div.course-wrap table.course-table td:last-child{border:0;}
div.course-wrap table.course-table thead{background:#F3F4F9; color:#2B2B2B;}
div.course-wrap table.course-table thead th{border:0; padding:1.2rem 0.5rem;}
div.course-wrap table.course-table tbody{}
div.course-wrap table.course-table tbody td span.mark-recommend{display:inline-block; width:2.5rem; height:2.5rem; padding-top:0.35rem; transform:translateY(-1rem); text-align: center; background:url("../img/mark_recommend.svg")center /contain no-repeat; color:#fff; letter-spacing: -0.03rem; font-size: 0.9rem; font-family: "Pretendard-Medium"; animation-name: flash; animation-duration: 2.5s; animation-iteration-count: infinite;}
div.course-wrap table.course-table tbody td.tit{font-family:'Pretendard-SemiBold',sans-serif; padding:1rem;}
div.course-wrap table.course-table tbody td.tit a{color:var(--color-main04);}
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:'Pretendard-Medium',sans-serif; width:1.55rem; height: 1.55rem; line-height:1.55rem; text-align:center; background: #efefef; border-radius: 5px; color: #555;}
div.course-wrap table.course-table tbody a.state{font-family:'Pretendard-SemiBold',sans-serif; padding:0.5rem 0.8rem; 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-main04); color: #fff; box-shadow:0 5px 18px rgb(0, 79, 163, 0.1);}
div.course-wrap table.course-table tbody a.state.state02{border: 2px solid var(--color-main04); background: #fff; color:var(--color-main04);}
div.course-wrap table.course-table tbody a.state.state03{background:#eee; border-color:#eee; color:#9f9f9f;}
div.course-wrap table.course-table tbody a.plan{font-family:'Pretendard-SemiBold',sans-serif; padding:0.5rem 0.8rem; display:inline-block; font-size:1rem; background: var(--color-main03); color: #fff;}
@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{box-shadow:0 5px 20px rgba(0, 79, 163, 0.3);}
}

@keyframes flash {
	from,
	50%,
	to{opacity:1;}

	25%,
	75%{opacity:0;}
}

/****** course view ******/
div.course-wrap.view{}
div.course-wrap.view div.top{position: relative; width:100%; min-height: 13rem; background: var(--color-main04); border-radius: 0.5rem; 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: 'Pretendard-Bold',sans-serif; text-align: center; font-size: 2rem; padding-bottom:0.3rem; margin-bottom: 1rem; border-bottom: 1px solid #fff;}
div.course-wrap.view div.top:after{position: absolute; content: ''; width: 18rem; height: 18rem; background: url('../img/symbol_wh.png')center/100% auto no-repeat; right:0; bottom: -4rem; opacity: .1;}
div.course-wrap.view div.top a.btn-apply{color:var(--color-main04); font-family: 'Pretendard-Bold',sans-serif; display: inline-block; margin: 0 auto; background: #fff; padding: 0.5rem 1.125rem;}
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: 'Pretendard-Bold',sans-serif;}
div.course-wrap.view div.top a.btn-back::before{content: ''; display: block; width: 1rem; height: 1rem; background: url('../img/ico_arrow_bk.svg') center / 100% auto no-repeat; position: absolute; top: 50%;  left: 0; transform: translateY(-50%) rotate(180deg);}
div.course-wrap.view div.bot div.viewer{width:60%; height:48rem;}
div.course-wrap.view div.bot div.viewer iframe{width: 100%; height: 100%;}
div.course-wrap.view div.bot div.attach-wrap{position: relative; width:fit-content; margin-bottom: 1.5rem; background: #f5f5f5; border: 2px solid #ddd;  border-radius: 5px;}
div.course-wrap.view div.bot div.attach-wrap a.attach-file{position: relative; padding:1rem 1.25rem 1rem 3rem; color: #888;}
div.course-wrap.view div.bot div.attach-wrap a.attach-file::before{content:''; position: absolute; display: block; width: 1.25rem; height: 1.25rem; background: url("../img/ico_attach.svg")center/120% auto no-repeat; top:50%; left: 1.25rem; transform: translateY(-50%);}
div.course-wrap.view div.bot div.attach-wrap a.attach-file span{display: inline-block; border-bottom:1px solid #888;}
@media(hover:hover){
	div.course-wrap.view div.bot div.attach-wrap a.attach-file:hover span{color: #2B2B2B; border-bottom:1px solid #2B2B2B;}
}

/* 강의계획서 */
div.course-plan{padding: 1.25rem; font-size: 1rem; position: relative;}
div.course-plan h3.tit{font-family:'Pretendard-Bold','NotoKr_B',sans-serif; font-size: 1.8rem; margin-bottom:0.5rem; color:var(--color-main04);}
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 div.attach-wrap{position: relative; width:100%; margin-bottom: 1.5rem; background: #f5f5f5; border: 2px solid #ddd;  border-radius: 5px}
div.course-plan div.cp-mid div.contents div.attach-wrap a.attach-file{width: 100%; position: relative; padding:1rem 1.25rem 1rem 3rem; color: #888;}
div.course-plan div.cp-mid div.contents div.attach-wrap a.attach-file::before{content:''; position: absolute; display: block; width: 1.25rem; height: 1.25rem; background: url("../img/ico_attach.svg")center/120% auto no-repeat; top:50%; left: 1.25rem; transform: translateY(-50%);}
div.course-plan div.cp-mid div.contents div.attach-wrap a.attach-file span{display: inline-block; border-bottom:1px solid #888;}
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-bot{}
@media(hover:hover){
	div.course-plan div.cp-mid div.attach-wrap a.attach-file:hover span{color: #2B2B2B; border-bottom:1px solid #2B2B2B;}
}

/* 카드형식 리스트 */
div.course-card-list{display: flex; flex-wrap: wrap;}
div.course-card-list div.card{width: 23%; height: auto; margin-right: 2.66%; margin-bottom: 2.66%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.3s;}
div.course-card-list div.card:nth-child(4n){margin-right: 0;}
div.course-card-list div.card:nth-child(odd){border: 2px solid var(--color-main03);}
div.course-card-list div.card:nth-child(even){border: 2px solid var(--color-main02);}
div.course-card-list div.card div.tit{width: 100%; height: 4.5rem; padding: 0 2rem; position: relative; color:#fff; text-align: center; font-size: 1.25rem; font-family:'Pretendard-Bold',sans-serif; display: flex; justify-content: center; align-items: center;}
div.course-card-list div.card div.tit:after{content: ""; position: absolute; right: 0; bottom: 0; width: 6rem; height: 6rem; background: url(../img/symbol_wh.png) no-repeat 100% 140% / contain; opacity: 0.2;}
div.course-card-list div.card div.tit p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
div.course-card-list div.card:nth-child(odd) div.tit{background: var(--color-main03);}
div.course-card-list div.card:nth-child(even) div.tit{background: var(--color-main02);}
div.course-card-list div.card div.card-bot{padding: 1.5rem 2rem;}
div.course-card-list div.card div.card-bot div.period{display: flex; flex-direction: column; text-align: center; row-gap:0.5rem; margin-bottom: 2rem;}
div.course-card-list div.card div.card-bot div.period span.txt01{position: relative; padding-left: 1.5rem; width:fit-content; margin: 0 auto;}
div.course-card-list div.card div.card-bot div.period span.txt01::before{content: ''; position: absolute; width: 1rem; height: 1rem; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/ico_calendar.svg) 100% / cover no-repeat; }
div.course-card-list div.card div.card-bot div.period span.txt02{color: #787878;}
div.course-card-list div.card div.card-bot a.more-btn{position: relative; border:1px solid #2B2B2B; width: 100%; text-align: center; padding: 0.625rem; font-size: 1.125rem; transition: 0.3s;}
div.course-card-list div.card div.card-bot a.more-btn::after{position: absolute; display: inline-block; margin-left: 0.5rem; content: ''; width: 1rem; height: 1rem; top: 50%; transform: translateY(-50%); background: url('../img/ico_arrow_bk.svg') 100% / cover no-repeat;}
@media(hover: hover){
	div.course-card-list div.card:hover{transform:translateY(-8px); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);}
	div.course-card-list div.card div.card-bot a.more-btn:hover{color: #fff; font-family:'Pretendard-Medium',sans-serif;}
	div.course-card-list div.card div.card-bot a.more-btn:hover:after{width: 1rem; height: 1rem; background: url('../img/ico_arrow_wh.svg') 100% / cover no-repeat;}
	div.course-card-list div.card:nth-child(odd) div.card-bot a.more-btn:hover{background-color: var(--color-main03); border-color: var(--color-main03);}
	div.course-card-list div.card:nth-child(even) div.card-bot a.more-btn:hover{background-color: var(--color-main02); border-color: var(--color-main02);}
}

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

	div.course-wrap{width:100%;}
}
@media screen and (max-width:1280px){
	/* 카드형식 리스트 */
	div.course-card-list div.card div.tit{padding: 0 1.5rem;}
	div.course-card-list div.card div.card-bot{padding: 1.5rem;}
}
@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-left:5rem;}
	div.course-wrap table.course-table tbody tr td span.mark-recommend{margin-bottom:0.25rem; transform: none;}
	div.course-wrap table.course-table tbody tr td:nth-child(odd){background:#f5f5f5;}
	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:1rem; left:0.5rem; color:#676767; font-family:'Pretendard-Bold',sans-serif;}
	div.course-wrap table.course-table tbody tr td.tit{text-align:center; background:var(--color-main04); color:#fff; padding:1.25rem 0.5rem; border-bottom:0;}
	div.course-wrap table.course-table tbody tr td.tit a{width:100%; color:inherit; font-family:'Pretendard-Bold',sans-serif;}
	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.viewer{width: 70%; height: 44rem;}

	/* 카드형식 리스트 */
	div.course-card-list div.card{width: 31%; margin-right: 3.5%; margin-bottom: 3.5%;}
	div.course-card-list div.card:nth-child(4n){margin-right: 3.5%;}
	div.course-card-list div.card:nth-child(3n){margin-right: 0;}

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

}
@media screen and (max-width:768px){
	/* 카드형식 리스트 */
	div.course-card-list div.card{width: 48%; margin-right: 4%; margin-bottom: 4%;}
	div.course-card-list div.card:nth-child(2n){margin-right: 0;}
	div.course-card-list div.card:nth-child(3n){margin-right: 4%;}
}

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

	/****** course table ******/
	div.course-wrap table.course-table tbody tr td{font-size:0.9rem;}
	div.course-wrap table.course-table tbody tr td.tit{font-size:1rem;}

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



}
@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 div.name{font-size: 1.8rem;}
	div.course-wrap.view div.bot div.viewer{height: 38rem;}

	/* 카드형식 리스트 */
	div.course-card-list div.card{width: 100%; margin-right: 0; margin-bottom: 1.5rem;}
	div.course-card-list div.card:nth-child(3n){margin-right: 0;}

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


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