.breadcrumb-area {
  width: 100%;
  height: 2.5rem;
  padding: 0 16px;
  overflow: auto;
  background-color: #e9f0f0;
  position: relative;
  top: 56px;
  z-index: 99;
}
.breadcrumb-area .inner {
  white-space: nowrap;
}
.breadcrumb-area .inner {
  width: 100%;
  height: 100%;
  margin: auto;
  white-space: nowrap;
}
.breadcrumbs {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
.breadcrumb {
  display: flex;
}
.breadcrumbs span {
  font-size: 14px;
  line-height: 1;
}
.breadcrumb::after {
  content: ">";
  padding: 0 12px;
}
.breadcrumb:last-child::after {
  content: "";
}
@media (min-width: 768px) {
  .breadcrumb-area {
    position: relative;
    top: 105px;
    z-index: 99;
  }
}
@media (min-width: 1024px) {
  .breadcrumb-area {
    width: 100%;
    height: 2.5rem;
    padding: 0 16px;
    position: relative;
    top: 105px;
    z-index: 98;
  }
  .breadcrumb-area .inner {
    width: 100%;
    max-width: 64rem;
    height: 100%;
    margin: auto;
  }
  .breadcrumbs {
    display: flex;
    flex-direction: row;
  }
  .breadcrumb {
    display: flex;
  }
  .breadcrumb::after {
    content: ">";
    padding: 0 16px;
  }
  .breadcrumb:last-child::after {
    content: "";
  }

}