.popup_wrap{width:100%;height:100%;background:rgba(0,0,0,0.6);margin:auto;position:fixed;z-index:999;left:0;right:0;bottom:0;display:none;}
.cont_wrap{background:#fff;margin:auto;position:fixed;z-index:1000;left:0;right:0;top:0;bottom:0;border-radius:20px;
text-align:center;padding:10px 40px 0;display:table;}
.img_canvas{box-sizing:border-box;line-height:1em;vertical-align:text-bottom;}
.canvas-container{margin:auto;}
.hide{float:right;background:none !important;padding-right:0 !important;}
.close{float:right;background:none !important;padding-right:10px;}
.head{padding-bottom:10px;}
.head li{float:left;}
.on{background:rgba(0,0,0,0.2);border-radius:10px;}
.on.nohover{background:none;cursor:pointer;}
.head:after{content:'';display:block;clear:both;}
.footer{padding-top:20px;}
.footer li{float:left;}
.footer:after{content:'';display:block;clear:both;}
.cont_wrap img:hover{background:#f4f4f4;cursor:pointer;}
.cont_wrap img.nohover:hover{background:none;cursor:pointer;}
.mic_status{margin:0 10px;}
.stu_stop{display:none;}
img.stu_del:focus, img.stu_del:active{background:#ff0000;}
#recordButton{margin:0 10px 0 15px;}
audio#comment_audio{width:300px;margin:0 20px 8px 0;transform:translateY(-8px);display:none;}
.comment_pop_icon{position:absolute;margin:10px 23px 0 70px;right:100px;}
.comment_pop_icon img {margin:0 2px;display:none;}
.file_view_btn{margin:-2px 2px 0;display:inline-block;display:none;cursor:pointer;}
#file_view_btn{margin:-2px 2px 0;display:inline-block;cursor:pointer;}
.popup_close_bg{width:100%;height:100%;background:transparent;}
/*판서드로잉*/
#range {
	width:80px;
	float:right;
	vertical-align:middle;
	padding:0px 0px 0px 0px;
	margin:21px 0px 0 64px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 0;
	height: 4px;
	background: #959799;
	outline: none;
}
#range .ui-slider-handle {
	position: absolute;
	margin: -3px 0 0 -9px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	border:1px solid #dedede;
	box-shadow:2px 2px 4px gray;
	background: #fff;
	border: 0;
	height: 18px;
	width: 18px;
	outline: none;
	cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
#range .ui-slider-range {background: #007aff;}
#range #currentVal {
	position:absolute;
	font-size: 15px;
	font-weight: bold;
	color: #494949;
	text-align: center;
	padding-left:95px;
	margin-top:-6px;
	display: inherit;
}
@media screen and (max-height:600px) {
	.cont_wrap, .cont_wrap2{padding:10px 20px;}
	.cont_wrap li, .cont_wrap2 li{margin-bottom:0;}
	.head img, .footer img{width:30px !important;}
	.footer{padding-top:4px;}
	.cont_wrap li:nth-child(10), .cont_wrap2 li:nth-child(10){clear:both;}
	.popup_close_common, .popup_close_mini{margin-top:-45px;}
}
@media screen and (max-height:1080px) {
	.head img, .footer img{width:40px;}
}
@media screen and (min-height:1081px) {
	.head img, .footer img{width:40px;}
}
/*음성녹음*/
#mic{margin:14px 0 0 0;}
#stopBtn2{display:none;}
.vmsg-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50%;
  z-index:1000;
}
.vmsg-popup {
  box-sizing: border-box;
  width: 250px;
  padding: 10px;
  border-radius: 4px;
  background: #e4e1e5;
  box-shadow: 1px 1px 4px 0 rgba(59,26,84,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: Helvetica,sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #0a0a0a;
  z-index:1000;
}
.vmsg-progress {
  width: 40%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.vmsg-progress-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  animation: vmsg-progress 1s linear infinite;
}
.vmsg-progress-dot:nth-child(2) {
  animation-delay: -0.8s;
}
.vmsg-progress-dot:nth-child(3) {
  animation-delay: -0.6s;
}
@keyframes vmsg-progress {
  0%, 60%, 100% {
    background: none;
  }
  30% {
    background: #9e85ad;
  }
}
.vmsg-error {
  font-weight: bold;
  text-align: center;
}
.vmsg-record-row {
  display: flex;
  justify-content: space-between;
}
.vmsg-button {
  min-width: 40px;
  line-height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid #ccc;
  font-family: Helvetica,sans-serif;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.vmsg-button:disabled {
  cursor: default;
  color: #999;
}
.vmsg-button:not(:disabled):hover {
  border-color: #9e85ad;
}
.vmsg-button::-moz-focus-inner {
  border: 0;
}
.vmsg-record-button {
  font-size: 30px;
  color: #f00;
}
.vmsg-stop-button {
  font-size: 25px;
  color: #000;
}
.vmsg-save-button {
  font-size: 25px;
  color: #090;
}
.vmsg-timer {
  line-height: 32px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.vmsg-slider-wrapper {
  position: relative;
  margin-top: 3px;
}
.vmsg-slider-wrapper::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 14px;
  text-align: center;
  color: #999;
  pointer-events: none;
}
.vmsg-pitch-slider-wrapper::after {
  content: "pitch";
}
.vmsg-gain-slider-wrapper::after {
  content: "gain";
}
.vmsg-slider {
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
}
.vmsg-slider::-moz-focus-outer {
  border: 0;
}
.vmsg-slider::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 16px;
  background: none;
  border: 1px solid #ccc;
}
.vmsg-slider::-moz-range-track {
  box-sizing: border-box;
  height: 16px;
  background: none;
  border: 1px solid #ccc;
}
.vmsg-slider::-ms-track {
  box-sizing: border-box;
  height: 16px;
  background: none;
  border: 1px solid #ccc;
}
.vmsg-slider::-webkit-slider-thumb {
  width: 39px;
  height: 14px;
  background: #ccc;
  cursor: pointer;
  -webkit-appearance: none;
}
.vmsg-slider::-moz-range-thumb {
  width: 40px;
  height: 14px;
  background: #ccc;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.vmsg-slider::-ms-thumb {
  width: 39px;
  height: 14px;
  background: #ccc;
  cursor: pointer;
}
.vmsg-slider::-webkit-slider-thumb:hover {
  background: #999;
}
.vmsg-slider::-moz-range-thumb:hover {
  background: #999;
}
.vmsg-slider::-ms-thumb:hover {
  background: #999;
}
.vmsg-slider::-ms-tooltip {
  display: none;
}
#controls {
  display: flex;
  margin-top: 2rem;
  max-width: 28em;
}
audio{
	display: block;
	width: 100%;
	margin-top: 0.2rem;
	max-width: 28em;
	background:none;
	filter.gain.value = 30;
}
audio::-webkit-media-controls-panel{
	background-color:white;
}
#formats {
	margin-top: 0.5rem;
	font-size: 80%;
}
.disabled{
	pointer-events:none;
}
.popup_mini, .popup_mini2{
	width:360px;
	position:fixed;
	padding:20px 40px;
	border-radius:15px;
	background:#FF6145;
	border:1px solid #acacac;
	color:#fff;
	text-align:center;
	bottom:40px;
	left:110px;
	z-index:999;
	cursor:pointer;
	display:none;
}

