.touch_drag{
	z-index: 21;
}
.show {
	display: block !important;
}
.hide {
	display: none !important;
}


.none-before:before{
	content: none !important;
}

.opacity1{
	opacity: 1;
}
.opacity0{
	opacity: 0;
}


.touch_text{
	font-size: 30px;
}

.touch_drag.hold{
	display: block;
}
.touch_drag.hold .touch_point_drag{
	display: none;
}
.touch_drag.hold .drag{
	pointer-events: none;
}

.record_wrap{
	opacity: 0;
	transition: all ease .3s;
}
.record_wrap.active{
	opacity: 1;
	
}

@keyframes record {
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.record{
	width: 260px;
	height: 90px;
	background-image: url('record_0.webp');
	background-repeat: no-repeat;
	background-size: 260px 90px;
	background-position: 0 0;
	position: relative;
}
.record:after{
	content: "";
	width: 260px;
	height: 90px;
	background-image: url('record_1.webp');
	background-repeat: no-repeat;
	background-size: 260px 90px;
	background-position: 0 0;
	position: absolute;
	top: 0;
	left: 0;
}
.record_wrap.active .record:after{
	animation-name: record;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
}