body {
    background: #f7f7f7;
}

.index-bg {
    position: absolute;
    top: 184px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.index-bg:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: -webkit-gradient(linear, 0% 0%, 0% 82%, from(transparent), to(#f7f7f7));
}

.index-title {
    position: relative;
    height: 40px;
    line-height: 40px;
}

.index-title:after {
    content: "";
    display: block;
    overflow: hidden;
    visibility: hidden;
    clear: both;
}

.index-title h5 {
    float: left;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    color: #333;
}

.index-title h5:first-letter {
    color: #fff;
    margin-right: 20px;
    margin-left: 7px;
}

.index-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 20px solid #008fe9;
}

.index-title h5:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 40px;
    border: 1px solid #98d7ff;
    border-width: 20px 8px;
    border-color: #008fe9 #fff #98d7ff transparent;
    transform: translateX(-100%);
}

.index-title-more {
    float: right;
    font-size: 14px;
    color: #999;
    padding-left: 30px;
    position: relative;
}

.index-title-more:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #dbdbdb;
}

.index-title-more:after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 1px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    font-size: 22px;
    height: 20px;
    transform: translateY(-50%);
    width: 20px;
}

.main {
    width: 1220px;
    /* padding: 10px 10px 40px; */
    /* background: #fff; */
    margin: 10px auto 20px;
    position: relative;
}

/**/
.recommend-model ul li {
    float: left;
    width: 295px;
    height: 180px;
    position: relative;
    margin-left: 6px;
}

.recommend-model ul {
    overflow: hidden;
    margin-left: -6px;
}

.recommend-model ul li img {
    display: block;
    width: 100%;
    height: 100%;
}

.rm-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0,0,0,.7);
}

.rm-info h5 {
    float: left;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    line-height: 40px;
    height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 190px;
    margin-left: 10px;
}

.rm-info span {
    float: right;
    margin: 8px 10px 0 0;
    width: 82px;
    height: 26px;
    background-color: #008fe9;
    border-radius: 13px;
    text-indent: 24px;
    line-height: 26px;
    color: #fff;
    font-size: 12px;
    position: relative;
}

.rm-info span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}

.rm-info span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 4px;
    height: 4px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid #008fe9;
    border-color: #008fe9 #008fe9 transparent transparent;
}

/* index-top */
.index-top {
    overflow: hidden;
    margin: 20px auto 0;
    height: 535px;
    padding: 10px 10px 0px;
    background: #fff;
    border-radius: 15px;
}

.it-l {
    float: left;
    width: 330px;
}

.itl-list {
    overflow: hidden;
    margin: 0 0 0 -8px;
}

.itl-list li {
    float: left;
    width: 160px;
    height: 110px;
    position: relative;
    overflow: hidden;
    margin: 8px 0 0 8px;
    border-radius: 15px;
}

.itl-list li img {
    display: block;
    width: 100%;
    height: 100%;
}

/* it-l */
.itl-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: rgba(0,0,0,.55);
    color: #fff;
    text-align: center;
}

.itl-info span {
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin-top: 30px;
}

.itl-info em {
    display: block;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 88%;
    margin: 10px auto 0px;
}

/* it-c */
.it-c {
    float: left;
    width: 470px;
    margin-left: 60px;
}

.itc-tab span {
    overflow: hidden;
    width: 130px;
    border-radius: 21px;
    background: #f6f6f6;
    float: left;
    text-align: center;
    margin-left: 40px;
    cursor: pointer;
}

.itc-tab {
    overflow: hidden;
    line-height: 42px;
    font-size: 16px;
    color: #333;
    height: 42px;
    margin-left: -40px;
}

.itc-tab span.active {
    background: #2299DD;
    color: #fff;
}

.itc-item {
    display: none;
}

.itc-item.active {
    display: block;
}

.itc-tit {
    display: block;
    font-size: 18px;
    color: #ff3535;
    text-align: center;
    font-weight: bold;
    height: 18px;
    line-height: 18px;
    margin-top: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.itc-time {
    display: block;
    color: #999;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    margin-top: 10px;
}

.itc-item ul li {
    overflow: hidden;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    margin-top: 23px;
}

.itc-item ul li span {
    float: right;
    color: #999;
}

.itc-label {
    float: left;
    color: #2299DD;
    width: 84px;
    overflow: hidden;
    text-align: left;
}

.itc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 10px;
    width: 280px;
    float: left;
}

