html {
	padding: 0;
	margin: 0;
	font-size: calc(100vw/37.5)
		/* 设置基准字体大小为10px */
}

body {
	padding: 0px;
	margin: 0px;
	background-color: #000;
}

#player {
	width: 37.5rem;
	height: 21.1rem;
	float: left;
}

.tools {
	width: 37.5rem;
	height: 5rem;
	background-color: #000;
	float: left;
}

.tool_icon {
	width: 3rem;
	height: 3rem;
	margin-top: 1rem;
	margin-left: 3.1875rem;
}

.tools_item {
	width: 9.375rem;
	height: 5rem;
	float: left;
}

.tools_item2 {
	width: 9.375rem;
	height: 5rem;
	float: left;

	transform-origin: top left;
	/* 设置变换原点为左上角 */
	transform: rotate(90deg) translateY(-100%);
	/* 旋转90度并向上平移100%高度 */
}



/* 通用样式 */
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	/* 设置高度为视口高度，使容器充满整个屏幕 */
}

/* 录像计时器样式 */



/* 家红点样式 */
.record-dot {
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
	display: inline-block;
	/* 添加闪烁动画 */
	animation: blink 1s infinite alternate;
}

/* 定义闪烁动画 */
@keyframes blink {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.resolution {
	color: #fff;
	font-size: 1.5rem;
	line-height: 5rem;
	text-align: center;
}

.operating_space {
	width: 37.5rem;
	float: left;
	background-color: #f6f6f6;
	border-radius: 20px 20px 0 0;
	/* 分别对应左上角、右上角、右下角、左下角的圆角半径 */

}

.operating_space_tab2 {
	width: 34.5rem;
	float: left;
	background-color: #f6f6f6;
	border-radius: 20px 20px 0 0;
	padding: 1.5rem;
	/* 分别对应左上角、右上角、右下角、左下角的圆角半径 */

}

.operating_space2 {
	width: 37.5rem;
	float: left;
	background-color: #f6f6f6;
	border-radius: 20px 20px 0 0;
	/* 分别对应左上角、右上角、右下角、左下角的圆角半径 */
	transform: rotate(90deg);
	z-index: 9999;


}

.operating_space_item {
	width: 12.5rem;
	height: 10rem;
	float: left;
}

.background {
	width: 4rem;
	height: 4rem;
	border-radius: 4rem;
	margin: 3rem auto;
	background-color: #eee;
}

.background img {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.75rem;
}

.volume {
	width: 32.5rem;
	height: 5rem;
	margin-left: 2.5rem;
	float: left;
	border-radius: 5rem;

}

.van-slider {
	padding: 0.5rem;
	margin-top: 2rem;
	width: 25.5rem;
	margin-left: 2rem;
	float: left;
	margin-right: 1rem;
}

.volume img {
	width: 3rem;
	height: 3rem;
	float: left;
	margin-top: 1rem;
}

.tools2 {
	position: fixed;
	top: 10vh;
	left: 1.5rem;
	width: 5rem;
	/* 调整宽度以适应竖直显示 */
	height: 80vh;
	border-radius: 5rem;
	opacity: 0.8;
	/* 使用视窗高度作为高度，使其铺满整个屏幕 */
	background-color: #000;
	/* transform-origin: top left; */
	/* 设置变换原点为左上角 */
	/* 旋转90度并向上平移100%高度 */
	z-index: 9999;
}

.top {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 5rem;
	float: left;
	background-color: #fff;
}

#tab {

	width: 37.5rem;
	height: 5rem;
	margin: 0 auto 0 auto;
	text-align: center;
}

.tabItem {
	float: left;
	width: 18.75rem;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
}

.tabText {
	width: 10rem;
	margin-left: 4.375rem;
}

.activeSelect {
	border-top: 2px solid blue;
}

.date_select {
	width: 12rem;
	height: 3rem;
	border-radius: 5px;
	background-color: #e8ebec;

}

.left_arrow {
	width: 3rem;
	float: left;
	height: 3rem;
}

.taday {
	width: 6rem;
	float: left;
	line-height: 3rem;
	height: 3rem;
	text-align: center;
}

.right_arrow {
	width: 3rem;
	float: left;
	height: 3rem;
}

.timeline {
	overflow-y: auto;
	height: 300px;
	margin-top: 1rem;
	/* 设置适当的高度 */
	/* border-right: 1px solid #ccc; */
	/* background-color: #f0f0f0; */
	/* 添加垂直边框样式 */
}

.timeline_bottom {
	width: 100%;
	float: left;
}

.time-node {
	cursor: pointer;
	height: 1rem;
	line-height: 1rem;
	width: 10rem;
	margin-left: 6rem;

	/* border-bottom: 1px solid #ccc; */
	/* 添加时间节点之间的分隔线 */
}

.pointer {
	position: absolute;
	top: 34.6rem;
	left: 1rem;
	width: 5rem;
	height: 2px;
	background-color: #65baf5;
	z-index: 999;
}

.line {
	width: 0.5rem;
	position: absolute;
	top: 31.6rem;
	left: 6rem;
	height: 300px;
	background-color: #9fb4c9;
}

.selectTime {
	position: absolute;
	top: 34.1rem;
	text-align: center;
	left: 1rem;
	width: 4rem;
	z-index: 1000;
	color: #fff;
	background-color: #65baf5;
	border-radius: 0.5rem;
}

#badge {
	background-color: #f6f6f6;
	font-size: 18px;
	position: fixed;
	text-align: center;
	width: 6rem;
	height: 2.5rem;
	left: 2rem;
	line-height: 2.5rem;
	border-radius: 2.5rem;
	background-color: #000;
	opacity: 0.8;
	top: 10px;
	color: #fff;
	z-index: 999;
}

#timer {
	background-color: #f6f6f6;
	font-size: 18px;
	position: fixed;
	text-align: center;
	width: 10rem;
	height: 2.5rem;
	left: 13.25rem;
	line-height: 2.5rem;
	border-radius: 2.5rem;
	background-color: #000;
	opacity: 0.8;
	top: 10px;
	color: #fff;
	z-index: 999;
}