/* crumbs */
.crumbs {
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
  font-size: 12px;
  color: #bdbdbd;
}

.crumbs .text {
  padding-right: 8px;
}

/* section */
section {
  margin-bottom: 10px;
  border-top: 1px solid #dbe1ec;
  border-bottom: 1px solid #dbe1ec;
  background: #fff;
}

section .title {
  padding: 15px 10px 15px 0;
  border-bottom: 1px solid #dbe1ec;
  overflow: hidden;
}

section .title .content {
  float: left;
  padding-left: 10px;
  border-left: 5px solid #45abff;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 400;
}

section .title .more {
  float: right;
  margin-top: 2px;
  font-size: 14px;
  color: #999;
}

section .title .change {
  float: right;
  margin-top: -6px;
  font-size: 16px;
  color: #45abff;
}

section .title .change i {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background-image: url(../images/color-icon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -302px;
}

section .title .text {
  float: left;
}

section .title .text.on {
  color: #45abff;
}

section .title .text.border-left {
  display: inline-block;
  height: 18px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #333;
}

/* game-list */
.tab-list {
  height: 45px;
  border-bottom: 1px solid #ddd;
}

.tab-list .tab-item {
  position: relative;
  float: left;
  width: 33.3%;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
}

.tab-list .tab-item.on {
  color: #45abef;
  border-bottom: 1px solid #45abef;
}

.tab-list .tab-item.on:after, .tab-list .tab-item.on:before {
  content: ' ';
  position: absolute;
  left: 50%;
  z-index: 8;
  width: 0;
  height: 0;
  margin-left: -8px;
  border: solid transparent;
  border-width: 8px;
}

.tab-list .tab-item.on:before {
  border-bottom-color: #45abef;
  bottom: 0;
}

.tab-list .tab-item.on:after {
  border-bottom-color: #fff;
  bottom: -2px;
}
.game-list {
  overflow: hidden;
}

.game-list .game-item {
  position: relative;
  min-height: 64px;
  padding: 10px;
  border-bottom: 1px solid #dbe1ec;
}

.game-list .game-item img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 64px;
  height: 64px;
  border-radius: 5px;
}

.game-list .game-item .content {
  padding-left: 74px;
}

