.videoOsdHeader {
	will-change: opacity;
	-webkit-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out
}

.videoOsdHeader-hidden {
	opacity: 0
}

.videoOsdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
	display: none
}

.chapterThumbContainer {
	-webkit-box-shadow: 0 0 1em #000;
	box-shadow: 0 0 1em #000;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	position: relative;
	background-color: #000
}

.chapterThumbImageContainer {
	background-position: center center;
	-webkit-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	width: 16vw;
	height: 9vw
}

.chapterThumbImageContainer-fourthree {
	width: 12vw;
	height: 9vw
}

.chapterThumbTextContainer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center
}

.chapterThumbTextContainerInner {
	background: rgba(0,0,0,.8)
}

.chapterThumbText {
	padding: .3em .7em;
	margin: 0;
	opacity: 1;
	font-weight: 500
}

.chapterThumbText-dim {
	opacity: .6
}

@media all and (max-width:50em) {
	.chapterThumbImageContainer {
		width: 24vw;
		height: 13.5vw
	}
}

@media all and (max-width:42em) {
	.chapterThumbImageContainer {
		width: 32vw;
		height: 18vw
	}
}

@media all and (max-width:34em) {
	.chapterThumbImageContainer {
		width: 40vw;
		height: 22.5vw
	}
}

.videoOsdBottom {
	position: fixed;
	left: 0;
	bottom: 0;
	bottom: var(--window-inset-bottom);
	right: 0;
	padding: 1.25em 0 0 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end
}

.videoOsdBottom-video {
	will-change: opacity;
	-webkit-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
	background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
	background: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
	color: #fff
}

.videoOsdBottomInner {
	padding: 0 1.75%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex
}

.videoOsdBottom-remotecontrol {
	top: 5.3em;
	padding-top: 0
}

.videoOsd-customFont {
	font-size: 1.1em
}

.videoOsd-customFont .pageTitleWithLogo {
	width: 9em
}

.osdPoster-img {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: contain;
	background-size: contain;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	margin: 0
}

.videoOsdText {
	margin-bottom: .5em
}

@media all and (orientation:portrait) {
	.osdPoster-img {
		margin: 1em 0 0
	}

	.videoOsd-customFont:not(.skinHeader) {
		font-size: 1.2em
	}

	.videoOsdBottomInner {
		padding: 0 3.3%
	}
}

/*@media all and (min-width:42em) {*/ /*使播放器按钮变小*/
	.videoOsdBottom-remotecontrol {
		top: 5.8em
	}

	.videoOsd-customFont {
		font-size: 1.2em
	}
}

@media all and (min-width:50em) {
	.videoOsdBottom-remotecontrol {
		top: 7.2em
	}

	.videoOsd-customFont {
		font-size: 1.5em
	}
}

@media all and (min-width:120em) {
	.videoOsdBottom-remotecontrol {
		top: 9.75em
	}
}

.videoOsdSecondaryText {
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline
}

.videoOsdSecondaryText-video {
	color: rgba(255,255,255,.8)
}

.videoOsdSecondaryText-remotecontrol {
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center
}

.osdTextActionButton {
	color: inherit!important;
	font-weight: inherit!important
}

.videoOsdText-customFont {
	font-size: .835em
}

.videoOsdParentTitle,.videoOsdTitle {
	font-weight: 600
}

@media (min-width:50em) and (min-height:40em) {
	.videoOsdText-customFont {
		font-size: 0.8em
	}

	.videoOsdParentTitle,.videoOsdTitle {
		font-weight: 500
	}
}

.videoOsdBottom-playlistexpanded .videoOsd-customFont {
	font-size: 1em
}

.videoOsdBottom-playlistexpanded .videoOsdText {
	font-size: .9em;
	margin: .5em 0
}

.videoOsdBottom-playlistexpanded .osdPoster-img {
	display: none!important;
	-webkit-box-flex: initial;
	-webkit-flex-grow: initial;
	flex-grow: initial
}

.videoOsdBottom-hidden {
	opacity: 0
}

