.nav_btn, .icon_btn { 
	display: none;
}




.visual,
.visual img {
	width: 100%; height: auto;
	max-height: 1080px;
}
.visual video {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);

	width: 100%; height: auto;
	max-height: 1080px;
	object-fit: cover;
	border: 0px;
}

.visual_nav {
	position: absolute; top: min(calc((323 / 1920) * 100vw), 323px); left: 0px;
	width: 100%; height: auto;
	z-index: 1;
	display: grid;
	padding: 0px 100px;
}

.visual_nav a {
	width: fit-content; height: auto; line-height: 1;
	font-size: min(calc((150 / 1920) * 100vw), 150px); color: #fff; text-align: left;
	opacity: 0.5;

	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.visual_nav a:hover { opacity: 1; }

.text {
	width: 100%; max-width: 1024px; height: auto; line-height: 1.5;
	font-size: 24px; color: #000; text-align: center;
	font-weight: 500;
	padding: 0px 20px; 
	margin-top: 240px;

	left: 50%;
	transform: translate(-50%, 0%);

	word-break: keep-all;
}

.btn_box {
	width: 100%; height: auto;
	margin-top: 175px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 65px;
}

.btn_box a::before {
	content: '';
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%; 
	border: 2px solid #589dff;
	border-radius: 10px;
	box-sizing: border-box;
}

.btn_box a {
	width: 305px; height: 102px; line-height: 102px;
	background-color: #fff;
	border-radius: 10px;
	color: #589dff; font-size: 30px; text-align: center;
	font-weight: 800;


	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.btn_box a:hover {
	background-color: #589dff; color: #fff;
}

.btn_box a:hover {
	opacity: 0.8;
}


.sound_btn.off { background-image: url("../images/off.svg"); }
.sound_btn.on { background-image: url("../images/on.svg"); }
.sound_btn {
	position: absolute; bottom: 50px; right: 50px;
	width: 50px; height: 50px; 

	background-color: rgba(255,255,255,0.8);
	border-radius: 100%;
	cursor: pointer;

	
	background-size: 25px;
	background-position: center center;
	background-repeat: no-repeat;
}


@media (max-width: 479px){ 
	.text { font-size: 16px; margin-top: 60px; }
	.btn_box { display: grid; margin-top: 90px; gap: 20px; }

	.btn_box a {
		width: 180px; height: 60px; line-height: 60px;
		font-size: 18px;
	}

	.visual { height: 100vw; max-height: 100vw; overflow: hidden; }
	.visual img { height: 100vw; max-height: 100vw; }
	.visual video { width: auto; height: 100%; }

	.visual_nav { 
		top: 27vw;
		padding: 0px 20px; 
	}

	.visual_nav a { font-size: 54px; }

 	.sound_btn {
		bottom: 20px; right: 20px;
		width: 40px; height: 40px; 
		background-size: 20px;
	}

}

@media (max-width: 749px) and (min-width: 480px) { 
	.text { font-size: 16px; margin-top: 60px; }
	.btn_box { margin-top: 90px; gap: 30px; }

	.btn_box a {
		width: 180px; height: 60px; line-height: 60px;
		font-size: 18px;
	}

	
	.visual { height: 100vw; max-height: 100vw; overflow: hidden; }
	.visual img { height: 100vw; max-height: 100vw; }
	.visual video { width: auto; height: 100%; }

	.visual_nav { 
		top: 27vw;
		padding: 0px 20px; 
	}

	.visual_nav a { font-size: 58px; }

 	.sound_btn {
		bottom: 20px; right: 20px;
		width: 40px; height: 40px; 
		background-size: 20px;
	}

}

@media (max-width: 1023px) and (min-width: 750px) { 
	.text { font-size: 18px; margin-top: 90px; }
	.btn_box { margin-top: 120px; gap: 45px; }

	.btn_box a {
		width: 250px; height: 80px; line-height: 80px;
		font-size: 22px;
	}

	.visual_nav { padding: 0px 20px; }

 	.sound_btn {
		bottom: 30px; right: 30px;
		width: 40px; height: 40px; 
		background-size: 20px;
	}
}


@media (max-width: 1279px) and (min-width: 1024px) { 
	.text {  margin-top: 120px; }
	.btn_box { margin-top: 150px; }

}