.gnb-menu,
.gnb-menu div,
.gnb-menu a,
.gnb-menu li,
.gnb-menu span {
  font-family: 'Noto Sans KR', sans-serif !important;
  box-sizing: border-box;
}

.gnb-menu a {
  text-decoration:none;
}

/* 6°³¹è³Ê */
.x3x-cate-banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.x3x-cate-banner a {
  display: inline-block;
  flex: 1;
  width: 100%;
  aspect-ratio: 1 / 1; /* ¹«Á¶°Ç Á¤»ç°¢ */
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.x3x-cate-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Àß¶óµµ Ã¤¿ò */
}

/* ¸ÞÀÎ ¸Þ´º ¹× ·¹À̾î */
.gnb {
  position: relative;
  display: var(--menu-display, block);
  width: var(--menu-width) !important;
  margin: 0 var(--menu-margin, auto);
  z-index: 9999999;
}

.gnb-menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: var(--menu-height) !important;
  margin: 0 auto;
  padding: 0;
  background: var(--menu-bg, transparent);
  border: var(--menu-bd, none);
}

.gnb-item {
  flex-grow: 1;
  position: relative;
}

.gnb-item > a {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 100%;
}

.gnb-item > a div {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

}

.gnb-item:hover > a,
.gnb-item.is-active > a {
  background: var(--menu-bg-active, transparent) !important;
  color: var(--menu-text-color-active, initial) !important;
}

.gnb-item > a .icon {

  width: 22px;
  height: 23px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  transition: background-color .2s;
}

.gnb-item > a .txt {
  font-size: var(--menu-text-size, 16px) !important;
  color: var(--menu-text-color) !important;
  font-weight: var(--menu-text-weight, 400) !important;
}

.gnb-item:hover > a .txt,
.gnb-item.is-active > a .txt{
  color: var(--menu-text-color-active) !important;
}

/* ¸¶Áö¸· border Á¦°Å À¯Áö */
.gnb-menu .gnb-item:last-child > a {
  border-bottom: 0;
}

