@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff")
    format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff")
    format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
}

body,
html {
  margin: 0;
  padding: 0;
}

ul,
ol,
dl {
  list-style: none;
  margin: 0;
  padding: 0;
}

#DStop_common2023 img[src$=".png"] {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

#DStop_common2023 {
  position: fixed;
  z-index: 999;
  display: flex !important; 
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  height: 56px;
  #background-color: #f5f5f5;
  font-family: Pretendard;
  font-size: 18px;
}

 
#DStop_common2023 .header-top-mo {
	width: 100%;
	min-width: 300px;	
	top: 0;
	padding: 0px 8px;  
}

/* family site (renew) */
#DStop_common2023 .header-top-mo .family-site-wrap-mo {
  justify-content: flex-end;
  width: 100%;
}
#DStop_common2023 .header-top-mo .family-site-wrap-mo > div {
  display: inline-flex;
  gap: 8px;
  position: relative;
}
.header-top-mo .family-site-wrap-mo > div.header-wrap {
  width: 100%;
  gap: 4px;

}

.header-top-mo .family-site-wrap-mo > div > div {
  height: 56px;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}
.header-top-mo .family-site-wrap-mo > div > div.top-logo-mobile {
  display: flex;
  position: absolute;
  gap: 8px;
  right: 0;
}
.header-top-mo .family-site-wrap-mo > div > div.top-logo-mobile .logo-pop {
  padding: 5px 0px;
}
.header-top-mo .family-site-wrap-mo > div > div.top-logo-mobile .logo-jisatam {
  padding: 5px 5px;
}
.header-top-mo .family-site-wrap-mo > div > div a {
  text-decoration: none;
  position: relative;
  display: flex;
  width: fit-content;
  color: #bdbdbd;
  font-size: 18px;
  white-space: nowrap;
  font-family: Pretendard;
  font-style: normal;
  font-weight: 500;
  #line-height: 56px;
}
.header-top-mo .family-site-wrap-mo > div > div a.selected {
  font-weight: 800;
  margin: 0 4px 0 0;
}
.header-top-mo .family-site-wrap-mo > div > div a.news {
  color: #304ffe;
}
.header-top-mo .family-site-wrap-mo > div > div a.dLibrary {
  #background: linear-gradient(90deg, #13b2d4 0%, #17cae3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-top-mo .family-site-wrap-mo > div > div a.dsstore {
  #background: linear-gradient(90deg, #ff345e 0%, #ff5c7e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-top-mo .family-site-wrap-mo > div > div a.ai {
  color: #5328df;
}
@media (max-width: 355px) {
  .header-top-mo .family-site-wrap-mo > div {
    gap: 4px;
  }
}
.header-top-mo .family-site-wrap-mo::after {
  content: '';
  width: 80px;
  height: 40px;
}
@media (max-width: 768px) {
  .header-top-mo .family-site-wrap-mo::after {
    width: 0;
    height: 1.625rem;
  }
}

/* inner (renew) */
.header-top-mo .header-top-inner-mo {
  padding: 0 8px;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .header-top-mo .header-top-inner-mo {
    height: auto;
  }
}

/* member area */
.header-top-mo .header-top-member-mo {
  justify-content: flex-start;
}
.header-top-mo .header-top-member-mo .member-wrap-mo {
  justify-content: flex-start;
  gap: 12px;
  font-size: var(--sizes);
}

/* small link (utility links) */
.header-top-mo .small-link-mo {
  justify-content: flex-start;
  height: 48px;
}
.header-top-mo .small-link-mo .item-mo {
  justify-content: flex-start;
  font-size: var(--sizes);
}