/* ========================================================================
   GNB Component Basic Style
========================================================================== */

html.noScroll {
  overflow: hidden;
}

/* gnb basic layout */

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

header .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

h1.logo {
  z-index: 980;
}

h1.logo a {
  display: block;
  width: 4.125rem;
}

h1.logo a img {
  width: 100%;
}

header .headerGnb {
  border-bottom: 0.0625rem solid var(--Greyscale2);
}

header .headerGnb .headerInner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4rem;
}

/* vasanta cms에만 추가된 스타일 */

header .headerGnb .headerInner ul.gnb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* header .headerGnb .headerInner ul.gnb li {
  position: relative;
} */

header .headerGnb .headerInner ul.gnb li a {
  display: block;
  padding: 0.625rem;
  color: var(--Greyscale9);
  text-align: left;
}

header .headerGnb .headerInner ul.gnb li:hover > a {
  color: var(--Primary);
}

header .headerGnb .headerInner ul.gnb > li:hover::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 0.125rem;
  background: var(--Primary);
}

header .headerGnb .headerInner ul.gnb li > ul.lnb {
  padding: 0.5rem 0;
  display: none;
  position: absolute;
  left: 0;
  width: max-content;
  min-width: 100%;
  background: #fff;
}

/* header .headerGnb .headerInner ul.gnb li:hover ul.lnb {
  display: block;
} */

/* vasanta cms에만 추가된 스타일 끝 */

header .gnbItemBox,
header .headerInner .rightItem > .gnbItemBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

