/* result로 넘어갈 때 display: block; */
#result {
	display: none;
	min-height: 0px;
	background: rgba(255, 255, 255, 0);
	text-align: center;
	word-break: break-all;
}

.result.title {
	margin-top: -30px;
	font-size: 19px;
	font-family: 'Nanum Gothic', sans-serif;
}

.res.desc {
	font-size: 15px;
	font-family: 'Nanum Gothic', sans-serif;
	margin-bottom: 10px;
	text-align: justify; 
}

#score-box {
	margin-bottom: 10px;
	font-size: 25px;
	font-family: 'Nanum Gothic', sans-serif;
}
#score-box > .title {
	animation: fade-in 0.6s ease-out 0.4s forwards, going-down 0.6s ease-out 0.4s forwards;
	opacity: 0;
	margin-bottom: 30px;
}

#score-box > .point {
	margin: 10px 0 50px 0;
	font-size: 64px;
	font-size: 4rem;
	font-weight: bolder;
	animation: fade-in 0.6s ease-out 1.8s forwards, going-down 0.6s ease-out 1.8s forwards;
	opacity: 0;
}

.art {
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	animation: fade-in 0.3s ease-out 3.2s both, going-down 0.3s ease-out 3.2s both;
	opacity: 0;
}
.art > img {
	width: 130%;
	height: 130%;
	max-width: 200px;
	max-height: 300px;
	margin-bottom: 0px;
	background-color: rgba(0, 0, 0, 0);
	object-fit: contain;
}
.desc {
	margin: 30px 7.5%;
	width: 85%;
	line-height: 28.8px;
	line-height: 1.8rem;
	font-size: 17.6px;
	font-size: 1.1rem;
	font-weight: 350;
}
#desc-box ~ p {
	display: inline-block;
	margin-top: -10%;
	max-width: 800px;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: bolder;
}
.go-artist {
	font-weight: bolder;
	cursor: pointer;
}

.btn {
	box-sizing: border-box;
	margin: 0 20% 15px 20%;
	min-width: 200px;
	height: 35px;
	line-height: 30px;
	border: 1.5px solid;
	border-radius: 20px;
	background: white;
	color: black;
	font-weight: 500;
	transition: background-color 0.2s ease-in-out;
}


/* media query */
@media all and (min-width: 486px) {
	.art {
		max-height: 1100px;
	}
	.artist {
		margin: 0 7.5% 30px 7.5%;
	}
}

@media all and (min-width: 768px) {
	#score-box > .point {
		font-size: 72px;
		font-size: 4.5rem;
	}
	.pin {
		width: 40px;
		height: 40px;
	}
	.art {
		max-height: 1500px;
	}
	.desc {
		margin: 30px 7.5%;
		line-height: 32px;
		line-height: 2rem;
		font-size: 19.2px;
		font-size: 1.2rem;
	}
	.hash {
		font-size: 17.6px;
		font-size: 1.1rem;
	}
}

@media all and (min-width: 1024px) {
	#score-box > .point {
		font-size: 80px;
		font-size: 5rem;
	}
	.pin {
		width: 50px;
		height: 50px;
	}
	.art {
		margin: 0 5%;
		width: 90%;
		max-height: 2000px;
	}
	.desc {
		font-size: 20.8px;
		font-size: 1.3rem;
	}
	.hash {
		font-size: 19.2px;
		font-size: 1.2rem;
	}
}

@media all and (min-width: 1440px) {
	#score-box > .point {
		font-size: 88px;
		font-size: 5.5rem;
	}
	.art {
		max-height: 2000px;
	}
	.desc {
		margin: 35px 5% 50px 5%;
		width: 90%;
		line-height: 33.6px;
		line-height: 2.1rem;
		font-size: 22.4px;
		font-size: 1.4rem;
	}
}