body {
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
}

.container {
  max-width: 92.5%;
}

  .container h1 {
      color: #dfebf0;
      font-weight: 600;
      text-shadow: 5px 5px 3px #0f0f0f;
  }

.login-section {
  background-image: url(../img/aaa.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  box-shadow: 5px 5px 5px #0f0f0f;
}

  .login-section .form-check {
      color: white;
  }

.btn {
  margin-top: 30px;
  color: white;
  font-size: 18px;
}

.btn-login {
  background-color: #00a29a;
}

.btn-regist {
  background-color: #2ea7e0;
}

.btn-login:hover {
  background-color: #02857e;
  color: white;
}

.btn-regist:hover {
  background-color: #2387b6;
  color: white;
}

.btn-search, .btn-download {
  background-image: url(../img/button.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  text-shadow: 0 0 3px #ffffff;
  color: #2b2525;
  font-size: 22px;
  font-weight: 500;
  border-radius: 10px;
}

  .btn-search:hover, .btn-download:hover {
      box-shadow: 5px 5px 7px #000000;
      color: #000000;
  }

footer {
  background-image: url(../img/footer.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media (min-width: 360px) {
  body {
      background-repeat: repeat-y;
      background-position: top left;
      background-size: cover;
  }

  .logoBg {
      width: 300px;
  }

  .leftDiv {
      padding: 100px 15px 15px;
      z-index: 99;
  }

  .frontLogo {
      width: 138px;
      position: absolute;
      top: 15px;
      left: 30px;
  }

  .container h1 {
      font-size: 36px;
      margin-bottom: 40px;
      margin-top: 30px;
  }

  .login-section {
      padding: 25px;
      border-radius: 18px;
  }

      .login-section h3 {
          color: white;
          font-size: 2rem;
      }

      .login-section .login-title {
          margin-bottom: 30px;
      }

  .map {
      display: none;
  }

  .btn-search, .btn-download {
      margin-bottom: 45px;
  }
}

@media (min-width: 1000px) {
  body {
      height: 768px;
  }

  .logoBg {
      width: 380px;
  }

  .leftDiv {
      padding: 126px 15px 15px;
      z-index: 99;
  }

  .frontLogo {
      width: 165px;
      position: absolute;
      top: 18px;
      left: 50px;
  }

  .container h1 {
      font-size: 65px;
      margin-left: 130px;
      margin-bottom: 45px;
      margin-top: 0;
  }

  .login-section {
      padding: 50px;
      max-width: 360px !important;
      max-height: 400px;
  }

      .login-section .login-title {
          margin-bottom: 30px;
      }

      .login-section h3 {
          font-size: 2rem;
      }

      .login-section form {
          font-size: 18px;
      }

          .login-section form input {
              font-size: 18px;
          }

  .map {
      position: absolute;
      top: 220px;
      left: 570px;
      display: block;
  }

      .map img {
          max-width: 420px;
      }

  .btn-search {
      position: absolute;
      left: 520px;
      top: 420px;
  }

  .btn-download {
      position: absolute;
      left: 600px;
      top: 500px;
  }
}

@media (min-width: 1200px) {
  .logoBg {
      width: 380px;
  }

  .frontLogo {
      width: 165px;
      position: absolute;
      top: 18px;
      left: 50px;
  }

  .container h1 {
      font-size: 65px;
      margin-left: 130px;
      margin-bottom: 45px;
  }

  .login-section {
      padding: 50px;
      max-width: 360px !important;
      max-height: 400px;
  }

      .login-section .login-title {
          margin-bottom: 30px;
      }

      .login-section h3 {
          font-size: 2rem;
      }

      .login-section form {
          font-size: 18px;
      }

          .login-section form input {
              font-size: 18px;
          }

  .map {
      position: absolute;
      top: 110px;
      left: 720px;
      display: block;
  }

      .map img {
          max-width: 480px;
      }

  .btn-search {
      position: absolute;
      left: 640px;
      top: 350px;
  }

  .btn-download {
      position: absolute;
      left: 780px;
      top: 435px;
  }
}

@media (min-width: 1400px) {
  .logoBg {
      width: 420px;
  }

  .frontLogo {
      width: 180px;
      position: absolute;
      top: 25px;
      left: 50px;
  }

  .container h1 {
      font-size: 80px;
      margin-left: 120px;
      margin-bottom: 70px;
  }

  .login-section {
      max-width: 400px !important;
      max-height: 420px;
  }

      .login-section .login-title {
          margin-bottom: 30px;
      }

      .login-section h3 {
          font-size: 2.2rem;
      }

  .map {
      position: absolute;
      top: 110px;
      left: 920px;
  }

      .map img {
          max-width: 520px;
      }

  .btn-search {
      position: absolute;
      left: 785px;
      top: 375px;
  }

  .btn-download {
      position: absolute;
      left: 930px;
      top: 465px;
  }
}

@media (min-width: 1800px) {
  .logoBg {
      width: 570px;
  }

  .leftDiv {
      padding: 165px 15px 15px;
      z-index: 99;
  }

  .frontLogo {
      width: 250px;
      position: absolute;
      top: 25px;
      left: 60px;
  }

  .container {
      max-width: 92.5%;
  }

      .container h1 {
          font-size: 90px;
          margin-left: 240px;
          margin-bottom: 90px;
      }

  .login-section {
      max-width: 440px !important;
      margin-left: 45px;
      max-height: 420px;
  }

      .login-section .login-title {
          margin-bottom: 30px;
      }

      .login-section h3 {
          color: white;
          font-size: 40px;
      }

  .map {
      position: absolute;
      top: 100px;
      left: 1205px;
  }

      .map img {
          max-width: none;
      }

  .btn-search {
      position: absolute;
      left: 1097px;
      top: 468px;
  }

  .btn-download {
      position: absolute;
      left: 1273px;
      top: 583px;
  }
}