@charset "utf-8";


.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }
.clearfix:after,.clearfix:before {content: "";display: table;}
.clearfix:after {clear: both;}
/*1920x200 Banner*/
.banner {position: relative;width: 100%;height: 200px;  overflow: hidden;}
.banner img {position: absolute;top: 0; left: 50%;transform: translateX(-50%);width: 1920px;height: 200px;}

.main { width: 1200px;  margin: 0 auto;}
body .yui-breadcrumb0 {  margin: 20px;}
.yui-breadcrumb0 { vertical-align: middle;  color: #565656;}
.yui-breadcrumb0 .icon {/* margin-right: 10px; */width: 17px;height: 17px;vertical-align: middle;margin: 0px 7px 0px -17px;}
.yui-icon-location0-blue {  font-size: 14px;   color: #3da6ff;}

/* 左侧排行榜 */
.phb-cont{display: table;margin: 0 auto 20px;width: 1200px;}
.phb-left{width: 278px;height: auto;margin-right: 30px;    border: 1px solid #f2f2f2;box-sizing: border-box;}
.phb-right{width: 890px;height: auto;min-height: 600px;}
.phb-left ul li{width: 276px;height:auto;}
.phb-left ul li p{width: 276px;height: 50px;margin-bottom:1px;line-height: 50px;text-align: center;font-size: 14px;color:#666;background: #fcfcfc;cursor: pointer;float: left;}
.phb-left ul li:hover p{color: #589cf6;}
.phb-styl p{background: #00aeef !important;color: #fff !important;font-weight: bold;/* box-shadow: 0 8px 20px rgb(24, 107, 125); */position: relative;z-index: 2;}
.phb-list{width: 270px;background: #fff;margin:0 0 10px 5px;padding: 10px 0;display: none;}
.phb-list a{width: 40%;display: block;float: left;height: 40px;line-height: 40px;padding: 0 4%;text-align: center;overflow: hidden;font-size: 14px;color: #666;}
.phb-list a:hover{color: #589cf6;}
.phb-list .active{color: #589cf6;}


/*phbR LIST*/
.phb-r-top{width: 890px;height: auto;background: #fff;padding-bottom: 10px;display: table;}
.phb-r-top ul{display: block;width: 890px;padding: 10px 0;max-height: 120px;overflow: hidden;position: relative;}
.phb-r-top ul li{display: block;float: left;padding: 10px 5px;position: relative;}
.phb-r-top ul li a{font-size: 14px;color: #808080;}
.phb-r-top ul li a:hover,.phb-r-top ul li.hover a{color: #589cf6;}
.phb-r-top ul li span{color: #fff;display: inline-block;width: 20px;height: 10px;text-align: center;font-weight: bold;*height: 19px;*line-height:19px;}
.ls-showmor p{font-size: 14px;color: #589cf6;text-align: center;line-height: 30px;height: 30px;width: 80px;background: #f0f0f0;font-weight: bold;cursor: pointer;border-bottom-left-radius: 15px;border-top-left-radius: 15px;}
.ls-showmor p:hover{background: #589cf6;color: #fff;box-shadow: -4px 2px 10px rgba(44,114,235,.3);}
.phb-lisc{width: 890px;}
.phb-lisc>ul>li{height: auto;display:block;float: left; margin-bottom: 1px ;background: #fff;padding-left: 10px;}
.phlis-lef{width: 100px;height: 100px;margin:35px 20px;position: relative;}
.phlis-lef span{display: block;float: left;text-align: center;line-height: 45px;font-weight: bold;font-size: 28px;color: #fff;width: 50px;height: 50px;position: absolute;left: -20px;top: -20px;    z-index: 2;}
.phlis-lef img{display: block;float: left;margin-top: 10px;width: 100px;height: 100px;border-radius: 12px;}
.phgame-name{width: 720px;height: 70px;margin-top: 20px;}
.phgame-name>a p{width: 580px;height: 36px;color: #595959;font-size: 18px;font-weight: bold;overflow: hidden;line-height: 36px;margin: 0;padding: 0;}
.gam-pf {
    margin: 0px;
    width: 580px;
    height: 26px;
}
.gam-pf>p{display: block;float: left;font-size: 12px;color: #8ba8a3;margin-top: 10px;}
.game-dowl{display: block;float: right;margin-top: -45px;width: 120px;height: 40px;text-align: center;line-height: 40px;font-size: 16px;color: #589cf6;border: 1px solid #589cf6;border-radius: 4px;}
.game-dowl:hover{background: #589cf6;color: #fff;}
.phb-lisc>ul>li>p{display: block;float: left;margin: 10px 0;line-height: 22px;font-size: 14px;color: #808080;width: 710px;height: 48px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.pq-lis ul{display: block;float: left;width: 710px;height: 28px;overflow: hidden;}
.pq-lis ul li{float: left;width: 72px;height: 28px;margin-right: 10px;text-align: center;line-height: 28px;background: #f0f3f3;border-radius:4px;color: #666;font-size: 14px;}
.phb-lisc>ul>li:hover .phgame-name>a p{color: #589cf6;}
.pq-lis ul li:hover{color: #fff;background: #589cf6;}
.pt-style span{color: #589cf6 !important;}
.pt-style a{color: #589cf6 !important;}
.star-c{width: 106px;height: 20px;display: block;float: left;position: relative;background: url(/SkinNew/images/ico-star2.png) repeat-x;margin-right: 15px;margin-top: 5px;}
.star-c p{width: 106px;height: 20px;position: absolute;left: 0;top: 0;background: url(/SkinNew/images/ico-star1.png) repeat-x;overflow: hidden;max-width: 106px;line-height: 80px;margin: 0;}

/*排行榜页面样式*/
.mar-bot20 {
    margin-bottom: 20px;
}
.updateTime {
    position: relative;
    left: 900px;
    top: 20px;
    font-size: 14px;
    color: #999;
}
.box-title {
    height: 35px;
    position: relative;
}
.box-title h1, .box-title h2, .box-title h3, .box-title p {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    left: 20px;
    top: 15px;
    line-height: 35px;
    font-weight: 700;
    border-left: 2px solid #00aeef;
    font-size: 20px;
}
.box, .box-text {
    zoom: 1;
    margin-bottom: 20px;
    background: #fff;
}
.box:after, .box-text:after {
    content: '';
    visibility: hidden;
    display: block;
    clear: both;
}
.game-rank-con {
    margin: 10px 0 0 10px;
}
.game-poker {
    zoom: 1;
}
.game-poker li {
    width: 176px;
    padding: 14px 0;
    border: 1px solid #f5f5f5;
    /* border: 1px solid #ddd; */
    text-align: center;
    position: relative;
    float: left;
    margin: 10px 20px 10px 30px;
}
.game-poker li:hover {
    background: #f5f5f5;
}
.game-poker li a.info {
    display: block;
    position: relative;
    text-align: center;
}
.game-poker li a.info img {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px auto;
}
.game-poker li a.info p {
    width: 166px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.game-poker li a.info .radius120 {
    left: 28px;
}
.game-poker li .type {
    color: #999;
    line-height: 22px;
    cursor: default;
}
.game-poker .fav {
    margin: 5px 0 10px 0;
    height: 15px;
}
.game-poker .fav span {
    /* line-height: 30px; */
    color: #ff6d00;
}
.game-poker .fav img {
    width: 16px; 
    height: 16px;
}
.game-poker li .down {
    display: block;
    width: 86px;
    height: 28px;
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 0 auto;
    text-align: center;
    line-height: 28px;
    background: #fafafa;
    background: -moz-linear-gradient(top, #fff, #fafafa);
    background: -webkit-linear-gradient(top, #fff, #fafafa);
    background: -ms-linear-gradient(top, #fff, #fafafa);
    background: -o-linear-gradient(top, #fff, #fafafa);
}
.game-poker li:hover .down {
    background: #00aeef;
    border-color: #00aeef;
    color: #fff;
    text-decoration: none;
}
.radius120 {
    width: 120px;
    height: 120px;
    display: block;
    background: url(/SkinNew/images/img_radius.png) no-repeat 0 0;
    background-repeat: no-repeat;
    background-position: 0 -330px;
    position: absolute;
    top: 0;
    left: 0;
}
.corner {
    width: 55px;
    height: 55px;
    background: url(/SkinNew/images/corner_bg.png) no-repeat 100px 100px;
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 50;
}


/*相关排行榜*/
.rTabList {
    width: 100%;
    background-color: #fff;
    margin-bottom: 14px;
}
.rTabList ul {
    overflow: hidden;
    padding: 15px 0 15px 10px;
}
.rTabList ul li {
    position: relative;
    float: left;
    margin: 0 0 10px 20px;
    border: 1px solid #eee;
    width: 105px;
    height: 62px;
    line-height: 18px;
}
.rTabList ul li:hover a {
    color: #fff;
}
a:focus, a:hover {
    -webkit-transition: color 150ms ease-in 0s,background-color 150ms ease-in 150ms;
    -moz-transition: color 150ms ease-in 0s,background-color 150ms ease-in 150ms;
    -ms-transition: color 150ms ease-in 0s,background-color 150ms ease-in 150ms;
    -o-transition: color 150ms ease-in 0s,background-color 150ms ease-in 150ms;
    transition: color 150ms ease-in 0s,background-color 150ms ease-in 150ms;
}
.rTabList ul li:nth-child(1):after, .rTabList ul li:nth-child(1):before {
    background-color: #ec5747;
}
.rTabList ul li:nth-child(1):hover {
    background-color: #ec5747;
}
.rTabList ul li:nth-child(2):after, .rTabList ul li:nth-child(2):before {
    background-color: #8c97cb;
}
.rTabList ul li:nth-child(2):hover {
    background-color: #8c97cb;
}
.rTabList ul li:nth-child(3):after, .rTabList ul li:nth-child(3):before {
    background-color: #5dc9ea;
}
.rTabList ul li:nth-child(3):hover {
    background-color: #5dc9ea;
}
.rTabList ul li:nth-child(4):after, .rTabList ul li:nth-child(4):before {
    background-color: #b3d465;
}
.rTabList ul li:nth-child(4):hover {
    background-color: #b3d465;
}
.rTabList ul li:nth-child(5):after, .rTabList ul li:nth-child(5):before {
    background-color: #a6937c;
}
.rTabList ul li:nth-child(5):hover {
    background-color: #a6937c;
}
.rTabList ul li:nth-child(6):after, .rTabList ul li:nth-child(6):before {
    background-color: #f6c15b;
}
.rTabList ul li:nth-child(6):hover {
    background-color: #f6c15b;
}
.rTabList ul li:nth-child(7):after, .rTabList ul li:nth-child(7):before {
    background-color: #f19ec2;
}
.rTabList ul li:nth-child(7):hover {
    background-color: #f19ec2;
}
.rTabList ul li:nth-child(8):after, .rTabList ul li:nth-child(8):before {
    background-color: #e4a1f0;
}
.rTabList ul li:nth-child(8):hover {
    background-color: #e4a1f0;
}
.rTabList ul li:nth-child(9):after, .rTabList ul li:nth-child(9):before {
    background-color: #a6937c;
}
.rTabList ul li:nth-child(9):hover {
    background-color: #a6937c;
}

.rTabList ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 23px;
}
.rTabList ul li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 23px;
    width: 1px;
}
.rTabList ul li a {
    position: relative;
    display: block;
    width: 105px;
    height: 62px;
    font-size: 14px;
    color: #999;
    text-align: center;
}
.rTabList ul li a span {
    display: inline-block;
    width: 85px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.rTabList ul li i {
    display: block;
    position: absolute;
    width: 47px;
    height: 6px;
    background-position: -448px -141px;
    bottom: -7px;
    right: 0;
}
.ico {
    background: url(/SkinNew/images/top_icon.png) no-repeat;
    background-size: 800px 800px;
}


/*最新排行榜*/
.title-bar, .title-bar a {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #27222c;
    font-weight: 700;
    border-bottom: 1px solid #ebebeb;
    margin-left: 20px;
}
.title-bar h3 {
    float: left;
    height: 48px;
    border-bottom: 2px solid #00aeef;
    font-size: 16px;
    font-weight: 600;
}
.gameph-list {
    margin-left: 10px;
    margin-top: 20px;
}
.gameph-list li {
    width: 80px;
    float: left;
    margin: 0 18px;
    position: relative;
}
.gameph-list li .top {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 49px;
    height: 49px;
    background-repeat: no-repeat;
    background-position: center center;
}
.gameph-list li .top1 {
    background-image: url(/SkinNew/images/top1.png);
}
.gameph-list li .top2 {
    background-image: url(/SkinNew/images/top2.png);
}
.gameph-list li .top3 {
    background-image: url(/SkinNew/images/top3.png);
}
.gameph-list li a {
    font-size: 14px;
    color: #5c5761;
}
.gameph-list li a:hover {
    text-decoration: underline;
    color: #e95e4b;
}
.gameph-list li img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
}
img, tfoot, thead {
    vertical-align: middle;
}
.gameph-list li span {
    margin-top: 10px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: center;
}