@charset "UTF-8";
@font-face {
	font-family: "Orbitron";
	src: url("/FileUpload/Global/WebPage/1121/assets/fonts/Orbitron-Regular.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Noto Sans";
	src: url("/FileUpload/Global/WebPage/1121/assets/fonts/NotoSans-Regular.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*------------- Scrollbar -------------*/
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-button{width:0;height:0}
::-webkit-scrollbar-thumb{background: #555555;border:0 none #fff}
::-webkit-scrollbar-thumb:hover{background:gray}
::-webkit-scrollbar-thumb:active{background:gray}
::-webkit-scrollbar-track{background:#000;border:0 none #fff;border-radius:50px}
::-webkit-scrollbar-track:hover{background:#000}
::-webkit-scrollbar-track:active{background:#333}
::-webkit-scrollbar-corner{background:transparent}

/*------------- Basic -------------*/
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.mainContent img, .mainContent iframe {
	max-width: 100%;
	height: auto;
	display: block;
}
body {
	font-family: 'Noto Sans', "微軟正黑體", Microsoft JhengHei, sans-serif;
	margin: 0;
	color: black;
}
.container {
	width: 100%;
	margin: 0 auto;
	padding: 2rem;
}
section {
	position: relative;
}

/*------------- Fonts -------------*/
.mainContent strong {
	font-weight: 600;
}
.mainContent ul, .mainContent ol {
	list-style: none;
}
.mainContent a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.mainContent p {
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;
}
.fontOrbitron {
	font-family: 'Orbitron',"微軟正黑體", Microsoft JhengHei, sans-serif;
}
.textLeft {
	text-align: left !important;
}
.textRight {
	text-align: right !important;
}
.textCenter {
	text-align: center !important;
}
.fontOrbitron {
	font-family: 'Orbitron',"微軟正黑體", Microsoft JhengHei, sans-serif;
}
.headingA {
	font-size: 3.75rem;
	line-height: 4rem;
	letter-spacing: 3px;
	font-weight: 600;
	margin-bottom: .5rem;
}
.headingB {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: 2px;
	font-weight: 600;
	margin-bottom: 1rem;
}
.headingC {
	font-size: 2.5rem;
	line-height: 3rem;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: .5rem !important;
}
.headingD {
	font-size: 1.563rem;
	line-height: 2rem;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: .5rem !important;
}
.wordingA {
	font-size: 1.1rem;
	line-height: 2rem;
}
.colorBlue {
	color: #008CD6;
}
.btn-primary {
	display: inline-block;
	padding: 10px 25px;
	background: #00aaff;
	color: white !important;
	font-weight: bold;
	text-decoration: none;
	transition: background 0.3s ease;
}
.btn-primary:hover {
	background: #007acc;
}
.note {
	font-size: 0.875rem;
	color: #777;
	margin-top: .5rem;
}
.hero {
	min-height: 100vh;
	background: url('../images/kv.jpg') center/cover no-repeat;
	padding: 4rem 1rem 3rem;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.hero::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 50%;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	z-index: 0;
}
.container {
	position: relative;
	z-index: 1;
}

/*------------- How -------------*/
.how-it-works {
	background: url('../images/bg-Stealth.jpg') center/cover fixed no-repeat;
	padding: 3rem 1rem;
}
.how-it-works::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:rgba(255,255,255,0.8);
	z-index: 0;
}
.how-it-works .container {
	max-width: 1100px;
}
.how-it-works a, .requirements a, .pop_content a {
	color: #ff6400;
	text-decoration: underline;
}
.how-it-works a:hover, .requirements a:hover, .pop_content a:hover {
	color: #008CD6;
	text-decoration: none;
}
.highlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0.5rem 0 2.5rem 0;
}
.highlight {
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.highlight img {
	width: 47px;
	height: 47px;
	margin-bottom: 10px;
}
.steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1rem 0;
}
.step {
	position: relative;
	background: white;
	padding: 1rem;
	border-radius: 10px;
	width: 300px;
	min-height: 230px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	border: 2px solid black;
}
.step::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:
		url(../images/pattern-1.svg),
		url(../images/pattern-2.svg),
		url(../images/pattern-3.svg);
	background-size:
		30px auto,
		41px auto,
		80px auto;
	background-position:
		calc(100% - 10px) -1px,
		5px calc(100% + 1px),
		calc(100% - 5px) calc(100% - 3px);
	background-repeat: no-repeat;
}
.step img {
	width: 47px;
	height: 47px;
	margin-bottom: 5px;
}
.step span {
	position: absolute;
	left: 10px;
	top: 5px;
	font-size: 2rem;
	color: #D4D4D4;
	font-weight: 600;
}
.step div {
	width: 100%;
	position: relative;
	z-index: 1;
}
p.step_remark {
	font-size: 13px;
	line-height: 19px;
	text-indent: -20px;
	max-width: 880px;
	margin: 0 auto 55px auto;
}
.step h3, .step p {
	font-size: 1rem;
	line-height: 1.5rem;
}
.step h3 {
	font-weight: 600;
}
.step p {
	color: #656565;
}
.requirements {
	width: 100%;
	max-width: 500px;
	margin: 2rem auto 0 auto;
}
.requirements ul {
	padding-left: 1.2rem;
}
.requirements ul li, #Vote ul li, #terms ol li ul li {
	list-style: square;
}

/*------------- Partners -------------*/
.Partners {
	background: white;
	position: relative;
	max-width: 750px;
	padding: 16px 0 30px 0;
	border-radius: 10px;
	margin: 120px auto 0 auto;
	z-index: 1;
	border: 1px solid black;
}
.Partners .headingD {
	padding-bottom: 1rem;
}
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.partner-logos img {
	width: auto;
    height: auto;
	margin: 0 10px;
    object-fit: contain;
}
.partner-logos img[src*="CoolerMaster"] {
	width: 140px;
}
.partner-logos img[src*="InWin"] {
	width: 115px;
}
.partner-logos img[src*="LIAN-LI"] {
	width: 90px;
}
.partner-logos img[src*="Thermaltake"] {
	width: 225px;
}

/*------------- Gallery -------------*/
.featured-builds {
	background: #e9e9e9;
	padding: 3rem 1rem;
}
.featured-builds .container {
	max-width: 1600px;
}
.featured-builds::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:
		url(../images/pattern-4.svg),
		url(../images/pattern-5.svg),
		/* url(../images/pattern-6.svg), */
		url(../images/pattern-7.svg);
	background-size:
		auto 350px,
		100px auto,
		/* auto 250px, */
		auto 1000px;
	background-position:
		20px 20px,
		calc(100% - 10vw) 100px,
		/* 30px calc(100% - 50px), */
		calc(100% - 10px) calc(100% - 10px);
	background-repeat: no-repeat;
}

/*------------- Original in STEALTH -------------*/
.Original_in_STEALTH {
	background: url(/FileUpload/Global/WebPage/1121/assets/images/kv.jpg) center/cover fixed no-repeat;
	position: relative;
	min-height: 60vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.Original_in_STEALTH .content {
	position: relative;
	width: 35%;
	left: 55%;
}
.Original_in_STEALTH .content .headingC, .Original_in_STEALTH .content p  {
	color: white;
	filter: drop-shadow(2px 2px 15px rgba(0, 0, 0, 0.7));
}
.Original_in_STEALTH .content .headingC {
	padding-bottom: 1rem;
	display: inline-block;
}
.Original_in_STEALTH .content p {
	font-size: 1.25rem;
	line-height: 2rem;
}

/*------------- CTA -------------*/
.final-cta {
	background: url('../images/bg.jpg') center/cover no-repeat;
	padding: 3rem 1rem;
}
.floating-vote, .floating-vote::after {
	border-radius: 10px;
}
.floating-vote {
	font-weight: 600;
	position: fixed;
	right: 1rem;
	top: calc(50% - 46px);
	padding: 20px;
	cursor: pointer;
	z-index: 1000;
	background: linear-gradient(270deg, #ffdffc, #ffffff, #d4ffff, #ffffff);
	background-size: 400% 400%;
	animation: gradientShift 6s ease infinite;
	transition: transform 0.3s ease;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
}
.floating-vote::before {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:
		url(../images/fram-1.svg),
		url(../images/fram-2.svg),
		url(../images/fram-3.svg),
		url(../images/fram-4.svg);
	background-size: 14px auto;
	background-position:
		10px 10px,
		calc(100% - 10px) 10px,
		10px calc(100% - 10px),
		calc(100% - 10px) calc(100% - 10px);
	background-repeat: no-repeat;
}
.floating-vote::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border: 3px solid transparent;
	background: linear-gradient(135deg, #42BFFF, #E000FF) border-box;
	mask:
		linear-gradient(#000 0 0) padding-box, 
		linear-gradient(#000 0 0);
	mask-composite: exclude;
}
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.floating-vote span {
	font-size: 1.5rem;
	line-height: 1.6rem;
	background: linear-gradient(135deg, #42BFFF 0%,#FF32AF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.floating-vote small {
	font-size: 1rem;
	line-height: 1.15rem;
}
.floating-vote:hover {
	transform: scale(1.15);
}

/*------------- Lightbox -------------*/
.pop_content {
	width: 100%;
	max-width: 1000px;
	display: none;
}
#terms h3 {
	font-size: 1.15rem;
	line-height: 1.5rem;
}
#terms h4 {
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;
}
#terms {
	font-size: 14px;
	line-height: 20px;
}
#terms ol {
	margin-left: 1rem;
}
#terms ol li {
	list-style: decimal;
	margin-bottom: 1rem;
}
#terms ol li:last-child {
	margin-bottom: 0;
}
#terms ol li ul {
	margin-left: 1.5rem;
}
#terms ol li ul li {
	margin-bottom: 0.15rem;
}
.pop_content a {
	outline: none !important;
}
.fancybox__content>.carousel__button.is-close {
	position: fixed;
	right: 1%;
	top: 1%;
}
#Vote h2 {
	font-size: 1.8rem;
	line-height: 2rem;
	letter-spacing: 2px;
}
#Vote h3 {
	font-size: 1.15rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;
	letter-spacing: 1px;
}
#Vote h4 {
	font-size: 1.1rem;
	line-height: 1.5rem;
}
#Vote ul, #Vote ol {
	margin-left: 1.5rem;
}
.prize {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: row;
}
.prize span:first-child {
	width: 75%;
}
.prize span:last-child {
	width: 25%;
}
.prize img {
	width: 100%;
	max-height: 100%;
	padding-left: 1rem;
}

