* {
	padding: 0;
	margin: 0;
	font-family: cursive, "Noto Serif KR";
}

.hg {
	font-size: 14px;
}

/*.noto-serif-kr {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}*/

body { 
-ms-overflow-style: none; 
	overflow: hidden;
} 

body::-webkit-scrollbar { 
	display: none; 
} 

h1 {
	position: absolute;
	top: 50%;
	left: 17vw;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 5px;
	font-size: 16px;
	color: white;
	font-weight: normal;
	height: 800px;
	text-align: center;
	z-index: 2;
}

ul {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-19%);
}

li {
	list-style: none;
	color: white;
	margin-right: 5.5vw;
	width: 12vw;
	text-align: center;
	letter-spacing: 5px;
}

#bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

#bgv {
	display: none;
}

@media (max-aspect-ratio: 16/9) {
	#bg {
		width: auto;
		height: 100%;
	}
}


@media screen and (max-width: 1200px) {
	#bg {
		display: none;
	} 

	#bgv {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	 h1 {
		top: 14.5vh;
		left: 50%;
		transform: rotate(90deg) translate(0, -50%);
		transform-origin: top left;
		height: 400px;
	 }

	 ul {
 		transform-origin: top left;
 		transform: rotate(90deg) translateX(-23%);
	 }

	 li {
			width: 14vh;
			margin-right: 2.5vh;
	 }
}

@media screen and (max-width: 1200px) and (max-aspect-ratio: 9/16){
	#bg {
		display: none;
	} 

	#bgv {
		display: block;
		height: 100%;
		width: auto;
	}