@charset "utf-8";

:root {
}

.mainBox {
  margin: auto auto; width: 100vw; height: 100vh; position: relative;
}
.mainBox > div {
  width: 100vw; height: 100vh; overflow: hidden; position: absolute;
}
.mainBox > div > .logo {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.mainBox > div > .logo img {
  width: 45vw;
}
.mainBox > div > .left {
  height: 100vh; position: absolute; z-index: 1; top: 0; left: 0;
}
.mainBox > div > .left img {
  max-height: 100%;
}
.mainBox > div > .right {
  height: 100vh; position: absolute; z-index: 1; top: 0; right: 0;
}
.mainBox > div > .right img {
  max-height: 100%;
}
.mainBox > div > .menu {
  position: absolute; z-index: 3; bottom: 30px; left: 50%; transform: translate(-50%, 0); width: 100vw;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.mainBox > div > .menu > div {
  margin: 10px 20px;
}
.mainBox > div > .menu > div img {
  max-height: 40px;
  transition: transform 0.3s, opacity 0.3s; transform-origin: center bottom; opacity: 1;
}
.mainBox > div > .menu > div img:hover {
  transform: scale(1.3, 1.3); opacity: 0.5;
}

@media only screen and (max-width:1080px) {
  .mainBox > div > .logo {
    transform: translate(-50%, -100%);
  }
  .mainBox > div > .left {
     transform: translate(-5%, 0);
  }
  .mainBox > div > .left img {
    max-height: 80%;
  }
  .mainBox > div > .right {
     transform: translate(5%, 0);
  }
  .mainBox > div > .right img {
    max-height: 80%;
  }
  .mainBox > div > .menu {
    transform: translate(-50%, -100px);
  }
}
@media only screen and (max-width:860px) {
  .mainBox > div > .logo {
    transform: translate(-50%, -130%);
  }

  .mainBox > div > .left {
     transform: translate(-10%, 0);
  }
  .mainBox > div > .left img {
    max-height: 80%;
  }
  .mainBox > div > .right {
     transform: translate(10%, 0);
  }
  .mainBox > div > .right img {
    max-height: 80%;
  }
  .mainBox > div > .menu {
    transform: translate(-50%, -120px);
  }
  .mainBox > div > .menu > div {
    margin: 20px;
  }
  .mainBox > div > .menu > div img {
    max-height: 28px;
  }
}
@media only screen and (max-width:680px) {
  .mainBox > div > .logo img {
    width: 80vw;
  }
}
@media only screen and (max-width:500px) {
  .mainBox > div > .logo {
    transform: translate(-50%, -200%);
  }
}