header .gnbItemBox a {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

header .gnbItemBox a.searchBtn {
  position: unset;
  transform: unset;
}

.mBtn {
  display: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  z-index: 999;
  flex-shrink: 0;
}

.mBtn .bar {
  margin: 0.3125rem auto;
  height: 0.125rem;
  background: var(--Greyscale9);
  transition: all ease-in-out 0.3s;
}

.mBtn.active .bar:nth-child(1) {
  background: var(--Greyscale9);
  transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
}

.mBtn.active .bar:nth-child(2) {
  opacity: 0;
}

.mBtn.active .bar:nth-child(3) {
  background: var(--Greyscale9);
  transform: rotate(-45deg) translate(0.3125rem, -0.3125rem);
}

@media (max-width: 960px) {
  .headerGnb {
    position: fixed;
    top: 0;
    right: 0;
    width: 0 !important;
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: #fff;
    overflow-x: hidden;
    transition: all ease-out 0.3s;
    z-index: 990;
  }

  /* .headerGnb.active {
    width: 28.75rem !important;
  } */

  .headerGnb .headerInner {
    margin-top: 4.9375rem;
    padding: 0 1rem 1rem;
    flex-direction: column-reverse !important;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .headerGnb .headerInner .gnb {
    flex-direction: column !important;
  }

  .mBtn {
    display: block;
  }

  header .headerGnb .headerInner ul.gnb > li:hover::after {
    content: unset;
  }

  header .headerGnb .headerInner ul.gnb li ul.lnb {
    position: unset;
  }

  header .headerGnb .headerInner ul.gnb li:hover ul.lnb {
    display: none;
  }
}

@media (max-width: 640px) {
  .headerGnb.active {
    width: 100% !important;
  }
}

/* 상단 네비게이션 스타일 */

header .udBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

header .headerTop {
  padding: 1.5625rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

header .udBox .gnbItemBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

header .udBox .gnbItemBox .snsBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

header .udBox .gnbItemBox .snsBox a {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

header .udBox .headerGnb {
  width: 100%;
  border-top: 0.0625rem solid var(--Greyscale4);
  border-bottom: 0.0625rem solid var(--Greyscale4);
}

header .udBox .headerGnb .headerInner {
  padding: 1.125rem 0;
}

header .udBox .headerGnb .headerInner.center {
  justify-content: center;
}

.headerGnb .mblHdr {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  height: 3rem;
  font-size: 0.9375rem;
}

.headerGnb .mblHdr li::after {
  content: "|";
  display: inline-block;
  padding-left: 1rem;
  font-size: 1.125rem;
  color: var(--Greyscale4);
}

.headerGnb .mblHdr li:last-child:after {
  display: none;
}

.headerGnb .mblHdr .selectric {
  min-height: unset;
  padding-right: 2rem;
}

.headerGnb .mblHdr .selectric .label {
  font-size: 0.9375rem;
}

.headerGnb .mblHdr .selectric .button {
  width: 2rem;
}

@media (min-width: 960px) {
  .headerGnb .mblHdr {
    display: none;
  }
}

@media (max-width: 960px) {
  header .headerTop {
    padding: 0;
  }

  header .udBox {
    flex-direction: row;
    align-items: center;
  }

  header .udBox .gnbItemBox {
    display: none;
  }

  header .udBox .headerGnb {
    width: 0;
    border: none;
  }

  header .mBtn {
    position: absolute;
    right: 2rem;
  }
}

@media (max-width: 768px) {
  header .mBtn {
    position: absolute;
    right: 1rem;
  }
}

/* ========================================================================
   FNB Component Basic Style
 ========================================================================== */

/* fnb basic layout */

footer {
  border-top: 0.0625rem solid var(--Greyscale4);
  background-color: #fff;
}

footer img.fnbLogo {
  width: 6.25rem;
}

footer .btwBox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
footer.basic .btwBox > .container {
  padding-top: 1.5rem;
}

footer .btwBox .leftItem,
footer .btwBox .rightItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

footer .infoTxtBox p {
  color: var(--Greyscale9);
  font-size: 1rem;
  font-weight: 400;
  word-break: keep-all;
  word-wrap: break-word;
}

footer .copyRight {
  margin-top: 0.5rem;
}

footer .termsBox,
footer .termsBox .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.875rem;
  flex-wrap: wrap;
}

footer .termsBox {
  padding: 1.5rem 0;
  border-bottom: 0.0625rem solid var(--Greyscale4);
}

footer .termsBox .container.center {
  justify-content: center;
}

footer .termsBox a {
  display: block;
  color: var(--Greyscale9);
  font-weight: 600;
}

footer .termsBox a.privacy {
  color: var(--Primary);
}

footer .conBox {
  padding: 3.125rem 0;
}

@media (max-width: 960px) {
  footer .btwBox {
    flex-direction: column;
    gap: 1rem;
  }

  footer .btwBox .leftItem,
  footer .btwBox .rightItem {
    flex-direction: column-reverse;
    gap: 1rem;
    width: 100%;
    height: auto !important;
  }

  footer .termsBox,
  footer .termsBox .container,
  footer .termsBox .container.center {
    justify-content: space-around;
    gap: 0.5rem;
  }

  footer .btwBox .rightItem .selectWrap {
    width: 100%;
  }

  footer .btwBox .rightItem .selectWrap .selectric-wrapper {
    min-width: unset;
  }
}

@media (max-width: 460px) {
  footer .termsBox,
  footer .termsBox .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* fnbSty */

footer.fnbSty .btwBox .leftItem,
footer.fnbSty .btwBox .rightItem {
  height: 7.5rem;
}

footer.fnbSty .termsBox {
  padding: 0;
  border-bottom: none;
}

footer.fnbSty .termsBox a.privacy {
  color: var(--Primary);
}

footer.fnbSty .btwBox .rightItem .selectWrap {
  align-self: flex-end;
}

footer.fnbSty .btwBox .rightItem .selectWrap .selectric {
  background: transparent;
}

@media (max-width: 960px) {
  footer.fnbSty .btwBox {
    flex-direction: column-reverse;
  }

  footer.fnbSty .btwBox .leftItem,
  footer.fnbSty .btwBox .rightItem {
    gap: 1rem;
  }

  footer.fnbSty .btwBox .leftItem {
    flex-direction: column;
  }
}

/* fnbSty  fnbSlc */

footer.fnbSlc {
  padding-top: 0;
}

footer.fnbSlc .leftItem,
footer.fnbSlc .rightItem {
  height: unset !important;
}

footer.fnbSlc .fnbAItem {
  border-bottom: 0.0625rem solid var(--Greyscale4);
}

footer.fnbSlc .fnbAItem > .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

footer.fnbSlc .selectWrap {
  display: inline-block;
  width: calc(100% / 4 - 0.0625rem);
  border-right: 1px solid var(--Greyscale4);
}

footer.fnbSlc .selectWrap:last-child {
  border-right: 0;
}

footer.fnbSlc .selectWrap .selectric {
  background: transparent;
  border: none;
  border-radius: 0;
}

footer.fnbSlc .fnbBItem {
  padding-top: 3.125rem;
}

footer.fnbSlc .fnbBItem .termsBox {
  gap: unset;
}

footer.fnbSlc .termsBox li {
  display: flex;
}

footer.fnbSlc .termsBox li::after {
  padding: 0 1.875rem;
  display: inline-block;
  content: "│";
  color: var(--Greyscale4);
  font-size: 0.75rem;
  vertical-align: middle;
}

footer.fnbSlc .termsBox li:last-child:after {
  content: none;
}

footer .snsBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

footer .snsBox a {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

footer.fnbSlc .fnbCItem {
  padding: 1.5rem 0 3.125rem;
  align-items: flex-end;
}

@media (max-width: 960px) {
  footer.fnbSlc .fnbAItem {
    border-bottom: none;
  }

  footer.fnbSlc .fnbAItem .container {
    margin-top: 1.5rem;
    gap: 0.5rem;
  }

  footer.fnbSlc .selectWrap {
    width: calc(100% / 2 - 0.375rem);
    border: 0.0625rem solid var(--Greyscale6) !important;
  }

  footer.fnbSlc .fnbBItem {
    flex-direction: column;
  }

  footer.fnbSlc .fnbBItem .leftItem,
  footer.fnbSlc .fnbBItem .rightItem {
    flex-direction: column;
  }

  footer.fnbSlc .fnbBItem .termsBox {
    justify-content: space-around;
  }

  footer.fnbSlc .fnbBItem .termsBox,
  footer .snsBox {
    width: 100%;
  }

  footer.fnbSlc .termsBox li::after {
    content: none;
  }

  footer .snsBox {
    justify-content: space-around;
  }
}

@media (max-width: 640px) {
  footer.fnbSlc .selectWrap {
    width: 100%;
  }

  footer.fnbSlc .termsBox,
  footer.fnbSlc .termsBox .container {
    flex-direction: row;
    justify-content: space-around;
  }
}

@media (max-width: 460px) {
  footer.fnbSlc .termsBox,
  footer.fnbSlc .termsBox .container {
    justify-content: flex-start !important;
    gap: 1rem !important;
  }
}

/* ========================================================================
   Mobile App Bar Component Basic Style
 ========================================================================== */

/* App Bar basic layout */

.wrapper.mobile {
  margin: 0 auto;
  max-width: 40rem;
}

.AppBar {
  padding: 0;
  height: 3.75rem;
  background: #fff;
  border-bottom: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* padding: 0 16px; */
}

.AppBar .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.AppBar > h1.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hamBtn {
  position: sticky;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  z-index: 999;
  flex-shrink: 0;
}

.hamBtn .bar {
  margin: 0.4375rem auto;
  height: 0.125rem;
  background: var(--Greyscale9);
  transition: all ease-in-out 0.3s;
}

.hamBtn.active .bar:nth-child(1) {
  background: var(--Greyscale9);
  transform: rotate(45deg) translate(0.5rem, 0.5rem);
}

.hamBtn.active .bar:nth-child(2) {
  opacity: 0;
}

.hamBtn.active .bar:nth-child(3) {
  background: var(--Greyscale9);
  transform: rotate(-45deg) translate(0.3125rem, -0.3125rem);
}

.AppBarSnb {
  position: fixed;
  top: 0;
  left: -100%;
  width: 50% !important;
  height: 100%;
  background: #fff;
  overflow-x: hidden;
  transition: all ease-out 0.3s;
  z-index: 999;
  overflow: hidden;
  box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.2);

  @supports (-webkit-appearance: none) {
    height: calc(var(--vh, 1vh) * 100);
  }
}

.AppBarSnb.active {
  width: 50% !important;
  left: 0;
}

.rightItem .AppBarSnb {
  left: unset;
  right: -100%;
}

.rightItem .AppBarSnb.active {
  left: unset;
  right: 0;
}

.AppBarSnb .hamBtn {
  padding: 1rem;
}

.rightItem .AppBarSnb .hamBtn {
  position: absolute;
  right: 0;
}

.AppBarSnb .AppBarInner {
  margin-top: 2rem;
  padding: 0 1rem 1rem;
  box-sizing: border-box;
}

.AppBarSnb .AppBarInner .snb {
  display: flex;
  flex-direction: column;
}

.AppBarSnb .AppBarInner .snb a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: var(--Greyscale9);
  font-size: 1.125rem;
  padding: 0.625rem 0;
}

.AppBarSnb .AppBarInner .snb a.active {
  color: var(--Primary);
}

.AppBarSnb .AppBarInner .snb .toggle a > img {
  filter: invert(95%) sepia(11%) saturate(93%) hue-rotate(159deg)
    brightness(90%) contrast(86%);
}

.AppBarSnb .AppBarInner .snb .toggle a.active > img {
  transform: rotate(180deg);
  filter: invert(62%) sepia(4%) saturate(4503%) hue-rotate(102deg)
    brightness(108%) contrast(95%);
}

.AppBarSnb .AppBarInner .snb .lnb {
  display: none;
  padding-left: 10px;
}

.rightItem .AppBarSnb .AppBarInner {
  margin-top: 5.5rem;
}

@media (max-width: 640px) {
  .AppBarSnb.active {
    width: 100% !important;
  }
}

/* 앱바 스타일2 */

.AppBar .leftItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

/* 앱바 스타일3 */

.AppBar .rightItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

/* 앱바 스타일4 */

.AppBar .inputField .searchBox input {
  border-radius: 3.125rem;
}

/* Bottom App Bar basic layout */

.bottomAppBar {
  /* position: fixed;
  left: 0;
  bottom: 0; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  z-index: 999;
}

.bottomAppBar a {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0.5rem;
  width: 100%;
}

.bottomAppBar a img {
  width: 1.5rem;
  height: 1.5rem;
}

.bottomAppBar a span {
  display: block;
  color: var(--Greyscale6);
  font-size: 0.6875rem;
  font-weight: 400;
  text-align: center;
}

.bottomAppBar a.active span {
  color: var(--Primary);
}