html {
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .none {
      display: none;
  }

  .bg {
      margin: 0;
      padding: 0;
      background-image: url(img/bg.jpg);
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center center;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
  }

  .logo {
      width: .9rem;
      height: .9rem;
      position: absolute;
      top: .3rem;
      left: .3rem;
  }

  .audio {
      position: absolute;
      top: .3rem;
      right: .3rem;
      height: .6rem;
      width: .6rem;
  }

  .leave {
      width: 33.3%;
      height: .4rem!important;
      min-height: .4rem!important;
      background: none;
      border: none!important;
      font-size: 0.22rem;
      color: #fff!important;
      text-align: center;
      box-sizing:border-box;
      outline: none;
  }

  .leave::-webkit-input-placeholder {
      color: #fff;
      font-weight: bold;
      letter-spacing: 0.04rem;
  }

  .leave::-moz-placeholder {
      color: #fff;
      font-weight: bold;
      letter-spacing: 0.04rem;
  }

  .leave:-moz-placeholder {
      color: #fff;
      font-weight: bold;
      letter-spacing: 0.04rem;
  }

  .leave:-ms-input-placeholder {
      color: #fff;
      font-weight: bold;
      letter-spacing: 0.04rem;
  }

  .text {
      width: 33.3%;
      height: .4rem;
      background: none;
      font-size: .22rem;
      font-weight: bold;
      color: #fff;
      letter-spacing: 0.05rem;
      line-height: .4rem;
      text-align: center;
      border-left: 1px solid #8c8982;
      border-right: 1px solid #8c8982;
  }

  .leave_place {
      color: #fff;
      font-size: .28rem;
      font-weight: bold;
      letter-spacing: 0.03rem;
  }

  .gift {
      width: 33.3%;
      height: .4rem;
      background: none;
      text-align: center;
      line-height: .4rem;
      letter-spacing: 0.05rem;
      font-size: .22rem;
      font-weight: bold;
      color: #fff;
  }

  .gift_img {
      width: .45rem;
      height: .35rem;
      margin-top: .15rem;
  }

  .zhimu {
      font-size: .18rem;
      width: .18rem;
      color: #cda623;
      display: block;
      position: absolute;
      left: 49.2%;
      transform: translateX(-50%);
      top: 53%;
      line-height: 1.2em;
      z-index: 999;
  }

  .sc {
      width: 5rem;
      position: absolute;
      left: .3rem;
      bottom: 1.2rem;
      z-index: 99;
  }

  .liaotian {
      float: left;
      border-radius: .3rem;
      background: rgba(0, 0, 0, 0.3);
      font-size: .24rem;
      color: #fff;
      padding: .14rem .30rem .14rem .30rem;
      margin-top: .20rem;
      line-height: 1.5em;
      max-width: 100%;
      box-sizing: border-box;
  }

  .forItem::after {
      content: '';
      clear: both;
      display: block;
  }

  .liaotian span {
      max-width: 100%;
      word-wrap: normal;
  }

  .touming {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  .touming span {
      /* background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
      opacity: 0.5;
  }

  .name,
  .jipin {
      width: 100%;
      height: 0rem;
      overflow: hidden;
      background: #1a1f24;
      border-radius: .30rem .30rem 0 0;
      position: absolute;
      z-index: 999;
      bottom: -5.50rem;
      left: 0;
      padding: 0rem .30rem;
      transition: 0.3s;
      box-sizing: border-box;
  }

  .name.active,
  .jipin.active {
      bottom: 0;
      height: 5.50rem;
      padding: .30rem;
  }

  .beiwen {
      font-size: .28rem;
      color: #fff;
      float: left;
  }

  .close {
      position: absolute;
      top: .30rem;
      right: .30rem;
      width: .40rem;
      height: .40rem;
  }

  .close span {
      background: #fff;
      display: inline-block;
      width: 100%;
      height: 0.04rem;
      position: absolute;
      top: .18rem;
      border-radius: 0.08rem;
  }

  .close span:nth-child(1) {
      transform: rotate(45deg);
  }

  .close span:nth-child(2) {
      transform: rotate(-45deg);
  }

  .name_main {
      margin-top: 1rem;
      width: 100%;
      height: 2.5rem;
  }

  .row {
      height: .56rem;
      line-height: .56rem;
      display: flex;
      justify-content: space-around;
      font-size: .26rem;
      color: #fff;
      margin-bottom: .3rem;
  }

  .row input {
      height: .56rem;
      background: #8b8d91;
      border-radius: 0.1rem;
      width: 30%;
      padding-left: .40rem;
      font-size: .24rem;
      color: #fff;
      border: none;
  }

  .lv {
      color: #339321;
  }

  .lv span {
      color: transparent;
  }

  .name_main button {
      width: 3.6rem;
      height: .60rem;
      border-radius: .40rem;
      font-size: .26rem;
      color: #339321;
      text-align: center;
      line-height: .60rem;
      background: #e8e9e9;
      margin-top: .50rem;
      border: none;
  }

  .one_address {
      position: absolute;
      left: 49.2%;
      transform: translateX(-50%);
      top: 44%;
  }

  .two_address {
      position: absolute;
      left: 49.2%;
      top: 44.2%;
  }

  .two_address .left {
      position: absolute;
      transform: translateX(-50%);
      left: -.20rem;
  }

  .two_address .right {
      position: absolute;
      transform: translateX(-50%);
      right: -.40rem;
  }

  .one_address span,
  .two_address span {
      font-size: .18rem;
      width: .18rem;
      color: #cda623;
      display: block;
      line-height: 1.2em;
  }

  .zunwei {
      height: .40rem;
      margin-bottom: .10rem;
  }

  .jipin_main {
      width: 100%;
      margin-top: .50rem;
      display: flex;
      flex-wrap: wrap;
  }

  .jipin_main div {
      width: 25%;
      text-align: center;
      margin-top: .20rem;
  }

  .jipin_main span {
      color: #fff;
      font-size: .24rem;
      display: block;
      margin-top: 0.05rem;
  }

  .jipin_main img {
      width: 1.0rem;
      height: 1.0rem;
  }

  .zuohua {
      position: absolute;
      top: 8.50rem;
      left: 40%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.40rem;
      height: 1.40rem;
      transition: 2s;
  }

  .zuohua.active {
      opacity: 1;
      top:56%;
      left: 37%;
  }

  .youhua {
      position: absolute;
      top: 8.50rem;
      left: 60%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.40rem;
      height: 1.40rem;
      transition: 2s;
  }

  .youhua.active {
      opacity: 1;
      top: 56%;
      left: 61.5%;
  }

  .shangxiang {
      position: absolute;
      top: 7.20rem;
      left: 49.8%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .shangxiang.active {
      opacity: 1;
      top: 55%;
  }

  .zuola {
      position: absolute;
      top: 8.50rem;
      left: 43.3%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .zuola.active {
      opacity: 1;
      top: 54.5%;
      left: 43.9%;
  }

  .youla {
      position: absolute;
      top: 8.50rem;
      left: 57%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .youla.active {
      opacity: 1;
      top: 54.6%;
      left: 55%;
  }

  .jiu {
      position: absolute;
      top: 65%;
      left: 56%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .jiu.active {
      opacity: 1;
  }

  .yan {
      position: absolute;
      top: 65%;
      left: 56%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1rem;
      height: 1rem;
      transition: 2s;
  }

  .yan.active {
      opacity: 1;
      top: 66%;
      left: 40%;
  }

  .zuoguo {
      position: absolute;
      top: 8.80rem;
      left: 25%;
      opacity: 0;
      transform: translateX(-50%);
      width: .85rem;
      height: .85rem;
      transition: 2s;
  }

  .zuoguo.active {
      opacity: 1;
      top: 60%;
      left: 28%;
  }

  .youguo {
      position: absolute;
      top: 8.80rem;
      left: 77%;
      opacity: 0;
      transform: translateX(-50%);
      width: .85rem;
      height: .85rem;
      transition: 2s;
  }

  .youguo.active {
      opacity: 1;
      top: 60%;
      left: 71.5%;
  }

  .zuoqian {
      position: absolute;
      top: 7.55rem;
      left: 28%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .zuoqian.active {
      opacity: 1;
      top:59%;
      left: 16%;
  }

  .youqian {
      position: absolute;
      top: 7.55rem;
      left: 72%;
      opacity: 0;
      transform: translateX(-50%);
      width: 1.00rem;
      height: 1.00rem;
      transition: 2s;
  }

  .youqian.active {
      opacity: 1;
      top: 59%;
      left: 83%;
  }

  .gui {
      position: absolute;
      top: 68%;
      left: 50%;
      opacity: 0;
      transform: translateX(-50%);
      width:1.80rem;
      height:auto;
      transition: 1s;
  }

  .gui.active {
      opacity: 1;
  }

  audio {
      opacity: 0;
      position: absolute;
      z-index: -1;
  }
  .dibu{
      position: fixed;
      z-index: 99;
      bottom: 0;
      left: 0;
      /*background: rgba(0,0,0,0.8);*/
      width: 100%;
  }
.dibu .icp{
  display: block;
  width: 100%;
  font-size: .22rem;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.05rem;
  line-height: .4rem;
  text-align: center;
  text-decoration: none;
}
 .dibu .block{
   display: flex;
   justify-content: space-between;
   padding: 0.4rem 0 0.1rem;
   background-image: url("img/hei.png");
   background-size: 100% 100%;
}