@charset "UTF-8";
.m1200{ width: 1200px; margin:0 auto; }
.top-banner{width: 100%; height:110px; background: url(../images/rank_banner.jpg) no-repeat center center;}
.top-banner em{float: left; display: block; width: 52px; height: 56px; background: url(../images/rank_icon1.png) no-repeat; background-position: 0 bottom;margin: 26px 30px 0 300px;}
.top-banner h1{font-size: 48px; font-weight: bold; text-shadow: 0 2px 3px #ccc; color: #fff;height: 56px; line-height: 56px; float: left; margin-top: 26px;}
.top-banner .m1200{height: 100%;}


.rank-map{height: 24px;font-size: 14px; color: #999;line-height: 24px; padding: 15px 0;}
.rank-map a,.rank-map span{color: #777; margin: 0 5px;}
.rank-map a:hover{color: #4cb749;}
/* rank-list */
.rank-list{margin-bottom: 30px;}
.rank-list .fl{width: 238px; padding: 16px 0 30px; border:1px solid #e7e7e7; background:#f7f7f7;}
.rank-list .fl li{width: 100%; height: 59px; border-bottom: 1px solid #e7e7e7;}
.rank-list .fl li.li-1{border-top: 1px solid #e7e7e7;}
.rank-list .fl li a{display: block;width: 100%; height: 58px;overflow: hidden; zoom: 1;border-bottom: 1px solid #e7e7e7; line-height: 58px;font-size: 16px; color: #777;}
.rank-list .fl li a em{background: url(../images/rank_icon2.png) no-repeat; width: 26px;height: 26px; float: left; margin: 17px 18px 0 40px;background-position: 0 -286px;}

.rank-list .fl li.active a{background: url(../images/rank_icon1.png) no-repeat; background-position: 0 -163px;color: #fff; font-weight: bold;}
.rank-list .fl li.active a em{background-position-x: -26px;}

.rank-list .fl .li-1 a em{background-position: 0 0;}
.rank-list .fl .li-2 a em{background-position: 0 -26px;}
.rank-list .fl .li-3 a em{background-position: 0 -52px;}
.rank-list .fl .li-4 a em{background-position: 0 -78px;}
.rank-list .fl .li-5 a em{background-position: 0 -104px;}
.rank-list .fl .li-6 a em{background-position: 0 -130px;}
.rank-list .fl .li-7 a em{background-position: 0 -156px;}
.rank-list .fl .li-8 a em{background-position: 0 -182px;}
.rank-list .fl .li-9 a em{background-position: 0 -208px;}
.rank-list .fl .li-10 a em{background-position: 0 -234px;}

.rank-list .fl li:hover a{background: url(../images/rank_icon1.png) no-repeat; background-position: 0 -163px;color: #fff; font-weight: bold;}
.rank-list .fl li:hover a em{background-position-x: -26px;}

.rank-list .fl .nav-more{display: block;width: 100%; height: 58px;overflow: hidden; zoom: 1;border-bottom: 1px solid #e7e7e7;}
.rank-list .fl .nav-more em{width: 18px; height: 17px; background: url(../images/rank_icon1.png) no-repeat; background-position: -77px -261px; transition: all ease .5s; margin: 17px 0 0 110px;display: block;}
.rank-list .fl .nav-more:hover em{background-position: -77px -261px;margin-top: 20px;}
.rank-list .fl .nav-more.up em{background-position: -77px -291px;}
.rank-list .fl .nav-more.up:hover em{margin-top: 15px;}
/* fr */
.rank-list .fr{width: 930px;}
.rank-list .fr li{border:1px solid #ddd; height: 150px; margin-bottom: 25px; position: relative;}
.rank-list .fr li .num{display: block; width: 35px; height: 26px; padding-top: 2px; background: url(../images/rank_icon1.png) no-repeat; background-position: -134px -227px; font-size: 16px; color: #fff; line-height: 26px; text-align: center; font-weight: bold; position: absolute; left: -3px; top: 0;}
.rank-list .fr li .g-l{width: 270px; height: 150px; float: left; background: url(../images/rank_icon1.png) no-repeat;padding-left: 24px; overflow: hidden; zoom: 1;}
.rank-list .fr li .g-l .tit{font-size: 18px; font-weight: bold; color: #333; height: 30px; line-height: 30px; padding-top: 20px; margin-bottom: 9px; width: 230px; overflow: hidden;float: left;}
.rank-list .fr li .g-l .img{display: block; width: 75px; height: 75px;  float: left; margin-right: 17px; overflow: hidden; border-radius: 14px;}
.rank-list .fr li .g-l .img img{width: 100%; height: 100%;border-radius: 14px; transition: all .2s;}
.rank-list .fr li .g-l p{height: 30px; line-height: 30px; color: #9d97be; font-size: 14px; margin-bottom: 8px;width: 158px; float: left; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.rank-list .fr li .g-l p i{margin: 0 6px; font-style: normal;}
.rank-list .fr li .g-l .btn{display: block; width: 100px;height: 30px; line-height: 30px; text-align: center; line-height: 30px; color: #fff; font-size: 14px; border-radius: 3px; background: #4cb749; transition: all .2s; float: left;}


.rank-list .fr li.li-1 .num{background-position-x: 0;}
.rank-list .fr li.li-2 .num{background-position-x: -45px;}
.rank-list .fr li.li-3 .num{background-position-x: -89px;}
.rank-list .fr li.li-1 .g-l .btn{background: #ff3737;}
.rank-list .fr li.li-2 .g-l .btn{background: #ff7439;}
.rank-list .fr li.li-3 .g-l .btn{background: #ff9c39;}

.rank-list .fr li .g-l .tit:hover{color: #4cb749;}
.rank-list .fr li .g-l .img img:hover{transform: scale(1.1);}
.rank-list .fr li .g-l .btn:hover{transform: translateY(-4px);}

.rank-list .fr li .g-r{padding-top: 30px; width: 607px; float: right; margin-right: 24px;}
.rank-list .fr li .g-r .tags{height: 24px; overflow: hidden; zoom: 1; line-height: 24px;font-size: 14px;margin-bottom: 18px;}
.rank-list .fr li .g-r .tags span{display: block; float: left; width: 55px; color: #666;}
.rank-list .fr li .g-r .tags i{display: block; padding: 0 12px; height: 24px; line-height: 24px; color: #999; background: #f0f0f0; float: left; border-radius: 12px; margin-right: 25px; font-style: normal;}
.rank-list .fr li .g-r .tags a{display: block; padding: 0 12px; height: 24px; line-height: 24px; color: #70c86c; background: #e8f9e6; float: left; border-radius: 12px; margin-right: 25px; font-style: normal;}
.rank-list .fr li .g-r .rec span{display: block; float: left; width: 55px; color: #666; height: 28px; line-height: 28px;}
.rank-list .fr li .g-r .rec p{margin-left: 55px; height: 56px; line-height: 28px; color: #999; overflow: hidden;}

.more-btn{display: block; width: 358px; height: 34px; line-height: 34px; border-radius: 3px; margin: 0 auto; border:1px solid #4cb749; color: #4cb749;text-align: center;}
.more-btn:hover{color: #fff; background: #4cb749;}