@charset "utf-8";

.container_box {
  overflow: hidden;
}
.top_game {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #edf1f5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 3px #eff3f6;
}
.top_game .myimg {
  width: 50px;
  height: 50px;
  display: block;
}
.top_game .info {
  flex: 1;
  margin: 0 10px;
  min-width: 0;
}
.top_game .info a {
  display: block;
  width: 100%;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top_game .info p {
  display: block;
  width: 100%;
  color: #999;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.top_game .down-btn {
  display: block;
  width: 58px;
  height: 26px;
  line-height: 26px;
  background-color: #17b1f2;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}
.detaile_top {
  padding: 15px 0;
}
.detaile_top .title {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
  margin-bottom: 15px;
}
.detaile_top .title h1 {
  font-weight: bold;
}
.detaile_top .info {
  display: flex;
  width: 100%;
}
.detaile_top .info .txt {
  flex: 1;
  height: 23px;
  font-size: 12px;
  color: #999;
}
.detaile_top .info .txt p {
  width: 100%;
  height: 23px;
  line-height: 18px;
  margin-top: 2px;
}
.detaile_top .info .txt i {
  font-family: Arial;
  margin-left: 12px;
}
.detaile_top .info .txt span,
.detaile_top .info .txt i {
  height: 16px;
  line-height: 16px;
}
.detaile_top .info .txt .libao-get {
  display: inline-block;
  width: 73px;
  height: 23px;
  background: url("../images/libao-get.png") center center no-repeat;
  background-size: 73px 23px;
  vertical-align: middle;
  margin-left: 5px;
}
.art-body {
  color: #333;
}
.art-body p {
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
}
.art-body p strong {
  font-weight: bold;
}
.art-body img {
  max-width: 100%;
  height: auto !important;
}
.art-body h3 {
  border-left: 3px solid #17b1f2;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
  padding-left: 8px;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
#yy-detail-slide {
  width: 100%;
  height: 280px;
  margin: 0 auto;
}
#yy-detail-slide .swiper-slide {
  width: auto;
}
#yy-detail-slide .swiper-slide img {
  height: 100%;
  cursor: pointer;
  width: auto;
}
#yy-detail-slide .swiper-button-next {
  display: none;
  top: 22px;
  right: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  background-size: 28px 28px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA3klEQVRYR8XXwQ3CMAxG4ZcJYBRGgA0YhQ1gMxgBNukGRpE4VByIHf+mPbd9X1MprRsbH23jPkOAmd2AK/AETq21RYn2AGwVlCM8gP7EuyqEB3AAHlWIIaA/uZmVIVyASoQbUIUIASoQYYAaMQVQIqYBKkQKoECkAVmEBJBBqAF3YL/6bryA468vqATw2arD8Q5NAzLxNCAbTwEU8WmAKj4FUMbDAHU8BKiIuwFVcRegMu4FfP+WD7fXyOAy3AnNbD2YSOPeFbgAfTzrU9H576NZZDlnzh2+gpmbRq55A6tRqCFSu0XKAAAAAElFTkSuQmCC);
}
#yy-detail-slide .swiper-button-prev {
  display: none;
  top: 22px;
  left: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  background-size: 28px 28px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhUlEQVRYR8WXa1EDQRCEuxWAhDiAKCAoABRAHOAAUIAEggNQACggcQIKhuqq3arl6u529pFkfl+2v51H74Q4crC3vpldA3gJ516S3M5pdAUws3MA34ngF8nVQQCC+AeA00TwleTd3gEmxHcAViR/9gpgZrqxbq70x/gFsMiJ6+OmHpgR181nmy+StgJI5Gxwc7d4UwbMbAPgdlDfG5JvJaNdlYEJ8TVJQRVFMYCZPQJ4GKhUiReXwMw009HlIkN21ruM4T7E3RkYsVj99p2kfL8psj3Q4nIeMg+AxuoqOcxlsR5xVwnMbAgg89EzO+vxPQHk8Z8ATpJDtySXXpHmKQh9MITYkFy3QmR7IApMjGEzhBtAIBMQTyTljlVRBBAg7gE8H8WKk3KMvYRV70FxBjIQS+8iEs+pBgjl0GRcJOWQN2RX8bR8rQDaBwWRbkVFEE0AIQtjEG63bAYIEAsAEv3nlh7L7gIQIMYsO7usdAOYgDjcX7NkPLWkxOU0u6J3zUCNF/8Bv+yhIQeRgr8AAAAASUVORK5CYII=);
}
#yy-detail-slide:hover .swiper-button-prev {
  display: block;
}
#yy-detail-slide:hover .swiper-button-next {
  display: block;
}
#yy-detail-slide .swiper-button-next.swiper-button-disabled,
#yy-detail-slide .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.yyswiper-container {
  position: relative;
  height: 310px;
}
.yyswiper-container .swiper-scrollbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}
#yy-detail-slide .swiper-slide {
  margin-right: 15px;
}
#yy-detail-slide .swiper-slide:last-of-type {
  margin-right: 0;
}
.swiper-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.swiper-bg .close {
  display: block;
  position: absolute;
  top: 18px;
  right: 60px;
  z-index: 9999999999;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-size: 40px 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFeUlEQVRoQ+1ZWcxdUxhdK5EY4gEPSHiigkQqEqKtxNiiNXQQdNLyIIYaHigqEiSiowdVRTyo0mo1aBUtNSeKkIhGomJ4IsEDHkRJJEtW/r3/7P/8Z9jn3Hsjf9IvubnJ2Xt/+1tnf/sb1iHGuHCM24/9AP7vE+zbCUg6EMAlAM4AcFjyM8Y/kt9nAF4n+U8/wPcMQNJcAFMAXA3g4Eyj9gHYDGAXyY2Za0qndQYgaQ6AWwBMqjDARn4bxk6oAbcbwBqSL3QB0hqAJBt8H4CphQ33ANgJYIcNJ/lTOi7pGAAG4nUXAxhfWO91D5E0oGxpBUDSAgCPAzg02WEdgCdJfpq9KwBJZwK4EcC1ybo/ASwiuT5XVzYASXcCWJko3g5gNcm3czcrmydpMoDbAFyWjC8muSpHbxYASfMAPJ8ofISkAfVNJNngOxKF80luaNqgEYCkswF8kCiaRPLjJsVdxiVNBJDegXNIflinqxaApFMBvAvgiKBkHMnvuxiXu0bS8QC+C/N/A3A+yS+r1jcBeCOJNr5ca4uKJI0n6QjUWqrWSro5BAvr3EFyWmsAIc7HJLOd5OUlxj8A4H4nJZKz2yCQtCkkvwdJWs8IkfRqcrHnVuWJyhOQ9FGSpKaURRtJT4RQ6M1XkrwrB4SkFQAWh7kOwTeVAHB02hWe7yZ5VpnuUgCSrgEQY/E6kteVLZZ0OgCH06PD+K0k19SBkOTs/ViY87PfMsnPK/Q/k+SJBSSfK86rAvAigCvD5IkkP6kyStIMAK8k49NJ+vhHiSS74bZkYCbJrTW6JwCIEW8LyasaAUg6CMDvAPy/l+TJTW5ReKteewHJL9J1kk4D8A6Aw3NPy/MkfQ3gJAB/ey1J/w/LqBOQ5MsYC6u1JBc1AQgbLQNwd5jrsHchyV/D2JEA3gLgsGxZTvKeTL0uXRyVLHNI+vLXAlgKICo/j+T7ORsFQ505XV5bhiNXIaJsJOnMniWSzgXwXpi8jOSSJgBpZDm2WFXW7SrpkFCNOntbYt6Ib9BZdSrJv7KsH3IhV7E/hvmjIlaZC9l97Eb7SNqgViLpRABOgMcVFv4AYBrJb1opHAJhwG6WNpF0H1LrQq7LXa/vIRl9ttWeocK0ngPCwn/Dm+9UuUrynXL/sJPkiD6k7AT6AcB+6ySUAnAyzL5P6RtrC6BXF3LXZRcaVzg2F2h2odhmZp9qWxfq5RLbT19zBRmsezr8Xx/+XdleStL9cpZ0ucS9hNFnAbjttAz7q6Toln6+nuTCLOuHLnDrMDoLwEthgxUkY3Kq3VPSwwBijP4KwGSSv3iRpKMA+AKfEpQsJXlvDghJywHEIvEKki83RSETVC4H7A5ZkahQv5vE8oUdUaCFws8X26SXpbS/KIJKLrDdzqXECEKsqphLq8AJdYyDpOkA0oJsFsm0uBu2SdJMAOkbnEEyLe5G2B+Yi1hIllbFVQBcDsSGuk05fTvJ1XWuIckMxKNhTptyel4Zi9drQ2OmItY1q0jGJqXpvpieiazGBpLzS1yne0MTLp5T9thtKQOItKkv5YIc5nrIsKVrCxxRt6Y+ADAP+mZCJQ6ME4ouVOCGTDVeVMeX5hBbTkxOUFEGxg0VOCHvt7CJJ20EEE6iyItmxfCcRJW8+ZQL8uMsfjQLQABR5EcHSe5m8aK2KxtAAOFOy0kqUo1+bHr9qTrmouwkJJlxuKFAr5tKNFNRy4fWlhJNxx74Uhd8xQ8cewOPuqXhA4fpGlerZhpSccG3pI4HLbOt1QmkCsbsJ6aSjGkWzx8n/DOXlCPmdnyHzFyMYttyFMQ5nU+gBIiNN0vnPrruM6v7261FgqqN0T3dga4bDWpd305gUAY26d0PoOkNDXr8P6XgXk/m5gdhAAAAAElFTkSuQmCC);
}
#big-swiper {
  z-index: 10000;
  position: fixed;
  width: 95%;
  margin: 0 2.5%;
  height: 90%;
  top: 5%;
  left: 0;
}
#big-swiper .swiper-wrapper {
  width: 100%;
}
#big-swiper .swiper-slide {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#big-swiper img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}
#big-swiper .swiper-pagination-bullet {
  background: #eee;
}
#big-swiper .swiper-pagination-bullet-active {
  background: #17b1f2;
}
#big-swiper .swiper-button-prev,
#big-swiper .swiper-container-rtl .swiper-button-next,
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFIElEQVRoQ9WaS6xeUxTHf/85wkzUMzEQBtRbo6He+kh0oARpqGKk2lKvCO2ABk29RqQebVSCAUmrnrcqpJ5RBuhAoqoaM8/5knXt82V3372/8/jOvXp3ctKv+5y11/rvvV57rSt6GmZ2PjAXmJE8zuHX5Nkm6ZM+WGuURczsMuBSYBFwbMu19gKvAe9Leq8l7eDz1gDM7BDgpvDM7Mo4odsFvOiPpH/arNkYgJkdGYReApzYhkmLb38EXghAfmtC1wiAmc0DnqwRfA+wA/gW8N/V43IcHz2nAheG/5dkdCDLJb1VB6IWgJndDGwoLPRdeLdD0jd1zOL3ZnZaALIUOKVAu1TS88PWHQrAzO4GHs0s8BfwBLBekv/uPMzsMGAlsALw3+m4R9JjJQZFAGbmhur6mI7XgdWSvu8sdYbQzE4GHgSuybxeIsmNfMLIAjCzOcD2nPCS3GVO2jCzZ4FbMwwukvRhOj8BgJmdBXyRWeA5SbdNmuTRwmZ2O/B0htfZkr6M5w8AEFylozwpIV4jafVUCF/xMLMrgW0Jz93AHEkDF5sCuA94JCF6WNIDUyl8BGIZ8FTC+35Ja6u5AYAQYT0ixkHqFUnX/x/CRyA2AosjGTxGzKwidgwg1Tt3j+f17W3abkbwTp8mLnaZpGd8rRjA144sYjDlel8CZ2Zufw9F73dJOn0AwMzmA1uiDzzCzho1SLXd7SEAPMDtTCL2Aklbx08g43tXSvJIe9AMM/NIvT4SaNytVwD8wnFU9PJcSZ8fNNL/t8nnAJ9FMu2XNENmdjHwQfRin6RjUuGDmt0ZssiNfceFoOe3AB8Bb0jylOWAYWa/AEdHk5c4APf77v+rsVnSDRni1JB6M/KMkb4kyXOxFMDLQOzW1zqA1M+ukOS5f0q8DvATiMfIIDLC+/obJPlppDIsD1lwNb/JAbj6uBpVY6GkNzPEVwBvp/NAZxAF4Z3FPElpGuF2cJWrVyTDmAP4Icl9PMplLydmdnW4iKc4WoMYIvyinP47w3AJ8myhGrsdgEfcQ6PJIyT9kdnp8ak+QHQRPvA+HPg9ku3v1gBqQPhFZ00JfKBNnUH1eXHnqw/MLAugsQrFgg05iSKIrjsfAfB79AQVamTEuV1tA2JU4cPpZY24kRvtYBODk+hD+AAg60bTQJYNIjV6XfJOru+ersSZZGOdz7hyv9jfGM2PBzIvyn4cTe6RdMIwgVuqU+7zWoMt8PgpKYjNrpK5n5PibDEWdDyJmKyr8KkB75V0XAXgceCuiEs2nWhyKkMM28k7CV/Q/3WSVlUAvEz+biTgSBeaAohRhM9daC73svykXSnNzJsdC4E/PV2X9E6TEyzo/vArZTiiaX+p98ZFWlZ5VdK1XXeuDzoz2wxcF62VL6uEU8gVtqaspJjx+17AujeZzxe2AgDvwnhMSDswgzpMH7vaZA0zOwP4KvnWd392sbQYQHg3ZmuGyVxJuQtNE3lafWNm3tHxoJWO+WnXplReL3Vl7pCUqxq3ErAmGHqqkOsFZLs1wxocpe7MJu/a9F1yDCXEVUmuU2EtdmnqWkylLs1UtpiK3RlH16TJV+rWOL1HbG/C7WxbCAuFqlmAq2upyZftysQqWAsgGLZ3bVx10sZHvNa+UJRyzzGszXomcEFSoErNwhsZi9NuTM52GgGIXKyr1PRrdMfIp+2fGhSSLC/LLwD837g43MSt7g/xZouXyZsQjKRCdQxCkdgrfE3+3GZM0ljdmk3e/wt7N2MCP1EakQAAAABJRU5ErkJggg==);
}
#big-swiper .swiper-button-prev {
  transform: rotate(90deg);
}
#big-swiper .swiper-button-next {
  transform: rotate(-90deg);
}
#big-swiper .swiper-button-prev::after,
#big-swiper .swiper-button-next::after {
  display: none;
}
@media screen and (max-width: 750px) {
  .yyswiper-container {
    height: 205px;
  }
  #yy-detail-slide {
    height: 180px;
  }
  #yy-detail-slide .swiper-slide {
    margin-right: 10px;
  }
  .swiper-bg .close {
    right: 15px;
  }
}

