.header {
  position: sticky;
}

.header span {
  justify-content: space-between;
}

.header img {
  height: 24px;
}

.header ul {
  margin: -16px auto;
}

.header li {
  background-color: #de0000;
  border-radius: 100px;
}

.header a span {
  margin: auto 8px;
}

.wrap {
  display: flex;
}

.menu {
  border-right: solid 1.5px #f0f0f0;
  width: 320px;
}

@media (max-width: 1024px) {
  .menu {
    width: 77.5px;
  }
}

@media (max-width: 1024px) {
  .menu span {
    display: none;
  }
}

@media (max-width: 767px) {
  .menu {
    display: none;
  }
}

.menu::-webkit-scrollbar {
  display: none;
}

.menu ul {
  padding: 16px 0;
}

.menu li:hover {
  background-color: #fafafa;
}

.menu a {
  gap: 8px;
}

.menu hgroup span {
  font-size: 8px;
}

.menu hgroup {
  margin: 16px auto;
  gap: 8px;
}

.main {
  max-width: 767px;
}

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

.iframe {
  border-left: solid 1.5px #f0f0f0;
  width: 320px;
}

@media (max-width: 1360px) {
.iframe {
    display: none;
  }
}

.iframe::-webkit-scrollbar {
  display: none;
}

.hint-text {
  position: relative;
  display: inline-block;
}

.hint-text nobr {
  position: absolute;
  background-color: #000000;
  border-radius: 4px;
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%);
  display: none;
}

.hint-text:hover nobr {
  display: block;
}

.hint-text abbr {
  font-size: 10px;
}

.hint-text abbr {
  max-width: 8em;
}

@media (max-width: 440px) {
  .tab {
    margin: auto -16px;
  }
}

.tab li:hover {
  background-color: #fafafa;
}

.tab a {
  justify-content: center;
}

.tab a span {
  font-weight: 500;
}

.tab mark {
  background-color: red;
  border-radius: 100%;
  padding: 4px;
}

.current {
  border-bottom: solid 1.5px #000000;
}

.open {
  border-bottom: solid 1.5px #fafafa;
}

.empty {
  border-radius: 100px;
  width: fit-content;
  margin: 64px auto;
}

.empty span {
  margin: auto 16px;
}

.error {
  border-radius: 100px;
  bottom: 15%;
  transform: translate(-50%);
}

.error nobr {
  margin: auto 10px;
}

.error nobr img {
  width: 16px;
  height: 16px;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  z-index: 1;
  display: none;
}

.modal {
  border-radius: 16px;
  max-width: 440px;
  height: 440px;
  top: 50%;
  transform: translate(-50%, -50%)
}

@media (max-width: 440px) {
  .modal {
    max-width: calc(100% - 32px);
  }
}

.app-menu {
  border-top: solid 1.5px #f0f0f0;
  bottom: 0;
  transform: translate(-50%);
}

@media (min-width: 768px) {
  .app-menu {
    display: none;
  }
}

.app-menu ul {
  justify-content: space-around;
}

.app-menu li {
  text-align: center;
}

.app-menu a {
  display: grid;
}

.error,
.overlay,
.modal,
.app-menu {
  position: fixed;
}

.header,
.modal,
.app-menu {
  background-color: #ffffff;
}

.empty,
.error {
  background-color: #fafafa;
}

.header a span,
.hint-text abbr {
  color: #ffffff;
}

.menu hgroup,
.app-menu a span {
  color: #555555;
}

.menu a span,
.error span {
  font-size: 11px;
}

.header a span,
.tab a span,
.empty span {
  font-size: 12px;
}

.app-menu a span {
  font-size: 8px;
}

.header a span,
.menu a span,
.empty span {
  font-weight: 600;
}

.menu hgroup span,
.hint-text abbr,
.error span,
.app-menu a span {
  font-weight: 400;
}

.header,
.menu ul {
  border-bottom: solid 1.5px #f0f0f0;
}

.header,
.tab li,
.empty {
  padding: 16px;
}

.menu li,
.error,
.app-menu {
  padding: 10px;
}

iframe,
.main,
.tab li,
.overlay,
.modal,
.app-menu {
  width: 100%;
}

.menu a img,
.app-menu li img {
  width: 24px;
  height: 24px;
}

.header,
.overlay {
  top: 0;
  left: 0;
}

.hint-text nobr,
.error,
.modal,
.app-menu {
  left: 50%;
}

.main,
.app-menu a img {
  margin: 0 auto;
}

.hint-text nobr,
.header li {
  padding: 8px;
}

.iframe,
.menu,
.main,
.modal {
  padding: 0 16px;
  height: calc(100vh - 55.5px);
  overflow-y: scroll;
}

.tab a,
.error nobr,
.app-menu a {
  gap: 4px;
}

.header span,
.menu a,
.menu hgroup,
.tab ul,
.tab a,
.error nobr,
.app-menu ul {
  display: flex;
  align-items: center;
}

.iframe,
.menu,
.main,
.modal,
.app-menu {
  box-sizing: border-box;
}