@charset "utf-8";

.main-header {
	padding-top: clamp(20px, 2.083vw, 40px);
	box-shadow: unset;
	background-color: transparent;
	transition: all 0.3s;
}

.main-header.scrolled {
	padding-top: 12px;
	box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.16);
	background-color: var(--clr-neutral-100);
}

.main-header:not(.scrolled)
	.header-nav-link:not(:hover, :focus-visible, :active) {
	color: var(--clr-neutral-100);
}

.main-header:not(.scrolled) .hamburger-btn span {
	background-color: var(--clr-neutral-100);
}

.main-header .logo-img {
	width: clamp(67px, 6.823vw, 131px);
	filter: invert(1);
}

.main-header.scrolled .logo-img {
	width: clamp(67px, 6.823vw, 76px);
	filter: unset;
}

.sec-main-visual {
	display: flex;
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	flex-direction: column;
	justify-content: center;
	border-image: fill 1 linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5));
}

.sec-main-visual:has(.after-event-img) {
	border-image: fill 1 linear-gradient(rgb(0, 0, 0, 0.38), rgb(0, 0, 0, 0.38));
}

.sec-main-visual .mv-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.sec-main-visual .mv-img picture,
.sec-main-visual .mv-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sec-main-visual .mv-img picture.after-event-img,
.sec-main-visual .mv-img .after-event-img img {
	object-position: center;
}

.sec-main-visual .mv-inner {
	color: var(--clr-neutral-100);
	padding-block: 9.792vw 3.385vw;
}

.sec-main-visual .mv-wrap {
	--max-width: max(874px, 45.521vw);
}

.sec-main-visual .mv-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(30px, 2.083vw);
}

.sec-main-visual .mv-ttl img {
	width: max(300px, 18.802vw);
	height: max(100px, 6.25vw);
}

.sec-main-visual .mv-sub-ttl {
	line-height: 1.4;
	font-size: max(var(--fs-36), 2.5vw);
	letter-spacing: max(2.2px, 0.115vw);
}

.sec-main-visual .countdown-txt,
.sec-main-visual .countdown-box {
	font-size: max(var(--fs-20), 1.25vw);
}

.sec-main-visual .countdown-box {
	margin-top: 2.083vw;
}

.sec-main-visual .countdown-date {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: max(var(--space-20), 1.042vw);
	line-height: 1.48;
}

.sec-main-visual .countdown-date .day-left {
	font-family: 'Oswald', sans-serif;
	font-size: max(var(--fs-100), 6.25vw);
	width: max(108px, 6.771vw);
}

.sec-main-visual .mv-info {
	font-size: max(var(--fs-16), 0.938vw);
}

.sec-info .info-wrap {
	display: grid;
	align-items: center;
	row-gap: 40px;
	column-gap: 80px;
	grid-template-columns: max-content auto;
	grid-template-rows: auto 1fr;
}

.sec-info .info-content {
	grid-row: 1 / -1;
	grid-column-start: 2;
}

.sec-info .info-content .info-card:last-child {
	border-bottom: 1px solid var(--clr-border-400);
}

.info-content .info-card:last-child {
	border-bottom: unset;
}

.sec-outline {
	background-image: url('../img/index/bg_outline_pc.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.sec-outline .outline-wrap {
	display: grid;
	align-items: center;
	gap: 40px;
	grid-template-columns: 360px auto;
	grid-template-rows: max-content 1fr;
}

.sec-outline .outline-movie {
	overflow: hidden;
	grid-row: 1 / -1;
	grid-column-start: 2;
	aspect-ratio: 16 / 9;
}

/* TODO:delete on release */
.sec-outline .outline-movie .coming-soon {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background-color: var(--clr-neutral-900);
	color: var(--clr-neutral-100);
	padding: var(--space-70) var(--space-90);
}

.sec-outline .outline-movie video {
	width: 100%;
	height: auto;
}

/* Below 1400px */
@media (max-width: 87.5em) {
	.sec-register .btn-register-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* below 1024px */
@media (max-width: 64em) {
	.sec-main-visual .mv-sub-ttl .pcnone {
		display: block;
	}

	.sec-main-visual .mv-info .pcnone {
		display: block;
	}

	.sec-info .info-wrap {
		grid-template-columns: unset;
		grid-template-rows: unset;
	}

	.sec-info .info-content {
		grid-row: unset;
		grid-column-start: unset;
	}

	.sec-outline {
		background-image: url('../img/index/bg_outline_sp.png');
	}

	.sec-outline .outline-wrap {
		display: flex;
		flex-direction: column;
	}

	.sec-outline .outline-wrap .outline-movie {
		width: 100%;
	}

	.sec-outline .outline-wrap .btn-container {
		align-self: end;
	}
}

/* Below 800px */
@media (max-width: 50em) {
	.sec-player .header-container .spnone {
		display: none;
	}

	.sec-player .btn-container.pcnone {
		display: block;
		text-align: right;
	}
}

/* below 768px */
@media (max-width: 48em) {
	.main-header {
		padding-inline: 20px;
	}

	.sec-main-visual .mv-wrap {
		--padding: min(10.256vw, 40px);
	}

	.sec-main-visual .mv-inner {
		padding-block: 25.641vw 5.128vw;
	}

	.sec-main-visual .mv-content {
		gap: min(10.256vmin, 40px);
	}

	.sec-main-visual .mv-ttl img {
		width: min(61.538vmin, 300px);
		height: min(20.513vmin, 100px);
	}

	.sec-main-visual .mv-sub-ttl {
		font-size: min(7.179vmin, var(--fs-36));
		letter-spacing: min(0.564vmin, 2.2px);
	}

	.sec-main-visual .countdown-txt,
	.sec-main-visual .countdown-box {
		font-size: min(4.615vmin, var(--fs-20));
	}

	.sec-main-visual .countdown-box {
		margin-top: min(6.667vmin, 80px);
	}

	.sec-main-visual .countdown-date {
		gap: min(5.128vmin, var(--space-20));
	}

	.sec-main-visual .countdown-date .day-left {
		font-size: min(25.641vmin, var(--fs-100));
		width: min(27.692vmin, 108px);
	}

	.sec-main-visual .mv-info {
		font-size: min(4.103vmin, var(--fs-16));
	}

	.sec-main-visual .countdown-box {
		margin-top: 0;
	}

	.btn-container {
		text-align: right;
	}

	.sec-register .btn-register-list {
		grid-template-columns: 1fr;
	}

	.sec-player {
		padding-bottom: var(--space-180);
	}
}