/*------------- Responsive -------------*/
@media (max-width: 1024px) {
	.Original_in_STEALTH {
		background: url(/FileUpload/Global/WebPage/1121/assets/images/kv-mobile.jpg) center/cover no-repeat;
	}
	.Original_in_STEALTH .content {
		position: relative;
		width: 100%;
		left: auto;
		padding: 0 1rem 2rem 1rem;
		margin-top: 700px;
	}
}
@media (max-width: 768px) {
	.hero {
		background: url('/FileUpload/Global/WebPage/1121/StealthRevolution/assets/images/kv-mobile.jpg') center top/contain no-repeat;
	}
	.highlights, .steps {
		flex-direction: column;
		align-items: center;
	}
	.step, .highlight {
		width: 90%;
		max-width: 300px;
	}
	.fancybox__slide {
		padding: 0px 8px 8px 8px;
	}
	.pop_content {
		max-height: calc(100vh - 100px);
		overflow: hidden;
		overflow-y: auto;
	}
}
@media (max-width: 480px) {
	.hero {
		height: auto;
		padding: 0;
	}
	.hero::after {
		height: 70%;
	}
	.how-it-works {
		background-attachment: scroll;
	}
	.headingA {
		font-size: 2.25rem;
		line-height: 2.6rem;
	}
	.headingB, .floating-vote span {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.headingC, #Vote h2 {
		font-size: 1.65rem;
		line-height: 1.8rem;
	}
	.btn-primary, .floating-vote {
		font-size: 0.875rem;
		line-height: 1.15rem;
	}
	.floating-vote {
		top: auto;
		bottom: 5%;
	}
	.prize {
		flex-direction: column;
	}
	.prize span:first-child, .prize span:last-child {
		width: 100%;
	}
	.pop_content {
		padding: 1rem;
	}
}