.itc-item ul {
    overflow: hidden;
    margin-top: 3px;
}

/* it-r */
.it-r {
    float: right;
    width: 300px;
}

.itr-num,.itr-label {
    display: none;
}

.software-rank li {
    overflow: hidden;
    margin-top: 15px;
    position: relative;
}

.itr-img {
    width: 25px;
    height: 25px;
    border-radius: 3px;
    overflow: hidden;
    float: left;
    background-image: linear-gradient(90deg, #ffac2a 0%, #ff8e42 100%);
}

.itr-img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.itr-info {
    float: left;
    margin-left: 13px;
    position: relative;
}

.itr-tit {
    display: block;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 175px;
    height: 14px;
    line-height: 14px;
    margin-top: 6px;
}

.itr-btn {
    float: right;
    width: 45px;
    height: 23px;
    border: solid 1px #0084ff;
    text-align: center;
    color: #0084ff;
    font-size: 12px;
    line-height: 25px;
    position: relative;
    border-radius: 5px;
}

.software-rank li.active .itr-num {
    display: block;
    float: left;
    color: #fff;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 70px;
    height: 70px;
    width: 27px;
    text-align: center;
}

.software-rank li.active:before {
    content: "";
    background-image: linear-gradient(90deg,#ffac2a 0%,#ff8e42 100%);
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    transform: rotate(-15deg);
}

.software-rank li.active {
    padding: 10px 0;
    border: solid 1px #eaeaea;
}

.software-rank li.active .itr-img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    position: relative;
}

.software-rank li.active .itr-info {
    width: 120px;
    margin-left: 32px;
}

.software-rank li.active .itr-label {
    display: block;
    font-size: 12px;
    color: #999;
    height: 12px;
    line-height: 12px;
    margin-top: 15px;
}

.software-rank li.active .itr-tit {
    margin-top: 16px;
    width: 100%;
}

.software-rank li.active .itr-btn {
    border: none;
    height: 12px;
    line-height: 12px;
    padding-top: 27px;
    width: 25px;
    margin-right: 10px;
    margin-top: 15px;
}

.software-rank li.active .itr-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: url(../images/index-jlt.png) 0 0 no-repeat;
}

.software-rank {
    margin-top: 5px;
    overflow: hidden;
}

/* software-model */
.software-model {
    margin: 20px auto 0;
    overflow: hidden;
    background: #fff;
    padding: 10px;
    border-radius: 15px;
}

.software-type {
    overflow: hidden;
    height: 14px;
    margin: 30px 0 0 -20px;
}

.software-type a {
    float: left;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    color: #222;
    position: relative;
    margin-left: 20px;
}

.software-type a:before {
    content: '/';
    color: #ccc;
    position: absolute;
    top: 0;
    left: -12px;
}

.software-type a:hover {
    color: #1691f0;
    font-weight: bold;
}

.sm-tit-tab {
    /* margin: 0 auto; */
    text-align: center;
    overflow: hidden;
    width: 300px;
    float: right;
}

.sm-tit-tab span {
    float: left;
    padding: 0 20px 0 36px;
    color: #333;
    font-size: 16px;
    background: #f0f2f4;
    border-radius: 20px;
    position: relative;
    height: 38px;
    line-height: 38px;
    margin-left: 17px;
    cursor: pointer;
}

.sm-tit-tab span.active {
    color: #008fe9;
    background: #ebf5ff;
}

.sm-tit-tab span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 13px;
    height: 12px;
    background: url(../images/index-jlt.png) 0 -35px no-repeat;
    transform: translateY(-50%);
}

.sm-tit-tab span.active:before {
    background-position-y: -21px;
}

.sm-tit-tab span:last-child:before {
    background-position-x: -13px;
    width: 15px;
    height: 15px;
    top: 55%;
}

.software-l ul {
    display: none;
    margin: -8px 0 0 -48px;
    overflow: hidden;
}

.software-l ul.active {
    display: block;
}

.software-l ul li {
    float: left;
    width: 80px;
    margin: 38px 0 0 48px;
}

.software-l ul img {
    display: block;
    width: 100%;
    height: 80px;
    border-radius: 12px;
}

.software-l ul h5 {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    text-align: center;
    line-height: 14px;
    margin-top: 16px;
}

.software-l {
    float: left;
    width: 850px;
    height: 436px;
}

