
.secondBg {
	width: 100%;
	height: 100%;
}

.secondBg_all {
	object-fit: cover;
	object-position: center center;
}



.mdplayer {
	position: absolute;
    height: 70px;
	width: auto;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    margin: 0 auto;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    left: 50%;
    top: 50%;
	z-index: 400;
   
}

video#secondBg {
	background-color: #000;
}


.video-progress_wrap {
	width: var(--dx-sv-card-w);
	z-index: 400;
	position: fixed;
	bottom: 20px;
}

.video-progress_wrap .could-touch-area {
	max-width: 650px;
	width: 100%;
	z-index: 1001;
}

.video-progress_wrap ul {
	text-align: center;
	width: 80%;
	max-width: 650px;
	margin: 0 auto;
	margin-right: 40px;
	margin-top: 40px;
	margin-bottom: 1px;
	padding-inline-start: 0px;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer;
}

.video-progress_wrap ul li {
	background: none;
	border-radius: 0;
	opacity: 1;
	height: calc(1.1 * var(--vw));
	width: auto;
}

.video-progress_wrap ul li.swiper-pagination-bullet-active span {
	color: #ffffff;
	/* font-size: 1rem; */
}



@keyframes w-comp-loading-rotate {
	0% {
		transform: rotate(0deg)
	}

	50% {
		transform: rotate(180deg)
	}

	to {
		transform: rotate(1turn)
	}
}

.video-msg-container {
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5) 97.7%);
	bottom: 0;
	height: calc(3.54 * var(--vw));
	position: absolute;
	width: 100%
}



/*载入动画*/

.player-icon-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.loading-full {

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: calc(.35 * var(--vw));
	pointer-events: none;
	z-index: 99;
}

.circle-animeted {
	position: relative;
	width: 35px;
	height: 17.5px;
	transform: translateZ(0);
}

.circle-animeted:after,
.circle-animeted:before {
	position: absolute;
	content: "";
	top: 3px;
	background-color: #ff3e93;
	width: 14px;
	height: 14px;
	border-radius: 20px;
	mix-blend-mode: multiply;
	animation: circletok .8s linear infinite;
}

.circle-animeted:after {
	background-color: #4de8f4;
	animation-delay: .5s;
}

@keyframes circletok {

	0%,
	to {
		top: 3px;
		left: 0;
		width: 11.5px;
		height: 11.5px;
		z-index: 0
	}

	25% {
		top: 0;
		height: 15px;
		width: 15px;
		z-index: 1;
		left: 7.5px;
		transform: scale(1)
	}

	50% {
		top: 3px;
		width: 11.5px;
		height: 11.5px;
		left: 22px
	}

	75% {
		top: 4px;
		width: 10px;
		height: 10px;
		left: 8px;
		transform: scale(1)
	}
}

.loading-full .text {
	margin-top: 20px;
}

/*进度条*/
.videoPlayer {
	border: 1px solid #000;
	width: 100%;
}

#video {
	margin-top: 0px;
}

#videoControls {
	width: 100%;
	margin-top: 0px;
}

#progressWrap {
	background-color: hsla(0, 0%, 100%, .3);
	border-radius: 3px;
	height: 5px;
	cursor: pointer;
	margin-left: 10px;
    margin-right: 10px;
}

#playProgress {
	background-color: #ff8800;
	width: 0px;
	height: 5px;
	border-radius: 3px;
}

#showProgress {
	background-color: ;
	font-weight: 600;
	font-size: 20px;
	line-height: 25px;
}

div#videoControls {
	position: absolute;
	bottom: 50%;
	width: 100%;
	z-index: 401;
}

span#showProgress {
	display: none;
}
