/* 로고 */
body.white .header-logo svg g{
  fill: var(--white);
}

body.black .header-logo svg g{
  fill: var(--black);
}

/* 헤더메뉴 */
body.black .header-left__menu li:not(:last-child) a{
  color: var(--black);
}

body.white .header-left__menu li:not(:last-child) a{
  color: var(--white);
}

body.black .header-left__menuIcon svg *,
body.black .header-etc li svg *,
body.black .header-menu__close svg *{
  stroke: var(--black);
}

body.white .header-left__menuIcon svg *,
body.white .header-etc li svg *,
body.white .header-menu__close svg *{
  stroke: var(--white);
}

/* 배경 */
body.blackMenu .header-menu.active{
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 100%);
  visibility: visible;
  opacity: 1;
}

body.whiteMenu .header-menu.active{
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.3) 100%);
  visibility: visible;
  opacity: 1;
}

/* 타이틀 */
body.blackMenu .menu-list{
  color: var(--white);
}

body.whiteMenu .menu-list{
  color: var(--black);
}

/* 메뉴 */
body.blackMenu .menu-item a{
  color: var(--white);
}

body.whiteMenu .menu-item a{
  color: var(--black);
}

/* 사이드하단메뉴 */
body.blackMenu .menu-etc a{
  display: block;
  color: var(--white);
  font-size: var(--font-size-XL);
  margin: 20px 0;
  cursor: pointer;
}

body.whiteMenu .menu-etc a{
  display: block;
  color: var(--black);
  font-size: var(--font-size-XL);
  margin: 20px 0;
}


.header-wrap{
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left{
  display: flex;
  align-items: center;
  gap: 40px;
  flex-basis: 50%;
}

.header-left__menu.off{
  visibility: hidden;
}

.header-left__menu{
  display: flex;
  gap: 40px;
  flex-basis: 1;
  font-size: var(--font-size-S);
}

.header-left__menu li:last-child a{
  color: var(--main);
}

.header-logo svg{
  width: 90px;
  height: auto;
}

.header-etc{
  display: flex;
  flex-basis: 50%;
  justify-content: flex-end;
  cursor: pointer;
  gap: 20px;
}

/* 사이드메뉴 */
.header-menu{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  box-sizing: border-box;
  padding: 20px;
  transition: all 1s;
  visibility: hidden;
  opacity: 0;
}

.header-menu__bg{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.menu-inner{
  overflow-y: auto;
  width: 50%;
  height: 100%;
  position: relative;
}

.menu-inner::-webkit-scrollbar{
  display: none;
}

.header-menu .header-menu__close{
  cursor: pointer;
  margin-top: 6px;
}

.header-menu .menu-list{
  display: block;
  margin: 40px 0;
  opacity: 0.85;
  cursor: pointer;
}

.header-menu .menu-list__title{
  font-size: var(--font-size-Menu);
  font-weight: normal;
}

.header-menu .menu-list:last-child{
  color: var(--main);
}

.header-menu ol{
  transition: all .4s;
  overflow: hidden;
}

.header-menu .menu-item a{
  font-size: var(--font-size-SubMenu);
  opacity: 0.8;
  cursor: pointer;
  padding: 10px 0;
  display: block;
}

.header-menu .menu-list a:hover,
.header-menu .menu-item a:hover{
  opacity: 1;
}

.header-search{
  transform: translateY(-100%);
  transition: all .4s;
  background-color: var(--white);
  width: 100%;
  position: fixed;
  z-index: 999;
}

.header-search.active{
  transform: translateY(0);
}

.header-search .search-inner{
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

.search-content__closeButton{
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.search-content{
  margin: 0 auto;
  max-width: 500px;
  position: relative;
}

.search-content input{
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
  padding: 10px;
  height: 40px;
  box-sizing: border-box;
}

.search-content__searchButton{
  position: absolute;
  right: 0;
  cursor: pointer;
}

.search-tag{
  max-width: 500px;
  text-align: left;
}

.search-tag a{
  display: inline-block;
  padding: 10px;
  border-radius: 50px;
  font-size: var(--font-size-XS);
  background-color: var(--main);
  color: var(--white);
  margin-top: 20px;
}

.search-tag a:not(a:last-child){
  margin-right: 10px;
}

/* footer */
#footer{
  width: 100%;
  height: auto;
  background-color: var(--grayf5);
  position: relative;
  z-index: 888;
}

.footer-inner{
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  position: relative;
}

.footer-logo__gray{
  position: absolute;
  right: 20px;
  width: 130px;
}

.footer-logo__black{
  display: none;
}

.footer-menu{
  display: flex;
  gap: 50px;
}

.footer-menu__title{
  font-size: var(--font-size-XS);
  font-weight: bold;
}

.footer-menu__title:first-child{
  margin-right: 50px;
}

.footer-menu__item{
  font-size: var(--font-size-XS);
  font-weight: normal;
  color: var(--gray);
}

.footer-menu__item:first-child{
  margin-top: 20px;
}

.footer-menu__item{
  margin-top: 10px;
}

.footer-address{
  font-size: 10px;
  margin-top: 50px;
  font-family: Noto Sans KR;
  opacity: 0.5;
  line-height: 1.5;
}

.footer-bold{
  font-weight: bold;
  margin-right: 5px;
}

@media screen and (max-width:1100px) {
  .header-left__menu li{
    font-size: var(--font-size-XS);
  }
}

@media screen and (max-width:900px) {
  
  .header-menu__bg{
    display: none;
  }

  .menu-inner{
    width: 100%;
  }
  
  .header-left__menu{
    display: none;
  }
  
  .header-etc li:first-child,
  .header-etc li:nth-child(2){
    display: none;
  }

  .search-content__closeButton{
    display: none;
  }

  /* footer */
  .footer-logo__gray{
    display: none;
  }

  .footer-logo__black{
    display: block;
    width: 80px;
  }

  .footer-menu {
    flex-direction: column;
    margin-top: 50px;
  }

  .footer-menu__item:first-child {
    margin-top: 10px;
  }

  .footer-menu__item{
    margin-top: 5px;
  }

}