/*오디오팝업*/
.popup_wrap2{width:100%;height:100%;background:rgba(0,0,0,0.6);margin:auto;position:fixed;z-index:999;left:0;right:0;bottom:0;display:none;}
.cont_wrap2{background:#fff;margin:auto;position:fixed;z-index:1000;left:0;right:0;top:0;bottom:0;border-radius:20px;
text-align:center;padding:10px 40px 0;display:table;}
.audio_canvas{box-sizing:border-box;line-height:1em;vertical-align:text-bottom;}
.cont_wrap2 img:hover{background:#f4f4f4;cursor:pointer;}
.cont_wrap2 img.nohover:hover{background:none;cursor:pointer;}
.stu_stop2{display:none;}
img.stu_del2:focus, img.stu_del2:active{background:#ff0000;}
audio#comment_audio2{width:300px;margin:0 20px 8px 0;transform:translateY(-8px);display:none;}
audio#comment_audio_view{width:300px;margin:0 20px 8px 0;transform:translateY(-8px);display:none;}
#recordButton2{margin:0 10px 0 15px;}
#comment_text_view{width:640px;padding:6px 10px 0 0;text-align:left;border:none;outline:none;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
#view_more{position:absolute;width:300px;height:auto;padding:15px;border-radius:8px;background:rgba(0,0,0,0.8);display:table;z-index:999;color:#fff;
transform:translateY(-30px);right:90px;line-height:1.3em;letter-spacing:1px;text-align:left;display:none;transition:all 1s;}
#view_more.on{display:table;}
#mic2{margin:14px 0 0 0;}

/*멀티코멘트 뷰*/
.footer3{padding:20px 0;}
.footer3 li{float:left;}
.footer3:after{content:'';display:block;clear:both;}
.popup_wrap3{width:100%;height:100%;background:rgba(0,0,0,0.6);margin:auto;position:fixed;z-index:999;left:0;right:0;bottom:0;display:none;}
.cont_wrap3{background:#fff;margin:auto;position:fixed;z-index:1000;left:0;right:0;top:0;bottom:0;border-radius:20px;
text-align:center;padding:10px 40px 0;display:table;}
.view_canvas3{box-sizing:border-box;line-height:1em;vertical-align:text-bottom;}
.popup_close_common3{margin-top:20px;}
#comment_text_view3{width:640px;padding:30px 12px 0 15px;text-align:left;border:none;outline:none;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;
background:#fff;}
#audio_append3{width:100%;height:62px;}
audio#comment_audio_view3{width:420px;margin:auto;transform:translateY(-8px);display:none;}
#view_more3{position:absolute;width:300px;height:auto;padding:15px;border-radius:8px;background:rgba(0,0,0,0.8);display:table;z-index:999;color:#fff;
transform:translateY(-30px);right:90px;line-height:1.3em;letter-spacing:1px;text-align:left;display:none;transition:all 1s;}
#view_more3.on{display:table;}
.img_viewer{box-sizing:border-box;line-height:1em;vertical-align:text-bottom;}

/*모바일view*/
@media screen and (max-width: 768px) {
	.comment_pop, .comment_pop_icon{display:none !important;}
	.cont_wrap, .cont_wrap2, .cont_wrap3{width:90% !important;padding:0 2%;}
	.view_canvas3{width:100%}
	#comment_text_view3{width:100% !important;}
	audio#comment_audio_view3{width:360px}
	.img_viewer{width:99%;}
}