.VideoDetail {
	padding: 34px 0 120px;
	background: #f5f6f7;
}

.VideoDetail .main {
	width: 1360px;
	max-width: 90%;
}

.VideoDetail .breadcrumbs {
	margin-bottom: 28px;
	color: #71777c;
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .videoDetailGrid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) 387px;
	gap: 28px;
}

.VideoDetail .videoPlayer {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
	color: #fff;
}

.VideoDetail .videoPlayer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55) sepia(0.2) saturate(1.7);
}

.VideoDetail .videoPlayer > span {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 46px;
	line-height: 50px;
	transform: translate(-50%, -50%);
}

.VideoDetail .videoPlayer > div {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding: 26px 30px;
	text-align: left;
}

.VideoDetail .videoPlayer strong {
	display: block;
	font-size: 24px;
	line-height: 34px;
}

.VideoDetail .videoPlayer small {
	font-size: 16px;
	line-height: 24px;
}

.VideoDetail article {
	margin-top: 26px;
	padding: 30px;
	background: #fff;
	border: 1px solid #dfe2e5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.VideoDetail .articleHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e3e6e8;
}

.VideoDetail .articleHeader span {
	display: inline-block;
	padding: 4px 12px;
	background: #fae2dc;
	color: var(--site-red);
	font-size: 12px;
	line-height: 20px;
}

.VideoDetail .articleHeader h1 {
	margin-top: 16px;
	font-size: 32px;
	line-height: 42px;
}

.VideoDetail .articleHeader > div:last-child {
	display: flex;
	gap: 12px;
}

.VideoDetail .articleHeader button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid #8b7a74;
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .articleActionIcon {
	width: 16px;
	height: 16px;
}

.VideoDetail .intro {
	padding: 24px 0;
}

.VideoDetail .intro h2,
.VideoDetail .downloads h2 {
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
}

.VideoDetail .intro p {
	margin-top: 12px;
	color: #5e666c;
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .downloads {
	padding: 24px;
	border-left: 3px solid var(--site-red);
	background: #f1f3f4;
}

.VideoDetail .downloads > div {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.VideoDetail .downloads .item {
	display: grid;
	grid-template-columns: 24px 1fr 20px;
	align-items: center;
	column-gap: 10px;
	row-gap: 4px;
	padding: 18px;
	background: #fff;
	border: 1px solid #e0e3e6;
}

.VideoDetail .videoDownloadFileIcon {
	grid-row: span 2;
	width: 24px;
	height: 24px;
}

.VideoDetail .videoDownloadActionIcon {
	grid-column: 3;
	grid-row: span 2;
	width: 18px;
	height: 18px;
}

.VideoDetail .downloads a strong,
.VideoDetail .downloads a > span {
	grid-column: 2;
}

.VideoDetail .downloads strong {
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .downloads span {
	color: #7b8186;
	font-size: 12px;
	line-height: 16px;
}

.VideoDetail aside > div {
	margin-bottom: 24px;
}

.VideoDetail .videoCategories {
	padding: 26px;
	border: 1px solid #e0e3e6;
	background: #f0f2f3;
}

.VideoDetail .videoCategories h2 {
	font-size: 24px;
	line-height: 34px;
}

.VideoDetail .videoCategories p {
	color: #747a80;
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .videoCategories a {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 20px;
}

.VideoDetail .videoDetailCategoryIcon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.VideoDetail .videoCategories a.active {
	background: var(--site-red);
	color: #fff;
}.VideoDetail .videoCategories a.active img{
    
  filter: brightness(0) invert(1);
}

.VideoDetail .recommend h2 {
	margin-bottom: 16px;
	padding-left: 16px;
	border-left: 3px solid var(--site-red);
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .recommend > a:not(.more) {
	display: grid;
	grid-template-columns: 147px 1fr;
	gap: 14px;
	margin-top: 16px;
}

.VideoDetail .recommendImage {
	aspect-ratio: 147 / 80;
	flex-shrink: 0;
}

.VideoDetail .recommend strong,
.VideoDetail .recommend small {
	display: block;
}

.VideoDetail .recommend strong {
	font-size: 16px;
	line-height: 26px;
}

.VideoDetail .recommend small {
	margin-top: 5px;
	color: #747a80;
	font-size: 12px;
	line-height: 20px;
}

.VideoDetail .recommend .more {
	display: block;
	margin-top: 18px;
	padding: 13px;
	background: #e9ebed;
	text-align: center;
}

.VideoDetail .supportPromo {
	padding: 260px 28px 28px;
	border-radius: var(--p10);
	overflow: hidden;
	background-image:
		linear-gradient(transparent, rgba(0, 0, 0, 0.88)),
		url("../images/7bd5e386ab8528716834592bd6c26645be720558.png");
	background-position: center top;
	background-size: cover;
	color: #fff;
}

.VideoDetail .supportPromo h2 {
	font-size: 24px;
	line-height: 34px;
}

.VideoDetail .supportPromo p {
	margin-top: 8px;
	font-size: 14px;
	line-height: 22px;
}

.VideoDetail .supportPromo a {
	display: block;
	margin-top: 20px;
	padding: 13px;
	background: var(--site-red);
	text-align: center;
}

@media only screen and (max-width: 1440px) {
	.VideoDetail .videoDetailGrid {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

@media only screen and (max-width: 768px) {
	.VideoDetail .videoDetailGrid {
		grid-template-columns: 1fr;
	}

	.VideoDetail .articleHeader {
		flex-direction: column;
	}

	.VideoDetail .downloads > div {
		grid-template-columns: 1fr;
	}

	.VideoDetail .videoPlayer strong {
		font-size: 18px;
		line-height: 28px;
	}
}