@charset "utf-8"; 


/* =======================================================================================
sub - 과정상세 - 커리큘럼
======================================================================================= */

h5.subtitle {display: block; padding: 0; font-size: 22px; margin-bottom: 13px; font-weight: bold;unicode-bidi: isolate;}
dd, dl, dt, li, ol, ul { margin: 0; padding: 0; list-style: none; }

/* 커리큘럼 아코디언 */
.curri_list { border: 1px solid #DEE2E6; margin: 15px 0; border-radius: 8px;}
.curri_list li .title-wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; background-color: #F8F9FA; position: relative; border-radius: 8px; padding: 15px 25px 14px 45px; }
.curri_list li .title-wrap .title { color: #333; font-weight: 600; font-size: 17px;}
.curri_list li .title-wrap .title img { margin-left: 8px;}
.curri_list li .title-wrap .arrow { color: #333; position: absolute; top: 15px; left: 13px; font-size: 14px; padding: 6px; transition: all .25s ease; }
.curri_list li .title-wrap .total_section_info {gap: 15px; padding: 0; min-width: 155px; justify-content: flex-end;}
.curri_list li > .cont { opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; padding: 0 30px; }
.curri_list li.active .title-wrap {border-radius: 8px 8px 0 0; border-bottom: 1px solid #DEE2E6;}
.curri_list li.active .cont { opacity: 1; visibility: visible; max-height: 2000px; padding:12px 30px; transition: all .3s ease; }
.curri_list li.active .arrow { transform: rotate(180deg); }
.curri_list .total_section_info {display: flex; align-items: center; gap: 25px; padding: 8px 0; font-size: 15px;}
.curri_list .total_section_info .total_section {display: flex; align-items: center; flex-wrap: nowrap;}
.curri_list .total_section_info .total_time {display: flex; align-items: center; }
.curri_list .total_section_info .total_section img {margin-right: 5px;}
.curri_list .total_section_info .total_time img {margin-right: 5px;} 
.curri_list .total_section_info a { margin-left: auto; text-align: center; padding: 5px 12px; display: block; font-size: 14px; border: 1px solid #E8E8E8; border-radius: 100em; transition: 0.2s; }
.curri_list .total_section_info a:hover { color: #2466EB; border-color: #2466EB; }
.curri_list .front_timeline {display: flex; align-items: center; gap: 10px; padding: 13px 0; font-weight: 500; letter-spacing: 0;}
.curri_list .front_timeline .stitle {font-size: 15px; display: flex; align-items: center; }
.curri_list .front_timeline .stitle::before { display: inline-block; content: ''; width: 4px; height: 4px; background-color: #D9D9D9; border-radius: 50%; margin-right: 12px; }
.curri_list .front_timeline .time {color: #80848A; font-size: 14px; margin-left: auto; }
.curri_list .front_timeline a {margin-left: auto; text-align: center; padding: 3px 10px; display: block; font-size: 14px; border: 1px solid #E8E8E8; border-radius: 100em; transition: 0.2s;}
.curri_list .front_timeline a:hover {color: #2466EB; border-color: #2466EB;}
.curri_list .front_timeline + .front_timeline {border-top: 1px solid #E9EBF2; }
.curri_list .front_timeline a + .time {margin-left: 0;}

/* 커리큘럼 라이브 */
.curri_list li .title-wrap-live { display: flex; background-color: #F8F9FA; position: relative; border-radius: 8px; padding: 18px 25px; }
.curri_list li .title-wrap-live .title { color: #333; font-weight: 600; font-size: 17px; }
.curri_list li .title-wrap-live .title img { margin-left: 5px;}
.curri_list li .title-wrap-live .live_date { color: #333; font-weight: 600; font-size: 15px; margin-left: auto; }

@media (max-width:670px) {
    .curri_list {margin: 10px 0;}
    .curri_list li .title-wrap {padding: 14px 20px 14px 40px;}
    .curri_list li .title-wrap .title {font-size: 16px;}
    .curri_list li .title-wrap .total_section_info {font-size: 14px;}
    .curri_list li .title-wrap .arrow {top: 12px;}
    .curri_list li.active .cont { padding: 10px 25px;}
    .curri_list .front_timeline .stitle {font-size: 14px;}
}
@media (max-width:480px) {
    .curri_list li .title-wrap {flex-direction: column; align-items:flex-start; justify-content: flex-start; gap: 4px;}
    .curri_list li .title-wrap .total_section_info {justify-content: flex-start;}
}