html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: border-box; }

body {
  color: #fff;
  letter-spacing: normal;
  background: #2c3339;
  overflow: hidden;
  margin: 0; }

main {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  padding: 5vw; }
  main .contentBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  main .logoBox {
    transform: translateY(2.5rem);
    opacity: 0; }
    main .logoBox img {
      width: 100%;
      height: auto;
      max-width: 30vw; }
      @media only screen and (min-width: 1800px) {
        main .logoBox img {
          max-width: 25vw; } }
      @media only screen and (max-width: 1024px) {
        main .logoBox img {
          max-width: 45vw; } }
      @media only screen and (max-width: 767px) {
        main .logoBox img {
          max-width: 70vw; } }
  main .coming {
    transform: translateY(2.5rem);
    opacity: 0; }
    main .coming img {
      width: 100%;
      height: auto;
      max-width: 27vw; }
      @media only screen and (min-width: 1800px) {
        main .coming img {
          max-width: 22vw; } }
      @media only screen and (max-width: 1024px) {
        main .coming img {
          max-width: 45vw; } }
      @media only screen and (max-width: 767px) {
        main .coming img {
          max-width: 70vw; } }
  main .coming {
    margin-top: 8vh; }
    @media only screen and (max-width: 1024px) {
      main .coming {
        margin-top: 4rem; } }
    @media only screen and (max-width: 767px) {
      main .coming {
        margin-top: 2.5rem; } }

.loaded main .logoBox {
  transform: none;
  opacity: 1;
  transition: all 0.5s ease-in-out 0.2s; }
.loaded main .coming {
  transform: none;
  opacity: 1;
  transition: all 0.5s ease-in-out 0.5s; }

/*# sourceMappingURL=main.css.map */