/* 左侧内容 */
.hd{width: 200px;float: left;}
.hd ul li a{width: 170px;height: 60px;line-height: 60px;background: #fff;display: inline-block;font-size: 18px;padding: 0 15px;}
.hd ul li{margin-bottom: 10px;position: relative;}
.hd ul li a:hover{background: #ff7d32;background: linear-gradient(to right, #ff4b4c, #ff7d32);color: #fff;}
.hd ul li a i{width: 27px;margin-right: 7px;display: inline-block;}
.hd ul li a em{width: 0;height: 0;border-width: 6px;border-style: solid;border-color: transparent transparent transparent #ff7d32;position: absolute;right: -12px;top: 50%;margin-top: -6px;display: none;}
.hd ul li a:hover em{display: block;}


.hd ul li a i.hotGame{height: 20px;background: url(../images/ranking.png) no-repeat 2px 0;position: relative;top: 4px;}
.hd ul li a:hover i.hotGame{background-position: 2px -30px;}
.hd ul li a.active{background: #ff7d32;background: linear-gradient(to right, #ff4b4c, #ff7d32);color: #fff;}
.hd ul li a.active i.hotGame{background-position: 2px -30px;}
.hd ul li a.active em{display: block;}


.hd ul li a i.newsRanking{height: 22px;background: url(../images/ranking.png) no-repeat left -60px;position: relative;top: 3px;}
.hd ul li a:hover i.newsRanking{background-position: left -92px;}
.hd ul li a.active{background: #ff7d32;background: linear-gradient(to right, #ff4b4c, #ff7d32);color: #fff;}
.hd ul li a.active i.newsRanking{background-position: left -92px;}
.hd ul li a.active em{display: block;}


.hd ul li a i.recRanking{height: 23px;background: url(../images/ranking.png) no-repeat left -124px;position: relative;top: 4px;}
.hd ul li a:hover i.recRanking{background-position: left -157px;}
.hd ul li a.active{background: #ff7d32;background: linear-gradient(to right, #ff4b4c, #ff7d32);color: #fff;}
.hd ul li a.active i.recRanking{background-position: left -157px;}
.hd ul li a.active em{display: block;}

/* 右侧内容 */
.bd{width: 940px;float: right;}
.bd ul li{height: 120px;padding: 20px 10px;border-bottom: 1px solid #ddd;position: relative;}
.bd ul li:hover{background: url(../images/listBg.png) repeat;}
.bd ul li .num{width: 30px;height: 30px;line-height: 30px;text-align: center;background: #8b93a9;border-radius: 50%;float: left;margin-top: 45px;margin-right: 10px;color: #fff;}
.bd ul li .num.first{height: 60px;line-height: 60px;background: linear-gradient(to bottom, #ff4b4c, #ff7d32);border-radius: 30px;margin-top: 30px;}
.bd ul li .num.second{background: #ff7b33;}
.bd ul li .num.third{background: #f9b31e;}

.bd ul li .thum{width: 120px;height: 120px;float: left;margin-right: 20px;overflow: hidden;}
.bd ul li .thum img{width: 120px;height: 120px;}

.bd ul li h4 a{font-size: 24px;color: #ff4c4c;font-weight: normal;}
.bd ul li h4 a:hover{text-decoration: underline;}
.bd ul li span{font-size: 14px;color: #999;margin-top: 8px;display: block;}
.bd ul li span em{margin: 0 10px;}
.bd ul li p{line-height: 24px;font-size: 16px;color: #666;margin-top: 10px;}

.bd .btn{position: absolute;right: 10px;top: 32px;}
.bd .btn a{width: 118px;height: 34px;line-height: 34px;display: inline-block;text-align: center;border-radius: 17px;margin-left: 5px;background: #f1f1f1;}
.bd .btn a.details{border: 1px solid #7c9dee;color: #7c9dee;transition: all .3s;}
.bd .btn a.details:hover{background: #7c9dee;color: #fff;}
.bd .btn a.start{border: 1px solid #ff6f39;color: #ff6f39;transition: all .3s;}
.bd .btn a.start:hover{background: #ff6f39;color: #fff;}

/* 分页 */
.bd .page{text-align: center;margin-top: 25px;margin-bottom: 60px;}
.bd .page a{width: 32px;height: 32px;line-height: 32px;text-align: center;display: inline-block;border-radius: 50%;margin: 0 4px;border: 1px solid #f4f4f4;}
.bd .page a:hover{border-color:#ff5b4a;color: #333;}
.bd .page a.active{border-color:#ff5b4a;}

.bd .page a.lt img{display: inline-block;opacity: .5;transition: all .3s;position: relative;top: 3px;}
.bd .page a.lt:hover{border-color:#f4f4f4;}
.bd .page a.lt:hover img{opacity: 1;}