body {
  display: flex;
  justify-content: center;
  /* Ensure pages can pin footer to viewport bottom even when content is short */
  min-height: 100vh;
  background-color: #daf0f6;
  font-family: "Noto Sans", sans-serif;
}

.PageShell {
  display: flex;
  flex-flow: column;
  width: 1230px;
  /* Sticky footer base: let the shell fill the viewport height */
  min-height: 100vh;
  background-color: #ffffff;
}

/* 메인 */
main {
  background-color: #ffffff;
  padding-bottom: 30px;
}

/* 배너 */
main .MainBanner {
}

main .MainBanner a {
}

main .MainBanner a img {
}

/* 새로운 테스트 리스트 */
main .NewTestList {
  display: flex;
  flex-flow: column;
}

/* 새로운 테스트 리스트 타이틀 */

main .NewTestList .NewTestListTittle {
  display: flex;
  padding: 16px 0 4px;
}

main .NewTestList .NewTestListTittle img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 8px;
}

main .NewTestList .NewTestListTittle .fire {
  display: block;
  width: 24px;
  height: 24px;
}

main .NewTestList .NewTestListTittle p {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
}

/* 새로운 테스트 리스트 카드 디자인 */
main .NewTestList .NewTestListShell {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

main .NewTestList .NewTestListShell .NewTestShell {
  width: 22%;
  padding: 16px;
  border-radius: 15px;
  background-color: #ffffff;
  cursor: pointer;
  margin-bottom: 20px;
}

main .NewTestList .NewTestListShell .NewTestShell:hover {
  transition: all 0.5s ease;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest {
  background-color: #ffffff;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest img {
  display: block;
  width: 100%;
  height: 260px;
  background-color: aquamarine;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest h4 {
  padding: 12px 0 12px;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest .NewTestHashTag {
}

main
  .NewTestList
  .NewTestListShell
  .NewTestShell
  .NewTest
  .NewTestHashTag
  > span {
}

.TestMoreBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Morebutton {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.Morebutton a {
  color: #000;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background-color: #ffd48d;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 20px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #ffd48d;
  filter: dropshadow(color=#FFD48D, offx=0px, offy=1px);

  -webkit-box-shadow:
    inset 0 1px 0 #ffe5c4,
    0 10px 0 #e1a860;
  -moz-box-shadow:
    inset 0 1px 0 #ffe5c4,
    0 10px 0 #e1a860;
  box-shadow:
    inset 0 1px 0 #ffe5c4,
    0 10px 0 #e1a860;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.Morebutton a img {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.Morebutton a:active {
  top: 10px;
  background-color: #ffd48d;

  -webkit-box-shadow:
    inset 0 1px 0 #ffe5c4,
    inset 0 -3px 0 #e1a860;
  -moz-box-shadow:
    inset 0 1px 0 #ffe5c4,
    inset 0 -3pxpx 0 #e1a860;
  box-shadow:
    inset 0 1px 0 #ffe5c4,
    inset 0 -3px 0 #e1a860;
}

/* 공통CSS */
.HashTag {
  font-size: 0.75rem;
  color: #9d9d9d;
  margin-right: 3px;
}

.HashTag:last-child {
  margin-right: 0px;
}

.Shellheight {
  margin-top: 20px;
}

/* Mobile (<=500px) */
@media (max-width: 900px) {
  body {
    display: block;
  }

  .PageShell {
    width: 100%;
  }

  main {
    padding: 0 0 24px;
  }

  .MainBanner a img {
    width: 100%;
    height: auto;
  }

  main .NewTestList {
    padding: 0 4px;
  }

  main .NewTestList .NewTestListTittle {
    padding: 12px 4px 6px;
    align-items: center;
  }

  main .NewTestList .NewTestListShell {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  main .NewTestList .NewTestListShell::-webkit-scrollbar {
    display: none;
  }

  main .NewTestList .NewTestListShell .NewTestShell {
    flex: 0 0 72%;
    min-width: 72%;
    padding: 12px;
    margin-bottom: 8px;
  }

  main .NewTestList .NewTestListShell .NewTestShell .NewTest img {
    height: 100%;
  }

  .TestMoreBtn {
    padding: 8px 0 14px;
  }

  .Morebutton a {
    width: 100%;
  }
}