.video-detail{
	padding: 0 4%;
}

.video-detail-main{
	grid-template-columns:repeat(12,minmax(0,1fr));
	gap:16px;
	margin-top:20px;
	display: grid;
}

.video-detail-player{
	grid-column:span 9/span 9;
}

.video-detail-player video{
	width: 100%;
	height: 700px;
}

.video-detail-info{
}

.video-detail-info h1{
	font-size: 32px;
	margin-bottom: 5px;
	--tw-text-opacity: 1;
	color: rgba(31,33,41,var(--tw-text-opacity));
}

.video-detail-info .video-detail-info-abst{
	margin-bottom: 10px;
	font-size: 18px;
}

.video-detail-info .video-detail-info-timer{
	margin-bottom: 12px;
	font-size: 16px;
	--tw-text-opacity: 1;
	color: rgba(96,99,112,var(--tw-text-opacity));
}

.video-detail-hot{
	grid-column:span 3/span 3;
	background-color: #fff;
}

.video-detail-hot .video-detail-hot-tit{
	padding: 16px 12px 0 12px;
	font-size: 20px;
	font-weight: 600;
}

.video-detail-hot-list li{
	position: relative;
	z-index: 9;
}

.video-detail-hot-list li a{
	border-bottom: 1px #f2f4fa solid;
	padding: 16px 12px;
	display: flex;
}

.video-detail-hot-list .video-detail-hot-info-img{
	margin-right: 10px;
}

.video-detail-hot-list .video-detail-hot-info-img img{
	border-radius: 4px;
	max-width: 132px;
}

.video-detail-hot-info-main{
	display: flex;
	justify-content:space-between;
	align-items: stretch;
	flex-direction: column;
	flex-grow:0;
	flex-shrink:1;
	width: 100%;
}

.video-detail-hot-info-main .video-detail-hot-info-main-tit{
	font-size: 16px;
	--tw-text-opacity:1;
	color:rgba(31,33,41,var(--tw-text-opacity));
	font-weight:600;
	-webkit-line-clamp: 2;
	white-space:normal;
	overflow:hidden;
}

.video-detail-hot-info-main .video-detail-hot-info-main-timer{
	white-space:nowrap;
	--tw-text-opacity:1;
	color: rgba(96,99,112,var(--tw-text-opacity));
}