.joe_video__contain {
	position:relative;
	background:var(--background);
	border-radius:var(--radius-wrap);
	box-shadow:var(--box-shadow);
	padding:60px 15px 15px
}
.joe_video__contain-title {
	position:absolute;
	top:15px;
	left:-10px;
	background:var(--theme);
	color:#fff;
	font-weight:500;
	box-shadow:2px 5px 10px rgba(49,58,70,0.15);
	height:30px;
	line-height:30px;
	padding:0 12px;
	border-radius:2px 2px 2px 0;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.joe_video__contain-title::after {
	content:'';
	position:absolute;
	bottom:-10px;
	left:-10px;
	border-style:solid;
	border-width:10px;
	border-color:var(--theme) transparent transparent;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg)
}
.joe_video__type {
	margin-bottom:15px
}
.joe_video__type-list {
	display:grid;
	gap:15px;
	grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
	border-top:1px solid var(--classC);
	padding-top:15px
}
.joe_video__type-list .item {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	background:var(--classD);
	height:28px;
	line-height:28px;
	border-radius:14px;
	cursor:pointer;
	color:var(--routine);
	font-size:12px;
	padding:0 15px;
	text-align:center;
	transition:color 0.35s,background 0.35s,box-shadow 0.35s,-webkit-transform 0.35s;
	transition:color 0.35s,background 0.35s,box-shadow 0.35s,transform 0.35s;
	transition:color 0.35s,background 0.35s,box-shadow 0.35s,transform 0.35s,-webkit-transform 0.35s
}
.joe_video__type-list .item.active {
	-webkit-transform:translateY(-2px);
	transform:translateY(-2px);
	color:#fff;
	background:var(--theme);
	box-shadow:0 5px 5px rgba(0,0,0,0.1)
}
.joe_video__type-list .item:hover {
	-webkit-transform:translateY(-2px);
	transform:translateY(-2px);
	box-shadow:0 5px 5px rgba(0,0,0,0.1)
}
.joe_video__type-list .error {
	text-align:center;
	color:var(--routine);
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.joe_video__list-item {
	display:grid;
	gap:15px;
	grid-template-columns:repeat(4,1fr);
	border-top:1px solid var(--classC);
	padding-top:15px
}
.joe_video__list-item .item {
	position:relative;
	border-radius:var(--radius-inner);
	overflow:hidden
}
.joe_video__list-item .item .year {
	position:absolute;
	top:8px;
	right:8px;
	padding:2px 5px;
	border-radius:2px;
	font-size:12px;
	font-style:normal;
	background:#ff6800;
	color:#fff;
	z-index:3
}
.joe_video__list-item .item .thumb {
	position:relative;
	height:260px
}
.joe_video__list-item .item .thumb .pic {
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover
}
.joe_video__list-item .item .thumb::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0);
	transition:background 0.3s ease-out;
	z-index:2
}
.joe_video__list-item .item .thumb::after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	margin:-25px 0 0 -25px;
	opacity:0;
	background:url(data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAA1VBMVEUcHBwAAAD8/PwpKSn///////+SkpL6+vrMzMx6enrj4+Pf39+4uLhkZGRhYWFTU1P///9DQ0P////////////////+/v5bW1v39/fz8/P////////a2tpoaGj////19fXY2Nizs7Oqqqr///+VlZU8PDz///////////////////+9vb3///+xsbH///////////////////////////+Ojo7////////v7+/s7Oz////////////q6url5eXc3Nzc3NzJycnCwsKgoKCLi4v////////8X/FsAAAARnRSTlNmAPtq77qS9r2F1NGsfHt2k3BWHQsG+3ny69rWy35f7sinopeUbiHcxr2wr6qmpaF9LxoWmJAyH+jig3tj3dnOzLmzmo4z4F1A4QAAAdxJREFUSMellmlX6jAQhod0X1gKlLKDILjgLuj17veq7///SaLgoZm02OjzsTlPTyaZmQyVFBrDmtU1Wy2za9WGDXWdK42rHiR6V/d7leszAE4QrgaRYUSDVRg4AM6uc5XbS0CMbYNSGPZYAJe32UrdhHCrpFB1Bcx6hhJPAT+hTBIfmMZcaVoQB5TLgYDVlJXmMdoe7cFr47iZVuITdCq0l0oHJ3FKmWLEDdUZYbpT6hAefYgnUH9XbkycUwHOYd5slQv4VAgfFxvlDqJcTCkL3L0pp3CpIC5OX5V7iGpRpSowXys/0CeZp7/9xSDb6eP7WunBVn615mFikIqNbokacNjaf2zoTFTFcDCnIQKSecA7vzziBPhJNYTsR9jRWvDdhaiRhUOSGCDN74gkDmHREcr8o8S3RL5NHJGJmaxMINOR1iOYBPACBKMvR9pSlQUYgit8Y6oSsI2p4YfMaCc8fH7IPPyRxw9ZvUqbnzG/SjVhykgxnqkJk5GWzi6Mx8y0VJP/DzYId5ad/GqJrbZCkltic6WQ/wnHn0R5hfy5dlF61mtK+q1Pv8Hqt3G9xyIZYfmVJ0n/4dN/XrfES8Cv5GzKB5ax/qjw9YGEjz32Zuyx2djz+eFKf4R7ATsDgJd2KvNDAAAAAElFTkSuQmCC) no-repeat;
	-webkit-transform:scale(2);
	transform:scale(2);
	transition:opacity 0.25s ease-out,-webkit-transform 0.25s ease-out;
	transition:transform 0.25s ease-out,opacity 0.25s ease-out;
	transition:transform 0.25s ease-out,opacity 0.25s ease-out,-webkit-transform 0.25s ease-out;
	z-index:3
}
.joe_video__list-item .item .thumb:hover::before {
	background:rgba(0,0,0,0.5)
}
.joe_video__list-item .item .thumb:hover::after {
	opacity:0.8;
	-webkit-transform:scale(1);
	transform:scale(1)
}
.joe_video__list-item .item .title {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:0 10px;
	text-align:center;
	color:var(--routine);
	background:var(--classD);
	height:38px;
	line-height:38px;
	font-size:12px
}
.joe_video__list-item .error {
	text-align:center;
	color:var(--minor)
}
.joe_video__list-item:empty {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	height:180px
}
.joe_video__list-item:empty::after {
	content:'';
	display:block;
	width:70px;
	height:70px;
	background:url(data:image/svg+xml;
	base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
	background-repeat:no-repeat;
	background-size:100% 100%
}
.joe_video__list-search {
	position:absolute;
	top:15px;
	right:15px;
	display:flex;
	align-items:center
}
.joe_video__list-search .input {
	width:180px;
	height:30px;
	padding:0 12px;
	color:var(--routine);
	background:var(--background);
	border:1px solid var(--theme);
	font-size:12px
}
.joe_video__list-search .button {
	height:30px;
	border:none;
	background:var(--theme);
	color:#fff;
	padding:0 12px;
	font-size:12px
}
.joe_video__pagination {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding-top:15px
}
.joe_video__pagination-item {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:pointer;
	margin-left:5px;
	height:32px;
	line-height:32px;
	padding:0 15px;
	background:var(--background);
	color:var(--main);
	border-radius:2px;
	transition:background 0.35s,color 0.35s
}
.joe_video__pagination-item:first-child {
	margin-left:0
}
.joe_video__pagination-item svg {
	fill:var(--routine);
	transition:fill 0.35s
}
.joe_video__pagination-item .next {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg)
}
.joe_video__pagination-item.active,.joe_video__pagination-item:hover {
	color:#fff;
	background:var(--theme)
}
.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg {
	fill:#fff
}
.joe_video__detail {
	margin-bottom:15px
}
.joe_video__detail-info {
	display:flex;
	border-top:1px solid var(--classC);
	padding-top:15px
}
.joe_video__detail-info .thumbnail {
	flex-shrink:0;
	position:relative;
	width:180px;
	height:240px;
	margin-right:15px;
	border-radius:var(--radius-inner);
	overflow:hidden
}
.joe_video__detail-info .thumbnail .pic {
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover
}
.joe_video__detail-info .thumbnail .year {
	position:absolute;
	top:8px;
	right:8px;
	padding:2px 5px;
	border-radius:2px;
	font-size:12px;
	font-style:normal;
	background:#ff6800;
	color:#fff;
	z-index:3
}
.joe_video__detail-info .description {
	overflow:hidden
}
.joe_video__detail-info .description dt {
	font-size:22px;
	color:var(--main);
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-bottom:10px
}
.joe_video__detail-info .description dd {
	margin-bottom:5px;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	/*! autoprefixer:off */-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	line-height:22px;
	max-height:44px
}
.joe_video__detail-info .description dd .muted {
	color:var(--minor)
}
.joe_video__detail-info .description dd .text {
	color:var(--routine)
}
.joe_video__detail-info .error {
	color:var(--minor);
	margin:0 auto;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.joe_video__player {
	margin-bottom:15px
}
.joe_video__player-play {
	width:100%;
	height:500px;
	background:#000
}
.joe_video__source {
	margin-bottom:15px
}
.joe_video__source:last-child {
	margin-bottom:0
}
.joe_video__source-list {
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:15px;
	border-top:1px solid var(--classC);
	padding-top:15px
}
.joe_video__source-list .item {
	height:30px;
	line-height:30px;
	border-radius:15px;
	background:var(--classD);
	color:var(--routine);
	cursor:pointer;
	text-align:center;
	font-size:12px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:box-shadow 0.35s,background 0.35s,color 0.35s,-webkit-transform 0.35s;
	transition:transform 0.35s,box-shadow 0.35s,background 0.35s,color 0.35s;
	transition:transform 0.35s,box-shadow 0.35s,background 0.35s,color 0.35s,-webkit-transform 0.35s;
	padding:0 10px
}
.joe_video__source-list .item.active {
	-webkit-transform:translateY(-2px);
	transform:translateY(-2px);
	color:#fff;
	background:var(--theme);
	box-shadow:0 5px 5px rgba(0,0,0,0.1)
}
.joe_video__source-list .item:hover {
	-webkit-transform:translateY(-2px);
	transform:translateY(-2px);
	box-shadow:0 5px 5px rgba(0,0,0,0.1)
}