/*---------------------------------------
	THEME VARIABLES
-----------------------------------------*/
:root {
	--color-bg: #07101c;
	--active: #a7f2ff;
	--highlight: #ffe3a0;
	--grey: #438a96;

	--font-main: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
	--font-default: "Noto Serif SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", serif;
	/* --font-title: "LXGW WenKai TC", "Noto Serif SC", serif; */
	--font-style: "Long Cang", cursive;
	--font-en: "EB Garamond", "Poppins", serif;
	--font-number: "EB Garamond", "Poppins", serif;

	--pw-header-divider: rgb(255 255 255 / 50%);
	--pw-menu-dot-size: 4px;
}

/*---------------------------------------
	ANIMATION
-----------------------------------------*/
@keyframes spin {
	0%{ transform: rotate(0);}
	100% { transform: rotate(360deg);}
}

body {
	overflow-x: hidden;
	background: linear-gradient(to top, rgba(7, 16, 28, 0.96) 0%, rgba(7, 16, 28, 0.62) 40%, rgba(7, 16, 28, 0.18) 72%, rgba(7, 16, 28, 0.45) 100%), url(../img/bg.jpg) no-repeat;
	/* background: url(../img/bg.jpg) no-repeat; */
	background-size: cover;
	background-attachment: fixed;
}

/*---------------------------------------
	HEADER
-----------------------------------------*/
.site_header {
	background: linear-gradient(to top, #5c83a8b8, rgba(7, 16, 28, 0.7));
	border-bottom: 1px solid var(--pw-header-divider);
}

/*---------------------------------------
	MENU
-----------------------------------------*/
.site_menu {
	height: 100%;
	gap: 0;
}

.site_menu a {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 10px 25px;
	font-family: var(--font-title);
	font-size: 16px;
	font-weight: 500;
	text-wrap: nowrap;
}

.site_menu a:hover,
.site_menu a.active {
	color: #ffffff;
}

.site_menu a:not(:last-child)::before {
	content: "";
	position: absolute;
	right: calc(var(--pw-menu-dot-size) / -2);
	top: 50%;
	width: var(--pw-menu-dot-size);
	height: var(--pw-menu-dot-size);
	background: var(--color-muted);
	transform: translateY(-50%) rotate(45deg);
}

.site_menu a::after {
	bottom: -2px;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--active), transparent);
}

.header_social{
	display:flex;
	align-items:center;
	gap:12px;
}

.header_social a{
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	transition:.25s;
}

.header_social img {
	width: 42px;
	height: 42px;
	opacity: .95;
	transition: .25s;
}

.header_social a:hover{
	filter: drop-shadow(0 0 8px rgba(167, 242, 255, 0.65));
}

.header_social a:hover img{
	opacity:1;
	transform:scale(1.1);
}

/*---------------------------------------
	BUTTON
-----------------------------------------*/
.primary_btn,
.download_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	position: relative;
	min-width: 120px;
	width: 200px;
	max-width: 264px;
	height: auto;
	aspect-ratio: 264 / 60;
	padding: 0 30px;
	overflow: hidden;
	border-radius: 0;
	font-family: var(--font-default);
	font-size: 18px;
	font-weight: 800;
	background: url(../img/button/button.png) no-repeat 0 0 / 100% auto;
}

.primary_btn::after,
.download_btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(0,0,0,0), rgba(255,255,255,.5), rgba(0,0,0,0));
	transform: translateX(-120%);
	animation: pw_btn_shine 6s infinite;
	pointer-events: none;
}

.download_btn::before {
	content: "";
	width: 30px;
	aspect-ratio: 1/1;
	background: url(../img/button/icon_dl.png) center no-repeat;
	background-size: contain;
	margin-left: -5px;
	filter: invert(1);
}

.primary_btn:hover,
.download_btn:hover {
	filter: brightness(1.15);
	background-position: 0 100%;
}

@keyframes pw_btn_shine {
	0%, 45% {
		transform: translateX(-120%);
	}

	65%, 100% {
		transform: translateX(120%);
	}
}

/*---------------------------------------
	TYPOGRAPHY OVERRIDE
-----------------------------------------*/
.page_banner_subtitle,
.section_title_subtitle,
.home_hero_label,
.media_entry_content span,
.class_panel_label,
.download_card_label {
	font-family: var(--font-en);
}

.section_title, .page_banner_inner {
	display: flex;
	align-items: center;
	width: fit-content;
	position: relative;
	margin: 0 auto 20px;
	flex-direction: column;
}
.section_title_heading, .page_banner_title{
	position: relative;
	width: fit-content;
}
.section_title_heading::before, .section_title_heading::after,
.page_banner_title::before, .page_banner_title::after{
	content: '';
	position: absolute;
	width: 100px;
	height: 15px;
	transform-origin: center;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 179 / 31;
	background: url(../img/titledeco.png) center left no-repeat;
	background-size: contain;
}
.section_title_heading::before, .page_banner_title::before{
	left: 110%;
}
.section_title_heading::after, .page_banner_title::after{
	right: 110%;
	transform: scaleX(-1) translateY(-50%);
}

.section_title_subtitle {
	font-weight: 400;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
}

/*---------------------------------------
	RESPONSIVE
-----------------------------------------*/
@media (max-width: 1440px) {
	.header_inner{
		gap: 10px;
	}
	.site_menu a {
		padding: 10px 16px;
		font-size: 14px;
	}

	.download_btn {
		width: 170px;
		font-size: unset;
	}
}

@media (max-width: 1200px) {
	.site_menu {
		gap: 0;
		padding: 0;
		width: 100vw;
		height: calc(100vh - var(--header-height));
	}

	.site_menu a {
		width: 100%;
		height: auto;
		padding: 25px;
		font-size: 18px;
	}

	.site_menu a:not(:last-child)::before {
		display: none;
	}

	.site_menu a::after {
		height: 1px;
		bottom: 0;
		left: 0;
		transform: none;
		background: linear-gradient(90deg, var(--active), transparent 80%);
	}
	/* .site_menu a:hover,
	.site_menu a.active{
		color: #07101c;
	} */
	.site_menu a:hover::after,
	.site_menu a.active::after {
		width: 100%;
		z-index: -1;
	}

	.site_menu a[href="download.php"] {
		--color-primary: var(--highlight);
	}

	.header_social {
		display: flex;
	}
}

@media (max-width: 550px) {
	.download_btn {
		display: none;
	}
}

@media (max-width: 420px) {
	.header_inner {
		width: calc(100% - 20px);
		gap: 10px;
	}

	.site_logo {
		width: 108px;
	}

	.header_action {
		flex: 0 0 auto;
		gap: 8px;
	}

	.header_social a {
		width: 32px;
		height: 32px;
	}

	.header_social img {
		width: 32px;
		height: 32px;
	}

	.menu_toggle {
		flex: 0 0 42px;
	}
}

.page_coming_soon .page_banner{
	min-height: 100vh;
}