@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

:root {
	--black: #fff;
	--white: #000;
	--red: #D63738;
	--blue: #4285F4;
	--yellow: red;
	--grey: #9b8d8d;
	--black-2: #fff;
	--black-3: #f1f1f1;
	--black-4: #f1f1f1;
	--accent: #929292;
	--line: #f1f1f1;
	--color-primary: red;
	--font-primary: Orbitron;
	--font-secondary: Inter;
}

body {
	overflow-x: hidden;
	background-color: var(--black);
	font-family: Orbitron !important;
}

body::-webkit-scrollbar {
	width: 4px;
}

body::-webkit-scrollbar-track {
	background-color: #dde2e6;
}

body::-webkit-scrollbar-thumb {
	background: var(--grey);
	border-radius: 100px;
}

body::-webkit-scrollbar-thumb:hover {
	background: var(--grey);
}

a {
	text-decoration: none;
}

.decoration-blur-top-right {
	top: -93px;
	right: -103px;
	width: 293px;
	height: 293px;
	opacity: 0.4;
	position: absolute;
	filter: blur(128px);
	border-radius: 293px;
	background: var(--color-primary);
	z-index: -1;
}

.decoration-blur-bottom-left {
	left: -85px;
	bottom: -140px;
	width: 293px;
	height: 293px;
	opacity: 0.4;
	position: absolute;
	filter: blur(128px);
	border-radius: 293px;
	background: var(--color-primary);
	z-index: -1;
}


/* text utils */

