.g-recomd-box{ width: 1216px;}

.g-recomd-box .m-classnav-box{ width: 1200px; height: auto; background: #fff; padding: 20px 0 0; margin: auto; display:block; overflow: hidden;}

.g-recomd-box .m-classnav-box .m-nav-ul{ width: 1160px; height: auto; margin: auto; background: #fafafa; border: 1px solid #eeeeee; display:block; overflow: hidden;}

.g-recomd-box .m-classnav-box .m-nav-ul li{ width: 145px; height: auto; float: left; display: inline; overflow: hidden; position: relative; border-bottom: 1px solid #eee;}

.g-recomd-box .m-classnav-box .m-nav-ul li a{ width: 100%; height: 42px; line-height: 42px; font-size: 16px; font-weight: normal; color: #333; text-align: center; display:block; overflow: hidden;}

.g-recomd-box .m-classnav-box .m-nav-ul li a i{ width: 2px; height: 24px; background: #eee; display:block; overflow: hidden; position: absolute; right: 0; top: 9px; z-index: 2;}

/* .g-recomd-box .m-classnav-box .m-nav-ul li:nth-last-child(1) a i{ display: none} */

.g-recomd-box .m-classnav-box .m-nav-ul li a:hover{ height: 40px; color: #209ceb; border-bottom: 2px solid #2fbdff}

.g-recomd-box .m-classnav-box .m-nav-ul li.f-hover a{ height: 40px; color: #209ceb; border-bottom: 2px solid #2fbdff}

.g-recomd-box .m-classnav-box .m-nav-ul li:nth-child(8n) i{ display:none}



.g-recomd-box .m-scrollx-box{ width: 100%; height: auto; display:block; overflow: hidden; position: relative;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont{ width: 1200px; height: auto; background: #fff; margin: auto; padding: 24px 0 20px; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main{ width: 100%; height: auto; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a{ width: 216px; height: auto; background: #fafafa; float: left; margin: 0 0 0 20px; display: inline; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a img{ width: 216px; height: 134px; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a dl{ width: 186px; height: auto; padding: 14px 15px; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a dl dt{ width: 100%; height: 18px; line-height: 18px; font-size: 16px; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a dl dt strong{ width: 146px; float: left; font-weight: normal; color: #222;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a dl dt i{ width: 40px; float: left; font-weight: bold; color: #ff7200; text-align: right}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main a dl dd{ width: 100%; height: 36px; line-height: 18px; font-size: 14px; font-weight: normal; color: #999; margin: 5px 0 0; display:block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-cont .m-scrollx-main:nth-child(n+2){ display:none}



.g-recomd-box .m-scrollx-box .m-scrollx-page{ width: 1200px; height: auto; line-height: 0; font-size: 0; margin: auto; text-align: center; display:block; overflow: hidden; padding: 0 0 20px 0; background: #fff}

.g-recomd-box .m-scrollx-box .m-scrollx-page li{ width: 8px; height: 8px; background: #cdcdcd; border-radius: 100px; margin:  0 4px; display:inline-block; overflow: hidden;}

.g-recomd-box .m-scrollx-box .m-scrollx-page li.f-hover{ width: 28px; background: #2fbdff; cursor: pointer;}



.g-recomd-box .m-scrollx-box .u-scrollx-btn{ width: 38px; height: 61px; background: url(../images/list-icon.png) no-repeat; display:block; overflow: hidden; position: absolute; left: 0; top: 100px; z-index: 5; cursor: pointer;}

.g-recomd-box .m-scrollx-box .u-scrollx-btn.u-right-btn{ right: 0; left:auto; transform:scaleX(-1);background-position: 0 -95px;}

.g-recomd-box .m-scrollx-box .u-scrollx-btn:hover{ background-position: 0 -95px;}



.m-title-h3{ width: auto; height: 20px; line-height: 20px; font-size: 18px; font-weight: normal; color: #222; display:block; overflow: hidden;}

.m-title-h3 i{ width: 4px; height: 20px; background: #2fbdff; float: left; margin: 0 8px 0 0; display: inline; overflow: hidden;}

.m-title-h3 strong{ font-weight: normal;}

.m-title-h3 .m-title-change{ width: auto; float: right; font-size: 16px}

.m-title-h3 .m-title-change a{ float: left; padding: 0 6px; display: inline; overflow: hidden;}

.m-title-h3 .m-title-change a.f-hover{ color: #209ceb; font-weight: bold}

.m-title-h3 .u-more-link{ width: auto; float: right; font-size: 14px; color: #999}



.m-left-box{ width: 880px; height: auto; background: #fff; margin: 20px 0 0; padding: 20px 0;}

.m-left-box .m-title-h3{ margin: 0 20px;}

.m-left-box .m-list-cont{ width: 100%; height: auto; display:block; overflow: hidden;}

.m-left-box .m-list-cont li{ width: 268px; height: auto; float: left; margin: 21px 0 0 20px; display: inline; overflow: visible;}

.m-left-box .m-list-cont li a{ width: 268px; height: 104px; border-radius: 6px; background: #fbfbfb; display:block; overflow: hidden;}

.m-left-box .m-list-cont li a .u-face{ width: 64px; height: 64px; float: left; margin: 20px 14px 0; display: inline; overflow: hidden; border-radius: 10px;}

.m-left-box .m-list-cont li a strong{ width: 162px; height: 18px; line-height: 18px; font-size: 16px; font-weight: normal; color: #222; float: left; margin: 24px 0 0; display: inline; overflow: hidden;}

.m-left-box .m-list-cont li a em{ width: 162px; height: 16px; line-height: 16px; font-size: 14px; font-weight: normal; color: #999; float: left; margin: 5px 0 0; display: inline; overflow: hidden;}

.m-left-box .m-list-cont li a p{ width: 92px; height: 16px; line-height: 16px; font-size: 14px; font-weight: normal; color: #999; float: left; margin: 5px 0 0; display: inline; overflow: hidden;}

.m-left-box .m-list-cont li a .u-rank{ width: auto; height: 14px; float: left; margin: 4px 0 0; display: inline; overflow: hidden;}

.m-left-box .m-list-cont li a b{ width: 48px; height: 22px; line-height: 22px; font-size: 14px; font-weight: normal; color: #fff; text-align: center; background: #adadad; border-radius: 2px; float: left; margin: 0 0 0 13px; display: inline; overflow: hidden;}



.m-left-box .m-list-cont li .u-bg{ width: 100%; height: 7px; background: url(../images/list-icon.png) no-repeat 0 -227px; margin: 1px 0 0; display:block; overflow: hidden;}

.m-left-box .m-list-cont li.m-list-not{ width: 860px; font-size: 14px; font-weight: normal; color: #333;}

.m-left-box .m-list-cont li a:hover{ animation: upAnimation 200ms ease 0s 1 forwards}

@keyframes upAnimation{

  0%{transform: translateY(0)}

  100%{ transform: translateY(-10px);}

}

.m-left-box .m-list-cont li a:hover b{ background: #2fbdff}







.m-right-box{ width: 260px; height: auto; margin: 20px 0 0 20px; padding: 20px 20px 0; background: #fff}

.m-right-box .m-list{ width: 100%; height: auto; margin: 8px 0 0; display: block; overflow: hidden;}

.m-right-box .m-list a{ height:64px; padding:12px 0; border-bottom:1px dotted #ddd; margin:0; display:block; overflow:hidden; position:relative; zoom:1}

.m-right-box .m-list a .u-game-img{ width:58px; height:58px; border-radius:10px; float:left; margin:0 18px 0 0; display:inline; overflow:hidden}

.m-right-box .m-list a strong{ width:180px; height:18px; line-height:18px; font-size:16px; font-weight:normal; color:#333; float:left; margin:5px 0 0; display:inline; overflow:hidden}

.m-right-box .m-list a b{ width:180px; height:16px; line-height:16px; font-size:14px; font-weight:normal; color:#999; float:left; margin:12px 0 0; display:inline; overflow:hidden}

.m-right-box .m-list a:hover strong{ color:#2fbdff;}

.m-right-box .m-list a:nth-last-child(1){ border: 0px;}