* {
	margin: 0;
	padding: 0;
}

html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #171723;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
	width: 100%;
	/**max-width: 520px;**/
	margin: 0 auto;
}

.container{
	height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.6rem);
}
.swiper-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
}

.secondBg {
	width: 100%;
	height: 100%;
}

.secondBg_all {
	object-fit: cover;
	object-position: center center;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}




.mdplayer {
	position: absolute;
    height: 70px;
    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 {
	max-width: 520px;
	width: 100%;
	z-index: 400;
	position: fixed;
	bottom: calc(1.2 * var(--vw));
}

.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; */
}




* {
	box-sizing: border-box
}

html {
	font-family: PingFang SC, system ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, STHeiTi, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	text-rendering: optimizeLegibility
}



.multi-line {
	display: flex;
	position: relative;
	width: 100%
}

.multi-line_text {
	color:#fff;
	font-size:calc(.3 * var(--vw));
	line-height: calc(.4 * var(--vw));
	overflow: visible;
	white-space: pre-wrap
}






.footer {
	bottom: calc(1.8 * var(--vw));
	visibility: visible;
	color: #fff;
	padding: calc(.24 * var(--vw));
	position: absolute;
	width: 100%;
	z-index: 99;

}

.footer .footer-info-con {
	width: calc(5.48 * var(--vw));
}

.footer .footer-info-con__bottom {
	margin-bottom: calc(.24 * var(--vw));
}

.footer .author-container {
	align-items: center;
	display: flex;
	height: calc(.52 * var(--vw));
	margin-bottom: calc(.06 * var(--vw));
}

.footer .author-container .author-name {
	flex: 0 0 content;
	font-size: calc(.36 * var(--vw));
	font-weight: 500;
	line-height: calc(.5 * var(--vw));
}

.footer .author-container .pic-tag {
	flex: 0 0 51px;
	height: calc(.4 * var(--vw));
	margin-left: calc(.12 * var(--vw));
	width: calc(1.02 * var(--vw));
}


.footer .desc {
	font-size: calc(.3 * var(--vw));
	line-height: calc(.42 * var(--vw));
	margin-bottom: calc(.12 * var(--vw));
}

.right-con {
	align-items: center;
	bottom:calc(1.72 * var(--vw));
	color: #fff;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 8px;
	text-align: center;
	z-index: 99;
}

.right-con .avatar-container {
	height: calc(.96 * var(--vw));
	margin-bottom: calc(.56 * var(--vw));
	position: relative;
	width: calc(.96 * var(--vw));
}

.right-con .avatar-container .avatar_thumb {
	border: 1px solid #fff;
	border-radius: 50%;
	height: calc(.96 * var(--vw));
	width: calc(.96 * var(--vw));
}

.right-con .avatar-container .follow {
	bottom: -12px;
	height: calc(.48 * var(--vw));
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: calc(.48 * var(--vw));
}

.right-con .collect,
.right-con .comments,
.right-con .d-icon,
.right-con .like,
.right-con .share {
	height: calc(.8 * var(--vw));
	width: calc(.8 * var(--vw));
}

.right-con .share {
	display: flex;
	justify-content: center
}

.right-con .extra,
.right-con .share-icon {
	height: calc(.8 * var(--vw));
	width: calc(.8 * var(--vw));
}

.right-con .extra {
	display: flex;
	justify-content: center
}

.right-con .extra-icon {
	height: calc(.2 * var(--vw));
	margin-top: calc(.16 * var(--vw));
	width: calc(.6 * var(--vw));
}

.right-con .right-text {
	font-size: calc(.26 * var(--vw));
	font-weight: 500;
	line-height: calc(.36 * var(--vw));
	margin-bottom: calc(.32 * var(--vw));
	text-shadow: 0 1px 1px rgba(22, 24, 35, .2)
}

.hide {
	display: none
}

@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;
}

.show {
	opacity: 1;
}

.hide {
	opacity: 0;
}

#progressWrap {
	background-color: hsla(0, 0%, 100%, .3);
	border-radius: calc(1.05 * var(--vw));
	height: 5px;
	cursor: pointer;
}

#playProgress {
	background-color: rgb(247, 180, 63);
	width: 0px;
	height: 5px;
	border-radius: calc(1.05 * var(--vw));
}

#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;
}

/*评论*/

.FromBottomDialog {
	z-index: 9;
	position: fixed;
	width: 100%;
	padding-top: calc(24 * var(--vw));
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: calc(.3 * var(--vw)) calc(.3 * var(--vw)) 0 0;
	transform: translateZ(0);
	overflow: hidden;
	display: flex;
	height: var(--4192a9af);
	max-height: var(--4192a9af);
	flex-direction: column;
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-ms-transform: translateY(100%);

}

.FromBottomDialog.show {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-ms-transform: translateY(0);
}

.FromBottomDialog.white {
	background: #fff;
}

