@charset "utf-8";

:root {
  --menuBg: #567249;
  --menuBgHide: rgba(100, 116, 87, 0.9);

  --homeFontColor: #fff;
  --homeFontSizeTitle: 24px;
  --homeFontSize: 16px;

  --footerFontColor: #fff;
  --footerFontSize: 14px;
}

.siteBg {
  background-size: cover; background-repeat: no-repeat; background-position: center top; overflow: hidden;
  width: 100vw; height: 100vh; position: relative; display: none;
}
.siteBg img {
  width: 100%; opacity: 0;
}
.siteContent {
  width: 100vw; height: 100vh; position: absolute; z-index: 2; overflow: auto; scroll-behavior: smooth;
}
.siteContent > div {
  display: block;
}



.topContent {
  width: 100%; padding: 20px 40px; position: fixed; z-index: 3; display: flex;
  transition: background 0.3s, margin 0.3s, padding 0.3s, box-shadow 0.3s;
}
.topContent.hide {
  width: 100%; padding: 10px 10px 10px 10px; position: fixed; z-index: 3; display: flex;
  background: var(--menuBg); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.topContent > .logo {
  width: 160px; cursor: pointer;
}
.topContent > .logo img {
  max-width: 100%;
}
.topContent.hide > .logo {
  width: 100px;
}

.mainMenu {
  margin: 60px 20px 20px 20px; position: fixed; left: 50%; transform: translate(-50%, 0);
  transition: background 0.3s, margin 0.3s;
}
.topContent.hide > .mainMenu {
  margin: 5px 0 0 0;
}
.mainMenu > .items {
  display: flex; height: 100%; padding: 0; align-items: center; justify-content: center;
}
.mainMenu > .items > div {
  position: relative; cursor: pointer; padding: 0 20px;
}
.mainMenu > .items > div img {
  max-height: 34px;
  transition: transform 0.3s, opacity 0.3s; transform-origin: center center; opacity: 1;
}
.topContent.hide > .mainMenu > .items > div img {
  max-height: 28px;
}
.mainMenu > .items > div img:hover {
  transform: scale(1.3, 1.3); opacity: 0.5;
}
.mainMenu > .toggle {
  display: none;
}
.mainMenu > .toggle img {
  height: 40px; margin: 5px 0 0 20px; position: fixed; z-index: 4; top: 0; right: 100px; cursor: pointer;
}
.mainMenu > .toggle > .menu, .mainMenu.active > .toggle > .close {
  display: block;
}
.mainMenu.active > .toggle > .menu, .mainMenu > .toggle > .close {
  display: none;
}
.middleContent {
  padding: 140px 80px 0 80px; min-height: 600px;
}

@media only screen and (max-width:1080px) {
  .topContent {
    width: 100%; padding: 10px 10px 10px 10px; position: fixed; z-index: 3; display: flex;
    background: var(--menuBg); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  }
  .topContent > .logo {
    width: 100px;
  }
  .topContent > .mainMenu {
    margin: 5px 0 0 0;
  }
  .topContent > .mainMenu > .items > div img {
    max-height: 28px;
  }
  .middleContent {
    padding: 80px 80px 0 80px;
  }
}
@media only screen and (max-width:860px) {
  .mainMenu {
    left: 0; right: 0; top: 0; transform: translate(0, 0);
  }
  .mainMenu > .items {
    position: fixed; z-index: 3; margin: 0; padding: 0; top: 0; left: 100vw; width: 100%; height: 100vh; margin: auto auto; background: var(--menuBgHide); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    display: block; padding: 100px 40px 40px 40px;
    transition: opacity 0s 0.4s ease-in, left 0.4s ease-in; opacity: 0;
  }
  .mainMenu.active > .items {
		visibility: visible; opacity: 1; left: 0; background: var(--menuBgHide); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
		transition: opacity 0s 0s ease-in, left 0.4s ease-in;
	}
  .mainMenu > .items > div {
    padding: 20px 0; text-align: center;
  }
  .mainMenu > .items > div::before {
    top: 60px;
  }
  .mainMenu > .items > div img, .topContent > .mainMenu > .items > div img, .topContent.hide > .mainMenu > .items > div img {
    max-height: 40px;
  }
  .mainMenu > .toggle {
    display: block;
  }
  .middleContent {
    padding: 80px 40px 0 40px;
  }
}
@media only screen and (max-width:720px) {
  .middleContent {
    padding: 80px 20px 0 20px;
  }
}




.footer {
  color: var(--footerFontColor); font-size: var(--footerFontSize); text-align: center; margin: 60px 0 60px 0;
}