:root {
	--color-grey-100: #FFFFFF;
	--color-grey-078: rgba(255, 255, 255, 0.78);
	--color-grey-060: rgba(255, 255, 255, 0.60);
	--color-grey-045: rgba(255, 255, 255, 0.45);
	--color-bg-grey: #1D1D20;
	--color-bg-primary: #000000;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	width: 100%;
	min-width: 1280px;
}

body {
	margin: 0;
	padding: 0;
	background: var(--color-bg-primary);
	box-sizing: border-box;
	width: 100%;
}

a {
	text-decoration: none;
	color: unset;
}

a:active {
	opacity: 0.74;
}

.marquee-bar {
	width: 100%;
	height: 42px;
	background: no-repeat url(../assets/black_bg.png) center center;
	background-size: 100% auto;
}

section {
	h1 {
		font-weight: 600;
		font-size: 24px;
		color: var(--color-grey-100);
		line-height: 33px;
		text-align: center;
	}

	h2 {
		font-weight: 600;
		font-size: 20px;
		color: var(--color-grey-100);
		line-height: 28px;
		text-align: center;
		opacity: 0.95;
	}

	h3 {
		font-weight: 400;
		font-size: 16px;
		color: var(--color-grey-100);
		line-height: 22px;
		text-align: center;
		opacity: 0.78;
	}
}

.section-footer {
	p {
		margin: auto;
		max-width: 1280px;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		text-align: center;
	}
}

.color-grey-100 {
	color: var(--color-grey-100)
}

.color-grey-060 {
	color: var(--color-grey-060)
}

.color-grey-078 {
	color: var(--color-grey-078)
}

.color-grey-045 {
	color: var(--color-grey-045)
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.text-left {
	text-align: left;
}

.bg-grey {
	background-color: var(--color-bg-grey);
}

.logo {
	width: 250px;
	height: 50px;
	background: url(../assets/di_logo.png);
}

.popover {
	position: relative;
	height: 40px;
	z-index: 999;

	.popover__body {
		display: none;
		position: absolute;
		text-align: center;
		left: -50%;
		margin-left: -6px;
		border-radius: 16px;

		.popover__indicator {
			width: 0;
			margin: auto;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-bottom: 12px solid rgba(255, 255, 255, 0.1);
		}

		.popover__menu {
			display: flex;
			flex-direction: column;
			word-break: break-all;
			text-wrap: nowrap;
			text-align: left;
			background-color: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
			overflow: hidden;

			a {
				display: block;
				line-height: 200%;
				padding: 8px 24px;

				&:hover {
					background-color: #737273;
				}
			}
		}
	}

	&:hover {
		.popover__body {
			display: block;
		}
	}
}

.devider-row {
	width: 100%;
	height: 1px;
	margin: auto;
	max-width: 1501px;
	background: #3C3C3C;
}

.banner {
	width: 100%;
	height: 564px;
	margin: auto;
	background-repeat: no-repeat;
	background-size: cover;

	nav {
		max-width: 1280px;
		margin: auto;
		padding: 35px 0;
		height: 50px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.menu {
			color: var(--color-grey-100);
			font-weight: 500;
			font-size: 16px;
			line-height: 24px;
			list-style: none;
			display: flex;
			gap: 74px;

			a,
			.popover {
				text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.65);
				position: relative;
				cursor: pointer;

				&.selected::after {
					content: ' ';
					display: block;
					width: 30px;
					height: 6px;
					background: var(--color-grey-100);
					border-radius: 3px;
					left: 50%;
					margin-left: -15px;
					margin-top: 11px;
					position: absolute;
				}
			}

			.popover:hover {
				&.selected::after {
					display: none;
				}
			}
		}
	}

	.hero {
		color: var(--color-grey-100);
		margin-left: 320px;
		margin-top: 100px;

		h1 {
			font-weight: 600;
			font-size: 30px;
			line-height: 42px;
		}

		h2 {
			font-weight: 400;
			font-size: 22px;
			line-height: 22px;
			opacity: 0.78;
		}

		h3 {
			font-weight: 400;
			font-size: 16px;
			line-height: 16px;
			opacity: 0.78;
		}

		a {
			display: block;
			text-align: center;
			width: 182px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(133deg, #1C71F1 0%, #0F59C9 100%);
			border-radius: 7px;
			margin-top: 45px;
		}
	}
}

.section-body {
	min-width: 1280px;
	max-width: 1280px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}

.footer-section {
	background: var(--color-bg-grey);
	padding-top: 78px;

	.section-body {
		padding-bottom: 68px;

		.section-body__left {
			span {
				margin-top: 22px;
				font-weight: 400;
				font-size: 14px;
				line-height: 20px;
				display: block;
				max-width: 389px;
			}
		}

		.section-body__right {
			display: flex;
			gap: 73px;

			div {
				color: var(--color-grey-100);
				font-weight: 400;
				font-size: 14px;
				line-height: 21px;
			}

			a {
				font-weight: 400;
				font-size: 14px;
				color: var(--color-grey-060);
				line-height: 21px;
				margin-top: 12px;

				&:hover {
					color: var(--color-grey-100);
				}
			}
		}
	}

	.copyright {
		height: 44px;
		text-align: center;
		color: var(--color-grey-060);
		font-weight: 400;
		font-size: 14px;
		line-height: 44px;

		a:hover {
			color: var(--color-grey-100);
		}
	}

	.ca {
		text-align: center;
	}
}

.qrcode-area {
	display: flex;
	align-items: center;

	.qrcode-area__left {
		width: 160px;
		height: 160px;
		background: #FFFFFF;
		border-radius: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrcode-area__right {
		margin-left: 32px;
		display: flex;
		flex-direction: column;
		gap: 8px;

		.box {
			width: 189px;
			height: 65px;
			border-radius: 7px;
			border: 1px solid #979797;
			text-align: center;
			align-content: center;
			font-weight: 400;
			font-size: 16px;
			color: var(--color-grey-078);
			line-height: 22px;

			.box__body {
				margin-left: 17px;
				display: flex;
				flex-direction: column;

				h2 {
					font-weight: 500;
					font-size: 16px;
					line-height: 22px;
					margin: 0;
				}

				h3 {
					font-weight: 400;
					font-size: 14px;
					line-height: 20px;
					margin: 0;
				}
			}
			
			&.selected {
				background-color: #0F59C9;
				border: none;
			}

			&.flex-row {
				align-items: center;
				justify-content: center;

				span {
					margin-left: 17px;
				}
			}
		}
	}
}

#dialog {
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	
	&.opened {
		visibility: visible;
		opacity: 1;
		transition: opacity .25s ease-in-out;
	}
	
	.backdrop {
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.65);
		backdrop-filter: blur(4px);
	}
	
	.alert {
		background-color: rgba(255, 255, 255, 0.96);
		z-index: 10000;
		position: absolute;
		top: 30%;
		left: 50%;
		width: 400px;
		margin-left: -200px;
		border-radius: 4px;
		padding: 32px;
		box-sizing: border-box;
		box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.96);
		
		.alert-close {
			width: 24px;
			height: 24px;
			background: url(../assets/icon-close.png);
			background-size: 24px 24px;
			top: 8px;
			right: 8px;
			position: absolute;
			cursor: pointer;
			
			&:hover {
				opacity: 0.74;
			}
		}
		
		.alert-title {
			font-weight: 600;
			font-size: 20px;
			line-height: 32px;
			text-align: center;
		}
		
		.alert-messge {
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			text-align: center;
			margin-top: 12px;
		}
	}
}