/* 나의 강의실 상단 (기존 solution.css 에서 변경 및 추가 필요) */
#contents .mypageGuide {height:184px;}
#contents .myRoom .totalProgress .title {margin-bottom:0; font-size:18px;}
#contents .myRoom .totalProgress .time {font-size:18px;}
#contents .myRoom .totalProgress .period span {color:#666;}
#contents .myRoom .totalProgress .btn {padding-top:15px;}
#contents .myRoom .totalProgress .btn a {display:inline-block; width:180px; height:46px; background:#29a2e8; color:#fff; font-size:17px; font-weight:500; text-align:center; letter-spacing:-0.04rem; line-height:46px; cursor:pointer;}
#contents .myStatus ul.lookUp li {padding:22px 0;}

#recent_alert {display:none; position:fixed; top:0; left:0; z-index:300; width:100%; height:100%; background:rgba(0,0,0,.6); text-align:center;}
#recent_alert .alert_inner {position:absolute; top:50%; left:50%; width:500px; padding:75px 0 60px; background:#fff; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
#recent_alert .alert_inner .close {display:block; position:absolute; top:30px; right:30px; width:25px; height:25px; background:url('/template/resp/html/image/recent_alert_close.png') no-repeat center; color:transparent; font-size:0; cursor:pointer;}
#recent_alert .alert_inner p {color:#262626; font-size:22px; font-weight:500; letter-spacing:-0.04rem; line-height:34px;}
#recent_alert .alert_inner .btn {padding-top:45px;}
#recent_alert .alert_inner .btn span {display:inline-block; margin:0 4px; border:none; vertical-align:top;}
#recent_alert .alert_inner .btn span * {display:inline-block; width:120px; height:50px; border:none; background:#29a2e8; color:#fff; font-family:inherit; font-size:18px; font-weight:500; letter-spacing:-0.04rem; line-height:50px; cursor:pointer;}
#recent_alert .alert_inner .btn span.white * {border:1px solid #e6e6e6; background:#fff; color:#808080; font-weight:300;}

@media(max-width:1080px){
	#contents .mypageGuide {height:auto;}
	#contents .myRoom .totalProgress {padding:26px 130px 26px 0;}
	#contents .myRoom .totalProgress .title {font-size:19px;}
	#contents .myRoom .totalProgress .time {font-size:14px;}
	#contents .myRoom .totalProgress .btn {position:absolute; top:50%; right:0; margin-top:-20px; padding-top:0;}
	#contents .myRoom .totalProgress .btn a {width:115px; height:40px; font-size:15px; line-height:40px;}
	#contents .myStatus ul.lookUp li {padding:0;}
	
	#recent_alert .alert_inner {left:5%; width:90%; padding:40px 0 30px; -ms-transform:translate(0,-50%); -webkit-transform:translate(0,-50%); transform:translate(0,-50%);}
	#recent_alert .alert_inner .close {top:0; right:0; width:45px; height:45px; background-size:15px;}
	#recent_alert .alert_inner p {font-size:16px; line-height:28px;}
	#recent_alert .alert_inner .btn {padding-top:25px;}
	#recent_alert .alert_inner .btn span * {width:100px; height:40px; font-size:16px; line-height:40px;}
}

#contents .lecture {height:auto;}
#contents .lecture .myStatus {height:271px;}
#contents .lecture .totalProgress .title {font-size:22px;}
#contents .lecture .totalProgress.lecture_progress {width:410px;}
#contents .lecture .totalProgress.lecture_progress .btn {position:static; width:238px; margin-top:0; padding-top:25px; text-align:left;}
#contents .lecture .totalProgress.lecture_progress .btn span {display:inline-block; width:48%;}
#contents .lecture .totalProgress.lecture_progress .btn span.block {width:100%;}
#contents .lecture .totalProgress.lecture_progress .btn span * {display:inline-block; width:100%; height:40px; border:1px solid #e6e6e6; background:#fff; color:#808080; font-size:15px; font-weight:300; text-align:center; letter-spacing:-0.04rem; line-height:40px; cursor:pointer;}
#contents .lecture .totalProgress.lecture_progress .btn span.block * {border-color:#29a2e8; background:#29a2e8; color:#fff !important;}
#contents .lecture .totalProgress.lecture_progress .btn_col {overflow:hidden; padding-top:10px;}
#contents .lecture .totalProgress.lecture_progress .btn_col span {float:left;}
#contents .lecture .totalProgress.lecture_progress .btn_col span:nth-child(2) {float:right;}
#contents .lecture ul.lecture_lookUp {width:calc(100% - 410px);}
#contents .lecture ul.lecture_lookUp li {padding:0;}
#contents .lecture ul.lecture_lookUp li:first-child {border:none;}
#contents .lecture ul.lecture_lookUp li:nth-child(4) a {background-image:url('/template/resp/html/image/lecture_lookUp3.png');}
#contents .lecture .lecture_rate {padding:23px 0; border:1px solid #dbdbdb; font-size:0; text-align:center;}
#contents .lecture .lecture_rate li {display:inline-block; position:relative; width:50%; font-size:0; vertical-align:middle;}
#contents .lecture .lecture_rate li:first-child:after {position:absolute; top:50%; right:0; width:1px; height:20px; margin-top:-10px; background:#e0e0e0; content:'';}
#contents .lecture .lecture_rate li p {display:inline-block; font-size:24px; color:#808080;}
#contents .lecture .lecture_rate li p.title {padding-right:155px; color:#262626; font-size:20px; font-weight:500;}
#contents .lecture .lecture_rate li p strong {font-weight:500;}
#contents .lecture .lecture_rate li p strong.point1 {color:#29a2e8;}
#contents .lecture .lecture_rate li p strong.point2 {color:#50b65e;}