/* ·¹ÀÌ¾î °øÅë */
.gnb-layer-wrap {
  display: none;
  position: absolute;
  width: var(--menu-width, 100%) !important;
  min-height: var(--menu-height, initial);
  padding: 20px;
  padding-bottom: 0;
  border: 1px solid var(--layer-bordercolor, #d3d3d3) !important;
  border-top: var(--menu-bd-top, #d3d3d3) !important;
  background: var(--menu-bg, #fff);
  z-index: 1000;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.gnb-layer-wrap.is-active {
  display: block;
}

.gnb-layer {
  display: none;
  position: relative;
  box-sizing: border-box;
  min-height: 80px;
  pointer-events: auto;
}

.gnb-layer.is-active {
  display: block;
}

/* ´Ý±â¹öÆ° ±âº» ¼û±è */
.gnb-close {
  display: none;
  position: absolute;
  z-index: 9;
  bottom: 18px;
  right: 18px;
  cursor: pointer;
}

/* click ¹æ½ÄÀÏ ¶§¸¸ ´Ý±â¹öÆ° º¸À̱â */
.gnb[data-layer-event="click"] .gnb-close {
  display: block;
}

.cate-pack {
  --gap: 20px;
  --cols: 6;
  --line-color: #E3E3E3;
  --item-width: calc((100% - (var(--gap) * 5)) / 6);

  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.cate-pack > .cate-group {
  flex: 0 0 var(--item-width);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}


.cate-pack {
  margin: 0 5px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.cate-col {
  flex: 1 1 0;
  min-width: 0;
}

a.cate-title {
  display: block;
  margin-bottom: 10px;
  padding: 8px 0 !important;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 14px !important;
  color: #222;
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  background: url('/images/arrow-more-catetitle.png') no-repeat right 50%;
}

a.cate-title:hover {
  text-decoration: none;
}

.cate-list {
  min-height: 130px;
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}

.cate-list li {
  margin: 0;
  padding: 0;
}

.cate-list li a {
  display: block;
  padding: 4px 0 !important;
  line-height: 1.3;
  text-decoration: none;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px;
  color: #666;
  letter-spacing: -.05em;
  text-align: left;
}

.cate-list li a:hover {
  color: #225ACB;
  font-weight: 500;
}

.cate-list-wrap {
  width: 100%;
}

.cate-list-alone {
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;  /* ¼¼·Î·Î ½×±â */
  flex-wrap: wrap;         /* ³ÑÄ¡¸é ´ÙÀ½ ¿­·Î */
  align-content: flex-start;
  height: 220px;
  gap: 7px 5px;
}

.cate-list-alone li {
  width: calc(100% / 6);
}

.cate-list-alone li a {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px;
  color: #666;
  text-align: left;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.cate-list-alone li a:hover {
  color: #225ACB;
  font-weight: 500;
  text-decoration: none;
}

.delux-listmenu-wrap,
.delux-listmenu-wrap div,
.delux-listmenu-wrap li,
.delux-listmenu-wrap a {
  font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box;
}


.delux-listmenu-wrap {
  width: 1100px;
  margin: 0 auto;
}

.delux-listmenu-wrap .title {
  text-align: center;
  font-size: 30px;
  color: #222;
  font-weight: 500;
  line-height: 320%;
}

.delux-listmenu02 {
  margin-bottom: 20px;
  background: #98b7d7;
  border-radius: 100px;
  padding: 3px;
}

.delux-listmenu02 ul {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.delux-listmenu02 ul li {
  flex: 1 1 auto;
  list-style: none;
  position: relative;
}

/* | »ý¼º */
.delux-listmenu02 ul li::before {
  content: "|";
  position: absolute;
  left: -3px; /* gap Áß¾Ó ¸ÂÃã */
  top: 47%;
  transform: translateY(-50%);
  color: #d7dfe8;
  font-size: 12px;
}

/* ù¹ø°´Â Á¦°Å */
.delux-listmenu02 ul li:first-child::before {
  display: none;
}

/* active º»ÀÎ ¿ÞÂÊ Á¦°Å */
.delux-listmenu02 ul li:has(a.active)::before {
  display: none;
}

/* active ¹Ù·Î ´ÙÀ½ °Íµµ Á¦°Å */
.delux-listmenu02 ul li:has(a.active) + li::before {
  display: none;
}

.delux-listmenu02 ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.04em;
}

.delux-listmenu02 ul li a:hover {
  color: #fff !important;
}

.delux-listmenu02 ul li a.active {
  background: #fff;
  border: 1px solid #E1E8F0;
  border-radius: 100px;
  color: #222;
  font-weight: 500;
}

.delux-listmenu02 ul li a.active:hover {
  color: #222 !important;
}


/* 3Â÷Ä«Å×°í¸® */
.delux-listmenu03 {
  padding: 0 40px 20px;
}

.delux-listmenu03 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 50px;
}

.delux-listmenu03 ul li {
  flex: 0 0 calc((100% - 250px) / 6);
  text-align: left;
}

.delux-listmenu03 ul li a {
  font-size: 14px;
  color: #666;
  line-height: 180%;
  letter-spacing: -0.04em;
}

.delux-listmenu03 ul li a:hover,
.delux-listmenu03 ul li a.active {
  color: #3b76b2;
  font-weight: 500;
}

/* 2Â÷Ä«Å×°í¸® ¾ø´Â Ä«Å×°í¸® */
.delux-listmenu04 {
  margin-bottom: 20px;
  padding: 15px 40px;
  border: 1px solid #dedede;
}

.delux-listmenu04 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 50px;
}


.delux-listmenu04 ul li {
  flex: 0 0 calc((100% - 250px) / 6);
  text-align: left;
}

.delux-listmenu04 ul li a {
  font-size: 14px;
  color: #666;
  line-height: 180%;
  letter-spacing: -0.04em;
}

.delux-listmenu04 ul li a:hover,
.delux-listmenu04 ul li a.active {
  color: #3b76b2;
  font-weight: 500;
}


.xxwrap {
  width: 1025px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
}

.xxwrap .lnb {
  width: 200px;
}

.xxwrap .container {
  flex: 1;
}

:root {
  --lux-color-point: #3b76b2;
}

.lux-listmenu-wrap,
.lux-listmenu-wrap div,
.lux-listmenu-wrap li,
.lux-listmenu-wrap a {
  font-family: 'Noto Sans KR', sans-serif !important;
  box-sizing: border-box;
  text-decoration: none;
}

/* ³×ºñ */
.breadcrumb {
  margin-top: 10px;
  font-size: 13px;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 6px;
  height: 10px;
  margin: 0 10px;
  display: inline-block;

  background-color: #999;

  -webkit-mask: url('/images/icon-arrow.svg') no-repeat center;
  -webkit-mask-size: 100% 100%;

  mask: url('/images/icon-arrow.svg') no-repeat center;
  mask-size: 100% 100%;
  transform: translateY(1px);
}

.breadcrumb__item > span:empty,
.breadcrumb__item > a:empty {
  display: none;
}

.breadcrumb__item:has(> span:empty),
.breadcrumb__item:has(> a:empty) {
  display: none;
}

.breadcrumb__item a {
  font-size: 13px;
  color: #666;
  text-decoration: none;
}

.breadcrumb__item.is-active {
  color: var(--lux-color-point);
  font-weight: 500;
}

.lux-listmenu-wrap .title {
  padding: 20px 0 40px;
  text-align: center;
  font-size: 30px;
  color: #222;
  font-weight: 500;
}

.lux-listmenu02 ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.lux-listmenu02 ul li {
  width: calc((100% - 40px) / 6);
}

.lux-listmenu02 ul li a {
  display: block;
  width: 100%;
  padding: 7px 0 8px;
  border-radius: 7px;
  background: #EFF3F7;
  border: 1px solid #dedede;
  text-align: center;
  font-size: 13px;
}

.lux-listmenu02 ul li a:hover {
  color: var(--lux-color-point);
  font-weight: 500 !important;
}

.lux-listmenu02 ul li a.active {
  background: var(--lux-color-point);
  color: #fff;
  border: 1px solid var(--lux-color-point);
}

.lux-listmenu03 {
  margin: 20px 0;
  padding: 10px 0 10px 30px;
  border: 1px solid #dedede;
}

.lux-listmenu04 {
  margin-bottom: 20px;
  padding: 10px 0 10px 30px;
  border: 1px solid #dedede;
}


.lux-listmenu03 ul,
.lux-listmenu04 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.lux-listmenu03 ul li,
.lux-listmenu04 ul li {
  flex: 0 0 calc((100% - 25px) / 5);
  text-align: left !important;
}

.lux-listmenu03 ul li a,
.lux-listmenu04 ul li a {
  font-size: 13px;
  color: #666;
  line-height: 180%;
  letter-spacing: -0.04em;
}

.lux-listmenu03 ul li a:hover,
.lux-listmenu04 ul li a:hover {
  color: var(--lux-color-point);
}

.lux-listmenu03 ul li a.active,
.lux-listmenu04 ul li a.active {
  color: var(--lux-color-point);
  font-weight: 500;
}


.x-open-wrap {
  position: relative;
}

.x-open-btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.x-open-layer {
  min-width: 200px;
  background: #fff;
  box-sizing: border-box;
}

.x-open-close {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}