:root {
	--pm-c: #ffcd00;
}
#top {
    height: 44px;
    background: #F7F7F7;
    border-bottom: 1px solid #e5e5e5;
    line-height: 44px;
    font-size: 14px;
    color: #999;
}

#header {
    height: 102px;
    background: #fff;
}

#menu {
    width: 200px;
    height: 50px;
    background: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

#menu img {
    margin-right: 10px;
}

#header .center {
    height: 102px;
}

#footer {
    background: #333333;
    color: #c4c4c4;
    overflow: hidden;
    padding: 25px 0;
    margin-top: 17px;
}

#footer p {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

#footer a {
    color: #c4c4c4;
    margin-right: 8px;
    margin-left: 10px;
}

#footer a:hover {
    color: var(--public-color)
}

.index-bg {
    background: #FBFCFD url('../images/index_bg.png')no-repeat center top;
    padding-top: 10px;
}

.search form {
    width: 413px;
    height: 38px;
    border-radius: 4px;
    border: solid 1px #dcdcdc;
    background: #fff;
}

.search form input {
    border: none;
    margin-left: 25px;
    font-size: 12px;
    color: #999;
}

.search p {
    display: flex;
    margin-top: 14px;
    align-items: center;
    font-size: 12px;
    color: var(--public-color);
    width: 413px;

}

.search p a {
    color: #999;
    margin-left: 20px;
}

.search p img {
    margin-right: 10px;
    ;
}

.search form button {
    background: var(--public-color);
    width: 56px;
    height: 38px;
    border: none;
    margin-top: -1px;
    margin-right: -1px;
    border-radius: 0 4px 4px 0;
    color: #333;
}

#nav {
    height: 50px;
    background: #fff;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.02);
}

#nav .center {
    position: relative;
}

.nav-ul {
    margin-left: 40px;
}

.nav-ul li {
    margin-right: 57px;
}

.nav-ul li:hover a {
    font-size: 18px;
    font-weight: bold;
}

.nav-ul li.active a {
    font-size: 18px;
    font-weight: bold;
    position: relative;

}

.nav-ul li.active a::after {
    position: absolute;
    content: '';
    bottom: 12px;
    right: -11px;
    margin: auto;
    background: var(--public-color);
    width: 36px;
    height: 9px;
    z-index: 1;
}

.nav-ul li a {
    display: block;
    height: 50px;
    line-height: 50px;
}

.nav-ul li a span {
    position: relative;
    font-size: 18px;
    color: #333;
    z-index: 99;
    display: block;
}

.public-menu {
    transition: all .2s ease-out;
    width: 200px;
    height: 533px;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #ffffff;
    z-index: 99;
    display: flex;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 10%) !important;
}

.public-bg {
    background: #FBFCFD;
    overflow: hidden;
}

.public-menu-nav {
    width: 73px;
    height: 533px;
    background: #F9F9F7;
}

.public-menu-content {
    width: 127px;
}

.public-menu-nav .item {
    height: 80px;
    line-height: 23px;
    color: #999;
    font-size: 16px;
    padding: 0 15px;
    padding-top: 20px;
    text-align: center;
    cursor: pointer;
}

.public-menu-nav .active {
    background: #fff;
    color: #ff7900;
}

.public-menu-content .item {

    text-align: center;
}

.public-menu-content .item a {
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    justify-content: space-between;
    padding-right: 10px;
    color: #999;
    font-size: 16px;
}

.public-menu-content .item a:hover {
    background: #f9f9f7;
    color: var(--public-color)
}

.menu-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.public-menu-title {
    text-align: center;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin: 15px 0;
    margin-bottom: 30px;
}

.public-menu-name {
    width: 91px;
    height: 28px;
    background: #42adff;
    border-radius: 0px 14px 14px 0px;
    text-align: center;
    line-height: 28px;
    font-size: 15px;
    color: #fff;
    margin-bottom: 15px;
}

