.page {
    width: 100%;
    background-color: #f8f8f8;
    overflow: hidden;
    padding-bottom: 50px
}

.page .box {
    width: 1200px;
    margin: 0 auto
}

.hiden {
    display: none
}

.m-articleNav {
    overflow: hidden;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(153, 153, 153)
}

.m-articleNav.cur {
    padding: 6px 0
}

.m-articleNav em {
    font-size: 14px;
    color: rgb(153, 153, 153)
}

.m-articleNav a {
    font-size: 14px;
    color: rgb(153, 153, 153)
}

.m-articleNav a:hover {
    text-decoration: underline
}

.m-articleNav span {
    color: rgb(153, 153, 153)
}

.content {
    width: 100%
}

.content .left {
    width: 860px;
    overflow: hidden;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 0
}

.content .left .title_out {
    padding: 0 20px
}

.content .title {
    width: 100%;
    position: relative;
    border-top: 2px solid #eeeeee;
    height: 56px
}

.content .title .title_left {
    position: relative;
    height: 56px;
    top: 0px
}

.content .title .title_left h2 {
    box-sizing: border-box;
    float: left;
    width: 72px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    border-top: 2px solid #eeeeee;
    font-family: "Microsoft YaHei";
    color: rgb(153, 153, 153);
    font-weight: 500;
    margin-right: 40px
}

.content .title .title_left h2:hover {
    cursor: pointer
}

.content .title .title_left h2.active {
    border-top: 2px solid #298cf7;
    color: rgb(51, 51, 51);
    font-weight: bold
}

.left .left_tab .lists {
    width: 100%
}

.left .left_tab .lists .item {
    width: 100%;
    box-sizing: border-box;
    height: 170px;
    padding: 15px 20px
}

.left .left_tab .lists .item:hover {
    background-color: #f8f8f8
}

.left .left_tab .lists .item .img_link {
    display: block;
    width: 210px;
    height: 140px;
    float: left
}

.left .left_tab .lists .item img {
    width: 210px;
    height: 140px;
    border-radius: 4px
}

.left .left_tab .lists .item .info {
    width: 100%;
    float: right
}

.left .left_tab .lists .item .info h4 {
    font-size: 18px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    font-weight: bold;
    line-height: 45px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.left .left_tab .lists .item .info p:nth-of-type(1) {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(102, 102, 102);
    line-height: 22px;
    margin-top: 10px
}

.left .left_tab .lists .item .info p:nth-of-type(2) {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(153, 153, 153);
    line-height: 22px;
    float: left;
    margin-top: 10px;
    margin-right: 25px
}

.left .left_tab .lists .item .info .parent_link {
    display: block;
    float: left;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(41, 140, 247);
    line-height: 22px;
    margin-top: 10px
}

.m_paging {
    float: left;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 40px 0 60px 0
}

.m_paging ul {
    position: relative;
    overflow: auto;
    display: inline-block
}

.m_paging li {
    display: inline-block;
    float: left
}

.m_paging li a {
    display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px;
    transition: color .3s, background .3s
}

.m_paging  a{
        display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px;
    transition: color .3s, background .3s
}

.m_paging ul > b{
        display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px;
    transition: color .3s, background .3s
}

.m_paging a.Total.record{
    display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px;
}

.m_paging  span {
    display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px
}

.m_paging li a:hover {
    color: #2797ef;
    background: #fef8f8;
    border-color: #2797ef
}

.m_paging  a:hover {
    color: #2797ef;
    background: #fef8f8;
    border-color: #2797ef
}

.m_paging li span {
    display: inline-block;
    height: 34px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    margin-right: 10px;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 14px
}



.m_paging li strong {
    margin: 0 2px
}

.m_paging li.active span {
    background: #2797ef;
    color: #fff;
    border-color: #2797ef;
    cursor: default
}

.m_paging li.active a:hover span {
    background: #2797ef;
    color: #fff
}

.m_paging li.disabled {
    display: none
}

.m_paging li.disabled span {
    color: #999
}

.content .right {
    width: 320px;
    float: right
}

.content .right .box {
    width: 100%;
    padding: 30px 20px;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 20px
}

.rank ul {
    margin-top: 16px
}

.rank ul li {
    float: left;
    width: 100%;
    margin-bottom: 10px
}

.rank ul li.active {
    float: left;
    width: 100%
}

.rank ul li .No {
    display: block;
    border-radius: 4px;
    background-color: rgb(183, 183, 183);
    width: 24px;
    height: 24px;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    float: left;
    margin-right: 12px
}

.rank ul li:nth-child(1) .No {
    background-color: #ff424b
}

.rank ul li:nth-child(2) .No {
    background-color: #ff734d
}

.rank ul li:nth-child(3) .No {
    background-color: #ffaf61
}

.rank ul li .game_title p {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.rank ul li .game_info {
    display: none
}

.rank ul li.active .game_title p {
    font-weight: bold
}

.rank ul li.active .game_info {
    margin-top: 10px;
    display: block;
    width: 258px;
    margin-left: 38px
}

.rank ul li.active .lazy {
    height: 68px;
    width: 68px;
    float: left;
    margin-right: 10px
}

.rank ul li.active .game_info div {
    float: left
}

.rank ul li.active .game_info p {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(153, 153, 153);
    line-height: 26px
}

.rank ul li.active a {
    display: block;
    width: 130px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #298cf7;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: #298cf7
}

.rank ul li.active a:hover {
    background-color: #298cf7;
    color: #ffffff
}

.right .course_tab .course a {
    display: block;
    width: 100%;
    height: 30px
}

.right .course_tab .course a:hover p:nth-child(1) {
    font-weight: bold
}

.right .course_tab .course a p:nth-child(1) {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    line-height: 30px;
    width: 230px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.right .course_tab .course a p:nth-child(2) {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(153, 153, 153);
    line-height: 30px;
    float: right;
    width: 40px
}

.title h2 {
    position: relative;
    width: 73px;
    height: 56px;
    line-height: 56px;
    border-top: 2px solid #298cf7;
    top: -2px;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    font-weight: bold;
    float: left
}

.right .rec_content {
    width: 100%;
    float: left
}

.right .rec_content .rec_box {
    box-sizing: border-box;
    width: 130px;
    height: 96px;
    margin-right: 20px;
    float: left;
    margin-bottom: 20px
}

.right .rec_content .rec_box:nth-child(2n) {
    margin-right: 0px
}

.right .rec_content .rec_box img {
    width: 130px;
    height: 66px;
    border-radius: 4px;
    transition: all 0.3s
}

.right .rec_content .rec_box img:hover {
    transform: scale(1.1)
}

.right .rec_content .rec_box .img {
    width: 130px;
    height: 66px;
    border-radius: 4px;
    overflow: hidden
}

.right .rec_content .rec_box p {
    width: 130px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin-top: 8px
}



@media(max-width:760px)
{


    .page .box{
        width: 100%;
    }
    .content .left{
        width: 100%;
    }

    .left .left_tab .lists .item .info{
        width: 100%;
        float: left;
    }

    .m_paging ul{
        white-space: nowrap;
        overflow-x: scroll;
        width: 100%;
        height: 80px;
    }
    .m_paging li{
        display: inline-flex;
        float: none;
    }

    .content .right{
        width: 100%;
        float: left;
    }
    .left .article .download_page .soft_img img{
        width: 100%;
        height: 100%;
    }
    .right .course_tab .course a p:nth-child(1){
        width: 90%;
    }
    .right .rec_content .rec_box{
        width: 40%;
        margin: 5%;
    }

}