.videoOsdBottom-buttons {
	padding: .5em 0 1.5%;
	margin: 0 -.5em
}

.videoOsdText-remotecontrol {
	text-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin: 1em 0
}

@media all and (orientation:portrait) {
	.videoOsdBottom-buttons-remotecontrol {
		margin: 1em 0;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 0 0 1.5%
	}
}

.videoOsdVolumeSliderWrapper {
	position: absolute;
	left: -4em;
	top: -3.5em;
	display: none;
	width: 8.5em;
	padding: 1.5em 1.5em 0 1.5em;
	z-index: 99999999
}

.videoOsdVolumeSliderWrapper2 {
	background: #262626;
	padding: .4em .8em;
	-webkit-border-radius: .3em;
	border-radius: .3em
}

.videoOsdVolumeControls:hover>.videoOsdVolumeSliderWrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex
}

.volumeButtons {
	margin: 0 .5em 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center
}

.videoOsdParentTitle {
	margin: 0
}

.videoOsdTitle {
	margin: 0 1em 0 0
}

.osdTitle-remotecontrol {
	margin: 0
}

.videoOsdMediaInfo {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin: 0 1em 0 0
}

@media all and (max-height:40em) and (orientation:landscape) {
	.videoOsdHeader .pageTitle {
		width: 6em
	}
}

.videoOsd-endsAtText {
	margin-left: 1em;
	color: rgba(255,255,255,.7);
	font-size: 92%
}

@media all and (max-width:75em) {
	.videoOsd-endsAtText {
		display: none!important
	}
}

.btnVideoOsd-stop-bottom {
	display: none
}

@media (pointer:coarse) and (min-height:20em) {
	.videoOsd-centerButtons-autolayout {
		position: fixed;
		left: 0;
		right: 0;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-align-self: center;
		align-self: center;
		top: 50%;
		margin-top: -2em;
		font-size: 170%
	}

	.videoOsd-btnPause-autolayout {
		margin-left: 13%;
		margin-right: 13%
	}

	.btnVideoOsd-stop-center-autolayout {
		display: none!important
	}

	.btnVideoOsd-stop-bottom-autolayout {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex
	}
}

.videoOsd-forwardIcon-flipped {
	-webkit-transform: scale(-1,1);
	transform: scale(-1,1)
}

.btnOsdFastForwardIcon,.btnOsdRewindIcon {
	will-change: animate
}

.ff-animate {
	-webkit-animation: ff-animation .5s ease-in-out normal;
	animation: ff-animation .5s ease-in-out normal;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1
}

.ff-animate.videoOsd-forwardIcon-flipped {
	-webkit-animation: ff-flipped-animation .5s ease-in-out normal;
	animation: ff-flipped-animation .5s ease-in-out normal;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1
}

@-webkit-keyframes ff-animation {
	0% {
		-webkit-transform: none;
		transform: none
	}

	50% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes ff-animation {
	0% {
		-webkit-transform: none;
		transform: none
	}

	50% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes ff-flipped-animation {
	0% {
		-webkit-transform: scale(-1,1);
		transform: scale(-1,1)
	}

	50% {
		-webkit-transform: scale(-1,1) rotate(-90deg);
		transform: scale(-1,1) rotate(-90deg)
	}

	100% {
		-webkit-transform: scale(-1,1);
		transform: scale(-1,1)
	}
}

@keyframes ff-flipped-animation {
	0% {
		-webkit-transform: scale(-1,1);
		transform: scale(-1,1)
	}

	50% {
		-webkit-transform: scale(-1,1) rotate(-90deg);
		transform: scale(-1,1) rotate(-90deg)
	}

	100% {
		-webkit-transform: scale(-1,1);
		transform: scale(-1,1)
	}
}

.rew-animate {
	-webkit-animation: rew-animation .5s ease-in-out normal;
	animation: rew-animation .5s ease-in-out normal;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1
}

@-webkit-keyframes rew-animation {
	0% {
		-webkit-transform: none;
		transform: none
	}

	50% {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes rew-animation {
	0% {
		-webkit-transform: none;
		transform: none
	}

	50% {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}
