@charset "utf-8";

.main-content {display: flex;}
.main-content .rank {width: 275px;margin-right: 25px;}
.main-content .rank:nth-of-type(4n) {margin-right: 0;}
.main-content .rank .rank-title {height: 55px;line-height: 55px;border-bottom: 2px solid #0085da;font-size: 24px;}
.main-content .rank .rank-title span {font-weight: 400;color: #0085da}
.main-content .rank:nth-of-type(2) .rank-title {border-color: #FFA633;}
.main-content .rank:nth-of-type(2) .rank-title span {color: #FFA633;}
.main-content .rank:nth-of-type(3) .rank-title {border-color: #52CAC0;}
.main-content .rank:nth-of-type(3) .rank-title span {color: #52CAC0;}
.main-content .rank:nth-of-type(4) .rank-title {border-color: #CC98E1;}
.main-content .rank:nth-of-type(4) .rank-title span {color: #CC98E1;}
.main-content .rank .item {clear: both;border-bottom: 1px dashed #ddd;position: relative;padding: 10px 0 10px 30px;overflow: hidden}
.main-content .rank .item i {position: absolute;left: 0;top: 10px;width: 20px;height: 20px;line-height: 20px;background: #e5e5e5;text-align: center}
.main-content .rank .item:nth-of-type(-n+4) i {background: #0085da;color: #fff}
.main-content .rank:nth-of-type(2) .item:nth-of-type(-n+4) i {background-color: #FFA633;}
.main-content .rank:nth-of-type(3) .item:nth-of-type(-n+4) i {background-color: #52CAC0;}
.main-content .rank:nth-of-type(4) .item:nth-of-type(-n+4) i {background-color: #CC98E1;}
.main-content .rank .cur {height: 82px}
.main-content .rank .focus img {width: 82px;height: 82px;float: left;margin-right: 10px;border-radius: 20%;}
.main-content .rank .focus .info {flex: 1;min-width: 0;}
.main-content .rank .focus span,
.main-content .rank .focus p {display: block;color: #999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-bottom: 8px;}
.main-content .rank .btn {display: inline-block;width: 66px;height: 26px;line-height: 26px;border: 1px solid #f60;border-radius: 2px;color: #f60;background: url(../images/ico_3.png) no-repeat 8px 7px;padding-left: 30px;}
.main-content .rank .btn:hover {background-image: url(../images/ico_2.png);background-color: #f60;color: #fff}
.main-content .rank .cur .name,
.main-content .rank .item .focus {display: none}
.main-content .rank .cur .focus {display: flex}

.zt-box .gameImages {display: flex;flex-wrap: wrap;}
.zt-box .gameImages .pic {display: block;width: 223px;height: 130px;margin-right: 15px;margin-bottom: 15px;transition: all 0.3s;}
.zt-box .gameImages .pic:hover {opacity: 0.8;}
.zt-box .gameImages .pic:nth-of-type(5n) {margin-right: 0;}
.zt-box .gameImages .pic img {display: block;width: 100%;height: 100%;object-fit: cover;}

.news-box .news_L {width: 380px;float: left;}
.news-box .news_L .bigimg {width: 100%;}
.news-box .news_L .bigimg li {width: 100%;height: 210px;margin-bottom: 20px;border-radius: 4px;overflow: hidden;}
.news-box .news_L .bigimg li img {display: block;width: 100%;height: 100%;object-fit: cover;transition: all 0.3s;}
.news-box .news_M {width: 455px;float: left;margin: 0 20px;}
.news-box .news_M .hot {padding: 0 16px;background: url(../images/bg2.jpg) repeat-x;}
.news-box .news_M .hot .title {padding-top: 8px;height: 36px;line-height: 36px;text-align: center;font-size: 18px;font-weight: normal;margin-bottom: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news-box .news_M .hot .title a {color: #f60;}
.news-box .news_M .hot p {font-size: 14px;line-height: 20px;height: 40px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-box .news_M .news-list {padding: 0 10px;font-size: 15px;margin-top: 20px;}
.news-box .news_M .news-list li {height: 37px;line-height: 37px;overflow: hidden;position: relative;padding-left: 17px;}
.news-box .news_M .news-list li i {display: block;width: 5px;height: 5px;border-radius: 50%;background-color: #ccc;position: absolute;left: 0;top: 50%;margin-top: -2.5px;}
.news-box .news_M .news-list li a {display: block;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news-box .news_M .news-list li span {color: #999;font-size: 14px;float: right;}
.news-box .news_R {width: 300px;float: right;}
.news-box .news_R .ztTitle {height: 20px;line-height: 20px;}
.news-box .news_R .ztTitle h4 {padding-left: 15px;position: relative;font-size: 18px;font-weight: bold;}
.news-box .news_R .ztTitle h4 i {display: block;width: 4px;height: 18px;background-color: #f60;position: absolute;left: 0;top: 50%;margin-top: -9px;}
.news-box .news_R .news-rank li {position: relative;height: 20px;line-height: 20px;overflow: hidden;margin-top: 21px;padding-left: 30px;}
.news-box .news_R .news-rank li .num {display: block;width: 20px;height: 20px;line-height: 20px;background-color: #ccc;text-align: center;color: #fff;position: absolute;left: 0;top: 50%;margin-top: -10px;}
.news-box .news_R .news-rank li:nth-of-type(1) .num {background-color: #ff6060;}
.news-box .news_R .news-rank li:nth-of-type(2) .num {background-color: #fa7a53;}
.news-box .news_R .news-rank li:nth-of-type(3) .num {background-color: #fbc258;}

.rank-box ul { display: flex; flex-wrap: wrap;}
.rank-box li { width: 275px; margin-right: 25px; margin-bottom: 30px;}
.rank-box li:nth-of-type(4n) {margin-right: 0;}
.rank-box .pic-wrap { display: block; height: 145px; overflow: hidden; position: relative; color: #fff; }
.rank-box .pic-wrap:hover .tit { -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); }
.rank-box .pic-wrap:hover .cover { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.rank-box .pic { display: block; width: 100%; height: 100%; }
.rank-box .btn { display: block; width: 86px; padding: 4px 0; margin: 18px auto 0; background-color: #3BAEF2; color: #fff;text-align: center;}
.rank-box .tit, .rank-box .cover { background: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000); -moz-transition: -moz-transform 0.3s 0.1s; -o-transition: -o-transform 0.3s 0.1s; -webkit-transition: -webkit-transform 0.3s; -webkit-transition-delay: 0.1s; transition: transform 0.3s 0.1s; }
.rank-box .tit { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; line-height: 36px; text-align: center; font-size: 18px; font-weight: bold; color: #fff; overflow: hidden; }
.rank-box .cover { height: 125px; position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; padding: 10px 30px; }
.rank-box .cover-tit { height: 30px; line-height: 30px; font-size: 18px; overflow: hidden; }
.rank-box .cover-txt { max-height: 40px; line-height: 20px; font-size: 14px; overflow: hidden; margin-top: 3px; }
.rank-box .info-group { display: block; overflow: hidden; position: relative; margin-top: 10px; padding-right: 65px; }
.rank-box .info-pic { width: 50px; height: 50px; border-radius: 10px; float: left; margin-right: 5px; }
.rank-box .info-tit { line-height: 22px; height: 22px; font-size: 15px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-box .info-txt { line-height: 19px; height: 19px; overflow: hidden; color: #999; margin-top: 7px; }
.rank-box .info-btn { width: 60px; height: 22px; line-height: 22px; text-align: center; background-color: #DCEAF3; color: #3BAEF2; border-radius: 10px; position: absolute; right: 0; top: 50%; margin-top: -11px; }
.rank-box .info-btn:hover { background-color: #3BAEF2; color: #fff; }
.rank-box .more-btn {display: block;border: 1px solid #c3c3c3;height: 50px;line-height: 50px;width: 380px;text-align: center;font-size: 20px;color: #c3c3c3;border-radius: 16px;margin: 10px auto 28px;}
.rank-box .more-btn:hover {background-color: #f60;border-color: #f60;color: #fff;}