.FromBottomDialog.no-heng-gang {
	padding-top: 0;
}

.title {
	box-sizing: border-box;
	width: 100%;
	height: calc(.8 * var(--vw));
	padding: 0 calc(.3 * var(--vw));
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: calc(.2 * var(--vw)) calc(.2 * var(--vw)) 0 0;
}
.title .close{
	opacity: 0;
    transform: rotate(180deg) scale(1);
    width: calc(.4 * var(--vw));
}
.title .num {
	width: 100%;
	position: relative;
	font-size: calc(.36 * var(--vw));
	font-weight: 700;
	text-align: center;
}

.title .right {
	display: flex;
	gap: calc(.24 * var(--vw));
	position: relative;
	z-index: 9;
}

.title .right svg {
	color: #000;
	background: #f2f2f2;
	padding: calc(.08 * var(--vw));
	font-size: calc(.48 * var(--vw));
	border-radius: 50%;
}

.FromBottomDialog .wrapper {
	flex: 1;
	overflow: auto;
}

.comment {
	color: #000;
	width: 100%;
	background: #fff;
	height: 100%;
	overflow-x: hidden;
	z-index: 5;
}

.comment::-webkit-scrollbar {
	display: none;
}

.comment .wrapper {
	width: 100%;
	position: relative;
	padding-bottom: calc(1.2 * var(--vw));
}

.comment .items {
	width: 100%;
}

.comment .items .item {
	width: 100%;
	margin-bottom: calc(.3 * var(--vw));
}

.comment .items .item .main {
	width: 100%;
	padding: calc(.1 * var(--vw)) 0;
	display: flex;
}

.comment .items .item .content {
	width: 100%;
	display: flex;
	font-size: calc(.28 * var(--vw));
}

.comment .items .item .main .head-image {
	margin-left: calc(.3 * var(--vw));
	margin-right: calc(.2 * var(--vw));
	width: calc(.74 * var(--vw));
	height: calc(.74 * var(--vw));
	border-radius: 50%;
}

.comment .items .item .content .comment-container {
	flex: 1;
	margin-right: calc(.4 * var(--vw));
}

.comment .items .item .content .comment-container .name {
	color: #bababb;
	margin-bottom: calc(.1 * var(--vw));
	display: flex;
	align-items: center;
}

.comment .items .item .content .comment-container .detail {
	margin-bottom: calc(.1 * var(--vw));
}

.comment .items .item .content .comment-container .time-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: calc(.26 * var(--vw))
}

.comment .items .item .content .comment-container .time-wrapper .left {
	display: flex;
}
.comment .items .item .content .comment-container .time-wrapper .right {
	gap: calc(.2 * var(--vw));
	display: flex !important;
}
.comment .items .item .content .comment-container .time-wrapper .left .time {
	color: #c4c3c3;
	margin-right: calc(.2 * var(--vw))
}


.comment .items .item .content .comment-container .time-wrapper .love {
	color: gray;
	display: flex;
	align-items: center;
}

.comment .items .item .content .comment-container .time-wrapper .love.loved {
	color: #e73a57;
}

.comment .items .item .content .comment-container .time-wrapper .love .love-image {
	font-size: calc(.34 * var(--vw));
	margin-right: calc(.08 * var(--vw))
}

.comment .items .item .content .comment-container .time-wrapper .love span {
	word-break: keep-all;
}

.NoMore {
	font-size: calc(.26 * var(--vw));
	height: calc(1.2 * var(--vw));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bababb
}

.comment .input-toolbar {
	border-radius: calc(.2 * var(--vw)) calc(.2 * var(--vw)) 0 0;
	background: #fff;
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 3;
}

.comment .input-toolbar .toolbar {
	display: flex;
	align-items: center;
	padding: calc(.2 * var(--vw)) calc(.3 * var(--vw));
	border-top: 1px solid #e2e1e1;
}

.comment .input-toolbar .toolbar .input-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: calc(.2 * var(--vw)) calc(.2 * var(--vw));
	background: #eee;
	border-radius: calc(.4 * var(--vw));
	width: 100%;
}

.comment .input-toolbar .toolbar .input-wrapper .right {
	display: flex;
	align-items: center;
}

.comment .input-toolbar .toolbar img {
	width: calc(.5 * var(--vw));
	height: calc(.5 * var(--vw));
	border-radius: 50%;
	margin-left: calc(.3 * var(--vw));
}

.auto-input {
	font-size: calc(.28 * var(--vw));
	width: 100%;
	max-height: calc(1.4 * var(--vw));
	overflow-y: hidden;
	padding: 0 calc(.1 * var(--vw));
	outline: none;
}

.auto-input:empty:before {
	content: attr(placeholder);
	color: #999;
}


.swiper {
	--swiper-theme-color: #ff6600;
	--swiper-pagination-color: #00ff33;
	/* 两种都可以 */
}


.swiper-slide-duplicate-prev {
	display: none;
}