.game-box-gg {
  margin: 10px auto 20px;
  -webkit-box-shadow: 0 0 3px 5px #eff3f6;
  box-shadow: 0 0 3px 5px #eff3f6;
  padding: 10px;
  border-radius: 10px;
}
.game-box-gg .title {
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: bold;
}
.game-box-gg .title span {
  color: #fd5a49;
}
.game-box-gg .box-detail {
  display: flex;
  flex-wrap: wrap;
}
.game-box-gg .box-detail .box-icon {
  display: block;
  width: 105px;
  height: 105px;
  margin-right: 10px;
}
.game-box-gg .box-detail .box-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.game-box-gg .box-detail .box-info {
  flex: 1;
  min-width: 0;
}
.game-box-gg .box-detail .box-info .info-item {
  display: inline-block;
  width: auto;
  line-height: 15px;
  font-size: 12px;
  background-color: #f5f6f9;
  border-radius: 10px;
  margin-top: 10px;
  color: #333;
  padding: 5px 10px;
}
.game-box-gg .box-detail .box-info .info-item:first-of-type {
  margin-top: 5px;
}
.game-box-gg .box-detail .box-info .info-item:nth-of-type(1) {
  background-color: rgba(235, 102, 14, 0.1);
  color: #f60;
}
.game-box-gg .box-detail .box-info .info-item:nth-of-type(2) {
  background: rgb(243 128 145 / 10%);
  color: #f9679a;
}
.game-box-gg .box-detail .box-info .info-item:nth-of-type(3) {
  background: rgb(30 248 103 /10%);
  color: #39ba66;
}
.game-box-gg .box-detail .box-desc {
  width: 100%;
  color: #50525c;
  font-size: 12px;
  margin-top: 10px;
  line-height: 20px;
}
.game-box-gg .box-detail .box-btn {
  width: 100%;
  line-height: 35px;
  border-radius: 4px;
  font-size: 13px;
  height: 35px;
  display: block;
  text-align: center;
  margin-top: 10px;
  border-radius: 20px;
  color: #fff;
  background-color: #17b1f2;
}

