* {
    margin: 0;
    padding: 0;
  }
ul {
    list-style-type: none;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

  .box {
    width: 100%;
    height: 100%;
    background: url('http://gxoj.tboj.cn/file/110/background.jpg') no-repeat center;
    background-size: cover;
    position: relative;
  }
  /* 实际上这里应该是把背景和前面的抽卡卡片分开来放置，以获得更加合适的缩放，在这里并没有完成此项功能。 */



  .button img{
    position: absolute;
  }

  .button .type1 img{
    width: 150px;
    top: 730px; 
    margin-left: 20px;
  }

  .type1 .assistant{
    left: 250px;
    cursor: pointer;
  }  

  .type1 .details{
    left: 450px;
    cursor: pointer;
  }

  .type1 .history{
    left: 650px;
    cursor: pointer;
  }

  .button .type2 img{
    width: 300px;
    top: 710px;
  }

  .type2 .pray_once{
    left: 930px;
    cursor: pointer;
  }

  .type2 .pray_tenth{
    left: 1250px;
    cursor: pointer;
  }

  .button .type3 img{
    top: 805px;
    height: 50px;
    left: 650px;
    cursor: pointer;
  }

  .assistant:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
    
  }

  .details:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
  }

  .history:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
  }

  .pray_once:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
  }

  .pray_tenth:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
  }

  .yuanpbutton:hover {
    transform: translateY(-3px);
    transition-duration: 0.5s;
  }

  @keyframes zoom-in {
    0% {
      transform: translateY(0);
    }
    /* 50% {
      transform: translateY(4px);
    } */
    100% {
      transform: translateY(6px);
    }
  }
  
  @keyframes zoom-out {
    0% {
      transform: translateY(8px);
    }
    /* 50% {
      transform: translateY(4px);
    } */
    100% {
      transform: translateY(0);
    }
  }