body {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
}

p {
  margin-inline: 0;
  margin-block: 0;
}

img {
  max-width: 100%
}

.container {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.float {
  position: sticky;
  bottom: 0px;
  z-index: 10;
  width: 100%;
  max-width: 640px;
}

.kf {
  position: fixed;
  top: 30%;
  right: 20px;
  animation: kf 2s infinite;
}

.kf img {
  width: 80px;
}

.mask_content_qr {
  position: fixed;
  background: #0000009c;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  font-weight: bold;
}

#close_png {
  position: relative;
}

#close_png img {
  float: right;
  position: relative;
  top: -0.2rem;
  left: 0rem;
  opacity: 1;
  /* filter: alpha(opacity=10); */
}
.hbimg{
  animation: hob_shake 2s infinite;
}

.alert-box {
  position: relative;
  width: 60%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  height: auto;
  padding: 10px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  font-size: .8rem;
  border-radius: 15px;
  /* z-index: 99; */
}

.mask_content {
  display: none;
  position: fixed;
  background: #0000009c;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  font-weight: bold;
}

.mask {
  text-align: center;
}

.mask_btn {
  border-radius: 50px;
  background: linear-gradient(34deg, #e2d500, #ffff5f8a);
  background: -webkit-linear-gradient(34deg, #e2d500, #ffff5f8a);
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 10px;
  height: 2.3rem;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  position: absolute;
  right: 0.5rem;
  top: 0.3rem;
}

@media screen and (min-width:900px) {
  .mask_message {
    margin: 10% 15%;
  }
}

@keyframes kf {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes hob_shake {
	15%,
	45% {
		-webkit-transform: rotate(3deg);
		transform: rotate(3deg);
		transform-origin: 50% 100%
	}
	30% {
		-webkit-transform: rotate(-3deg);
		transform: rotate(-3deg);
		transform-origin: 50% 100%
	}
	60%,
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		transform-origin: 50% 100%
	}
}
    .fixContent {
      position: fixed;
      right: 0px;
      width: 170px;
      z-index: 99;
    }

    .qrcod {
      background: #f0efe4c8;
      width: max-content;
      height: max-content;
      padding: 30px;
      margin: 13% auto;
      line-height: 2;
      color: #d04b21;
    }

    .redBox {
      width: 20%;
      height: max-content;
      margin: 8% auto;
      line-height: 2;
    }

    .bglogo {
      background: url(../img/db.js) no-repeat center / 100%;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 12% 0;
    }

    .qrcode_close img {
      width: 8%;
      float: right;
      position: relative;
      top: -0.7rem;
      right: -0.5rem;
      opacity: 1;
    }

    .hb_close img {
      width: 8%;
      float: right;
      position: relative;
      right: 45%;
      opacity: 1;
    }

    .other {
      text-align: center;
      color: rgb(179, 179, 179);
    }

    @media (max-width: 768px) {

      html,
      body {
        font-size: 1rem;
      }

      .redBox {
        width: 70%;
        margin: 30% auto;
      }

      .hb_close img {
        width: 10%;
      }

      .bgtext {
        top: -0px;
        width: 0%;
        height: 0px;
      }
    }
	
.gg-service {
  display: block;
  width: 50px;
  height: 90px;
  position: fixed;
  top: 45%;
  left: 5px;
  margin-top: -32px
}

.gg-service img {
  display: block;
  width: 100%;
  height: 100%
}

@keyframes xing {
  0% {
      transform: scale(0.9);
  }

  25% {
      transform: scale(1);
  }

  50% {
      transform: scale(0.9);
  }

  75% {
      transform: scale(1);
  }

  100% {
      transform: scale(0.9);
  }
}

.my_xing {
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
}
.img-box{
  flex: 1 1 0%; 
  overflow: auto;
}