.related_game {
  padding-bottom: 10px;
}
.related_game .introTit {
  border-left: 3px solid #17b1f2;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding-left: 8px;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.related_game li {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 0 3px 3px #eff3f6;
}
.related_game li:last-child {
  margin-bottom: 0;
}
.related_game li a {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
}
.related_game li a span:nth-child(1) {
  font-size: 12px;
  color: #333333;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.related_game li a span:last-child {
  font-size: 10px;
  width: 65px;
  overflow: hidden;
  white-space: nowrap;
  color: #17b1f2;
  text-align: right;
}

.game_box .rec_game {
  margin-top: 10px;
}
.game_box .rec_game .item {
  overflow: hidden;
  width: 100%;
  display: flex;
}
.game_box .rec_game .item .img {
  display: block;
}
.game_box .rec_game .item .img,
.game_box .rec_game .item .img img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}
.game_box .rec_game .item .info {
  flex: 1;
  height: 64px;
  margin: 0 12px;
}
.game_box .rec_game .item .info .bt {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  height: 24px;
  line-height: 24px;
  font-weight: 600;
  display: block;
}
.game_box .rec_game .item .info .type {
  font-size: 12px;
  color: #999;
  height: 20px;
  line-height: 20px;
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
}
.game_box .rec_game .downl {
  display: flex;
  margin-top: 18px;
}
.game_box .rec_game .downl a {
  flex: 1;
  display: block;
  text-align: center;
  color: #fff;
  height: 32px;
  line-height: 32px;
  border-radius: 3px;
  position: relative;
}
.game_box .rec_game .downl .game-btn {
  background: #14cc8f;
}
.game_box .rec_game .downl .box-btn {
  background: #17b1f2;
}
.game_box .rec_game .downl a p {
  height: 18px;
  line-height: 20px;
  background: #f9fcff;
  border: 1px solid #17b1f2;
  font-size: 12px;
  padding: 0 5px;
  color: #f49307;
  border-radius: 10px;
  position: absolute;
  right: 50%;
  top: -16px;
  transform: translateX(50%);
  box-shadow: 0 1px 0px #17b1f2;
  white-space: nowrap;
  max-width: 90%;
}
.game_box .rec_game .downl a p::after {
  content: "";
  width: 4px;
  height: 4px;
  background: #fff;
  border-left: 1px solid #17b1f2;
  border-bottom: 1px solid #17b1f2;
  position: absolute;
  bottom: -3px;
  left: 25%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.game_box .rec_game .downl a + a {
  margin-left: 12px;
}
.game_box .tab-btns {
  margin: 10px 0;
  padding: 3px;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  background-color: #f7f7f8;
  border-radius: 5px;
}
.game_box .tab-btns li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 28px;
  font-size: 14px;
  border-radius: 3px;
  overflow: hidden;
  height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.game_box .tab-btns li.active {
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.game_box .related_game_list li {
  position: relative;
  border-bottom: 1px solid #ebebeb;
  overflow: hidden;
}
.game_box .related_game_list li .info {
  margin: 10px 67.5px 10px 0;
}
.game_box .related_game_list li .info a {
  display: block;
  background: url(../images/l-list.png) no-repeat left center;
  background-size: auto 12px;
  padding-left: 18px;
  margin-bottom: 3px;
  line-height: 19px;
  height: 19px;
  overflow: hidden;
  color: #333;
}
.game_box .related_game_list li .info p {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 18px;
  font-size: 12px;
  line-height: 16px;
  color: #888;
}
.game_box .related_game_list li > a {
  display: block;
  text-align: center;
  color: #fff;
  line-height: 28px;
  width: 57.5px;
  background: #17b1f2;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.game_box .type_game_list .game_inner {
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #ebebeb;
}
.game_box .type_game_list .game_inner:last-of-type {
  border-bottom: none;
}
.game_box .type_game_list .game_inner .game-icon {
  width: 62.5px;
  height: 62.5px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  left: 0;
}
.game_box .type_game_list .game_inner .game-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}
.game_box .type_game_list .game_inner .game-detail {
  height: 62.5px;
  margin: 0 58px 0 62.5px;
  padding: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.game_box .type_game_list .game_inner .game-detail .game-name {
  font-size: 15px;
  line-height: 21px;
  display: flex;
  align-items: center;
}
.game_box .type_game_list .game_inner .game-detail .game-name span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game_box .type_game_list .game_inner .game-detail .game-name em {
  padding: 0 3px;
  line-height: 14px;
  height: 14px;
  font-size: 10px;
  color: #fff;
  margin-left: 5px;
  border-radius: 3px;
  vertical-align: 1px;
  flex-shrink: 0;
}
.game_box .type_game_list .game_inner .game-detail .game-name em.green {
  background-color: #5cbe65;
}
.game_box .type_game_list .game_inner .game-detail .game-name em.org {
  background-color: #ff9d01;
}
.game_box .type_game_list .game_inner .game-detail .game-name em.pink {
  background-color: #f9679a;
}
.game_box .type_game_list .game_inner .game-detail .game-info,
.game_box .type_game_list .game_inner .game-detail .game-desc {
  color: #999;
  font-size: 12px;
  height: 14px;
  padding-top: 1.5px;
  margin-top: 3px;
}
.game_box .type_game_list .game_inner .game-detail .game-info i,
.game_box .type_game_list .game_inner .game-detail .game-desc i {
  display: inline-block;
  width: 1px;
  height: 9px;
  background-color: #979797;
  vertical-align: middle;
  margin: -2px 4px 0;
}
.game_box .type_game_list .game_inner .game-recommend-download {
  display: block;
  font-size: 13px;
  width: 56px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #17b1f2;
  color: #fff;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.liked_box ul {
  padding: 10px 0;
}
.liked_box li {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 0 3px 3px #eff3f6;
}
.liked_box li:last-child {
  margin-bottom: 0;
}
.liked_box li a {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
}
.liked_box li a span:nth-child(1) {
  font-size: 12px;
  color: #333333;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.liked_box li a span:last-child {
  font-size: 10px;
  width: 65px;
  overflow: hidden;
  white-space: nowrap;
  color: #17b1f2;
  text-align: right;
}

.related_news .tab-btns {
  width: 100%;
  height: 43px;
  border-bottom: 2px solid #f2f2f2;
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.related_news .tab-btns::-webkit-scrollbar {
  height: 0;
}
.related_news .tab-btns span {
  display: inline-block;
  padding: 0 14px;
  color: #333;
  font-weight: 400;
  font-size: 14px;
  line-height: 43px;
}
.related_news .tab-btns .active {
  color: #17b1f2;
  position: relative;
}
.related_news .tab-btns .active::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  margin-left: -10px;
  width: 20px;
  height: 2px;
  background: #17b1f2;
  content: " ";
}
.related_news .article-list {
  overflow: hidden;
}
.related_news .article-list .article-item {
  display: flex;
  border-bottom: 1px solid #ebebeb;
  justify-content: space-between;
}
.related_news .article-list .article-item:last-of-type {
  border-bottom: none;
}
.related_news .article-list .article-item p {
  line-height: 40px;
  overflow: hidden;
  padding-left: 12px;
  background: url(../images/icon_arr.png) no-repeat left center;
  background-size: 5px auto;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related_news .article-list .article-item span {
  flex: 0 0 auto;
  line-height: 40px;
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.hot_games .game-list .game-inner {
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #ebebeb;
}
.hot_games .game-list .game-inner:last-of-type {
  border-bottom: none;
}
.hot_games .game-list .game-inner .game-icon {
  width: 62.5px;
  height: 62.5px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  left: 0;
}
.hot_games .game-list .game-inner .game-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}
.hot_games .game-list .game-inner .game-detail {
  height: 62.5px;
  margin: 0 58px 0 62.5px;
  padding: 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hot_games .game-list .game-inner .game-detail .game-name {
  font-size: 15px;
  line-height: 21px;
  display: flex;
  align-items: center;
}
.hot_games .game-list .game-inner .game-detail .game-name span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hot_games .game-list .game-inner .game-detail .game-name em {
  padding: 0 3px;
  line-height: 14px;
  height: 14px;
  font-size: 10px;
  color: #fff;
  margin-left: 5px;
  border-radius: 3px;
  vertical-align: 1px;
  flex-shrink: 0;
}
.hot_games .game-list .game-inner .game-detail .game-name em.green {
  background-color: #5cbe65;
}
.hot_games .game-list .game-inner .game-detail .game-name em.org {
  background-color: #ff9d01;
}
.hot_games .game-list .game-inner .game-detail .game-name em.pink {
  background-color: #f9679a;
}
.hot_games .game-list .game-inner .game-detail .game-info,
.hot_games .game-list .game-inner .game-detail .game-desc {
  color: #999;
  font-size: 12px;
  height: 14px;
  padding-top: 1.5px;
  margin-top: 3px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.hot_games .game-list .game-inner .game-detail .game-info i,
.hot_games .game-list .game-inner .game-detail .game-desc i {
  display: inline-block;
  width: 1px;
  height: 9px;
  background-color: #979797;
  vertical-align: middle;
  margin: -2px 4px 0;
}
.hot_games .game-list .game-inner .game-recommend-download {
  display: block;
  font-size: 13px;
  width: 56px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #17b1f2;
  color: #fff;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 礼包弹出层 */
.gift_mask {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 640px;
  background-color: rgba(0, 0, 0, 0.2);
  transform: translateX(-11px);
  z-index: 9999;
  display: none;
}

.gift_mask .mask_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 77.33333333333333%;
}

.gift_mask .mask_content .bg {
  width: 100%;
}

.gift_mask .mask_content .close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 15px;
}

.gift_mask .mask_content .c {
  position: absolute;
  bottom: 6%;
  width: 100%;
  text-align: center;
}

.gift_mask .mask_content .c p {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.gift_mask .mask_content .c p:nth-of-type(2) {
  font-size: 14px;
  color: #808080;
  margin: 9.5px 0 28px;
  padding: 0 10px;
}
.gift_mask .mask_content .c p:nth-of-type(2) span {
  color: #fd5a49;
}

.gift_mask .mask_content .c .btn a {
  display: block;
  width: 73.79310344827586%;
  margin: 0 auto;
  height: 44px;
  background: linear-gradient(-90deg, #1fa4fc 0%, #33beff 100%);
  box-shadow: 0px 3px 6px 0px rgba(76, 219, 255, 0.42);
  border-radius: 4px;
  line-height: 44px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}