@charset "utf-8";

body,
dd,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
ul {
	margin: 0;
	padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea {
	font-size: 12px;
	font-weight: 400
}

li {
	list-style: none
}

img {
	border: 0;
	vertical-align: top
}

em {
	font-style: normal
}

textarea {
	resize: none
}

a {
	outline: 0;
	text-decoration: none;
	color: #fff
}

a:hover {
	color: #ED831B/* #f53851 */
}

i {
	font-style: normal
}

.nav-sub * {
	box-sizing: border-box
}

.nav-sub {
	white-space: nowrap;
	display: flex;
	align-items: center
}

.nav-sub_menu {
	width: 60%;
	font-size: 0;
	display: inline-block;
	vertical-align: top
}

.nav-sub_anthor {
	width: 40%;
	overflow: hidden;
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 0 64px 0 20px
}

.nav-sub-inner {
	display: flex;
	overflow: visible;
	align-items: center;
	margin-bottom: 5px
}

.nav-sub .menu-item {
	display: inline-block;
	font-size: 0;
	margin: 0 3px;
	padding: 20px 0;
	cursor: pointer;
	position: relative
}

.nav-sub .menu-item:nth-child(5) .menu-name i {
	/* font-family: DIN-BlackItalic */
}

.nav-sub .menu-item:nth-child(5) .drawer-item {
	color: #ffc6ae
}

.nav-sub .menu-item:nth-child(6) .drawer-item:last-child {
	color: #f53851
}

.nav-sub .menu-item:first-child {
	margin-left: -15px
}

.nav-sub .menu-item .menu-name {
	display: block;
	color: #fff;
	/* font-family: PingFangSC-Semibold, "microsoft yahei"; */
	padding: 10px 20px;
	font-size: 22px
}

.nav-sub .menu-item .menu-name:hover {
	color: #f53851
}

.nav-sub .menu-item:first-child .drawer {
	left: 0;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0)
}

.nav-sub .menu-item:nth-child(2) .drawer {
	left: -100px;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0)
}

.nav-sub .menu-item_drawer:hover .drawer {
	display: block;
	animation: drawer .8s
}

.nav-sub .menu-item_drawer .menu-name:hover,
.nav-sub .menu-item_drawer:hover .menu-name {
	color: #f53851;
	border-radius: 31px;
	background: rgba(46, 46, 61, .84);
	-webkit-border-radius: 31px;
	-moz-border-radius: 31px;
	-ms-border-radius: 31px;
	-o-border-radius: 31px
}

.nav-sub .menu-item_drawer .menu-name:hover::before,
.nav-sub .menu-item_drawer:hover .menu-name::before {
	animation: arrow .8s;
	top: 7px;
	content: '';
	width: 0;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 0;
	border-top: 7px solid #2d2d3b;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent
}

.nav-sub .drawer {
	display: none;
	position: absolute;
	top: -31px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	background: #2d2d3b;
	height: 35px;
	line-height: 35px;
	border-radius: 35px;
	padding: 0 20px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%)
}

@keyframes drawer {
	0% {
		opacity: 0;
		top: 0
	}

	50% {
		opacity: .5;
		top: -40px
	}

	100% {
		opacity: 1;
		top: -31px
	}
}

@keyframes arrow {
	0% {
		top: 0;
		opacity: 0
	}

	50% {
		top: 0;
		opacity: 0
	}

	100% {
		top: 7px;
		opacity: 1
	}
}

.nav-sub .drawer-item {
	color: rgba(255, 255, 255, .85);
	position: relative
}

.nav-sub .menu-item:hover .drawer-item {
	animation: item 1s
}

.nav-sub .drawer-item i {
	display: inline-block;
	vertical-align: middle
}

.nav-sub .drawer-item .vip-ico {
	margin-right: 5px;
	width: 18px;
	height: 17px;
	background: url(../fonts/vip.svg) no-repeat
}

