.fancybox-button {
	background: rgba(30, 30, 30, .6);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	height: 44px;
	margin: 0;
	padding: 10px;
	position: relative;
	transition: color .2s;
	vertical-align: top;
	visibility: inherit;
	width: 44px
}

.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
	color: #ccc
}

.fancybox-button:hover {
	color: #fff
}

.fancybox-button:focus {
	outline: none
}

.fancybox-button.fancybox-focus {
	outline: 1px dotted
}

.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
	color: #888;
	cursor: default;
	outline: none
}

.fancybox-button div {
	height: 100%
}

.fancybox-button svg {
	display: block;
	height: 100%;
	overflow: visible;
	position: relative;
	width: 100%
}

.fancybox-button svg path {
	fill: currentColor;
	stroke-width: 0
}

@media(max-height:576px) {
	.fancybox-caption {
		padding: 12px
	}
	.fancybox-slide {
		padding-left: 6px;
		padding-right: 6px
	}
	.fancybox-slide--image {
		padding: 6px 0
	}
	.fancybox-close-small {
		right: -6px
	}
	.fancybox-slide--image .fancybox-close-small {
		background: #4e4e4e;
		color: #f2f4f6;
		height: 36px;
		opacity: 1;
		padding: 6px;
		right: 0;
		top: 0;
		width: 36px
	}
}

.site-content {
	position: relative;
	padding-top: 5px;
	padding-bottom: 35px;
	-webkit-transition: height .3s ease-in-out;
	transition: height .3s ease-in-out
}



@media(min-width:768px) {
	.video-info .info-header .header-left h6 {
		-webkit-box-pack: left!important;
		-ms-flex-pack: left!important;
		justify-content: left!important
	}
}

@media(min-width:992px) {
	.app-nav .container {
		max-width: 83.3333333333%
	}
}

