@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

body {
    --md-text-font-family: 'Inter', 'Noto Sans KR', sans-serif;
    --md-text-font-style: 'normal';
    --md-text-font-weight: 100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --md-code-font: "Fira Code", monospace;
}

.md-typeset h1 {
  font-weight: 800;
}

.md-typeset h2 {
  font-weight: 600;
}

.md-typeset h3 {
  font-weight: 500;
}

.md-version {
  font-weight: 400;
}

.nowrap {
  white-space: nowrap;
}


.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}


#headerTopBanner {
  height: 40px;
  background-color: #3b434a;
  padding: 10px cal(80px/2);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  font-size: 16px;
}


#headerTopBanner .banner-txt {
  padding: 0 1.428em; 
}

#headerTopBanner .txt-container {
  position: relative;
  padding-left: 10px;
}

#headerTopBanner .txt-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #52f756;
}

#headerTopBanner .txt-container:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #52f756;
}


.banner-txt {
  margin: 0;
  color: #ffffff; 
  white-space: nowrap;

}

.theme-color {
  color: #52f756 !important;
}


.top-banner-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-decoration: none;
}


@media screen and (max-width: 76.25em) {
  .m-show {
    display: block;
  }
}