.nav-sub .drawer-item .plus-ico {
	margin-right: 5px;
	width: 14px;
	height: 14px;
	background: url(../fonts/plus.svg) no-repeat
}

.nav-sub .drawer-item:hover {
	color: #f53851
}

.nav-sub .drawer-item::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 14px;
	margin: 0 12px;
	opacity: .4;
	background-image: linear-gradient(203deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .57) 50%, rgba(255, 255, 255, 0) 96%)
}

.nav-sub .drawer-item:first-child::before {
	display: none
}

.nav-sub .anthor-arrow_right {
	color: rgba(255, 255, 255, .7);
	font-size: 16px;
	display: inline-block;
	width: 64px;
	line-height: 40px;
	text-align: center;
	height: 40px;
	background: #4c475e;
	border-radius: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	cursor: pointer;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px
}

.nav-sub .anthor-arrow_right:hover {
	color: #f53851
}

.nav-channel {
	display: flex
}

.nav-channel .menu-name {
	text-align: center;
	font-size: 18px;
	color: rgba(255, 255, 255, .85);
	height: 44px;
	min-width: 5.5%;
	display: inline-block;
	padding: 0 20px;
	line-height: 44px;
	border-radius: 22px;
	background: #2b2a38;
	margin: 0 10px 0 0
}

.nav-channel .menu-name:hover {
	background: #383743;
	color: var(--red)
}

.nav-channel-inner {
	margin-bottom: 40px
}

.hd-nav_secondary {
	margin-left: -10px;
	float: left
}

.hd-nav_secondary .secondary-item {
	color: #fff;
	line-height: 68px;
	margin: 0 15px 0 0;
	font-size: 16px
}

.hd-nav_secondary .secondary-item:hover {
	color: var(--red)
}

.hd-nav_secondary .on {
	color: var(--red)
}

.hd-nav_secondary .vip {
	color: rgba(216, 165, 143, .8)
}

.hd-nav_secondary .vip:hover {
	color: #d8a58f
}

.hd-nav_secondary .secondary-all {
	display: inline-block;
	position: relative;
	cursor: pointer
}

.hd-nav_secondary .all-icon {
	width: 12px;
	height: 12px;
	margin-left: 5px;
	transition: transform .2s ease
}

.hd-nav_secondary .hd-nav-channel-more_secondary {
	display: none;
	background: rgba(46, 46, 61, .84);
	position: absolute;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	top: 68px;
	width: 560px;
	left: 50%;
	transform: translate(-50%, 0)
}

.hd-nav_secondary .hd-nav-channel-more_secondary::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	line-height: 0;
	display: inline-block;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
	border-bottom: 9px solid rgba(46, 46, 61, .84);
	position: absolute;
	top: -9px;
	left: 50%;
	margin-left: -15px
}

.hd-nav_secondary .secondary-all:hover .hd-nav-channel-more_secondary {
	display: block
}

.hd-nav_secondary .secondary-all:hover .all-icon {
	transform: rotate(180deg)
}

.anthor-item {
	display: inline-block;
	padding: 15px 0;
	width: 33.33%
}

.anthor-item:hover .photo-live {
	color: #fff
}

.anthor-photo_inner {
	width: 70px;
	height: 70px;
	display: inline-block;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%
}

.anthor-photo {
	border-radius: 50%;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	width: 70px;
	height: 70px
}

.anthor-name {
	font-size: 22px;
	vertical-align: middle;
	max-width: 5em;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis
}

.anthor-photo .photo-live {
	color: #fff;
	display: none;
	width: 100%;
	font-size: 14px;
	text-align: center;
	height: 25px;
	line-height: 25px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(-60deg, #d63c86 0, #f53851 50%, #e5514d 100%);
	background-image: -webkit-linear-gradient(-60deg, #d63c86 0, #f53851 50%, #e5514d 100%);
	border-radius: 13px
}

.anthor-photo .photo-cover {
	border-radius: 50%;
	width: 66px;
	height: 66px
}

.anthor-photo .photo-cover {
	border-radius: 50%;
	width: 66px;
	height: 66px
}

.anthor-photo .photo-cover_wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	overflow: hidden;
	display: block;
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%)
}

