@charset "UTF-8";
.top-banner{width: 100%; height:65px; background: #6dd160; position: relative; overflow:hidden; zoom: 1;}
.top-banner em{float: left; display: block; width: 30px; height: 34px; background: url(../images/rank_icon.png) no-repeat;margin: 15px 0 0 15px;}
.top-banner h1{font-size: 28px; font-weight: bold; text-shadow: 0 2px 3px #ccc; color: #fff;height:65px; line-height:65px; margin: 0 0 0 60px;}
.top-banner i{display: block; width:40px; height: 36px; background: url(../images/rank_icon.png) no-repeat; background-position: -54px 0; position: absolute; right: 0; bottom: 0;}

.fl_nav{ margin: 20px 0 0;}
.fl_nav ul{ overflow:hidden;zoom:1; padding: 0 4px;}
.fl_nav ul li{ width: 25%; margin-bottom: 16px; float: left;}
.fl_nav ul li a{ display: block; width: 90%; margin: 0 auto; height: 24px; line-height: 24px;text-align: center;color: #787878; font-size: 14px; border-radius: 12px; overflow: hidden; border:1px solid #cacaca;}
.fl_nav ul li.active a{ border:1px solid #4cb749;color: #4cb749;}

.fl_nav ul li.fl_last_nav a{color: #aaa;}
.fl_nav ul li.fl_last_nav em{ display: inline-block; width:6px; height: 6px; margin-left: 4px;border-right: 1px solid #888; border-bottom: 1px solid #888; transform: rotate(45deg); vertical-align: top; margin-top: 6px;}
.fl_nav ul li.fl_last_nav.up em{ transform: rotate(225deg);margin-top: 11px; }

/* rank-list */
.rank-list{padding: 0 10px 20px;}

.top-list{height: 217px; padding-bottom: 16px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;position: relative;}
.top-list .top-item{width: 32%;height: 143px; border-top-left-radius: 8px; border-top-right-radius: 8px;position: absolute;bottom:16px;}
.top-list .top-item .num{display: block; width: 22px; height: 28px;background: url(../images/rank_icon.png) no-repeat; font-size: 14px; color: #fff; text-align: center; line-height: 22px;font-style: normal;position: absolute; top: -40px; z-index: 2;left: 50%; margin-left: -39px;}
.top-list .top-item .gimg{display: block; width: 56px; height: 56px; border-radius: 10px; position: absolute; left: 50%; margin-left: -28px; top: -30px; z-index: 1;overflow: hidden;}
.top-list .top-item .gimg img{display: block; width: 100%; height: 100%; border-radius: 10px;}
.top-list .top-item .t{display: block; font-size: 16px; font-weight: bold; text-align: center; height: 22px; line-height: 22px; color: #252525; overflow: hidden; padding-top: 38px;}
.top-list .top-item .type{ font-size: 12px; color: #666; height: 20px;line-height: 20px; overflow: hidden; text-align: center; margin: 6px 0 16px;}
.top-list .top-item .gbtn{display: block;width: 64px;height: 28px;line-height: 28px;font-size: 14px;color: #fff;text-align: center;border-radius: 3px;margin: 0 auto;}

.top-list .top-item:nth-child(2){background: #e7ebf8;left: 0;}
.top-list .top-item:nth-child(1){background: #ffe5d5;left:34%;height: 165px;}
.top-list .top-item:nth-child(3){background: #fff2bd;right:0;}

.top-list .top-item:nth-child(2) .num{background-position: -31px -46px;}
.top-list .top-item:nth-child(1) .num{background-position: 0 -46px;margin-left: -45px;}
.top-list .top-item:nth-child(3) .num{background-position: -60px -46px;}

.top-list .top-item:nth-child(1) .gimg{width: 68px;height: 68px; border-radius: 12px;margin-left: -34px;}
.top-list .top-item:nth-child(1) .gimg img{border-radius: 12px;}
.top-list .top-item:nth-child(1) .t{padding-top: 50px;}

.top-list .top-item:nth-child(2) .gbtn{background: #ff7d45;}
.top-list .top-item:nth-child(1) .gbtn{background: #ff4545;}
.top-list .top-item:nth-child(3) .gbtn{background: #ffa245;}

/* .rank-list ul */
.rank-list ul{margin-bottom: 20px;}
.rank-list li{width: 100%; overflow: hidden;zoom:1; position: relative;zoom:1;padding: 15px 0;border-bottom: 1px solid #ececec;}
.rank-list li .num{float: left; font-size: 14px;width: 22px;height: 22px; line-height: 22px; font-style: normal;color: #fff; background: #ccc; margin: 9px 9px 0 0;display: block; border-radius: 50%; text-align: center;}
.rank-list li .gimg{display: block; width: 68px; height: 68px; float: left;}
.rank-list li .gimg img{width: 100%; height: 100%; border-radius: 12px;}
.rank-list li .mid{height: 68px; margin: 0 70px 0 110px;}
.rank-list li .mid a{display: block; height: 22px; line-height: 22px; overflow: hidden;color: #252525; font-size: 16px; font-weight: bold;margin-bottom: 5px;}
.rank-list li .mid .type{font-size: 12px;color: #a5a5a5; height: 18px; line-height: 18px; overflow: hidden;}
.rank-list li .mid .des{font-size: 12px;color: #666; height: 18px; line-height: 18px; overflow: hidden;margin-top: 5px;}
.rank-list li .gbtn{display:block;width: 64px;height: 28px;line-height: 28px;font-size: 14px;color: #fff;position:absolute;right:0;top:36px;text-align: center;border-radius: 3px;background: #4cb749;}

.rank-list li .mid .star{width: 70px; height: 12px; background: url(../images/rank_icon.png) no-repeat; overflow: hidden;zoom:1;background-position: 0 bottom;margin: 8px 0;}
.rank-list li .mid .star em{display: none;}

.more-btn{display: block; width: 100%; height: 34px; line-height: 34px;text-align: center;background: #f1f1f1; color: #555; font-size: 12px;}
.more-btn em{display: inline-block; width:6px; height: 6px; margin-left: 4px;border-right: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; transform: rotate(45deg); vertical-align: top; margin-top: 12px;}