.view {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 100%;

  padding: 0 20px;
}




nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 10;

  background-color: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.module-menu {
  max-width: 1100px;
  margin: 0 auto;

  height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-txt-h {
  font-size: 18px;
}
.menu-txt-h-home {
  opacity: .5;
}
.module-menu [data-style="bold-button"] {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: black;
  color: white;

  font-weight: bold;

  height: 32px;
  padding: 0 16px;

  border-radius: 8px;
}
@media (max-width: 1100px) {
  .menu-txt-h {
    margin-left: 20px;
  }
  .menu-button {
    margin-right: 20px;
  }
}






#main {
  margin: 48px auto;

  max-width: 1100px;
}




.module-login {
  display: flex;
  justify-content: flex-end;

  padding-bottom: 32px;
}
.module-login [data-style="button"] {
  font-weight: bold;

  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;
}
.module-login [data-style="button"]:first-child {
  padding-left: 0;
}
.module-login [data-style="button"]:last-child {
  padding-right: 0;
}










.module-button-header {
  display: flex;

  padding-bottom: 28px;

  border-bottom: 1px solid #ddd;
}
.button-header-h {
  font-size: 36px;
}




.module-list-menu {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.module-list-menu button,
.module-list-menu a {
  width: 50%;
  height: 48px;

  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: .5;
}
.module-list-menu button.selected,
.module-list-menu a.selected {
  opacity: 1;
}




.list-wrap {
  display: flex;
  flex-wrap: wrap;

  margin: 0 -12px;
}

.list-item {
  width: calc(33.3333333333% - 24px);

  margin: 36px 12px;
}
@media (max-width: 1024px) {
  .list-item {
    width: calc(50% - 24px);
  }
}
@media (max-width: 480px) {
  .list-item {
    width: calc(100% - 24px);
  }
}
.list-figure {
  position: relative;

  width: auto;
  height: 0;

  padding-bottom: 56.25%;

  overflow: hidden;
}
.list-figure {
  background-color: #000;
}
.figure-body {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.list-item[data-splashbackground*="brown"] .figure-body {
  background-color: #231704;
  color: #fff9d4;
}
.list-item[data-splashbackground*="green"] .figure-body {
  background-color: #273829;
  color: #fff9d4;
}
.list-item[data-splashbackground*="red"] .figure-body {
  background-color: #921008;
  color: #fff9d4;
}
.list-item[data-splashbackground*="blue"] .figure-body {
  background-color: #050239;
  color: #fff9d4;
}
.list-item[data-splashbackground*="yellow"] .figure-body {
  background-color: #d48207;
  color: #fff9d4;
}
.list-item[data-splashbackground*="orange"] .figure-body {
  background-color: #e36942;
  color: #fff9d4;
}
.list-item[data-splashbackground*="purple"] .figure-body {
  background-color: #353a71;
  color: #fff9d4;
}



.figure-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}
.figure-txt-h {
  font-size: 28px;

  font-family: 'Noto Serif KR',serif;
  font-weight: bold;

  padding: 0 32px 16px;

  line-height: 1.4;
  text-align: center;
}
.figure-txt-author {
  font-size: 14px;

  font-weight: bold;
}

.next-paging {
  border-radius: 12px;

  margin-top: 36px;

  width: 100%;

  font-size: 18px;
  font-weight: bold;

  color: #3391ff;
  background-color: #f0f0fa;

  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;
}