.anthor-item_live .photo-live {
	display: block
}

.anthor-item_live .anthor-photo {
	animation: nav-light 1.5s ease-in-out infinite;
	-webkit-animation: nav-light 1.5s ease-in-out infinite
}

.anthor-item_live .anthor-photo_inner {
	animation: nav-light_inner 1.5s ease-in-out infinite;
	-webkit-animation: nav-light_inner 1.5s ease-in-out infinite
}

.anthor-item_live .photo-cover {
	animation: nav-scale 1.5s ease-in-out infinite;
	-webkit-animation: nav-scale 1.5s ease-in-out infinite
}

.ripple {
	background: -webkit-linear-gradient(left, #df9f8e, #ffd4bc 50.5%, #fff 93.75%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% 100%;
	animation: nav-masked-animation 1s infinite linear;
	-webkit-animation: nav-masked-animation 1s infinite linear
}

@keyframes nav-masked-animation {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -100%, 0
	}
}

@keyframes nav-scale {
	0% {
		transform: scale(1);
		opacity: .7;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1)
	}

	50% {
		transform: scale(1.08);
		opacity: 1;
		-webkit-transform: scale(1.08);
		-moz-transform: scale(1.08);
		-ms-transform: scale(1.08);
		-o-transform: scale(1.08)
	}

	100% {
		transform: scale(1);
		opacity: .7;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1)
	}
}

@keyframes nav-light {
	0% {
		box-shadow: 0 0 0 0 rgba(245, 56, 81, .8)
	}

	100% {
		box-shadow: 0 0 0 10px rgba(245, 56, 81, 0)
	}
}

@keyframes nav-light_inner {
	0% {
		box-shadow: 0 0 0 0 rgba(245, 56, 81, 0)
	}

	50% {
		box-shadow: 0 0 0 2px #f53851
	}

	100% {
		box-shadow: 0 0 0 0 rgba(245, 56, 81, 0)
	}
}

@media screen and (max-width:1998px) {
	.nav-sub_menu {
		width: 67%
	}

	.nav-sub_anthor {
		width: 33%;
		padding-left: 10px
	}

	.nav-sub .menu-item {
		margin: 0 5px
	}

	.nav-sub .menu-item:nth-last-child(2) {
		display: none
	}

	.nav-sub .anthor-item {
		width: 50%
	}

	.nav-sub .anthor-item:nth-child(3) {
		display: none
	}
}

@media screen and (max-width:1710px) {
	.nav-sub_menu {
		width: 62%
	}

	.nav-sub_anthor {
		width: 38%
	}

	.nav-sub .menu-item {
		margin: 0
	}

	.nav-sub .anthor-name,
	.nav-sub .menu-item .menu-name {
		font-size: 19px
	}

	.nav-sub .menu-item .menu-name {
		padding: 10px 14px
	}

	.hd-header .hd-search {
		right: 339px
	}
}

@media screen and (max-width:1420px) {
	.nav-sub-inner {
		min-width: 1048px
	}

	.nav-sub_menu {
		width: 73%
	}

	.nav-sub_anthor {
		width: 27%
	}

	.nav-sub .menu-item:first-child {
		margin-left: -12px
	}

	.nav-sub .menu-item {
		margin: 0 2px
	}

	.nav-sub .menu-item .menu-name {
		padding: 10px 12px
	}

	.nav-sub .anthor-item {
		width: 100%
	}

	.nav-sub .anthor-item:nth-child(2) {
		display: none
	}

	.nav-sub_anthor {
		padding-left: 17px
	}

	.hd-header-channel .hd-search {
		right: 290px;
		width: 240px
	}

	.hd-header-channel .hd-fBox {
		margin-right: 5px
	}

	.hd-header-channel .hd-nav_secondary {
		margin-left: -20px
	}
}

/* sohutv 2023-02-20 16:44:48 */