.software-model .software-rank .itr-num {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #b6b6b6;
    float: left;
    margin: 2px 10px 0 0;
    text-align: center;
    color: #fff;
    line-height: 20px;
    font-weight: bold;
    font-size: 14px;
}

.software-model .software-rank li:nth-of-type(-n+3) .itr-num {
    background: #ffa235;
}

.software-model .software-rank {
    width: 300px;
    float: right;
    margin-top: 21px;
}

.software-model .software-rank .itr-info {
    width: 174px;
}

/* topic-model */
.topic-model {
    margin: 20px auto 0;
    padding: 10px;
    background: #fff;
}

.topic-lb .swiper-slide img {
    display: block;
    height: 155px;
    width: 100%;
}

.topic-lb .swiper-slide h5 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    background: rgba(0,0,0,.4);
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.topic-lb .swiper-button-prev,.topic-lb .swiper-button-next {
    background: rgba(0,0,0,.7);
    width: 28px;
    height: 155px;
    top: 0;
    left: 0;
    margin: 0;
}

.topic-lb .swiper-button-prev:after, .topic-lb .swiper-button-next:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 65%;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-color: transparent transparent #fff #fff;
    transform: translate(-50%,-50%) rotate(45deg);
}

.topic-lb .swiper-button-next {
    left: auto;
    right: 0;
}

.topic-lb .swiper-button-next:after {
    transform: translate(-50%,-50%) rotate(-135deg);
    left: auto;
    left: 35%;
}

.topic-lb {
    margin: 20px auto 0;
}

/* ztmodel */
.ztmodel {
    margin: 30px auto 0;
}

.ztm-ul li {
    float: left;
    width: 230px;
    margin-left: 12px;
}

.ztm-ul {
    overflow: hidden;
    margin: 20px 0 0 -12px;
}

.ztm-img {
    display: block;
    width: 100%;
    height: 136px;
}

.ztm-img img {
    display: block;
    width: 100%;
    height: 100%;
}

.ztm-list a {
    display: block;
    position: relative;
    margin-top: 26px;
    color: #333;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 20px;
}

.ztm-list a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background-color: #d0d0d0;
    border-radius: 50%;
}

.ztm-list {
    margin-top: -4px;
    overflow: hidden;
}

/*game-rank-list*/
.game-rank-item {
    width: 276px;
    float: left;
    margin-left: 32px;
}
.game-rank-item:first-child{
    margin-left:0px
}
.game-rank-list {
    overflow: hidden;
    margin: 20px 0px 0px 0px;
    background: #fff;
    padding: 10px;
    border-radius: 15px;
}

.rank-list .rank-show {
    display: block;
    overflow: hidden;
}

.rank-list .rank-hide {
    display: none;
    overflow: hidden;
    padding-bottom: 20px;
    height: 95px;
}

.rank-list li.active .rank-show {
    display: none;
}

.rank-list li.active .rank-hide {
    display: block;
}

.rank-num,.rank-num-hide {
    width: 20px;
    height: 20px;
    background: #b6b6b6;
    text-align: center;
    line-height: 20px;
    float: left;
    color: #fff;
    font-weight: bold;
}

