.bg {
  width: 100%;
  height: 100vh;
  display: block;
  background: url("../images/bg.jpg") center;
  background-size: cover;
  position: relative;
}
.logo {
  width: 433px;
  height: 138px;
  background: url("../images/logo.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 30px;
  top: 30px;
}
.btn {
  width: 388px;
  height: 145px;
  background: url("../images/btn1.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
}
.text {
  width: 500px;
  position: absolute;
  right: 30px;
  bottom: 30px;
  color: #fff;
}
@media screen and (min-width: 581px) and (max-width: 1500px) {
  .bg {
    width: 100%;
    height: 100vh;
    display: block;
    background: url("../images/bg.jpg") center;
    background-size: cover;
    position: relative;
  }
  .logo {
    width: 330px;
    height: 105px;
    background: url("../images/logo.png") no-repeat;
    background-size: 100% 100%;
    left: 10px;
    top: 20px;
  }
  .btn {
    width: 250px;
    height: 100px;
    background: url("../images/btn1.png") no-repeat;
    background-size: 100% 100%;
    bottom: 30px;
    transform: translate(-50%, 0);
  }
  .text {
    width: 350px;
  }
}

@media screen and (max-width: 580px) {
  .bg {
    width: 100%;
    height: 100vh;
    display: block;
    background: url("../images/bg1.jpg") center;
    background-size: cover;
    position: relative;
  }
  .logo {
    width: 190px;
    height: 70px;
    background: url("../images/logo.png") no-repeat;
    background-size: 100% 100%;
    left: 10px;
    top: 10px;
  }
  .btn {
    width: 200px;
    height: 85px;
    background: url("../images/btn2.png") no-repeat;
    background-size: 100% 100%;
    bottom: 70px;
    transform: translate(-50%, 0);
  }
  .text {
    width: 90%;
    bottom: 10px;
    right: auto;
    left: 50%;
    margin-left: -45%;
    font-size: 12px;
  }
}