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


html.noScroll {
  overflow: hidden;
}


/* gnb basic layout */

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

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: 66px;
}

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

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

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

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

header .headerGnb .headerInner ul.gnb li a {
  display: block;
  padding: 10px;
  color: var(--Greyscale9);
  text-align: center;
}

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: 2px;
  background: var(--Primary);
}

header .headerGnb .headerInner ul.gnb li>ul.lnb {
  padding: 8px 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;
}

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

header .gnbItemBox a {
  display: block;
  width: 24px;
  height: 24px;
}

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

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

.mBtn .bar {
  margin: 5px auto;
  height: 2px;
  background: var(--Greyscale9);
  transition: all ease-in-out .3s;
}

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

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

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

@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 .3s;
    z-index: 990;
  }

  .headerGnb.active {
    width: 460px !important;
  }

  .headerGnb .headerInner {
    margin-top: 79px;
    padding: 0 16px 16px;
    flex-direction: column-reverse !important;
    align-items: center;
    justify-content: start;
    gap: 16px;
    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: 25px 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: 24px;
}

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

header .udBox .gnbItemBox .snsBox a {
  display: block;
  width: 24px;
  height: 24px;
}

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

header .udBox .headerGnb .headerInner {
  padding: 18px 0;
}

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

@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: 32px;
  }
}

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



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



/* fnb basic layout */

footer {
  border-top: 1px solid var(--Greyscale4);
}

footer img.fnbLogo {
  width: 100px;
}

footer .btwBox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

footer.basic .btwBox>.container {
  padding-top: 24px;
}

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

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

footer .copyRight {
  margin-top: 8px;
}

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

footer .termsBox {
  padding: 24px 0;
  border-bottom: 1px 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: 50px 0;
}

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

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

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

  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: 120px;
}

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: 16px;
  }

  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: 1px 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 - 1px);
  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: 50px;
}

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

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

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

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

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

footer .snsBox a {
  display: block;
  width: 24px;
  height: 24px;
}

footer.fnbSlc .fnbCItem {
  padding: 24px 0 50px;
  align-items: flex-end;
}

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

  footer.fnbSlc .fnbAItem .container {
    margin-top: 24px;
    gap: 8px;
  }

  footer.fnbSlc .selectWrap {
    width: calc(100% / 2 - 6px);
    border: 1px 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: 16px !important;
  }
}



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



/* App Bar basic layout */

.wrapper.mobile {
  margin: 0 auto;
  max-width: 640px;
}

.AppBar {
  padding: 0;
  height: 60px;
  background: #fff;
  border-bottom: none;
}

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


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

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

.hamBtn .bar {
  margin: 7px auto;
  height: 2px;
  background: var(--Greyscale9);
  transition: all ease-in-out .3s;
}

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

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

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

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

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

.AppBarSnb .AppBarInner {
  margin-top: 79px;
  padding: 0 16px 16px;
  box-sizing: border-box;
}

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

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



/* 앱바 스타일2 */

.AppBar .container .leftItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}



/* 앱바 스타일3 */

.AppBar .container .rightItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}



/* 앱바 스타일4 */

.AppBar .inputField .searchBox input {
  border-radius: 50px;
}



/* 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: 3px;
  padding: 8px;
  width: 100%;
}

.bottomAppBar a img {
  width: 24px;
  height: 24px;
}

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

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