.game-list .game-item .content .game-name {
  padding-right: 65px;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-list .game-item .content .type {
  margin: 9px 0;
  padding-right: 65px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-list .game-item .content .type .border-left {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid #999;
}

.game-list .game-item .content .boon {
  font-size: 12px;
  color: #45abff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-list .game-item .download {
  position: absolute;
  right: 10px;
  top: 25px;
  width: 60px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  background: #45abff;
  color: #fff;
}

.game-list .game-item.rank .num {
  position: absolute;
  left: 10px;
  top: 28.5px;
  width: 22px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  color: #999;
  background-size: 100%;
}

.game-list .game-item.rank .num.rank1 {
  font-size: 0;
  background-image: url(../images/list_no_1.png);
}

.game-list .game-item.rank .num.rank2 {
  font-size: 0;
  background-image: url(../images/list_no_2.png);
}

.game-list .game-item.rank .num.rank3 {
  font-size: 0;
  background-image: url(../images/list_no_3.png);
}

.game-list .game-item.rank img {
  left: 42px;
}

.game-list .game-item.rank .content {
  padding-left: 104px;
}

/* loading */
.loading {
  height: 40px;
  line-height: 40px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: #45abff;
}

.banner-wrapper {
  position: relative;
  background-color: unset;
  border-bottom: 0;
  padding-bottom: 40px;
}

.banner-wrapper .banner-img {
  display: block;
  width: 100%;
  min-height: 160px;
}

.banner-wrapper .container {
  position: absolute;
  bottom: 0px;
  left: 0;
  padding-left: 10px;
  background: linear-gradient(to bottom, transparent 0, black 100%);
  color: #fff;
}

.banner-wrapper .container .topic-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.banner-wrapper .container .topic-text {
  line-height: 20px;
  text-indent: 2em;
  font-size: 12px;
}

.hot-topic .topic-list {
  margin: 10px;
  overflow: hidden;
}

.hot-topic .topic-list .topic-item {
  position: relative;
  float: left;
  width: 49%;
  margin-right: 2%;
  padding-bottom: 26px;
}

.hot-topic .topic-list .topic-item:nth-of-type(2n) {
  margin-right: 0;
}

.hot-topic .topic-list .topic-item:nth-of-type(1), .hot-topic .topic-list .topic-item:nth-of-type(2) {
  margin-bottom: 15px;
}

.hot-topic .topic-list .topic-item .bg-img {
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 5px;
}

.hot-topic .topic-list .topic-item .container {
  position: absolute;
  bottom: 1px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hot-topic .topic-list .topic-item .container .game-icon {
  width: 44px;
  height: 44px;
  vertical-align: bottom;
  border: 1px solid #fff;
  border-radius: 13px;
}

.hot-topic .topic-list .topic-item .container .text {
  vertical-align: 5px;
  font-size: 14px;
  color: #333;
}

/* 鏈€鏂版洿鏂� */
.mtop7 {
margin-top: 7px;
}
.commonbox {
background: #fff;
clear: both;
zoom: 1;
overflow: hidden;
border-bottom: 1px solid #dbe1ec;
border-top: 1px solid #dbe1ec;
padding-bottom: 6px;
}
.nopab {
border-bottom: none;
}
.pbtit {
padding: 15px 10px 15px 0;
border-bottom: 1px solid #dbe1ec;
overflow: hidden;
}
.pbtit a {
float: right;
font-size: 12px;
}
.pbtit h2 {
font-size: 16px;
height: 17px;
line-height: 17px;
border-left: 5px solid #45abff;
padding-left: 5px;
font-weight: bold;
float: left;
}
.pbtit .chakanmore {
float: right;
font-size: 14px;
height: 17px;
line-height: 17px;
color: #999;
}
.pbtit.comment {
border-bottom: none;
}
.Cont1 {
display: block;
padding: 0 2px;
overflow: hidden;
}
.Cont1 ul {
display: block;
overflow: hidden;
}
.Cont1 ul li {
display: block;
float: left;
width: 25%;
text-align: center;
}
.Cont1 ul li a.C1-explain {
display: block;
margin: 10px auto;
}
.C1-explain>div {
display: inline-block;
position: relative;
margin-bottom: 10px;
}
.C1-explain div span {
display: inline-block;
position: absolute;
width: 36px;
height: 17px;
top: -4px;
left: -9px;
}
.C1-explain div span.fine {
background: url(../images/fine.png) no-repeat;
background-size: 36px 17px;
}
.C1-explain div span.hot {
background: url(../images/hot.png) no-repeat;
background-size: 36px 17px;
}
.C1-explain div span.new {
background: url(../images/new.png) no-repeat;
background-size: 36px 17px;
}
.C1-explain div img {
display: block;
width: 60px;
height: 60px;
border-radius: 10px;
}
.C1-explain p {
display: block;
width: 100%;
color: #333;
font-size: 14px;
line-height: 15px;
height: 15px;
overflow: hidden;
}
.C1-explain .div-img {
height: 60px;
overflow: hidden;
display: block;
}
.dbline .C1-explain p {
font-size: 12px;
width: 90%;
line-height: 15px;
height: 30px;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.tab_btn {
float: right;
height: 17px;
line-height: 15px;
font-size: 16px;
}
.tab_btn span.cur {
color: #45abff;
}
.Cont1 ul li a.btn {
display: block;
clear: both;
color: #888;
line-height: 27px;
width: 54.5px;
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto 10px auto;
}
.Cont1 ul li a.d_btn {
font-size: 14px;
display: block;
clear: both;
color: #45abff;
line-height: 30px;
width: 58px;
border: 1px solid #45abff;
border-radius: 3px;
margin: 0 auto 5px auto;
}
.Cont1 ul li a.a_btn {
clear: both;
display: block;
color: #72c322;
line-height: 27px;
width: 58px;
border: 1px solid #72c322;
border-radius: 3px;
margin: 0 auto 10px auto;
}
.Cont1 ul li a.s_btn {
display: block;
clear: both;
color: #3d89e4;
line-height: 27px;
width: 58px;
border: 1px solid #3d89e4;
border-radius: 3px;
margin: 0 auto 10px auto;
}
.Cont-J {
display: block;
/*overflow: hidden;*/
}
.Cont-J ul {
display: block;
overflow: hidden;
}
.Cont-J ul li {
position: relative;
padding: 15px 10px;
border-bottom: 1px solid #dbe1ec;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
}
.Cont-J ul li:last-child {
border-bottom: none;
}
.Cont-J ul li>a.CJ-explain {
float: left;
}
.Cont-J ul li:active {
background: #eee;
}
.CJ-explain div {
display: inline-block;
position: relative;
}
.CJ-explain div span {
display: inline-block;
position: absolute;
width: 36px;
height: 17px;
top: -4px;
left: -9px;
z-index: 10;
}
.CJ-explain div span.fine {
background: url(../images/fine.png) no-repeat;
background-size: 36px 17px;
}
.CJ-explain div span.hot {
background: url(../images/hot.png) no-repeat;
background-size: 36px 17px;
}
.CJ-explain div span.new {
background: url(../images/new.png) no-repeat;
background-size: 36px 17px;
}
.CJ-explain div img {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 10px;
background: #969696;
}
.Cont-J ul li .CJ-sub {
display: block;
height: 40px;
margin-left: 75px;
position: relative;
}
.Cont-J ul li .CJ-sub>div {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
    transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
display: block;
margin-right: 67.5px;
}
.CJ-sub>div a {
display: block;
width: 108%;
color: #333;
font-size: 16px;
overflow: hidden;
}
.Cont-J ul li>p {
display: block;
height: 24px;
margin-left: 75px;
line-height: 24px;
color: #999;
font-size: 12px;
-o-text-overflow: ellipsis;
   text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.CJ-sub dl {
display: block;
overflow: hidden;
}
.CJ-sub dt {
border-right: 1px solid #d9d9d9;
padding-right: 12px;
}
.CJ-sub dt,
.CJ-sub dd {
display: inline-block;
font-size: 12px;
height: 16px;
color: #999;
margin-right: 10px;
}
.Cont-J ul li a.JC_btn2 {
display: block;
font-size: 14px;
text-align: center;
color: #fff;
line-height: 31px;
width: 59.5px;
background: #45abff;
border-radius: 3px;
position: absolute;
top: 8px;
right: 0;
}
.Cont-J ul li a.JC_btn2:active {
opacity: .8;
}
.me_shadow {
width: 95%;
border-bottom: 1px solid rgba(223, 223, 223, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(227, 227, 227, 0.2);
        box-shadow: 0 2px 0 rgba(227, 227, 227, 0.2)
}
.more_game {
line-height: 39px;
background: #f6f6f6;
text-align: center;
border: 1px solid #ccc;
margin: 0 auto;
}
.more_game a {
color: #666;
display: block;
line-height: 39px;
font-size: 16px;
}
.more_game a span {
display: inline-block;
background: url(../images/more_ico.png) no-repeat center 52%;
background-size: 16px auto;
width: 16px;
text-indent: -9999px;
padding-left: 6px
}
/*鐩稿叧涓撻*/
.related-topic {
width: 100%;
background: #fff;
margin-top: 7px;
padding-bottom: 15px;
border-bottom: 1px solid #dbe1ec;
}
.z_l {
overflow: hidden;
width: 100%;
}
.z_l .game_con {
width: 46%;
height: 100px;
margin-left: 9.4px;
display: inline-block;
overflow: hidden;
position: relative;
border-bottom: 1px solid #f3f3f3;
margin-top: 15px;
padding-bottom: 5px;
}
.zt_img {
width: 100%;
height: 76.5px;
display: inline-block;
overflow: hidden;
border-radius: 4px;
z-index: 1;
}
.zt_img img {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
.game_img img {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
border-radius: 15px;
}
.infobox_zt {
overflow: hidden;
display: block;
z-index: 2;
position: absolute;
top: 53px;
padding: 0 7.3px;
width: 100%;
}
.infobox_zt .zt_log {
width: 47px;
height: 47px;
display: inline-block;
margin-right: 7.3px;
}
.zt_log img {
width: 45.8px;
height: 45.8px;
display: block;
overflow: hidden;
border-radius: 13px;
border: 1px solid #fff;
}
.infobox_zt .zt_title h2 {
font-size: 14.5px;
color: #333;
display: block;
overflow: hidden;
height: 15px;
line-height: 15px;
margin-top: 27px;
}
.zt_title {
display: inline-block;
overflow: hidden;
width: 59%;
}

/* 专题详情头部专题介绍 start */

.main-header {
  line-height: 1.4;
  background: #000;
  z-index: -1;
}

.main-header .header-bg {
  z-index: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4.8rem;
}

.main-header .header-bg img {
  max-height: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.main-header .header-info {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 2.005rem 25px 1.33rem;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
  background: -webkit-linear-gradient(top, transparent, #000);
  background: linear-gradient(180deg, transparent, #000);
}

.main-header .header-info .header-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.main-header .header-info .header-detail {
  font-size: 15px;
  padding-left: 25px;
  position: relative;
  margin-bottom: 5px;
}

.main-header .header-info .header-detail:before {
  left: 0;
  top: 4px;
  position: absolute;
  height: 15px;
  width: 15px;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAZCAYAAAAmNZ4aAAAAAXNSR0IArs4c6QAAAyNJREFUSA2lVk1IVFEUPueN+YOaFJFFMI1BBWV/1MKyZVSjaUWkY4soAiVCqo0EEQYGtchVi5YlROpYggn+QOAqaCHYIloVPfyBqU2Uk6gz753OvTM3n2/uG97Tu5h733e+73zn3HfnziAEGBS/XAb2fCtQ0QC2DM0EkAINN2yB5PJNKCvsxobhhQI/YhpqLIeF5Q5Iz98ioE0IixWs6/SlHby4FZYWHkAydYMISvCvNcu6F5hPTEQIvdGrgPCE19sUFxHnIFS+E5sGLIW5Z5ps3QBfp9vBhk4udqOKs/Yjtowd9zTmbd0M1p8ervKcEjlnTnCeE7xzYmpN8YYwWKl+LrZGYc4ZAQ8ZTkCtKX52L5tOeZlKHkGb4jtn6o/WQjr1yctUchFac4ypr24PpGGCTcPOhDlrpDDvSqETp976E2DRqDgHTlyz3r1qq2niWjEkEpNc7X4NWUK8xd8A8B7ERt7ymhQve2o/c8GVCnPPzJ8Cgzqwefz96o4TiS4vU34vNgsf86Hahy2jb5ym0iCZeu5lyt0tIhh3IVZzTJgK/v+O6XUjV7pkcgvFmkotZjZhbGzQHRPPFK87TGlrShfjguchhFFsHv3gjK90jMu3daZZcpeXqYxbdoczqWvd7jYV8RVjgmaXQD5yxV94ex/pYgKT54KoURdn7TheGevRxaQx9dVX80ncpSMw9irfRQE/fp7inSrVag14qcUZzF6ZVq0XgXs6Sr1nnuXGsZsvEBPIOpkbyyI2nWZtbu4K437G2IaDXmLu5hLwh3tgkfE0i+XTXndrEfmWSJbdybxjhAPuxPmepdgqFZe9GNWZyffnjHh16nB5vV+vbFIsby7CHV4kLU5gCtzIiGG7luQFZsX8vQ/zoVTFe7HduCkAFq1dDLQUEUkCDcMwBd9YjxhsoyqQqSCT/V1MxnrErI+IJAGHKfji/UTEIuAwM3w7ElDH9GJTaNh47WLWR0QSvwMBUhA7Mif4gTt2ioGwyq+p5CFOIz60M8ZrFNNItAhw5Q+gzwJMxSvg38o2tIEb8Tvol2SWVCL8TlzgW8z/CIXkNgvBP3eNIutMdxA0AAAAAElFTkSuQmCC) no-repeat;
  background-size: contain;
  display: inline-block;
}

.main-header .header-info .header-detail .detail-more {
  font-size: 14px;
  display: block;
  float: right;
  position: relative;
  top: 3px;
  color: #f67b29;
}

.header-game {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.header-game .game-item {
  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.item-card-6 {
  border-radius: 8px;
  display: block;
  height: 90px;
  width: 95%;
  background: #fff;
  margin: 0 auto;
}

.header-game .game-item {
  height: 90px;
  width: 100%;
  border-radius: 8px;
}

.header-game .game-item .game-icon {
  overflow: hidden;
  float: left;
  border-radius: 10px;
  margin: 15px 10px 15px 15px;
  display: block;
  height: 60px;
  width: 60px;
}

.header-game .game-item .game-icon img {
  height: 100%;
  width: 100%;
}

.header-game .game-item .game-info {
  display: inline-block;
  width: 50%;
  height: 18px;
  margin: 15px 0;
  font-size: 12px;
  color: #989ca6;
}

.header-game .game-item .game-info .info-title {
  font-size: 15px;
  color: #222;
}

.header-game .game-item .game-info .info-detail, .header-game .game-item .game-info .info-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 8px;
}

.header-game .game-item .game-info .info-detail li {
  text-overflow: ellipsis;
  margin-right: 4px;
  display: inline-block;
}

.header-game .game-item .game-info .info-detail li a {
  color: #989ca6;
}

.header-game .game-item .game-info .info-detail li:after {
  margin-left: 4px;
  content: "";
  display: inline-block;
  height: 9px;
  width: 2px;
  border-right: 1px solid #989ca6;
}

.header-game .game-item .game-info .info-detail li .detail-score {
  color: #f67b29;
}

.header-game .game-item .game-info .info-detail li:first-child {
  padding-left: 0;
}

.header-game .game-item .game-info .info-detail li:last-child:after {
  display: none;
}

.header-game .game-item .game-info .info-detail:after {
  content: "";
  clear: both;
  display: block;
}

.header-game .game-item .game-info .info-abstract {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top:8px;
}

.header-game .game-item .game-btn {
  line-height: 30px;
  border-radius: 4px;
  font-size: 13px;
  height: 30px;
  width: 16%;
  min-width: 35px;
  display: block;
  float: right;
  margin: 30px 15px 0 0;
  text-align: center;
}

.header-game .game-item .game-btn.download {
  color: #fff;
  background: #f67b29;
}
/* 专题详情头部专题介绍 end */