@media(max-width:1080px){
	#contents .lecture {margin-bottom:30px;}
	#contents .lecture .myStatus {height:auto;}
	#contents .lecture .totalProgress.lecture_progress {width:100%; padding-bottom:10px; border-bottom:0;}
	#contents .lecture .totalProgress.lecture_progress .btn {width:100%; padding-top:15px;}
	#contents .lecture .totalProgress.lecture_progress .btn span * {height:35px; font-size:14px; line-height:35px;}
	#contents .lecture .myStatus ul.lookUp > li {word-break:keep-all; vertical-align:top;}
	#contents .lecture .lecture_rate {width:calc(100% + 30px); margin-left:-15px; padding:14px 0;}
	#contents .lecture .lecture_rate li p {font-size:15px;}
	#contents .lecture .lecture_rate li p.title {padding-right:60px; font-size:14px;}
}


/* 강의수강 테이블 */
.lecture_table {width:100%; border-top:2px solid #29a2e8; border-collapse:collapse; border-spacing:0;}
.lecture_table ul {display:table; table-layout:fixed; width:100%;}
.lecture_table ul > li {display:table-cell; position:relative; text-align:center; padding:20px 0; color:#808080; font-size:16px; text-align:center; vertical-align:middle; word-wrap: break-word; border-bottom:1px solid #e0e0e0;}
.lecture_table ul.thead > li {position:relative; padding:17px 0; color:#262626; font-size:18px; font-weight:500;}
.lecture_table ul.thead > li:after {position:absolute; top:50%; left:0; width:1px; height:16px; margin-top:-8px; background:#e0e0e0; content:'';}
.lecture_table ul.thead > li:first-child:after {display:none;}
.lecture_table ul.all > li {padding:26px 20px; color:#262626; font-size:20px; font-weight:600; text-align:left;}
.lecture_table ul.tbody {position:relative;}
.lecture_table ul.tbody > li.tal {padding-left:30px; text-align:left;}
.lecture_table ul.tbody > li.chk_wrap {display:none;}
.lecture_table ul.tbody > li.toggle_cnt {display:table-cell;}
.lecture_table ul.tbody > li.toggle_cnt.show {display:table-cell;}
.lecture_table ul.tbody > li .mo_more {display:none;}
.lecture_table ul.tbody > li .title {display:none;}
.lecture_table ul.tbody > li .icon {display:inline-block; width:38px; height:38px; margin:0 5px; background:no-repeat center/cover; color:transparent; font-size:0; vertical-align:middle;}
.lecture_table ul.tbody > li .main_play {background-image:url('/template/resp/html/image/lecture_main_play.png');}
.lecture_table ul.tbody > li .main_play.on {background-image:url('/template/resp/html/image/lecture_main_play_on.png');}
.lecture_table ul.tbody > li .sub_play {background-image:url('/template/resp/html/image/lecture_sub_play.png');}
.lecture_table ul.tbody > li .sub_play.on {background-image:url('/template/resp/html/image/lecture_sub_play_on.png');}
.lecture_table ul.tbody > li .down {display:none; background-image:url('/template/resp/html/image/lecture_play_down.png');}
.lecture_table ul.tbody > li .tr_audio {background-image:url('/template/resp/html/image/lecture_tr_audio.png');}
.lecture_table ul.tbody > li .tr_audio.on {background-image:url('/template/resp/html/image/lecture_tr_audio_on.png');}
.lecture_table ul.tbody > li .tr_voca {background-image:url('/template/resp/html/image/lecture_tr_voca.png');}
.lecture_table ul.tbody > li .tr_voca.on {background-image:url('/template/resp/html/image/lecture_tr_voca_on.png');}
.lecture_table ul.tbody > li .tr_test {background-image:url('/template/resp/html/image/lecture_tr_test.png');}
.lecture_table ul.tbody > li .tr_test.on {background-image:url('/template/resp/html/image/lecture_tr_test_on.png');}
.lecture_table ul.tbody > li .tr_talk {background-image:url('/template/resp/html/image/lecture_tr_talk.png');}
.lecture_table ul.tbody > li .tr_talk.on {background-image:url('/template/resp/html/image/lecture_tr_talk_on.png');}
.lecture_table ul.tbody > li .tr_quiz {background-image:url('/template/resp/html/image/lecture_tr_quiz.png');}
.lecture_table ul.tbody > li .tr_quiz.on {background-image:url('/template/resp/html/image/lecture_tr_quiz_on.png');}
.lecture_table ul.tbody > li .reward {background-image:url('/template/resp/html/image/lecture_reward.png');}
.lecture_table ul.tbody > li .reward.on {background-image:url('/template/resp/html/image/lecture_reward_on.png');}
.lecture_table ul.tbody > li .chk {background-image:url('/template/resp/html/image/lecture_chk.png');}
.lecture_table ul.tbody > li .chk.on {background-image:url('/template/resp/html/image/lecture_chk_on.png');}

@media(max-width:1080px){
	.lecture_table ul > li {display:block; position:relative; width:100% !important; border-bottom:0; padding:13px 15px !important; background:#e9fbff; font-size:14px; text-align:right;}
	.lecture_table ul.thead {display:none;}
	.lecture_table ul.all > li {padding:14px 0 !important; border-bottom:1px solid #e0e0e0; background:#fff; color:#262626; font-size:16px; font-weight:600; text-align:left;}
	.lecture_table ul.tbody > li.toggle_cnt {display:none;}
	.lecture_table ul.tbody > li.toggle_cnt.show {display:block;}
	.lecture_table ul.tbody > li.subject {padding:13px 0 !important; border-bottom:1px solid #e0e0e0; background:#fff; text-align:left;}
	.lecture_table ul.tbody > li.reward_wrap,
	.lecture_table ul.tbody > li.chk_wrap {position:absolute; top:10px; width:auto !important; background:none; padding:0 !important; background:none;}
	.lecture_table ul.tbody > li.reward_wrap {right:30px;}
	.lecture_table ul.tbody > li.chk_wrap {display:block; right:64px;}
	.lecture_table ul.tbody > li.reward_wrap .icon,
	.lecture_table ul.tbody > li.chk_wrap .icon {margin:0 !important;}
	.lecture_table ul.tbody > li .mo_more {display:block; position:absolute; top:10px; right:0; width:24px; height:24px; background:url('/template/resp/html/image/lecture_arrow_down.png') no-repeat right center/12.5px 7px; color:transparent; font-size:0;}
	.lecture_table ul.tbody > li .mo_more.active {background-image:url('/template/resp/html/image/lecture_arrow_up.png');}
	.lecture_table ul.tbody > li .title {display:block; position:absolute; top:50%; left:15px; margin-top:-10px; color:#262626; font-size:13px; font-weight:500;}
	.lecture_table ul.tbody > li .icon {width:24px; height:24px; margin:0 0 0 7px;}
	.lecture_table ul.tbody > li .down {display:inline-block;}
}


/* 녹음 라이브러리 리스트 테이블 */
.recording_table {display:table; table-layout:fixed; width:100%; border-top:2px solid #29a2e8; border-collapse:collapse; border-spacing:0;}
.recording_table ul {display:table-row;}
.recording_table ul > li {display:table-cell; position:relative; text-align:center; padding:26px 0; color:#262626; font-size:18px; font-weight:300; text-align:center; vertical-align:middle; word-wrap: break-word; border-bottom:1px solid #e0e0e0;}
.recording_table ul > li * {color:#262626; font-size:18px; font-weight:300;}
.recording_table ul.thead > li {position:relative; padding:16px 0; color:#262626; font-size:18px; font-weight:500;}
.recording_table ul.tbody > li.tal {padding-left:50px; text-align:left;}
.recording_table ul.tbody > li.date {color:#666;}

@media(max-width:1080px){
	.recording_table ul.thead {display:none;}
	.recording_table ul > li {display:inline-block; width:auto; padding:0; font-size:14px; border-bottom:none; text-align:left;}
	.recording_table ul > li * {font-size:14px;}
	.recording_table ul.tbody {display:block; padding:15px; border-bottom:1px solid #e0e0e0;}
	.recording_table ul.tbody > li.tal {padding-left:0;}
	.recording_table ul.tbody > li.date {display:block; padding-top:10px; font-size:12px;}
}

/* 녹음 라이브러리 디테일 테이블, 버튼 */
.recording_table.view .recording_name {width:100%; padding:26px 48px; border-bottom:1px solid #e0e0e0; color:#262626; font-size:18px; font-weight:500; letter-spacing:-0.04rem;}
.recording_table.view .recording_name strong {color:#29a2e8;}
.recording_table.view ul {display:table; width:100%;}
.recording_table.view ul > li {padding:21px 0;}
.recording_table.view ul.tbody .play {padding-left:50px;}
.recording_table.view ul.tbody .down a {display:inline-block; width:38px; height:38px; background:url('/template/resp/html/image/recording_down.png') no-repeat center/cover; color:transparent; font-size:0; vertical-align:middle;}

.recording_btn {padding-top:20px; text-align:right;}
.recording_btn a {display:inline-block; width:130px; height:50px; background:#29a2e8; color:#fff; font-size:18px; font-weight:500; text-align:center; letter-spacing:-0.04rem; line-height:50px;}

@media(max-width:1080px){
	.recording_table.view .recording_name {padding:17px 10px; font-size:13px;}
	.recording_table.view ul {display:block;}
	.recording_table.view ul > li {display:block; width:100% !important; padding:0 15px; font-size:12px;}
	.recording_table.view ul.tbody {position:relative; padding:25px 0;}
	.recording_table.view ul.tbody .subject {padding-right:65px;}
	.recording_table.view ul.tbody .play {margin-top:20px; padding-left:15px;}
	.recording_table.view ul.tbody .down {position:absolute; top:25px; right:15px; width:auto !important; padding:0;}
	.recording_table.view ul.tbody .down a {width:24px; height:24px;}
	.recording_btn a {width:127px; height:40px; font-size:13px; line-height:40px;}
}


/* audio 플러그인 커스텀 css */
.ppq-audio-player {position:relative; height:38px !important; background:none !important; padding:0 120px 0 60px !important; line-height:38px !important;}
.ppq-audio-player .play-pause-btn {float:none !important; margin:-19px 0 0 !important; position:absolute; top:50%; left:0;}
.ppq-audio-player .play-pause-btn a {width:38px !important; height:38px !important; border:none !important; background:url('/template/resp/html/image/recording_play.png') no-repeat center/cover !important;}
.ppq-audio-player .play-pause-btn a:after {display:none !important;}
.ppq-audio-player .player-bar {overflow:visible !important; margin-top:18px !important; height:4px !important; background:#e5e5e5 !important;}
.ppq-audio-player .player-bar .player-bar-loaded {background:#e5e5e5 !important;}
.ppq-audio-player .player-bar .player-bar-played {background:#29a2e8 !important;}
.ppq-audio-player .player-bar .player-bar-played:after {display:block; position:absolute; top:50%; right:-8px; width:16px; height:16px; margin-top:-8px; background:#fff; border-radius:50%; box-shadow:2px 4px 14.24px 1.76px rgba(41, 162, 232, 0.23); cursor:pointer; content:'';}
.ppq-audio-player .player-time {width:48px !important; margin:0 !important; color:#666666; font-size:18px; font-weight:300; text-align:center !important;}
.ppq-audio-player .player-time-current {position:absolute; top:0; right:60px;}
.ppq-audio-player .player-time-duration {position:absolute; top:0; right:0;}
.ppq-audio-player .player-time-duration:after {display:block; position:absolute; top:0; left:-9px; color:#666666; font-size:18px; font-weight:300; content:'/';}
.ppq-audio-player.player-playing .play-pause-btn a {background-image:url('/template/resp/html/image/recording_stop.png') !important;}

@media(max-width:1080px){
	.ppq-audio-player {height:24px !important; padding:0 100px 0 40px !important; line-height:24px !important;}
	.ppq-audio-player .play-pause-btn {margin:-12px 0 0 !important;}
	.ppq-audio-player .play-pause-btn a {width:24px !important; height:24px !important;}
	.ppq-audio-player .player-bar {margin-top:10px !important;}
	.ppq-audio-player .player-bar .player-bar-played:after {right:-7px; width:14px; height:14px; margin-top:-7px;}
	.ppq-audio-player .player-time {width:35px !important; font-size:13px;}
	.ppq-audio-player .player-time-current {right:45px;}
	.ppq-audio-player .player-time-duration:after {left:-7px; font-size:13px;}
}