@charset "UTF-8";    
/* 나의 강의실 */
.contentTitle h2{color: #000;}
.noti-box{overflow: hidden; margin: 50px 0;}
.noti-box li{float: left; position: relative; width: 49%; height: 205px; padding: 0 0 10px; border-bottom: 1px solid #e1e1e1;}
.noti-box li:first-child{margin-right: 2%;}
.noti-box li .title{display: block; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid #000;}
.noti-box li:first-child .title::after{position: absolute; top: 0; right: 3px; content: '더 보기 \002B'; font-size: 13px; color: #a0a0a0; letter-spacing: -1px; font-weight: 300;}
.noti-box li div{padding: 3px 0; letter-spacing: -0.5px; font-weight: 400; font-size: 15px;}
.lec_detail .percent-chart,
.lec_detail .percent-chart-on{height: 5px !important;}
.lec_detail .percent-chart{width: 100% !important; background: #eee !important;}
.signup_txt .percent-chart{margin: 10px 0 8px;}

span.new{font-size: 13px; margin-left: 3px; color: red;}

.con_box{margin-top: 10px; position: relative; border-bottom: 1px solid /* #e9e9e9; */} 
/* .con_box:last-child{border-bottom: 0;} */
.con_box .title{padding-bottom: 8px;} 
.content *{font-family: 'Pretendard' !important;}  
.lec_detail{overflow: hidden; border-top: 1px solid; align-items: center; display: inline-flex; width: 100%; padding: 15px 0;}
.lec_detail.ing{margin-top: 0; border-top: 0; padding-top: 0;}
.lec_detail li em{width: 50px; height: 35px; display: inline-grid; align-items: center; text-align: center; color: #1670df; border-radius: 5px; border: 1px solid; font-weight: 600; font-size: 15px;}     
.lec_detail li em.free{color: #da9396;}
.lec_detail .lec_info{font-weight: 700; width: 86.5%; display: inline-flex; align-items: center; padding-left: 30px;}
.lec_detail .lec_info .signup_txt{display: inline-block; padding: 0 15px;}
.lec_detail .signup_txt div{padding: 3px 0 0; display: flex; align-items: flex-start; font-size: 19px; color: #000;}
.signup-txt{margin-left: 15px;}
.lec_detail i{font-size: 13px; color: #3e3e3e; font-weight: 300;}

.lec_detail .study_btn{background: #3554c5; color: #fff; padding: 10px 20px; font-size: 14px; border-radius: 3px;}
.lec_detail .study_btn:hover,
.lec_detail .lec_btn:hover{background: #0006eb;}

.lec_detail .lec_btn{font-size: 14px; display: block; background: #333; /* #e91e63; */ color: #fff; border-radius: 3px; padding: 10px 15px; text-align: center;}

.con-depth{background: #f9f9f9; margin: 10px 0 20px; padding: 15px 30px;}
.con-depth:last-child{margin-bottom: 30px;}
.update-txt{text-align: center;}
.noti-box li .update-txt{height: 70%; display: grid; align-items: center; color: #888;}
.con-depth .lec_detail{border-top: 0; margin: 0; padding: 0; border-bottom: 1px solid #eee;}
.con-depth .lec_detail:last-child{border-bottom: 0;}
.con-depth .lec_detail .lec_info{width: 89%; font-weight: 500; padding: 5px 0;}
.con-depth .lec_detail .signup_txt div{font-size: 16px;}
.lec_detail .lec_name{font-size: 14px; color: #da9396; font-weight: 300;}
.lec_detail .lec_name.tch{color: #8a8a8a;}
.lec_detail .lec_name.tch::before{content: ' \007C'; margin: 0 5px; color: #cfcfcf; font-weight: 100; font-size: 12px; display: inline-block;}
.lec_detail .chapter_name{font-size: 19px; font-weight: 700; padding: 0 10px 6px 0px; /* height: 20px; overflow: hidden; */}
.lec_detail .chapter{background: #51b6b2; border-radius: 5px; padding: 2px 5px; color: #fff; text-align: center; font-size: 11px; font-weight: 200; margin-left: 5px; font-weight: 400;}
.lec_detail.line .chapter_name{max-width: 89%;}
.lec_detail .signup_txt .ch_pc{width: 28%;}


/*
.gr_circle{width: 8%; background: #dbdfe9; border-radius: 50%; padding: 0}
.donut-gr{width: calc(100% - 0px); padding-bottom: calc(100% - 0px); margin: 0 auto; border-radius: 50%; position: relative; text-align: center;}
.donut-gr::after{color: #304587; width: 70%; background: #f9f9f9; border-radius: 50%; position: absolute; left: 15%; top: 15%; display: grid; content: attr(data-percent) '%'; transform: skew(-0.03deg); margin: auto; font-size: 1.1vw; height: 70%; padding: calc(35% - 1.3vw) 0; align-items: center; font-size: 15px;}
*/
.chart_container {width: 9%; height: 9%; position: relative;}
.chart_container canvas{ position: absolute; top: -40px; left: 0; }
.chart_container .chart_text {position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #304587; text-align: center;}


.lec_btn_wp{display: inline-flex; align-items: center; width: 200px;}
.btn_line{position: relative; border: 1px solid #ddd; padding: 5px 10px 4px; color: #000; font-size: 13px; text-align: center; border-radius: 3px;}
.btn_line.ab{position: absolute; top: 5px; right: 14px;}
.arrow_more{position: relative; padding-right: 10px;}
.arrow_more::after{position: absolute; top: 4.5px; right: 2px; content: ''; width: 5px; height: 5px; border-top: 2px solid #a0a0a0; border-right: 2px solid #a0a0a0; transform: rotate(45deg);}
.btn_bg{position: relative; padding: 5px 10px 4px; color: #fff; font-size: 13px; text-align: center; border-radius: 3px; display: inline-flex; align-items: center;}
.btn_bg.black{background: #000; color: #fff;}
.btn_bg.line{color: #000; border: 1px solid;}
.btn_bg.line span{background: #000; color: #fff; font-size: 12px;}

.btn_bg.gr{background: #5a5a5a;}

.btn_icon{border-radius: 50%; width: 14px; height: 14px; background: #fff; color: #000; margin: -2px 0 0 5px; font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center;}
.mr_10{margin-right: 10px;}

.my_info_box{margin: 20px 0 50px; background: #f0f4f6; padding: 30px 0; border-radius: 10px;}
.my_info_box ul{overflow: hidden;}
.my_info_box li{float: left; width: 33%; text-align: center; border-right: 1px solid #dae1e8;}
.my_info_box li:last-child{border-right: 0;}
.my_info_box li span{font-size: 15px; color: #7a7f95;}
.my_info_box li div{margin-top: 5px; color: #4256a0; font-size: 22px;}
.my_info_box li strong{color: #2656f6; font-weight: 900;}
.btn_play{display: block; background: linear-gradient(to bottom right, #4466e5 30%, #524fd8 70%); color: #fff; border-radius: 0 0 10px 10px; padding: 15px 0; text-align: center; font-size: 20px; font-weight: 900}

.tab_curri{overflow: hidden; padding-top: 30px; border-bottom: 1px solid #000; margin-bottom: 20px;}
.tab_curri li{font-size: 20px; text-align: center; float: left; padding: 10px 15px; font-weight: 300; color: #a0a0a0; cursor: pointer; border-radius: 3px 3px 0 0; background: #ededed; margin-right: 3px;}
.tab_curri li.active{/* border-bottom: 2px solid; */color: #fff; font-weight: 700; background: #2656f6;}

.noti_txt{padding-top: 10px; font-size: 15px;}
.color_red{color: #e91e63;}
                       
.lec_detail .signup_lec{background: #2656f6; color: #fff; width: 50px; height: 50px; border-radius: 50%; padding: 10px 0; text-align: center; font-size: 12px; font-weight: 500; display: grid; align-items: center;}                
.lec_detail .chapter.finish{background:  #2656f6;}                 
.lec_detail .chapter.up{background: #da9396;}  
.lec_detail .signup_lec span{font-size: 11px; font-weight: 200; display: block; line-height: 12px;}
.lec_detail .lec_load{position: relative; display: flex; align-items: center;}
.lec_detail.line{position: relative; border-bottom: 1px solid #ddd; display: block; padding: 20px 10px 0; border-top: 0;}
.lec_detail.line:first-child{border-top: 1px solid #000;}
.lec_detail.line .lec_info{width: 100%;}
.lec_detail .progress{position: absolute; right: 0; bottom: -5px; font-size: 13px; font-weight: 300; color: #aaa;}
.lec_detail .progress strong{color: #2656f6; font-weight: 900;}

.lec_detail .pagination{background: none; margin-top: 20px; margin-bottom: 0; border-top: 0; }
.lec_detail .pagination a{display: inline-block; margin: 0 6px; color: #c3c3c3; text-align: center; font-size: 14px; font-weight: 200;}
.lec_detail .pagination a.active{color: #2656f6; font-weight: 900;}

.lec_cate{position: relative; padding: 50px 0 5px; border-bottom: 1px solid #bbb; font-size: 17px;}
.lec_cate select{position: absolute; top: -32px; right: 0;}
.con_box select{border-radius: 8px; border: 1px solid #E5E7EB; padding: 5px; font-size: 14px;}  
.btn_reflash{padding: 10px; border: 1px solid #ececec; border-radius: 3px; font-size: 13px;}
.btn_reflash img{vertical-align: middle; width: 12px;}

.slect-multi .custom-select{flex-basis: 140px; /* flex-basis: 180px; */}

.con_box .note-list-top{margin: 30px 0 -6px -20px; font-weight: 600;}
.con_box .note-list-top > p{border-bottom: 1px solid #000; width: 100%; padding-bottom: 5px;}

.ch_m{display: none;}

                           
details{position: relative; margin-top: 40px;}
details div{background: #f6f6f6; margin-bottom: 30px; padding: 30px; border-radius: 5px 0 5px 5px}
details summary{cursor: pointer; position: absolute; top: -23px; right: 0;}
details summary:first-of-type{list-style: none}
details .arrow{color: #fff; padding: 6px 25px 6px 15px !important; background: #000; border-radius: 3px 3px 0 0; font-size: 14px; position: relative; font-weight: 900;}
details[open] summary .arrow::after {position: absolute; top: 12px; right: 10px; content: ''; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg);}
details summary .arrow::after {position: absolute; top: 8px; right: 10px; content: ''; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg);}

.list-member{border: 1px solid #eee; box-shadow: 0px 1px 6px 3px rgba(0,0,0,0.1); top: 38px; border-radius: 8px; width: 180px; z-index: 1000;}
.selected-option{font-size: 15px; font-weight: 300;}
.list-member ul{background: #fff; padding: 5px 10px;}
.list-member li{font-size: 14px; padding: 5px 0; border-bottom: 1px solid #efefef; font-weight: 500; color: #000;}
.list-member li:last-child{border-bottom: 0;}

table.curri_lec_list{width: 100%; margin: 0 auto;}
table.curri_lec_list th, 
table.curri_lec_list td{text-align: center; font-size: 14px;}
table.curri_lec_list td:nth-child(2){text-align: left;}
table.curri_lec_list th{background: #4256a0; color: #fff; font-size: 13px; padding: 9px 0 8px; font-weight: 600;}
table.curri_lec_list th:first-child{border-radius: 3px 0 0 0;}
table.curri_lec_list th:last-child{border-radius: 0 3px 0 0;}
table.curri_lec_list td{border-bottom: 1px solid #e5e5e5; padding: 10px 0;}

table.curri_lec_list col:nth-child(1){width: 10%;}
table.curri_lec_list col:nth-child(2){width: 25%;}
table.curri_lec_list col:nth-child(3){width: 10%;}
table.curri_lec_list col:nth-child(4){width: 10%;}
table.curri_lec_list col:nth-child(5){width: 10%;}
table.curri_lec_list col:nth-child(6){width: 10%;}
table.curri_lec_list col:nth-child(7){width: 10%;}
table.curri_lec_list col:nth-child(8){width: 15%;}

@media (max-width: 720px){
.fcBlue03{font-size: 13px; margin-top: 7px;}
.contentTitle h2{font-size: 20px; margin-bottom: -10px;}
.con-box{margin-top: 35px;}
.noti-box{margin-top: 15px;}
.noti-box li:first-child{margin-right: 0; margin-bottom: 35px;}
.noti-box li{float: none; width: 100%; height: auto;}  
.lec_detail{display: block;}   
.lec_detail .lec_info{width: 100%; padding-left: 0;}
.lec_detail .lec_info .signup_txt{font-size: 16px; padding: 0 0 0 10px; letter-spacing: -1px;}
.lec_detail .lec_btn{width: 100%; font-size: 12px; display: block; height: auto; background: none; border-radius: 0; padding: 0;}
.lec_detail .lec_btn img{display: none;}
.lec_detail .lec_btn p{width: 100%; display: block; color: #fff; background: #0006eb; margin: 20px auto 0; padding: 0; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 16px;}
.lec_detail .lec_btn p::after{display: none;}
.con_box{margin: 10px 0 30px;}

.lec_detail .lec_info .signup_txt div{font-size: 16px;}
.con-depth{display: none;}

.slect-multi .custom-select{flex-basis: auto;}
.lec_detail.line .chapter_name{max-width: 100%; font-size: 15px;}
.lec_detail .progress{left: 0; bottom: -35px;}
.lec_detail .lec_name{font-size: 13px;}
.signup_txt .percent-chart{margin: 5px 0 8px;}
.percent-chart-on{margin-top: -2px;}
details .arrow{font-size: 13px;}

.ch_m{display: inline-block;}
.ch_pc{display: none;}
.btn_reflash {width: 25%;}
.my_info_box li:nth-child(1){width: 38%;}
.my_info_box li:nth-child(2){width: 24%;}
.my_info_box li:nth-child(3){width: 38%;}
.my_info_box li div{font-size: 17px; letter-spacing: -1px;}
.lec_btn_wp{margin-top: 12px; border-top: 1px solid #ddd; width: 100%; padding-top: 14px;}
.my_info_box{margin: 0; padding: 20px 0;}

.my_info_box li span{font-size: 13px;}
.signup_txt{padding-bottom: 10px;}
details div{padding: 20px 0 0; background: #fff; border-top: 1px solid #000; border-radius: 0;}
details div .btn_bg{padding: 5px 5px 3px; font-size: 11px;}

table.curri_lec_list col:nth-child(1){width: 15%;}
table.curri_lec_list col:nth-child(2){width: 35%;}
table.curri_lec_list col:nth-child(3){width: 25%;}
table.curri_lec_list col:nth-child(4){width: 25%;}

table.curri_lec_list th:nth-child(3),
table.curri_lec_list td:nth-child(3),
table.curri_lec_list th:nth-child(5),
table.curri_lec_list td:nth-child(5),
table.curri_lec_list th:nth-child(6),
table.curri_lec_list td:nth-child(6),
table.curri_lec_list th:nth-child(7),
table.curri_lec_list td:nth-child(7){display: none;}

.btn_line.ab{top: 82px; right: 20px; font-size: 12px; padding: 4px 7px 3px;}

.sub-wrap .sub-body .content{padding: 20px;}
.lec_cate{padding: 20px 0 5px;}
.tab_curri{padding-top: 20px;}

}


/* 나의강의실 */
.box-class-01_pr{width: 24.2% !important; margin-right: 1% !important;}