header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 99;
  top: 0;
}
header.active {
  color: #365cb3;
}
header .navi {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
header .navi.scrolled {
  background-color: rgba(255, 255, 255, 0.801);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(50px);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
header .navi.scrolled .gnb {
  width: 1320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header .navi.scrolled .gnb .depth1UlLeft span,
header .navi.scrolled .gnb .depth2UlRight span {
  color: #000;
}
header .navi.scrolled .gnb ul li.active {
  color: #365cb3;
}
header .navi.scrolled .gnb ul li:hover span {
  color: #365cb3;
}
header .navi.scrolled .gnb .logoLeft {
  background-image: url(../images/logoBlack.svg);
  background-repeat: no-repeat;
  width: 180px;
  height: 50px;
}
header .gnb {
  width: 1320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header .gnb .logoLeft {
  margin-top: 8px;
  width: 160px;
  height: 50px;
  background-image: url(../images/logoWhite.svg);
  background-repeat: no-repeat;
}
header .gnb .depth1UlLeft span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .gnb .depth2UlRight .menuButtonWrap {
  gap: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .gnb .depth2UlRight .menuButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40px;
  height: 40px;
  background-image: url(../images/topMenu.svg);
  background-repeat: no-repeat;
  background-position: center;
}
header .gnb .depth2UlRight span {
  font-size: 14px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
header .gnb ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 60px;
}
header .gnb ul li {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
header .gnb ul li:hover span {
  color: #84a9ff;
}
header .gnb ul li:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

footer {
  width: 100%;
  height: auto;
  background-color: #333333;
}
footer .footerBottom {
  background-color: #292929;
}
footer .footerBottom .copyright {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px 0;
}
footer .footerBottom .copyright span {
  color: #999;
  font-weight: 300;
  font-size: 14px;
}
footer .footerContents .footerLinkWrap {
  max-width: 1320px;
  height: auto;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 0;
}
footer .footerContents .footerLinkWrap .footerMiddle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
footer .footerContents .footerLinkWrap .footerMiddle .teamLogo {
  width: 150px;
  height: 50px;
  background-image: url(../images/logoWhite.svg);
  background-repeat: no-repeat;
  background-position: center;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo {
  margin-top: 20px;
  color: #999;
  font-size: 14px;
  text-align: center;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li {
  position: relative;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li a, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li a {
  color: #ebebeb;
  font-size: 16px;
  text-decoration: underline;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li a:hover, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li a:hover {
  color: #fff;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li:first-child span::before, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li:first-child span::before {
  display: none;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li:first-child a::before, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li:first-child a::before {
  display: none;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li span, footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li a, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li span, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li a {
  display: block;
  margin: 0 0 10px 10px;
  padding-left: 10px;
}
footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li span::before, footer .footerContents .footerLinkWrap .footerMiddle .locationInfo ul li a::before, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li span::before, footer .footerContents .footerLinkWrap .footerMiddle .anotherHpinfo ul li a::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 10px;
  width: 1px;
  height: 16px;
  background-color: #585858;
}
footer .footerContents .footerLinkWrap .LinkWrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
footer .footerContents .footerLinkWrap .LinkWrap ul li a {
  color: #fff;
  font-size: 16px;
}

.rightNavWrap {
  display: none;
}
.rightNavWrap.active {
  display: block;
}
.rightNavWrap .rightNav {
  position: fixed;
  z-index: 99;
  top: 19%;
  right: 0%;
}
.rightNavWrap .rightNav ul li {
  position: relative;
  width: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.rightNavWrap .rightNav ul li .returnTop {
  font-size: 30px;
  background-color: #1b3b86;
}
.rightNavWrap .rightNav ul li .returnTop:hover {
  background-color: #2b4fa5;
}
.rightNavWrap .rightNav ul li a {
  color: #fff;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  background-color: #535353;
  padding: 20px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 60px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.rightNavWrap .rightNav ul li a.moveA svg {
  width: 40px;
  height: 40px;
  fill: #fff;
  background-position: center;
  background-repeat: no-repeat;
}
.rightNavWrap .rightNav ul li a.moveA svg.intro {
  background-image: url(../images/introIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.schedule {
  background-image: url(../images/scheduleIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.subcom {
  background-image: url(../images/subcomIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.active {
  background-image: url(../images/activeIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.donate {
  background-image: url(../images/donateIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.board {
  background-image: url(../images/boardIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA svg.donationStatus {
  background-image: url(../images/donationStatusIcon.svg);
}
.rightNavWrap .rightNav ul li a.moveA span {
  color: #fff;
  display: none;
}
.rightNavWrap .rightNav ul li a.moveA:hover {
  width: 150px;
  background-color: #1b3b86;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.rightNavWrap .rightNav ul li a.moveA:hover span {
  display: block;
}