@font-face { font-family: 'Jibaek'; font-weight: 120; font-style: normal; font-display: swap; src: url('Jibaek-120g-beta.woff2') format('woff2'); }
* { box-sizing: border-box; outline: none; word-break: keep-all; word-wrap: break-word; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: 'Jibaek', sans-serif; padding: 0; margin: 0;}
a { text-decoration: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; margin: 0; padding: 0; }
html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
img { vertical-align: middle; }
body { font-size: 1vw; letter-spacing: -0.01em;}

header { position: fixed; display: flex; align-items: flex-end; left: 0; top: 0; width: 100%; height: 2.5em; padding: 0 1em; overflow: hidden; background-color: white; }
header nav { width: 100%; height: 100%; border-bottom: 1px solid black; height: 1.7em; display: flex; justify-content: space-between; }
header li { display: inline-block; margin-right: 0.6em; }

main { padding: 3.5em 1em 0 1em; }
main ul.list { display: flex; flex-wrap: wrap; }
main ul.list li { width: calc((100% - 4em) / 5); margin-bottom: 1em; margin-right: 1em;}
main ul.list li:nth-child(5n) { margin-right: 0; }
main ul.list li img { width: 100%; }
main ul.list li figcaption { padding-top: 0.3em; line-height: 1.4em; }

main article { margin-bottom: 1em; line-height: 1.75em;}
main article div.title { padding-bottom: 1em; }
main article div.about { white-space: pre-wrap; }
main article  a { color: blue; }

main ul.list-large { display: flex; flex-wrap: wrap; }
main ul.list-large li { width: calc((100% - 1em) / 2); margin-bottom: 1em; margin-right: 1em;}
main ul.list-large li:nth-child(2n) { margin-right: 0; }
main ul.list-large li img { width: 100%; }

main#article {
	display: flex;
	justify-content: space-between;
}

/* article#info, article#text, div#image {
	width: 33.3333333%;
} */

article#info {
	width: 20%;
}

article#text {
	width: 35%;
}

div#gap {
	width: 10%;
}

div#image {
	width: 35%;
}

article#info, article#text {
	white-space: pre-wrap;
}

article#text span {
	display: block;
	text-indent: 2em;
}

div#image img {
	width: 100%;
}

#btn-top {
	position: fixed;
	left: 1em;
	bottom: 1em;
	cursor: pointer;
	font-size: 1.1em;
}

@media (min-width: 601px) and (max-width: 1200px) {
	body { font-size: 1.6vw; }
	main ul.list li { width: calc((100% - 2em) / 3); margin-bottom: 1em; margin-right: 1em;}
	main ul.list li:nth-child(5n) { margin-right: 1em; }
	main ul.list li:nth-child(3n) { margin-right: 0; }
	
	main#article {
		justify-content: unset;
		flex-wrap: wrap;
		
	}
	
	article#info, article#text, div#gap, div#image {
		width: 50%;
	}
}

/* @media (min-width: 601px) and (max-width: 1023px) {
	body { font-size: 3.4vw; }
	main ul.list li { width: calc((100% - 1em) / 2); margin-bottom: 1em; margin-right: 1em;}
	main ul.list li:nth-child(5n) { margin-right: 1em; }
	main ul.list li:nth-child(2n) { margin-right: 0; }
	main ul.list-large li { width: 100%; margin-right: 0 }
	
	main#article { display: block; }
	div#gap { display: none; }
	article#info, article#text, div#image {
		width: 100%;
	}
	#btn-top { display: none; }
} */

@media (max-width: 600px) {
	body { font-size: 4.8vw; }
	main ul.list li { width: 100%; margin-right: 0 }
	main ul.list-large li { width: 100%; margin-right: 0 }
	
	main#article { display: block; }
	div#gap { display: none; }
	article#info, article#text, div#image {
		width: 100%;
	}
	#btn-top { display: none; }
}