.rank-tit {
    float: left;
    font-size: 14px;
    color: #333;
    margin-left: 13px;
    border-top: 1px solid #e7e7e7;
    height: 40px;
    line-height: 40px;
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.rank-num-hide,.rank-num {
    margin-top: 11px;
}

.rank-list li:nth-child(1) .rank-num,.rank-list li:nth-child(2) .rank-num,.rank-list li:nth-child(3) .rank-num {
    background: #2299DD;
}

.rank-list li:nth-child(1) .rank-num-hide,.rank-list li:nth-child(2) .rank-num-hide,.rank-list li:nth-child(3) .rank-num-hide {
    background: #449e55;
}

.rank-apple .rank-list li:nth-child(1) .rank-num,.rank-apple .rank-list li:nth-child(2) .rank-num,.rank-apple .rank-list li:nth-child(3) .rank-num {
    background: #444444;
}

.rank-apple .rank-list li:nth-child(1) .rank-num-hide,.rank-apple .rank-list li:nth-child(2) .rank-num-hide,.rank-apple .rank-list li:nth-child(3) .rank-num-hide {
    background: #000000;
}

.rank-soft .rank-list li:nth-child(1) .rank-num,.rank-soft .rank-list li:nth-child(2) .rank-num,.rank-soft .rank-list li:nth-child(3) .rank-num {
    background: #1c7eed;
}

.rank-soft .rank-list li:nth-child(1) .rank-num-hide,.rank-soft .rank-list li:nth-child(2) .rank-num-hide,.rank-soft .rank-list li:nth-child(3) .rank-num-hide {
    background: #3082d6;
}

.rank-wait .rank-list li:nth-child(1) .rank-num,.rank-wait .rank-list li:nth-child(2) .rank-num,.rank-wait .rank-list li:nth-child(3) .rank-num {
    background: #ffa235;
}

.rank-wait .rank-list li:nth-child(1) .rank-num-hide,.rank-wait .rank-list li:nth-child(2) .rank-num-hide,.rank-wait .rank-list li:nth-child(3) .rank-num-hide {
    background: #fd8448;
}

.rank-hide img {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: block;
    margin-left: 12px;
    margin-top: 11px;
}

.rank-hide-r {
    margin-left: 16px;
    float: left;
    width: 145px;
    margin-top: 11px;
}

.rank-hide-tit {
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: 16px;
    line-height: 16px;
    margin-top: 7px;
    width: 100%;
}

.rank-hide-type,.rank-hide-size {
    color: #999;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    display: block;
}

.rank-hide-type em, .rank-hide-size em {
    color: #666;
    margin-left: 2px;
}

.rank-hide-type {
    margin-top: 17px;
}

.rank-hide-size {
    margin-top: 10px;
}

.rank-item-tit {
    display: block;
    margin: 0 auto 30px;
    color: #2299DD;
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-style: italic;
    position: relative;
    width: max-content;
    padding: 0 65px;
}

.rank-apple .rank-item-tit {
    color: #333536;
}

.rank-soft .rank-item-tit {
    color: #1c7eed;
}

.rank-wait .rank-item-tit {
    color: #ffa235;
}

.rank-list {
    overflow: hidden;
}

.rank-list li:first-child .rank-tit {
    border-color: transparent;
}

.rank-item-tit:before, .rank-item-tit:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 20px;
    background: url(../images/index-jlt.png) -27px 0 no-repeat;
}

.rank-item-tit:after {
    left: auto;
    right: 0;
}

.rank-apple .rank-item-tit:before,.rank-apple .rank-item-tit:after {
    background-position-y: -20px;
}

.rank-wait .rank-item-tit:before,.rank-wait .rank-item-tit:after {
    background-position-y: -41px;
}

.rank-wait .rank-item-tit:before,.rank-wait .rank-item-tit:after {
    background-position-y: -61px;
}

/* old-mod */
.on-nav-list {
    float: left;
    margin-top: 14px;
    margin-left: 60px;
}

.on-nav-list a {
    float: left;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    color: #222;
    position: relative;
    margin-left: 20px;
}

.on-nav-list a:before {
    content: '/';
    color: #ccc;
    position: absolute;
    top: 0;
    left: -12px;
}

.on-nav-list a:hover {
    color: #1691f0;
    font-weight: bold;
}

.on-nav-list a:first-child {
    margin: 0;
}

.on-nav-list a:first-child:before {
    display: none;
}

.oldnav-box {
    background-color: #fcfcfc;
    border: solid 1px #f3f3f3;
    margin: 20px auto 0;
    overflow: hidden;
    padding: 13px 0;
}

.ob-l {
    float: left;
    width: 100px;
    position: relative;
    height: 100%;
}

.ob-r {
    float: left;
    width: 1030px;
    padding: 0 30px;
    border-left: 1px solid #f3f3f3;
}

.ob-l a {
    text-align: center;
    display: block;
    color: #2299DD;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.ob-r li a {
    float: left;
    font-size: 14px;
    color: #333;
    margin-left: 15px;
    height: 30px;
    line-height: 30px;
}

.ob-r li {
    overflow: hidden;
    height: 30px;
}

.old-update {
    margin: 20px auto 0;
}

.old-update ul {
    overflow: hidden;
    margin: 18px 0 0 -13px;
}

.old-update ul li {
    float: left;
    width: 290px;
    margin-left: 13px;
    overflow: hidden;
}

.old-update ul li img {
    display: block;
    width: 100%;
    height: 200px;
}

.old-update ul li h5 {
    display: block;
    font-weight: normal;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    color: #333;
    margin-top: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.old-navigation {
    margin: 46px auto 0;
}




/* 备案 */
/* .site-main{
    display:none
} */