@font-face {
    font-family: 'SF_HambakSnow';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html, body { margin: 0; padding: 0; height: 100%; }
ul, li, p { margin: 0; padding: 0; list-style: none; }
img { margin: 0; vertical-align: top; }
.wrap { height: 100%; }
.header { position: relative; width: 100%; height: 80px; background-color: #fff; }
.header h1 { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; padding: 0; font-family: 'SF_HambakSnow'; cursor: pointer; }
.header .nav { position: absolute; right: 50px; top: 23px; display: flex; flex-wrap: nowrap; column-gap: 20px; }
.header .nav li a { text-decoration: none; color: #000; font-size: 13px; border-bottom: 2px solid #fff; transition: all 0.3s; }
.header .nav li a:hover { border-bottom: 2px solid #000; }

.content { position: relative; width: 100%; height: calc(100% - 80px - 40px); overflow-y: auto; background:url('../images/pattern.png') repeat; background-color: #ece0e0; }
.boardcontent { position: relative; width: 100%; height: calc(100% - 80px - 42px); overflow-y: auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.boardframe {margin: 50px auto; width: 100%; max-width: 1400px;}

.booklist { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 40px; row-gap: 40px; }
.booklist li { width: 300px; height: 454px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); }
.booklist li img { width: 100%; height: 100%; object-fit: cover; }

.footer { position: relative; width: 100%; background-color: #fff;}
.footer { font-size: 12px; text-align: center; line-height: 40px; }



@media(max-width: 1660px){
	.booklist { top: 0px; transform: translate(-50%, 0%); max-width: 1300px; padding: 100px 0; }
}