.public-menu-a {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.public-menu-a a {
    font-size: 14px;
    color: #666;
    margin-right: 15px;
    margin-bottom: 10px;
}

.index-bg .center {}

.index-commentOne-cont .item ul {
    display: flex;
    flex-wrap: wrap;
}

.index-commentOne-cont .item ul li {
    width: 90px;
    margin-right: 28.5px;
    text-align: center;
}

.index-commentOne-cont .item ul li .img:hover {
    animation: turn 1s linear;
}

.index-commentOne-cont .item ul li:last-child {
    margin-right: 0;
}

.index-commentOne-cont .item ul li .img {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    display: block;
}

.index-commentOne-cont .item ul li p {
    margin: 8px 0;
}

.index-commentOne-cont .item ul li p.name a {
    font-size: 16px;
    color: #333;
}

.index-commentOne-cont .item ul li .down {
    width: 87px;
    height: 30px;
    border: solid 1px #eeeeee;
    line-height: 30px;
    font-size: 14px;
    color: #858585;
    margin: 0 auto;
}

.index-commentOne-cont .item ul li:hover p.name a {
    color: var(--public-color)
}

.index-commentOne-cont .item ul li:hover .down {
    background: var(--public-color);
    border: solid 1px var(--public-color);
    color: #fff;
}

.index-commentOne-nav li {
    font-size: 14px;
    color: #666;
    position: relative;
    width: 96px;
    margin-right: 23px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
}

.index-commentOne-nav li.active {
    color: var(--public-color)
}

.index-commentOne-nav li::after {
    content: '/';
    position: absolute;
    right: -10px;
    top: 1px;
    font-size: 12px;
    color: #d5d5d5;
}

.index-commentOne-nav li:last-child {
    margin-right: 0;
    width: 80px;
}

.index-commentOne-nav li:last-child::after {
    display: none;
}

.index-tags-one .hot-tags {
    width: 85px;
    height: 32px;
    background-image: linear-gradient(-77deg,
            #fa4f4f 0%,
            #fda9e1 100%),
        linear-gradient(#149ffa,
            #149ffa);
    background-blend-mode: normal,
        normal;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
}

.index-links-list {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-left: 18px;
    margin-bottom: 20px;
}

.index-links-list a {
    margin-right: 15px;
    margin-top: 15px;
    font-size: 12px;
    color: #666;
    position: relative;
    padding-right: 15px;
}

.index-links-list a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 1px;
    height: 12px;
    width: 1px;
    background: #666;
}

.index-links-list a:hover {
    color: var(--public-color)
}

.index-tags-one .news-tags {
    width: 85px;
    height: 32px;
    background-image: linear-gradient(-77deg,
            #4f73fa 0%,
            #6afffd 100%),
        linear-gradient(#149ffa,
            #149ffa);
    background-blend-mode: normal,
        normal;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
}

.index-tags-one a {
    margin-right: 16px;
    padding-right: 8px;
    position: relative;
}

.index-tags-one ul {
    margin-left: 20px;
}

.index-tags-one a::after {
    content: '|';
    color: #ccc;
    position: absolute;
    right: -8px;
    top: 0;
}

.index-container .left {
    width: 350px;
}

.index-container .mid {
    width: 488px;
}

.index-container .right {
    width: 338px;

}

.index-notice-swiper {
    width: 710px;
    height: 330px;
    overflow: hidden;
    position: relative;
}

.index-notice-swiper .swiper-pagination-bullet {
    width: 15px;
    height: 4px;
    background: #eeeeee;
    border-radius: 2px;
    opacity: .5;
}

.index-notice-swiper .swiper-pagination-bullet-active {
    opacity: .5;
    background: var(--public-color);
}

.index-notice-swiper .swiper-button-next,
.index-notice-swiper .swiper-button-prev {
    background-size: 18px 30px;
}

.index-notice-swiper .img {
    width: 710px;
    height: 330px;
    display: block;
    position: relative;
}

.index-notice-swiper .img p {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    width: 100%;
    color: #fff;
    padding: 0 15px;
}

.index-swiperGame-list ul {
    flex-wrap: wrap;
}

.index-swiperGame-list ul li {
    width: 100px;
    margin-top: 18px;
}

.index-swiperGame-list ul li .img {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
}

.index-swiperGame-list ul li .img:hover span {
    display: block;
}

.index-swiperGame-list ul li .img span {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 24px;
    color: #5fc0ff;
    font-weight: bold;
    text-align: center;
    line-height: 75px;
}

.index-swiperGame-list ul li .img img {
    width: 75px;
    height: 75px;
    border-radius: 10px;
}

.index-swiperGame-list ul li p {
    text-align: center;
    margin-top: 18px;
}

.index-swiperGame-list ul li p a {
    color: #333;
}

.index-swiperGame-list ul li:hover p a {
    color: var(--public-color)
}

.public-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.public-title span {
    color: #333;
    font-weight: bold;
    font-size: 16px;
    padding-left: 13px;
    position: relative;
}

.public-title span::after {
    position: absolute;
    content: '';
    left: 0;
    top: 1px;
    height: 15px;
    width: 5px;
    background: var(--public-color);
}

.public-title a {
    height: 14px;
    width: 14px;
    margin-right: 16px;
}

.index-swiper-strategy {
    margin: 0 15px;
}

.index-swiper-strategy ul li {
    width: 156px;
    margin-top: 18px;
}

.index-swiper-strategy ul li:hover .img::after {
    display: none;
}

.index-swiper-strategy ul li .img {
    width: 156px;
    height: 95px;
    position: relative;
}



.index-swiper-strategy ul li p {
    margin-top: 15px;
}

.index-swiper-strategy ul li p a {
    font-size: 14px;
    color: #666;
}

.index-swiper-strategy ul li p a:hover {
    color: var(--public-color)
}



.public-list ul li {
    display: flex;
    justify-content: space-between;
    margin: 17px 0;
    align-items: center;
}

.public-list ul li span.gl {
    color: #999;
    font-size: 13px;
    margin-right: 16px;
}

.public-list ul li .dd {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--public-color);
    margin-right: 12px;
}

.public-list ul li a {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.yd-list {
    margin: 0 16px;
    margin-top: 20px;
}

.yd-list li .tags {
    width: 19px;
    height: 16px;
}

.yd-list li:hover a {
    color: var(--public-color)
}

.yd-list li .time {
    font-size: 13px;
    color: #999;
}

.yd-list ul li a {
    margin-left: 10px;
    padding-right: 20px;
    font-size: 14px;
    color: #333;
}

.public-dd-list {
    margin-left: 13px;
    margin-right: 20px;
    margin-top: 12px;
}

.public-dd-list ul li a {
    font-size: 15px;
    color: #666;
}

.public-list-gift {
    margin: 0 16px;
    margin-top: 20px;
}

.public-list-gift ul li {
    margin: 15px 0;
}

.public-list ul li a.get {
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 13px;
    color: var(--public-color);
    margin-left: 10px;
}

.public-gl-list {
    margin: 0 19px;
    margin-top: 10px;
}

.mid .public-gl-list ul li {
    margin: 20px 0;
}

.public-gl-list ul li .time {
    font-size: 13px;
    color: #999;
    margin-left: 15px;
}

.index-todayTab-tab {
    display: flex;
    justify-content: space-between;
}

.index-todayTab-tab .item {
    width: 24.5%;
    text-align: center;
    background: #f5f5f5;
    font-size: 16px;
    color: #666;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
}

.index-todayTab-tab .active {
    background: #fff;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    position: relative;
}

.index-todayTab-tab .active::after {
    content: '';
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #149ffa;
}

.index-t1 {
    width: 309px;
    height: 165px;
}

.index-t1 img {
    width: 309px;
    height: 165px;
}

.index-right-comment ul li {
    height: 85px;
    background: url('../images/index_comment_bg.png')no-repeat;
    margin-top: 9px;
    position: relative;
}

.index-right-comment ul li .img {
    width: 65px;
    height: 65px;
    border-radius: 15px;
    margin-left: 40px;
}

.index-right-comment ul li .name {
    font-size: 16px;
    color: #333;
    margin-bottom: 13px;
}

.index-right-comment ul li .info {
    margin-left: 12px;
    font-size: 14px;
    color: #999;
}

.index-right-comment ul li .img img {
    width: 65px;
    height: 65px;
    border-radius: 15px;
}

.index-right-comment ul li .down {
    height: 33px;
    width: 31px;
    background: url('../images/index_comment_down.png')no-repeat center;
}

.index-right-comment ul li:hover .down {
    background: url('../images/index_comment_select.png')no-repeat center;
}

.index-right-comment ul li:hover a {
    color: var(--public-color)
}

.index-right-comment ul li .tags {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 45px;
    background: url('../images/index_comment_tags.png')no-repeat center;
}

.index-news-gift .img {
    width: 6px;
    height: 6px;
    background: var(--public-color);
    border-radius: 50%;
}

.index-news-gift ul li {
    position: relative;
    margin-top: 20px;
}

.index-news-gift ul li .img img {
    display: none;
}

.index-news-gift ul li.active {
    margin-bottom: 25px;
}

.index-news-gift ul li.active .img {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    background: none;
}

.index-news-gift ul li .name {
    font-size: 16px;
    color: #333;
    margin-bottom: 0;
    margin-right: 10px;
}

.index-news-gift ul li.active .name {
    margin-bottom: 16px;
}

.index-news-gift ul li.active .img img {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    display: block;
}

.index-news-gift ul li .down {
    font-size: 14px;
    color: var(--public-color);
}

.index-news-gift ul li .info {
    margin-left: 14px;
}

.index-news-gift ul li.active .info p {
    width: 122px;
    color: #999;
    line-height: 20px;
    display: -webkit-box;
}

.index-news-gift ul li .info p {
    display: none;
}

.index-news-gift ul li.active .down {
    position: absolute;
    right: 0;
    bottom: 6px;
    width: 72px;
    height: 35px;
    background: #149ffa;
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 35px;
}

.index-game-album {
    background: url('../images/index_album_bg.png')no-repeat center;
    overflow: hidden;
}

.index-album-nav {
    margin: 15px auto;
    width: 240px;
    height: 40px;
    border-radius: 20px;
    border: solid 1px #dcdcdc;
    display: flex;
}

.index-album-nav .item {
    height: 38px;
    width: 112px;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

.index-album-nav .active {
    background: #149ffa;
    border-radius: 20px;
    width: 126px;
    color: #fff;
}

.index-news-gift ul li a {
    transition: all 0s ease-out;
}

.index-album-content {
    padding: 0 20px;
}

.index-album-content ul {
    display: flex;
    justify-content: flex-start;
}

.index-album-content ul li {
    width: 215px;
    margin-right: 11px;
}

.index-album-content ul li:last-child {
    margin-right: 0;
}

.index-album-content ul li .img {
    width: 215px;
    height: 150px;
}

.index-album-content ul li .name {
    margin: 20px 0;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-align: center;
}

.index-game-container {
    margin-top: 35px;
}

.index-game-tabs {
    overflow: visible;
}

.index-game-tabs .item {
    width: 99px;
    height: 32px;
    background: #f7f7f7;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.index-game-tabs .item:last-child {
    margin-bottom: 0;
}

.index-game-tabs .item:hover {
    background: var(--public-color);
}

.index-game-tabs .active {
    background: var(--public-color);
    position: relative;
}

.index-game-tabs .active::after {
    position: absolute;
    bottom: -25px;
    left: 42px;
    content: '';
    width: 7px;
    height: 7px;
    background: #ffcd00;
    border: 4px solid #FEF3C4;
    border-radius: 50%;
}

.index-game-tabs a:hover {
    background: var(--public-color);
    color: #fff;
}

.index-game-content {
    margin-top: 26px;
}

.index-game-content ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.index-game-content ul li {
    margin-left: 39px;
    margin-bottom: 26px;
    margin-top: 4px;
}

.index-game-content ul li:hover .name {
    color: var(--public-color)
}

.index-game-content ul li:hover .down {
    background: var(--public-color);
    color: #fff;
    border: solid 1px var(--public-color);
}

.index-game-content ul li:nth-child(-n+8) {
    margin-bottom: 20px;
}

.index-game-content ul li .name {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin: 15px 0;
}

.index-game-content ul li .down {
    width: 87px;
    height: 30px;
    border: solid 1px #eeeeee;
    text-align: center;
    line-height: 28px;
    margin: 0 auto;
}

.index-app-container {
    margin-top: 12px;
}

.index-tabs-border {
    border-bottom: 1px solid #eeeeee;
    padding: 0 14px;
    padding-bottom: 17px;
}

.index-tabs-border>.item {
    width: 68px;
    height: 32px;
    background: #f7f7f7;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.index-app-tabs {
    overflow: visible;
}

.index-app-tabs .item {
    width: 99px;
    height: 32px;
    background: #f7f7f7;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.index-app-tabs .item:last-child {
    margin-bottom: 0;
}

.index-app-tabs .item:hover {
    background: var(--public-color);
}

.index-app-tabs .active {
    background: var(--public-color);
    position: relative;
}

.index-app-tabs .active::after {
    position: absolute;
    bottom: -25px;
    left: 42px;
    content: '';
    width: 7px;
    height: 7px;
    background: #ffcd00;
    border: 4px solid #FEF3C4;
    border-radius: 50%;
}

.index-app-tabs a:hover {
    background: var(--public-color);
    color: #fff;
}

.index-app-content {
    margin-top: 26px;
}

.index-app-content ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.index-app-content ul li {
    margin-left: 39px;
    margin-bottom: 26px;
    margin-top: 4px;
}

.index-app-content ul li:hover .name {
    color: var(--public-color)
}

.index-app-content ul li:hover .down {
    background: var(--public-color);
    color: #fff;
    border: solid 1px var(--public-color);
}

.index-app-content ul li p {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 13px;
}

.index-game-content ul li p {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 13px;
}

.index-app-content ul li .name {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin: 15px 0;
}

.index-app-content ul li .down {
    width: 87px;
    height: 30px;
    border: solid 1px #eeeeee;
    text-align: center;
    line-height: 28px;
    margin: 0 auto;
}

.index-news-strategy ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.index-news-strategy ul li {
    height: 40px;
    line-height: 40px;
    margin-top: 12px;
}

.index-news-strategy ul li a {
    padding: 0 30px;
}

.index-news-strategy ul li:nth-child(9n+1) {
    width: 226px;
}

.index-news-strategy ul li:nth-child(9n+2) {
    width: 226px;
}

.index-news-strategy ul li:nth-child(9n+3) {
    width: 226px;
}

.index-news-strategy ul li:nth-child(9n+4) {
    width: 226px;
}

.index-news-strategy ul li:nth-child(9n+5) {
    width: 226px;
}

.index-news-strategy ul li:nth-child(9n+6) {
    width: 283px;
}

.index-news-strategy ul li:nth-child(9n+7) {
    width: 283px;
}

.index-news-strategy ul li:nth-child(9n+8) {
    width: 283px;
}

.index-news-strategy ul li:nth-child(9n+9) {
    width: 283px;
}

.index-news-strategy ul li:nth-child(6n+1) a {
    background: #FFF8F8;
    color: #ff6666;
}

.index-news-strategy ul li:nth-child(6n+2) a {
    background: #F0FBFE;
    color: #29a9d3;
}

.index-news-strategy ul li:nth-child(6n+3) a {
    background: #FFF9F0;
    color: #ffa126;
}

.index-news-strategy ul li:nth-child(6n+4) a {
    background: #F5FFF1;
    color: #59c62f;
}

.index-news-strategy ul li:nth-child(6n+5) a {
    background: #F6F6FF;
    color: #6d6dd9;
}

.index-news-strategy ul li:nth-child(6n+6) a {
    background: #EBFEF8;
    color: #1acb93;
}

.index-pic-list {
    justify-content: space-around;
}

.index-pic-one img {
    width: 385px;
    height: 215px;
}

.index-pic-two img {
    width: 260px;
    height: 142px;
}

.index-pic-three img {
    width: 250px;
    height: 150px;
}

.index-pic-three a:first-child img {
    width: 250px;
    height: 280px;
}

.index-pic-four img {
    width: 250px;
    height: 150px;
}

.index-pic-four a:first-child img {
    width: 250px;
    height: 280px;
}

.index-rank-li {
    width: 370px;
    margin-top: 45px;
    border: 1px solid #ffd614;
}

.index-rank .title {
    width: 250px;
    height: 40px;
    margin: 0 auto;
    margin-top: -20px;
    background: #fff url('../images/rank_title.png') no-repeat;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
}

.index-rank-li ul {
    margin-left: 20px;
    margin-right: 19px;
    margin-bottom: 26px;
}

.index-rank-li ul li {
    margin-top: 20px;
    align-items: center;
}

.index-rank-li ul li:nth-child(1) .num {
    background: #ff7c08;
}

.index-rank-li ul li:nth-child(2) .num {
    background: #FF9639;
}

.index-rank-li ul li:nth-child(3) .num {
    background: #FFBD83;
}

.index-rank-li ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.index-rank-li ul li .right {
    margin-left: 20px;
}

.index-links {
    overflow: hidden;
}

.index-rank-li ul li.active .top {
    display: none;
}

.index-rank-li ul li .top {
    height: 20px;
    line-height: 20px;
}

.index-rank-li ul li .top span {
    font-size: 14px;
    color: #999;
}

.index-rank-li ul li .name {
    color: #333;
    font-size: 15px;
}

.index-rank-li ul li .num {
    width: 21px;
    height: 21px;
    background: #dfdfdf;
    text-align: center;
    line-height: 21px;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
}

.index-rank-li ul li .info {
    display: none;
}

.index-rank-li ul li.active .info {
    display: flex;
}

.index-rank-li ul li .img {
    width: 68px;
    height: 68px;
    border-radius: 15px;
}

.index-rank-li ul li .img img {
    width: 68px;
    height: 68px;
    border-radius: 15px;
}

.index-rank-li ul li .info {}

.index-rank-li ul li .info>div {
    height: 65px;
    font-size: 12px;
    color: #999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 12px;
    margin-right: 12px;
}

.index-rank-li ul li .info .down {
    width: 74px;
    height: 38px;
    text-align: center;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    border: solid 1px #eeeeee;
}

.inde-container-one>.left {
    width: 200px;
}

.inde-container-one>.mid {
    width: 710px;
}

.inde-container-one>.right {
    width: 265px;

}

.inde-container-one>.right>.top {
    overflow: hidden;
    height: 330px;
}

.inde-container-one>.right>.bottom {
    margin-top: 11px;
    height: 180px;
    overflow: hidden;
}

.index-contaleft-list {
    margin-left: 19px;
    margin-right: 13px;
}

.index-contaleft-list ul li a {
    display: flex;
    align-items: center;
}

.index-contaleft-list ul li .num {
    width: 14px;
    height: 16px;
}

.index-contaleft-list ul li .right {
    margin-left: 13px;
    display: flex;
    border-bottom: 1px dashed #eeeeee;
    padding-bottom: 13px;
    padding-top: 13px;
    flex: 1;
    overflow: hidden;
    align-items: center;
}

.index-contaleft-list ul li:last-child .right {
    border-bottom: none;
}

.index-contaleft-list ul li .info {
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    color: #999;
    margin-left: 10px;
}

.index-contaleft-list ul li .info .name {
    margin-bottom: 7px;
    color: #333;
}

.index-contaleft-list ul li .img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.index-mid-news {
    margin-top: 10px;
}

.index-mid-news .item {
    width: 348px;
    height: 180px;
    padding-top: 14px;
    padding-right: 9px;
    padding-left: 16px;
}

.index-mid-news .item .img {
    width: 110px;
    height: 70px;
}

.index-mid-news .item .bottom {
    font-size: 14px;
    color: #888;
    line-height: 30px;
    margin-top: 15px;
}

.index-mid-news .item a {
    align-items: center;
}

.index-mid-news .item .info {
    flex: 1;
    overflow: hidden;
    margin-left: 14px;
    font-size: 16px;
    color: #333;
}

.index-mid-news .item .info .one-cute {
    margin-bottom: 14px;
}

.index-down-comment {
    margin: 14px 13px 0 19px;
}

.index-down-comment ul li {
    margin-bottom: 14px;
}

.index-down-comment ul li .top {
    height: 30px;
    line-height: 30px;
    background: #f8f8f8;
    font-size: 12px;
    color: #888;
}

.index-down-comment ul li .top span {
    margin-right: 12px;
}

.index-down-comment ul li .top .num {
    width: 66px;
    height: 30px;
    background: url('../images/index_down_comment.png')no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    padding-left: 8px;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
}

.index-down-comment ul li .bottom {
    display: flex;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}

.index-down-comment ul li .img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
}

.index-down-comment ul li .info {
    margin-left: 11px;
    margin-right: 25px;
}

.index-down-comment ul li .info p {
    line-height: 20px;
}

.index-down-comment ul li .name {
    font-size: 16px;
    color: #333;
    margin-bottom: 17px;
}

.index-down-comment ul li .down {
    width: 54px;
    height: 27px;
    background-color: #ffcd00;
    flex-shrink: 0;
    margin-top: 30px;
    color: #333;
    font-size: 14px;
    line-height: 27px;
    text-align: center;
}

.index-album-one {
    overflow: hidden;
}

.index-album-list {
    margin-left: 22px;
    margin-top: 25px;
}

.index-album-list ul {
    display: flex;
}

.index-album-list ul li {
    width: 280px;
    margin-right: 13px;
}

.index-album-list ul li .top {
    width: 280px;
    height: 171px;
    position: relative;
}

.index-album-list ul li .top:hover .top-name {
    height: 100%;
    line-height: 90px;
}

.index-album-list ul li .top:hover .tags {
    display: none;
}

.index-album-list ul li .top img {
    width: 280px;
    height: 171px;
}

.index-album-list ul li .top:hover .down-btn {
    display: block;
}

.index-album-list ul li .top .tags {
    position: absolute;
    right: 5px;
    bottom: 7px;
    width: 37px;
    height: 47px;
}

.index-album-list ul li .top-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    color: #fff;
    text-align: center;
    transition: all .1s ease-out
}

.index-album-list ul li .down-btn {
    display: none;
    position: absolute;
    top: 91px;
    left: 79px;
    width: 123px;
    height: 44px;
    border: 1px solid #ffcd00;
    font-size: 14px;
    text-align: center;
    line-height: 42px;
    transition: all .2s ease-out
}

.index-album-list ul li .bottom {
    display: flex;
    margin-top: 16px;
    align-items: center;
}

.index-album-list ul li .img {
    width: 75px;
    height: 75px;
    border-radius: 10px;
}

.index-album-list ul li .info {
    margin-left: 18px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.index-album-list ul li .info span {
    margin-right: 18px;
}

.index-album-list ul li .info .name {
    font-size: 16px;
    color: #333;
    margin-bottom: 14px;
}


.rank-new-list-nav {
    height: 181px;
    background: url(../images/rank_new_nav_bg.png) no-repeat center;
}

.rank-new-list {
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
}

.rank-new-list .bottom .item a:nth-child(1)::before,
.rank-new-list .bottom .item a:nth-child(2)::before,
.rank-new-list .bottom .item a:nth-child(3)::before {
    content: '';
    display: inline-block;
    width: 29px;
    height: 39px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
}

.rank-new-list .bottom .item a:nth-child(1)::before {
    background: url(../images/rank_01.png) no-repeat center;
}

.rank-new-list .bottom .item a:nth-child(2)::before {
    background: url(../images/rank_02.png) no-repeat center;
}

.rank-new-list .bottom .item a:nth-child(3)::before {
    background: url(../images/rank_03.png) no-repeat center;
}

.rank-new-list .bottom .item a {
    position: relative;
}

.rank-new-list:nth-child(even) {
    margin-left: 1%;
}

.rank-new-content ul .rank-new-list .bottom .item a:nth-child(4) {
    border: none;
    text-align: left;
}

.rank-new-content ul .rank-new-list .bottom .item a:nth-child(4) img:nth-child(1),
.rank-new-content ul .rank-new-list .bottom .item a:nth-child(4) img:nth-child(2) {
    margin-bottom: 8px;
}

.rank-new-content ul .rank-new-list .bottom .item a:nth-child(4) img:nth-child(even) {
    margin-left: 8px;
}

.rank-new-content ul .rank-new-list .bottom .item a:nth-child(4) img {
    width: 49px;
    height: 49px;
    border-radius: 10px;
}

.public-nav {
    background: url(../images/rank_new_nav_bg2.png) no-repeat center;
    display: block !important;
    text-align: center;
}

.public-nav .title {
    font-size: 32px;
    line-height: 30px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #666a9f;
    text-align: center;
    display: inline-block;
    margin: 20px 0;
    position: relative;
}

.public-nav .title::before {
    content: '';
    display: inline-block;
    width: 106px;
    height: 23px;
    background: url(../images/nav_title_right.png) no-repeat center;
    position: absolute;
    top: 4px;
    left: -120px;
}

.public-nav .title::after {
    content: '';
    display: inline-block;
    width: 106px;
    height: 23px;
    background: url(../images/nav_title_left.png) no-repeat center;
    position: absolute;
    top: 4px;
    right: -120px;
}

.public-nav .time {
    display: block;
}

.public-nav .time span {
    background-color: #ffffff;
    border-radius: 15px;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    color: #666a9f;
    display: inline-block;
    padding: 0 20px;
}

.show-rank-new .rank-bg {
    background: #FBFCFD;
    padding-bottom: 0px;
}

.show-rank-new .list-rank-li {
    width: auto !important;
    padding: 20px 20px 30px;
    margin-top: -20px !important;
    margin-bottom: 0px !important;
    background-color: #fff;
}

.show-rank-new .list-rank-li ul li {
    border-bottom: dashed 1px #dcdcdc;
}

.show-rank-new .list-rank-li ul li .down {
    margin-right: 0px;
}

.show-rank-recommended-album {
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 10px;
    padding-top: 5px;
}

.show-rank-new-album {
    margin: 0px !important;
}

.show-rank-new-album .top {
    margin: 20px;
}

.show-rank-new-album .news-list ul li {
    border: solid 1px #eeeeee;
    margin: 15px;
    padding: 0;
}

.show-rank-new-album .news-list ul li:hover {
    box-shadow: none;
}

.show-rank-new-album .news-list ul li .info {
    height: 171px !important;
    padding: 16px;
    justify-content: start !important;
}

.show-rank-new-album .news-list ul li .info p {
    line-height: 26px;
}

.show-rank-new-album .news-list ul li .info .name {
    margin-bottom: 10px;
    line-height: 22px;
}

.show-rank-new-album .news-list ul li .thumb {
    width: 263px;
    height: 171px;
    text-align: center;
}

.show-rank-new-album .news-list ul li .thumb img {
    width: 100%;
    height: 100%;
}

.show-rank-new-album .index-game-content {
    padding: 0 20px;
}

.show-rank-new-album .index-game-content ul {
    justify-content: space-between;
}

.show-rank-new-album .index-game-content ul li {
    margin-left: 0px;
    margin-right: 20px;
    text-align: center;
    max-width: 95px;
}

.show-rank-new-album .index-game-content ul li:last-child {
    margin-right: 0px;
}
.show-rank-new-album .index-game-content ul li .img {
	display: block;
	width: 90px;
	height: 90px;
}
.show-rank-list-right {
    margin-left: 20px;
    max-width: 329px;
}

.more-rank-list {
    background-color: #fff;
    margin: 0 !important;
    padding-bottom: 15px;
    margin-bottom: 10px !important;
}

.more-rank-list .public-title {
    padding-top: 15px;
    margin-top: 0px;
}

.more-rank-list ul li {
    padding: 0 15px;

}

.more-rank-list ul li a {
    padding-right: 0px !important;
    font-size: 16px;
}

.more-rank-list ul li .tags {
    width: 26px;
    height: 22px;
}

.more-rank-list ul li .tags img {
    width: 100%;
    height: 100%;
}

.show-rank-news-list {
    background-color: #fff;
    padding-bottom: 20px;
    padding-top: 5px;
}

.show-rank-news-list .news-list ul li {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 30px;
}

.show-rank-news-list .news-list ul li .img {
    width: 120px;
    height: 80px;
}

.show-rank-news-list .news-list ul li .info {
    height: 80px;
}

.show-rank-news-list .news-list ul li .info p {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0px;
    color: #333333;
}

.show-rank-news-list .news-list ul li .info .time span {
    color: #999999;
    line-height: 20px;
}

footer {
    width: 100%;
    height: 150px;
    color: rgb(153, 153, 153);
    font-size: 14px;
    background-color: rgb(20, 20, 20);
    text-align: center;
    padding-top: 30px;
}

footer p {
    color: rgb(153, 153, 153);
    font-weight: 400;
    margin-top: 20px;
}

footer p a {
    color: rgb(153, 153, 153);
    margin: 0px 10px;
    font-weight: 400;
}

footer p:nth-child(2) {
    color: rgb(102, 102, 102);
}

footer p:nth-child(3) {
    margin-top: 10px;
    color: rgb(102, 102, 102) !important;
}

footer p:nth-child(3) a {
    color: rgb(102, 102, 102);
}

footer p:nth-child(3) a:hover {
    color: rgb(255, 186, 37);
}

footer p:nth-of-type(2) a {
    margin: 0px;
}