@charset "utf-8";

/****** add-wrap  START ******/

.add-wrap {
  background-color : #feffe9;
  position         : relative;
  border-radius    : 10px;
  width            : 80%;
  min-width        : 500px;
  padding          : 30px 0 15px 0;
  text-align       : center;
  margin           : 20px auto;
  box-shadow       : 0 0 20px 2px #bbb;
}

.add-wrap .add-wrap-tit {
  background-color : #998AA0;
  color            : #fff;
  font             : normal bolder 18px microsoft yahei;
  text-indent      : 0;
  text-align       : center;
  line-height      : 34px;
  position         : absolute;
  border-radius    : 5px;
  width            : 300px;
  height           : 35px;
  left             : 50%;
  margin-left      : -150px;
  margin-top       : -42px;
  overflow         : hidden;
}

.add-wrap .add-wrap-main {
  display      : inline-block;
  margin       : 10px auto 0;
  position     : relative;
  padding-left : 200px
}

.add-wrap .add-wrap-main>a {
  position   : absolute;
  left       : 10px;
  top        : 50%;
  margin-top : -70px;
  display    : inline-block;
  color      : rgb(26, 113, 222);
}

.add-wrap .add-wrap-main>a>span {
  display           : inline-block;
  width             : 180px;
  height            : 140px;
  vertical-align    : middle;
  border            : none;
  background-size   : contain;
  background-repeat : no-repeat;
  opacity           : 1;
}

.add-wrap .add-wrap-main>a>span img {
  width  : 140px;
  height : 140px;
}

.add-wrap .add-wrap-main div {
  display     : inline-block;
  width       : 260px;
  font-family : microsoft yahei;
  text-align  : center;
}

.add-wrap .add-wrap-main div p {
  color           : #998AA0;
  text-indent     : 0;
  margin          : 5px;
  margin-top      : 0;
  text-decoration : none;
  font-weight     : bold;
  line-height     : 30px;
  font-size       : 20px;
  padding         : 0;
  text-align      : center;
}

.add-wrap .add-wrap-main div a {
  display         : block;
  text-decoration : none;
}

.add-wrap .add-wrap-main div a span {
  margin           : 10px 0px;
  display          : block;
  font-weight      : 600;
  color            : rgb(255, 255, 255);
  font-size        : 16px;
  border-radius    : 10px;
  text-indent      : 0px;
  background-color : rgb(255, 186, 0);
  height           : 30px;
  line-height      : 30px;
  text-align       : center;
  padding          : 5px 10px;
  overflow         : hidden;
}

.add-wrap .add-wrap-main div a span:hover {
  background : #ffa200
}

/****** add-wrap  END ******/



/****** guideDownLoad  START ******/

.guideDownLoad {
  height      : 100px;
  margin      : 30px 0px;
  padding     : 14px;
  box-sizing  : border-box;
  background  : #fffcf9;
  border      : 1px solid #FFD9A8;
  display     : flex;
  align-items : center;
  font-family : "Microsoft YaHei";
}

.gameInfo img {
  width         : 70px;
  height        : 70px;
  display       : block;
  margin        : 0;
  margin-right  : 20px;
  flex-shrink   : 0;
  border-radius : 14px;
}

.gameInfo {
  flex        : 1;
  display     : flex;
  overflow    : hidden;
  align-items : center;
}

.gameDesc {
  text-align   : left;
  overflow     : hidden;
  margin-right : 30px;
}

.gameDesc>p:first-of-type {
  font-size   : 18px;
  color       : rgb(51, 51, 51);
  font-weight : bold;
  margin      : 0;
  padding     : 0;
  text-align  : left;
  text-indent : 0;
}

.gameDesc>span {
  font-size   : 12px;
  color       : rgb(203, 189, 169);
  line-height : 1.2;
}

.gameDesc>p:last-of-type {
  font-size     : 14px;
  color         : rgb(255, 56, 56);
  margin        : 0px;
  overflow      : hidden;
  white-space   : nowrap;
  text-overflow : ellipsis;
  text-align    : left;
  text-indent   : 0;


}

.guideDownLoad a {
  display : block;
}

.downInfo {
  display     : flex;
  align-items : center;
  flex-shrink : 0;
}

.downInfo a img {
  flex-shrink   : 0;
  display       : block;
  width         : 160px;
  height        : 58px;
  border-radius : 8px;
  opacity       : 1;
}

.downInfo a img:hover {
  opacity : .7;
}

.downInfo>div {
  margin-right : 42px;
  position     : relative;
}

.downInfo>div img {
  width   : 68px;
  height  : 68px;
  display : block;
}


.downInfo>div::before {
  content         : '';
  display         : block;
  width           : 98px;
  height          : 10px;
  position        : absolute;
  top             : 0px;
  left            : -22%;
  background      : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAAMCAYAAACjpxUSAAADEUlEQVRYhe2YzW7bMAzHf5SVNm1S9Lb7gB33Pn3F7r6n2IPsNmBts26tbXEHWzatyHbiDm0GlABDiiYdSvxbX6K3CPuk0Nnt89QmI7acTPVce8w2R0tiTol0xqYTckyf82/oZtj0DIsag2SEXUZO2STRLZPRrZzSUzoEEKcGmrmCpxwycow1o+feCV+Gw+IZFsw6p8V2QJGRY7qNse8YA8gYYKxM9Vx7qX2OlsZNff1TABgret1yACrTrjPt2sTYd4zmGQHhjDEwDoKijYnScpHo1jcFSQqOKZAwIVP9kPaYbYnPoZSCYm4mSAEQZWVk5NLIMrFFf6EHEPQzBvQTAdADojCOMVELAlvslZEp+0RPAWL5WGAcC44lQDnk2VJKl4ipJcGCIAVALPizkSn7VrrWX1ppgZgbK/UU6wK39qw/CJuPcP0Zrj55xJ+DrHF+jfhLkC1SbHBnW6S4QtwVUmwQv8X5LeIuEX+B+Avc6hLkHHe2RmSF+BWIx61WSOFBPOJcqwviBBHX6IVv82vsCIi0gHDDTjRm6TsosXOKOAdqOu7yRZY9s5jx4d9hQ7sfNPTg0KAQGjBoHdCgaF2DBkJVoVWN1iWhKtGqROsntHoilI+E8hEtfxGqHVo9EMo7tLonlA9ofY/Wd2i1I5Q70B0aHtu4PxCe+f614sc3KH92+eQ2fxBKg2YnIILztnPNcyn6pUYK1xRQQUPo9DigIjL8SERA44zUOIkrukGTroCmIiY+YqTzEetkY7VtDnfYWSBE//3N+MupA2sCONUEdNp1rhkejcPdhguqcVkfvBzEDe0iqA47EutY/4bV9f4g6C0bmik8TldxarHLyVssGRFs70vG8UuGfZ7G2s1mmp/6JJnaJG71dMNjExvbVFog/I+bymP85uitN5VV8q7cFNidMqyDPZbYec0lCRbtn74fO+fpFI+deYDeqEZA5JIym7XuKBqPMK9xMfXSwi/1ey1aejE1dyl13MVUQp7+bGqTSzdmJPoxBT326z62cKdW6CU0NYtYfQw4OX3Ov6Hk6vov2rfpEGEeTEMAAAAASUVORK5CYII=) no-repeat;
  animation       : scan 3s infinite linear;
  background-size : contain;
}

@-webkit-keyframes scan {
  0% {
    top : -10px;
  }

  100% {
    top : 68px;
  }
}

@keyframes scan {
  0% {
    top : -10px;
  }

  100% {
    top : 68px;
  }
}

/****** guideDownLoad  END ******/