.text-primary {
	background: var(--color-primary);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-title {
	color: var(--white);
	font-size: 36px;
	font-weight: 700;
	line-height: 48px;
	margin-bottom: 24px;
}

.section-description {
	max-width: 720px;
	line-height: 32px;
	color: var(--white);
	font-family: var(--font-secondary);
}

@media (max-width:991.98px) {
	.section-title {
		font-size: 28px;
	}

	.section-description {
		max-width: unset;
		line-height: 24px;
	}
}


/* .dropdown */

.dropdown-menu[data-bs-popper] {
	right: 0;
	left: unset;
	font-size: 14px;
	letter-spacing: 1px;
	background-color: var(--black);
}

.dropdown-menu .dropdown-item {
	color: var(--white);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	color: var(--yellow);
	background-color: var(--black);
}


/* button */

.btn-primary {
	border-radius: 0;
	font-weight: 700;
	line-height: 24px;
	padding: 16px 28px;
	color: var(--white);
	border-color: var(--yellow);
	background: var(--color-primary);
	gap: 6px;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
}

.btn-primary i {
	font-size: 24px;
}

.btn-primary:focus,
.btn-primary:hover {
	background: var(--black) !important;
	border-color: var(--yellow) !important;
	color: var(--white);
}

@media (max-width:991.98px) {
	.btn-primary {
		padding: 16px 16px;
	}
}

.btn-outline-primary {
	border-color: var(--yellow);
	border-radius: 0;
	font-weight: 700;
	line-height: 24px;
	padding: 16px 28px;
	color: var(--white);
	background: var(--black);
	gap: 6px;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
}

.btn-outline-primary i {
	font-size: 24px;
}

.btn-outline-primary:focus,
.btn-outline-primary:hover {
	background: var(--color-primary) !important;
	border-color: var(--yellow) !important;
}

@media (max-width:991.98px) {
	.btn-outline-primary {
		padding: 16px 16px;
	}
}

.btn-danger {
	border-radius: 0;
	font-weight: 700;
	line-height: 24px;
	padding: 16px 28px;
	color: var(--white);
	border-color: var(--red);
	background: var(--red);
	gap: 6px;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
}

.btn-danger i {
	font-size: 24px;
}

.btn-danger:focus,
.btn-danger:hover {
	color: var(--white) !important;
	background: var(--black) !important;
	border-color: var(--red) !important;
}

@media (max-width:991.98px) {
	.btn-danger {
		padding: 16px 16px;
	}
}

.btn-info {
	border-radius: 0;
	font-weight: 700;
	line-height: 24px;
	padding: 16px 28px;
	color: var(--white);
	border-color: var(--blue);
	background: var(--blue);
	gap: 6px;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
}

.btn-info i {
	font-size: 24px;
}

.btn-info:focus,
.btn-info:hover {
	color: var(--white) !important;
	background: var(--black) !important;
	border-color: var(--blue) !important;
}

@media (max-width:991.98px) {
	.btn-info {
		padding: 16px 16px;
	}
}


/* form */

.form-label {
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.form-control {
	display: flex;
	padding: 12px 16px;
	align-items: flex-start;
	align-self: stretch;
	border-radius: 0;
	border: 1px solid var(--white);
	background-color: var(--white);
	font-family: var(--font-secondary);
}

.form-control:focus,
.form-control:hover {
	box-shadow: none !important;
	border: 1px solid var(--white) !important;
}

.input-group .input-group-text {
	border-radius: 0;
	border: none;
	padding: 10px 16px;
	background-color: var(--white);
}

.input-group .input-group-text i {
	font-size: 24px;
}


/* custom-select */

.custom-select-icon {
	gap: 10px;
	display: flex;
	padding-left: 16px;
	align-items: center;
	background: var(--color-primary);
}

.custom-select-icon i {
	font-size: 24px;
}

.custom-select {
	border: 0;
	outline: 0;
	font-size: 16px;
	cursor: pointer;
	font-weight: 600;
	appearance: none;
	color: var(--white);
	padding: 17px 36px 17px 0;
	background: var(--color-primary);
}

.custom-select option {
	color: inherit;
	background-color: var(--black-4);
	font-family: var(--font-secondary);
}

.custom-select:focus {
	outline: none;
}

.custom-select::-ms-expand {
	display: none;
}

@media(max-width:991.98px) {
	.custom-select {
		padding-right: 16px;
	}
}


/* custom-date */

.custom-date {
	border: 0;
	outline: 0;
	font-size: 16px;
	font-weight: 600;
	padding: 17px 24px;
	color: var(--white);
	background: var(--color-primary);
}

.custom-date::-webkit-calendar-picker-indicator {
	width: 24px;
	height: 24px;
	position: absolute;
	left: 4.2%;
	filter: brightness(100);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.custom-date::-webkit-datetime-edit-fields-wrapper {
	position: relative;
	left: 10%;
}

.custom-date::-webkit-datetime-edit {
	position: relative;
	left: 10%;
}

@media(max-width:991.98px) {
	.custom-date::-webkit-calendar-picker-indicator {
		left: 10%;
	}
}


/* navbar */

.navbar {
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: transparent;
}

.navbar-toggler {
	background: var(--color-primary);
	border: none;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0);
}

.navbar-toggler-icon {
	background-image: url('../img/hamburger.svg');
}

.navbar-brand {
	width: 200px;
	font-size: 32px;
	font-weight: 900;
	color: var(--white);
}

.navbar-brand img {
	width: 100%;
}

.navbar-brand:hover {
	color: var(--white);
}

.navbar-nav {
	gap: 20px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
	color: var(--yellow);
}

.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
	color: var(--yellow);
}

.navbar-nav .nav-link {
	color: var(--white);
	font-weight: 700;
	line-height: 24px;
}

@media (max-width:991.98px) {
	.navbar-brand {
		font-size: 24px;
	}

	.navbar-collapse {
		margin-top: 24px;
	}
}


/* .main*/

.main {
	color: var(--white);
	padding-top: 128px;
	padding-bottom: 128px;
	position: relative;
	overflow-x: clip;
}


/* hero */

.hero {
	padding-top: 76px;
	padding-bottom: 76px;
}

.hero .decorative-1 {
	width: 100%;
	height: auto;
	max-width: 76px;
	margin-bottom: 40px;
}

.hero .decorative-2 {
	width: 100%;
	height: auto;
	max-width: 88px;
	margin-top: 128px;
}

.hero .title {
	font-size: 64px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 32px;
}

.hero .description {
	color: var(--white);
	font-family: var(--font-secondary);
	line-height: 32px;
	margin-bottom: 64px;
	max-width: 516px;
}

.hero .actions {
	gap: 16px;
	display: flex;
	align-items: center;
}

.hero .bg-blur {
	opacity: 0.4;
	filter: blur(128px);
	border-radius: 656px;
	background: var(--color-primary);
	top: 0;
	position: absolute;
	width: 656px;
	height: 656px;
}

.hero .illustration {
	z-index: 10;
	position: relative;
	width: 100%;
	height: auto;
	max-width: 600px;
}

@media (max-width: 991.98px) {
	.hero {
		overflow-x: clip;
	}

	.hero .decorative-1 {
		max-width: 54px;
		margin-bottom: 40px;
	}

	.hero .decorative-2 {
		max-width: 64px;
		margin-top: 128px;
	}

	.hero .title {
		font-size: 44px;
	}

	.hero .description {
		max-width: unset;
	}

	.hero .illustration {
		max-width: 400px;
	}

	.hero .bg-blur {
		max-width: 400px;
		max-height: 400px;
	}
}


/* countdown */

.countdown {
	padding-top: 48px;
	padding-bottom: 48px;
	color: var(--white);
	background: var(--color-primary);
}

.countdown .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.countdown .text .label {
	font-size: 48px;
	font-weight: 900;
}

.countdown .text .date {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.8px;
}

.countdown .time {
	display: flex;
	align-items: center;
	gap: 24px;
}

.countdown .time span {
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
}

.countdown .time .number {
	padding: 24px 16px;
	color: var(--white);
	background-color: var(--black);
}

@media(max-width:991.98px) {
	.countdown .text .label {
		font-size: 28px;
	}

	.countdown .text {
		margin-bottom: 16px;
	}

	.countdown .container {
		flex-wrap: wrap;
	}

	.countdown .time {
		gap: 16px;
	}

	.countdown .time span {
		font-size: 20px;
	}

	.countdown .time .number {
		padding: 16px;
	}
}


/* .lastest-win */

.lastest-win {
	overflow-x: clip;
	color: var(--white);
	padding-top: 98px;
	position: relative;
	padding-bottom: 98px;
}

.lastest-win .title {
	font-size: 64px;
	font-weight: 700;
	margin-bottom: 32px;
}

.lastest-win .description {
	font-family: var(--font-secondary);
	line-height: 32px;
	margin-bottom: 64px;
	max-width: 516px;
}

.lastest-win .periode {
	text-align: center;
	margin-bottom: 24px;
}

.list-winner {
	gap: 24px;
	display: flex;
	flex-direction: column;
	text-align: end;
}

.list-winner .item .label {
	margin-bottom: 24px;
}

.list-winner .item .balls {
	gap: 24px;
	display: flex;
	align-items: center;
	justify-content: end;
}

.list-winner .item .balls img {
	width: 100%;
	height: auto;
	max-width: 64px;
}

@media (max-width: 991.98px) {
	.lastest-win .title {
		font-size: 32px;
	}

	.lastest-win .description {
		max-width: unset;
	}

	.list-winner {
		text-align: center;
	}

	.lastest-win .periode {
		margin-top: 48px;
	}

	.list-winner .item .balls {
		gap: 16px;
		justify-content: center;
	}

	.list-winner .item .balls img {
		max-width: 48px;
	}
}


/* partner */

.partner {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--black);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.partner .container {
	gap: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.partner img {
	width: auto;
	height: 100%;
	max-height: 80px;
	object-fit: contain;
}

@media(max-width:991.98px) {
	.partner .container {
		gap: 24px;
		flex-wrap: wrap;
	}
}


/* footer */

footer {
	color: var(--white);
	text-align: center;
	background: var(--black);
}

footer .wrapper {
	gap: 40px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding-top: 48px;
	padding-bottom: 48px;
}

footer .wrapper .menu {
	gap: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

footer .wrapper .menu a {
	color: var(--white);
}

footer .wrapper .menu a:hover {
	color: var(--yellow);
}

footer .wrapper .brand {
	font-size: 32px;
	font-weight: 900;
	color: var(--white);
}

footer .copyright {
	font-size: 14px;
	font-weight: 400;
	line-height: 32px;
	padding-top: 20px;
	font-family: Inter;
	padding-bottom: 20px;
	font-family: var(--font-secondary);
}

@media (max-width:991.98px) {
	footer .wrapper {
		gap: 36px;
	}

	footer .wrapper .menu {
		gap: 16px;
	}

	footer .wrapper .brand {
		font-size: 24px;
	}
}


/* card */

.card {
	border-radius: 0;
	color: var(--white);
	background-color: var(--black-2);
}

.card .card-body {
	padding: 36px;
}

.card .card-body .card-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
}

.card .card-body .label {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
}

.card .card-body .label-lg {
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}

.card .card-body .text {
	gap: 10px;
	display: flex;
	line-height: 32px;
	margin-bottom: 28px;
	align-items: center;
	font-family: var(--font-secondary);
}

.card .card-body .text a {
	font-family: var(--font-primary);
	font-weight: 700;
	line-height: 24px;
}

@media (max-width:991.98px) {
	.card .card-body {
		padding: 24px;
	}

	.card .card-body .label-lg {
		font-size: 20px;
	}

	.card .card-body .text {
		line-height: 24px;
	}
}


/* .card-login */

.card-login .others {
	gap: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-login .others .btn {
	font-weight: 400;
	line-height: 32px;
	padding: 12px 21px;
	font-family: var(--font-secondary);
	gap: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-login .separator {
	gap: 8px;
	display: flex;
	font-size: 14px;
	text-align: center;
	color: var(--accent);
	align-items: center;
	justify-content: center;
}

.card-login .separator span {
	width: 100%;
	height: 1px;
	background-color: var(--accent);
}

@media (max-width:991.98px) {
	.card-login .others {
		flex-wrap: wrap;
	}
}


/* card-youtube */

.card-youtube .card-body {
	padding: 16px;
}

.card-youtube .card-body iframe {
	width: 100%;
	aspect-ratio: 16/9;
}

@media(max-width:991.98px) {
	.card-youtube .card-body iframe {
		min-height: 210px;
		max-height: 210px;
	}
}


/* card-next-draw */

.card-next-draw .card-body {
	gap: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-next-draw .card-body .date {
	font-weight: 700;
	line-height: 24px;
}

@media(max-width:991.98px) {
	.card-next-draw .card-body {
		flex-wrap: wrap;
	}
}


/* .card-countdown */

.card-countdown {
	text-align: center;
}

.card-countdown .time {
	gap: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-countdown .time span {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
}

.card-countdown .time .number {
	width: 64px;
	height: 64px;
	color: var(--white);
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-countdown .live {
	width: 100%;
	padding: 20px 14px;
	background-color: var(--red);
	color: var(--white);
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
	text-transform: uppercase;
}

@media(max-width:991.98px) {
	.card-countdown .time {
		gap: 16px;
	}

	.card-countdown .time span {
		font-size: 18px;
	}

	.card-countdown .time .number {
		width: 54px;
		height: 54px;
	}
}


/* .card-countdown */

.card-winner {
	text-align: center;
}

.card-winner .list-winner {
	gap: 32px;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.card-winner .list-winner .item .label {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.card-winner .list-winner .item .balls {
	gap: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-winner .list-winner .item .balls img {
	width: 100%;
	height: auto;
	max-width: 54px;
}

@media(max-width:991.98px) {
	.card-winner .list-winner .item .label {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.card-winner .list-winner .item .balls {
		gap: 16px;
	}

	.card-winner .list-winner .item .balls img {
		max-width: 48px;
	}
}


/* card-simulation */

.card-simulation .action {
	gap: 16px;
	display: flex;
	align-items: center;
	margin-bottom: 24px;
	justify-content: space-between;
}

.card-simulation .action .text {
	width: 100%;
}

.card-simulation .action .quantity {
	gap: 16px;
	display: flex;
	align-items: center;
	justify-content: end;
}

.card-simulation .action .quantity .btn {
	padding: 10px 10px;
}

.card-simulation .action .quantity .form-control {
	width: 36%;
	padding: 10px 16px;
}

@media(max-width:991.98px) {
	.card-simulation .action {
		margin-bottom: 16px;
	}

	.card-simulation .action .quantity {
		gap: 12px;
	}

	.card-simulation .action .quantity .btn {
		padding: 8px 8px;
	}

	.card-simulation .action .quantity .form-control {
		width: 30%;
		padding: 8px 16px;
	}
}


/* .card-ball */

.card-ball img {
	width: 100%;
	height: auto;
	max-width: 76px;
}

.card-filter .card-body {
	gap: 24px;
	display: flex;
	align-items: center;
	justify-content: start;
}

.card-filter .card-body .separator {
	width: 1px;
	height: 48px;
	background-color: var(--accent);
}

@media (max-width:991px) {
	.card-filter .card-body {
		flex-wrap: wrap;
	}

	.card-filter .card-body .separator {
		display: none;
	}

	.card-filter .card-body .btn-group {
		width: 100%;
	}

	.card-filter .card-body .btn-group .btn {
		width: 100%;
	}
}


/* results */

.results {
	gap: 24px;
	display: flex;
	flex-direction: column;
}

.results .result-item {
	gap: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width:991.98px) {
	.results {
		gap: 36px;
	}

	.results .result-item {
		gap: 16px;
		flex-wrap: wrap;
	}
}


/* socials */

.socials {
	gap: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
}

.socials a img {
	width: 100%;
}

.socials a {
	color: var(--white);
}

.socials a:hover {
	color: var(--yellow);
}

.socials a i {
	font-size: 24px;
}


/* accordion */

.accordion {
	gap: 24px;
	display: flex;
	margin-bottom: 36px;
	flex-direction: column;
}

.accordion .accordion-item {
	border: none;
	color: var(--white);
	background-color: var(--black-4);
}

.accordion .accordion-item:first-of-type {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion .accordion-item:last-of-type {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.accordion .accordion-item .accordion-header .accordion-button {
	gap: 16px;
	padding: 24px;
	border-radius: 0;
	font-weight: 700;
	box-shadow: none;
	line-height: 24px;
	color: var(--white);
	background-color: var(--black-3);
}

.accordion .accordion-item .accordion-header .accordion-button::after {
	filter: brightness(100);
}

.accordion .accordion-item .accordion-body {
	padding: 24px;
}

.accordion .accordion-item .accordion-body .winner-lists {
	gap: 24px;
	display: flex;
	flex-direction: column;
}

.accordion .accordion-item .accordion-body .winner-lists .winner-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.accordion .accordion-item .accordion-body .winner-lists .winner-item .label {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

.accordion .accordion-item .accordion-body .winner-lists .winner-item .balls {
	gap: 24px;
	display: flex;
	align-items: center;
}

.accordion .accordion-item .accordion-body .winner-lists .winner-item .balls img {
	width: 100%;
	height: auto;
	max-width: 54px;
}

@media (max-width:991.98px) {
	.accordion {
		gap: 16px;
	}

	.accordion .accordion-item .accordion-header .accordion-button {
		padding: 16px;
		font-size: 14px;
	}

	.accordion .accordion-item .accordion-body {
		padding: 16px;
	}

	.accordion .accordion-item .accordion-body .winner-lists .winner-item .label {
		font-size: 16px;
		margin-bottom: 16px;
	}

	.accordion .accordion-item .accordion-body .winner-lists .winner-item {
		flex-wrap: wrap;
	}

	.accordion .accordion-item .accordion-body .winner-lists .winner-item .balls {
		gap: 12px;
	}

	.accordion .accordion-item .accordion-body .winner-lists .winner-item .balls img {
		max-width: 40px;
	}
}


/* pagination */

.pagination {
	gap: 10px;
	justify-content: center;
	margin-bottom: 0;
}

.pagination .page-link {
	width: 40px;
	height: 40px;
	text-align: center;
	color: var(--white);
	border: 1px solid var(--white);
	background-color: transparent;
}

.pagination .page-link.active {
	color: var(--white);
	border: 1px solid var(--yellow);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
	box-shadow: none;
}

.pagination .page-item:first-child .page-link {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border: 1px solid var(--black);
}

.pagination .page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.card-box {
	img {
		width: 100%;
		aspect-ratio: 16/9;
	}
}

.ballExample {
	display: flex;
	gap: 20px
}

.ballExample dd {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at top left, #fff, yellow 50%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	box-shadow: -1em -1rem 1rem #0009 inset, .5rem .5rem 1rem #000;
	order: 1;
	animation: rotate 2.5s linear;
	animation-iteration-count: 1;
	/* 动画只播放一次 */
	animation-fill-mode: forwards;
	/* 动画结束后保持最后的状态 */
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	30% {
		transform: rotate(90deg);
	}

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

	50% {
		transform: rotate(60deg);
	}

	60% {
		transform: rotate(-60deg);
	}

	70% {
		transform: rotate(30deg);
	}

	80% {
		transform: rotate(-30deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.ballExample dd:before,
.ballExample dd:after {
	content: '';
	display: inline-block;
	width: 58px;
	height: 58px;
	background: transparent;
}

.ballExample .d2 {
	background: radial-gradient(circle at top left, #fff, blue 50%);
}

.ballExample .d3 {
	background: radial-gradient(circle at top left, #fff, red 50%);
}

.ballExample .d4 {
	background: radial-gradient(circle at top left, #fff, purple 50%);
}

.ballExample .d5 {
	background: radial-gradient(circle at top left, #fff, orange 50%);
}

.ballExample .d6 {
	background: radial-gradient(circle at top left, #fff, green 50%);
}

.ballExample .d7 {
	background: radial-gradient(circle at top left, #fff, brown 50%);
}

.ballExample .d8 {
	background: radial-gradient(circle at top left, #fff, black 50%);
}

.ballExample .d9 {
	background: radial-gradient(circle at top left, #fff, yellow 50%);
}

.ballExample .d0 {
	background: radial-gradient(circle at top left, #fff, red 50%);
}

.ballExample .d-- {
	background: radial-gradient(circle at top left, #fff, red 50%);
}

.ballExample .d9:before,
.ballExample .d9:after,
.ballExample .d0:before,
.ballExample .d0:after {
	background: #fff;
}

.ballExample dd i {
	font-style: normal;
	font-weight: 900;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	width: 30px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	color: #000;
}

#user-audio {
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 999;
	right: 20px;
	bottom: 20px;
}

.live {
	aspect-ratio: 16/9;
	width: 1000px;
	position: fixed;
	left: calc(50% - 500px);
	color: #321900;
}

.live img {
	width: 100%;
	aspect-ratio: 16/9;
	display: block;
}

.live-box {
	aspect-ratio: 16/9;
	position: absolute;
	top: 0;
	width: 100%;
	font-weight: 900;
}

.live-box .date {
	left: 65px;
	top: 15px;
	position: relative;
	font-size: 20px;

}

.live-box-item1 {
	position: relative;
	left: 210px;
	font-size: 70px;
	top: 60px;
	color: #A4262A;
	-webkit-text-stroke: 3px #fbce25;
}

.live-box-item2 {
	position: relative;
	left: 210px;
	font-size: 70px;
	top: 80px;
	color: #A4262A;
	-webkit-text-stroke: 3px #fbce25;
}

.live-box-item3 {
	position: relative;
	left: 210px;
	font-size: 70px;
	top: 98px;
	color: #A4262A;
	-webkit-text-stroke: 3px #fbce25;
}

.live-box-bottom {
	position: absolute;
	bottom: 0;
	line-height: 35px;
	text-align: center;
	color: #fff;
	background-color: #321900;
	width: 100%;
	height: 35px;
}

@media (max-width: 767.98px) {
	.live-box-bottom {
		font-size: 8px;
		height: 20px;
		line-height: 20px;
	}

	.live {
		width: 100% !important;
		left: 0;
	}

	.live-box .date {
		font-size: 12px;
		top: 3px;
		left: 30px;
	}

	.live-box-item1 {
		left: 90px;
		font-size: 30px;
		top: 12px;
		color: #A4262A;
		-webkit-text-stroke: 1px #fbce25;
	}

	.live-box-item2 {
		left: 90px;
		font-size: 30px;
		top: 12px;
		color: #A4262A;
		-webkit-text-stroke: 1px #fbce25;
	}

	.live-box-item3 {
		left: 90px;
		font-size: 30px;
		top: 12px;
		color: #A4262A;
		-webkit-text-stroke: 1px #fbce25;
	}

	#user-audio {
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 999;
		left: 88% !important;
		top: 80%;
	}

	.quanping #user-audio {
		top: 32vh !important;
	}

	.quanping #remote-playerlist {
		width: 98% !important;
	}
}

.quan {
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	display: none;
	margin-top: 20px;
}

.quan:hover {
	color: red;
}

.quanping {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: #fff;
}

.quanping #remote-playerlist {
	width: 70%;
	margin: 0 auto;
	margin-top: 10vh;
}

.quanping #user-audio {
	right: 15%;
	bottom: 13vh;
}

.brand {
	width: 200px;
}

.brand img {
	width: 100%;
}