@font-face {
	font-family: roboto;
	font-style: normal;
	font-weight: 400;
	src: local("Roboto"), local("Roboto-Regular"), url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: roboto;
	font-style: normal;
	font-weight: 600;
	src: local("Roboto Medium"), local("Roboto-Medium"), url(../font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: roboto;
	font-style: normal;
	font-weight: 700;
	src: local("Roboto Bold"), local("Roboto-Bold"), url(../font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

img {
	max-width: 100%
}

svg {
	vertical-align: middle
}

hr {
	border-top-color: #5e5d5a
}

::-webkit-input-placeholder {
	opacity: .3
}

:-ms-input-placeholder {
	opacity: .3
}

::-ms-input-placeholder {
	opacity: .3
}

::placeholder {
	opacity: .3
}

.pointer {
	cursor: pointer
}

.avatar {
	border-radius: 5px;
	box-shadow: 2px 2px 16px 0 rgba(17, 18, 20, .8);
	box-shadow: 2px 2px 16px 0 rgba(17, 18, 20, .8)
}

.separator {
	font-size: .8rem;
	margin-right: .5rem
}

.jable-animate {
	opacity: 0
}

.jable-svg-library {
	display: none
}

@-webkit-keyframes lazyloaded {
	from {
		-webkit-filter: blur(0.25rem);
		filter: blur(0.25rem)
	}
	to {
		-webkit-filter: blur(0);
		filter: blur(0)
	}
}

@keyframes lazyloaded {
	from {
		-webkit-filter: blur(0.25rem);
		filter: blur(0.25rem)
	}
	to {
		-webkit-filter: blur(0);
		filter: blur(0)
	}
}

.lazyloaded {
	animation: lazyloaded .5s
}

body {
	font-family: roboto, microsoft jhenghei, sans-serif;
	font-size: .8750625rem;
	line-height: 1.6;
	color: #b8babc;
	background: #090812;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#090812), color-stop(100vh, #111520), color-stop(200vh, #07090e));
	background-image: linear-gradient(to bottom, #090812, #111520 100vh, #07090e 200vh)
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	color: #edeeef;
	font-family: roboto, microsoft jhenghei, sans-serif
}

h1, .h1 { font-size: 2.250625rem; font-weight: 700 }
h2, .h2 { font-size: 1.86875rem; font-weight: 700 }
h3, .h3 { font-size: 1.37475rem; font-weight: 600 }
h4, .h4 { font-size: 1.1253125rem; font-weight: 600 }
h5, .h5 { font-size: .999375rem; font-weight: 500 }

h6,
.h6 {
	color: #edeeef;
	font-family: roboto, microsoft jhenghei, sans-serif;
	font-size: .8750625rem;
	font-weight: 500
}

.fs-1 { font-size: .7475rem!important }
.fs-2 { font-size: .8125rem!important }
.fs-3 { font-size: .8775rem!important }

a {
	color: #b8babc;
	transition: color .3s ease
}

a:hover {
	text-decoration: none;
	color: #fe628e
}

a:focus {
	outline: none
}

a.reverse {
	color: #fe628e
}

a.reverse:hover {
	color: #b8babc
}

.caps {
	text-transform: uppercase
}

.lh-0 {
	line-height: 0
}

.site-header {
	position: fixed;
	width: 100%;
	margin-bottom: .25rem;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;
	z-index: 1900
}

.site-header::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	box-shadow: 0 0 50px 65px rgba(10, 13, 23, .68);
	box-shadow: 0 0 50px 65px rgba(10, 13, 23, .68);
	z-index: -1
}

.site-header.hide {
	transform: translateY(-150%);
	transform: translateY(-150%)
}

.site-header .header-wrap {
	position: relative;
	min-height: 60px
}

.site-header .col-auto {
	display: flex;
	align-items: center
}

.site-header .logo {
	margin-top: -3px
}

.site-header .navbar {
	padding: 0
}

.site-header .navbar .nav-item {
	position: relative
}

.site-header .navbar .nav-item>a {
	white-space: nowrap;
	padding: 0 1.1rem;
	color: #fff;
	font-size: .9368125rem;
	font-weight: 600;
	line-height: 65px
}

.site-header .navbar .nav-item>a:hover,
.site-header .navbar .nav-item>a:active {
	color: #91a5f4
}

.site-header .navbar .nav-item.active>a {
	color: #91a5f4
}

.site-header .header-right {
	position: absolute;
	height: 100%;
	right: 0
}

.site-header .search {
	background: -webkit-gradient(linear, left top, left bottom, from(#020308), to(transparent));
	background: linear-gradient(180deg, #020308 0%, transparent 100%);
	height: 100%;
	padding-left: 1rem;
	z-index: 2
}

.site-header .search input {
	background: none;
	color: #777;
	max-width: 0;
	padding: 0;
	outline: none;
	border: none;
	border-top: 3px transparent solid;
	-webkit-transition: all .5s;
	transition: all .5s
}

.site-header .search input:focus {
	color: #fff;
	max-width: 120px;
	padding-left: .25rem
}

.site-header .lang {
	margin-left: 1rem
}

.site-header .lang img {
	border-radius: .35rem
}

.site-header .settings {
	position: relative;
	margin-left: 1rem
}

.site-header .settings>a {
	display: flex;
	align-items: center;
	white-space: nowrap
}

.site-header .settings .cover {
	background: #fffeec;
	height: 130px
}

.site-header .settings .avatar {
	position: relative;
	width: 100px;
	left: 50%;
	border-radius: .5rem;
	margin-bottom: -30px;
	box-shadow: 2px 2px 16px 0 rgba(168, 179, 211, .8);
	transform: translate(-50%, -50%)
}

.site-header .settings h5 {
	color: #000;
	text-align: center
}

.site-footer a {
	color: #8e9194
}

.site-footer a:hover {
	color: #fe628e
}

.social-icons ul {
	display: inline-flex;
	text-decoration: none;
	margin-bottom: 0
}

.social-icons a {
	padding: 10px
}

.social-icons li:first-child a {
	padding-left: 0
}

.site-footer .widget {
	margin-bottom: 30px
}

.site-footer .widget .widget-title {
	padding: 0;
	padding-bottom: 20px
}

.site-footer .widget .vertical-list li {
	padding: 0 0 8px
}

.site-footer .copyright {
	padding: 10px 0
}

@-webkit-keyframes bounce {
	from {
		transform: translateY(0px);
		transform: translateY(0px)
	}
	to {
		transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

@keyframes bounce {
	from {
		transform: translateY(0px);
		transform: translateY(0px)
	}
	to {
		transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

.site-preloader {
	display: none;
	background: #111520;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 2000
}

.site-preloader .preloader-center {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.site-preloader svg {
	-webkit-animation: bounce 1s infinite alternate;
	animation: bounce 1s infinite alternate
}

.site-preloader .shadow {
	width: 200%;
	height: 20px;
	display: block;
	top: 100%;
	position: absolute;
	border-radius: 50%;
	box-shadow: 0 27px 20px 0 #5e5d5a!important;
	box-shadow: 0 27px 20px 0 #5e5d5a!important;
	left: -55%
}

.error-message {
	text-align: center;
	padding-top: 3rem;
	margin-bottom: -2.5rem
}

.open-app-nav {
	overflow: hidden
}

.open-app-nav .app-nav {
	opacity: 1;
	transform: translateY(0px);
	transform: translateY(0px)
}

.open-app-nav .line-1 {
	top: -2px!important;
	transform: rotate(135deg);
	transform: rotate(135deg)
}

.open-app-nav .line-2 {
	opacity: 0
}

.open-app-nav .line-3 {
	top: -2px!important;
	transform: rotate(-135deg);
	transform: rotate(-135deg)
}

.app-nav {
	position: fixed;
	background: rgba(17, 21, 32, .98);
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding-top: 95px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	transform: translateY(-100vh);
	transform: translateY(-100vh);
	-webkit-transition: .25s cubic-bezier(.215, .61, .355, 1);
	transition: .25s cubic-bezier(.215, .61, .355, 1);
	z-index: 1800
}

.app-nav .container {
	padding-bottom: 190px
}

.app-nav .tag {
	font-size: .999375rem
}

.app-nav .tag:before {
	content: '#';
	color: #6190c9;
	font-weight: 400;
	margin-right: 1px
}

.app-nav-toggle {
	cursor: pointer;
	height: 100%;
	width: 22px;
	margin-right: 1.1rem
}

.app-nav-toggle .lines {
	position: absolute;
	top: 50%
}

.app-nav-toggle .lines>div {
	position: absolute;
	background: #fff;
	width: 22px;
	height: 2.5px;
	border-radius: 100px;
	-webkit-transition: .5s cubic-bezier(.68, -.55, .27, 1.55);
	transition: .5s cubic-bezier(.68, -.55, .27, 1.55)
}

.app-nav-toggle .lines .line-1 {
	top: -8px
}

.app-nav-toggle .lines .line-2 {
	top: -2px
}

.app-nav-toggle .lines .line-3 {
	top: 4px
}

.content-header {
	letter-spacing: .015rem;
	padding-top: 1.5rem;
	margin-bottom: 2.5rem
}

.content-header ul {
	padding-left: 0;
	margin-bottom: 0
}

.content-header li {
	display: inline-block;
	list-style: none
}

.content-header .sort-nav {
	padding-top: 2rem;
	text-align: center;
	margin-bottom: 1rem;
}

.content-header .sort-nav li {
	margin-bottom: .75rem
}

.content-header .sort-nav li>a {
	position: relative;
	padding: .5rem .75rem
}

.content-header .sort-nav li>a:before {
	content: '';
	position: absolute;
	background: #1db954;
	left: 50%;
	bottom: 0;
	height: 2px;
	width: 30px;
	margin-left: -15px;
	opacity: 0;
	border-radius: 100px;
	transition: all .3s
}

.content-header .sort-nav li.active>a,
.content-header .sort-nav li:hover>a {
	color: #fff
}

.content-header .sort-nav li.active>a::before,
.content-header .sort-nav li:hover>a::before {
	opacity: 1
}

.content-header .profile-info {
	margin-bottom: 2rem
}

.content-header .profile-nav {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.content-header .profile-nav li .count {
	color: #8e9194;
	font-size: .8125rem;
	margin-left: .75rem
}

.content-header .profile-nav li>a {
	position: relative;
	display: flex;
	align-items: center;
	padding: .75rem 0
}

.content-header .profile-nav li>a:before {
	content: '';
	position: absolute;
	background: #1db954;
	left: 0;
	bottom: 0;
	height: .15rem;
	width: 100%;
	opacity: 0;
	border-radius: 100px;
	transition: all .3s
}

.content-header .profile-nav li.active>a,
.content-header .profile-nav li:hover>a {
	color: #fff
}

.content-header .profile-nav li.active>a::before,
.content-header .profile-nav li:hover>a::before {
	opacity: 1
}

.content-header .profile-nav li:not(:last-child) {
	margin-right: 1.25rem
}

.content-header .profile-nav .right {
	display: flex;
	align-items: center
}

.title-box {
	margin-bottom: 1rem
}

.title-box .sub-title {
	line-height: 1
}

.title-with-more {
	display: flex;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end
}

.title-with-more .more {
	margin-bottom: 1.5rem
}

.title-with-more .more a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.title-with-avatar {
	display: flex;
	align-items: center;
	min-height: 100px
}

.title-with-avatar .avatar {
	margin-right: 1rem;
	border-radius: 50%
}

.title-with-avatar .title-box {
	margin-bottom: 0
}

.title-with-avatar.center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center
}

.round-btn {
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%
}

.round-btn::before,
.round-btn::after {
	border-radius: 50%
}

.round-btn.gradient-adonis-hover:hover {
	color: #fff
}

.round-btn.gradient-adonis-hover:hover p {
	color: #fff!important
}
.btn-action.fav {
    background: rgba(138, 128, 255, .09);
    color: #fff;
    border-radius: 16px;
}

/* 视频封面定位样式 */
.img-box {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
}

.img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;
}

/* 视频标题样式 */
.video-img-box .title {
	color: #b8babc;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.absolute-bottom-right {
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 10;
}

.absolute-bottom-left {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 10;
}

.absolute-bottom-right .label {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
}

.absolute-bottom-left .action {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	transition: all 0.3s ease;
}

.absolute-bottom-left .action:hover {
	background: rgba(254, 98, 142, 0.9);
	transform: scale(1.1);
}

/* 视频信息样式 */
.video-info .info-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.video-info .desc {
	padding: .5rem 1rem;
	margin-bottom: 1.5rem;
	line-height: 1.5;
	border-left: 4px solid #ff8382
}

.video-info .tags a {
	display: inline-block;
	margin-right: .5rem;
	margin-bottom: .5rem
}

.video-info .tags a:before {
	content: '#';
	color: #6190c9;
	font-size: 12px;
	font-weight: 400;
	margin-right: 1px
}

.video-info .tags a.cat::before {
	content: '//';
	color: #ff8382
}

/* 分页导航居中 */
.pagination {
	justify-content: center;
}

/* 右侧栏基础样式 - 小屏幕时占满整行 */
.right-sidebar {
	flex: 0 0 100%;
	max-width: 100%;
}

/* 中等屏幕 (768px-991px) - 右侧栏移到底部 */
@media (min-width: 768px) and (max-width: 991px) {
	.col.right-sidebar {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-top: 20px;
		order: 2;
	}
	
	.container .row .col:first-child {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 1;
	}
}

/* 响应式容器宽度调整 */
@media(min-width:992px) {
	.container.container-small {
		max-width: 800px
	}
	
	.container .row .col:first-child {
		-ms-flex: 1;
		flex: 1;
		max-width: calc(100% - 330px);
	}
	
	.right-sidebar {
		-ms-flex: 0 0 330px;
		flex: 0 0 330px !important;
		max-width: 330px;
	}
	
	.right-sidebar .video-img-box {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		width: 100%;
		margin-bottom: 10px!important
	}
	
	.right-sidebar .video-img-box .img-box {
		min-width: 50%;
		max-width: 50%
	}
	
	.right-sidebar .video-img-box .detail {
		padding-top: 8px;
		padding-left: 15px
	}
	
	/* 播放页右侧标题 - 最多2行 */
	.right-sidebar .title { 
		white-space: normal; 
		-webkit-line-clamp: 2; 
		line-clamp: 2;
		-webkit-box-orient: vertical; 
		display: -webkit-box; 
	}
}

@media(min-width:1200px) {
	.container {
		max-width: 1140px
	}
}

@media(min-width:1600px) {
	.container {
		max-width: 1380px
	}
}