body {
    background: #f6f6f6;
}

.list .navs {
    width: 167px;
    position: fixed;
    top: 204px;
    left: 100px;
    z-index: 999;
}
.list .navs_con {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    font-size: 24px;
    padding: 12px;
}
.list .open{
    position: absolute;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    right: -15px;
    top: -15px;
    background-color: rgb(255, 233, 31);
    cursor: pointer;
    border-width: 6px;
    border-style: solid;
    border-color: rgb(253, 151, 56);
    border-image: initial;
    border-radius: 50%;
    transition: all 0.6s ease 0s;
}
.list .open.on{
    border-width: 12px;
}

.list .navs .nav_list {
    width: 100%;
    margin-bottom: 15px;
}

.list .navs .nav_list a {
    width: 143px;
    height: 37px;
    text-align: center;
    /*background: #3d8bfd;*/
}

.list .navs .nav_list a span {
    width: 66px;
    line-height: 37px;
    font-size: 16px;
    font-weight: 500;
    /*color: #FFFFFF;*/
    /*background: #3d8bfd;*/
}

.list .navs .nav_list a.active span {
    color: #ffffff;
    background: #3d8bfd;
    padding: 10px 39px;
}

.list .navs .nav_list a:hover span {
    cursor: pointer;
}

.list .navs .nav_search {
    width: 121px;
    height: 31px;
    border-radius: 2px;
    border: 1px solid #D5D5D5;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.list .navs .nav_search i {
    display: inline-block;
    background: url('/liuxue/img/pc/article/list/search.png') no-repeat center;
    background-size: cover;
    width: 18px;
    height: 18px;
    margin-left: 7px;
    margin-right: 9px;
}

.list .navs .nav_search input {
    height: 100%;
    width: 100%;
}

.left_list .type {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    line-height: 27px;
    margin-top: 17px;
    margin-bottom: 7px;
    position: relative;
    text-indent: 10px;
}

.left_list .type::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 31px;
    height: 31px;
    background-color: #ffe91f;
    z-index: -1;
    border-radius: 50%;
}


/*列表*/


/*banner*/

.box>.left_list>.banner {
    width: 805px;
    height: 356px;
    margin-top: -80px;

}

.box>.left_list>.banner .swiper-container {
    height: 356px;
}

.box>.left_list>.banner .swiper-slide {
    width: 805px;
    height: 100%;
}

.box>.left_list>.banner .swiper-slide img {
    width: 100%;
    margin-top: 0px;
    padding-left: 12px;
}


/*文章列表*/

.box .left_list .list {
    width: 807px;
    height: 184px;
    background: #ffffff;
    margin-top: 17px;
}

.box .left_list .boxitem {
    width: 100%;
    /*height: 100%*/
    padding: 20px;
}

.box .left_list .itemimg {
    width: 256px;
    height: 144px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
}

.box .left_list .itemimg img {
    width: 100%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
    transition: all 0.5s;
}

.box .left_list .itemimg:hover img {
    transform: scale(1.1);
}

.box .left_list .itemdsc {
    width: 448px;
    /*border: 1px solid red;*/
    float: left;
    margin-left: 20px;
    padding: 20px;
}

.box .left_list .itemdsc .arttitle {
    width: 445px;
    font-size: 22px;
    font-weight: 500;
    color: #303030;
    line-height: 33px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box .left_list .itemdsc .artdsce {
    width: 447px;
    height: 27px;
    font-size: 14px;
    font-weight: 400;
    color: #656565;
    line-height: 27px;
    margin-top: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box .left_list .itemdsc .lable {
    /*width: 100%;*/
    float: left;
    margin-top: 20px;
}

.creatTime{
    float: right;
    font-size: 13px;
    margin-top: 20px;
    color: #A5A5A5;
    text-align: right;
}   

.box .left_list .itemdsc .lable span {
    width: 56px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #3d8bfd;
    font-size: 12px;
    padding: 3px 5px;
    margin-right: 10px;
    color: #3d8bfd;
}

.box>.right {
    width: 345px;
}

.box>.right .hot_art {
    width: 100%;
    /*height: 324px;*/
    padding-bottom: 10px;
    background: #ffffff;
    padding-top: 20px;
    margin-bottom: 16px;
}

.box>.right>.tutor {
    width: 100%;
    background: #ffffff;
    padding-bottom: 20px;
}


/*右边数据*/

.box>.right .hot_art h3 {
    margin: 0 auto 10px;
    font-size: 18px;
    color: #333333;
    position: relative;
    line-height: 27px;
}

.box>.right .hot_art h3::before {
    content: "";
    width: 22px;
    height: 22px;
    background: url(/liuxue/img/pc/article/list/hot.png) no-repeat center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.box>.right .hot_art ul {
    width: 300px;
    margin: 0 auto 20px;
}

.box>.right .hot_art ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #6ea8fe;
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
    border-radius: 50%;
}

.box>.right .hot_art ul a {
    display: inline-block;
    vertical-align: middle;
    width: 272px;
    font-size: 16px;
    line-height: 39px;
    color: #303030;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box>.right .hot_art ul a:hover {
    text-decoration: underline;
    color: #3d8bfd;
}


/*导师*/

.box>.right .tutor h3 {
    margin: 0 auto 10px;
    font-size: 18px;
    color: #333333;
    position: relative;
    line-height: 27px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.box>.right .tutor h3::before {
    content: "";
    width: 22px;
    height: 22px;
    background: url(/liuxue/img/pc/article/list/hot.png) no-repeat center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.box>.right .tutor>div {
    width: 300px;
    margin: 0 auto 28px;
}

.box>.right .tutor>div img.fl {
    width: 82px;
    height: 82px;
    margin-right: 11px;
    object-fit: cover;
}

.box>.right .tutor>div>a>div.fl {
    width: 170px;
    margin-top: 10px;
}
.box>.right .tutor>div:last-child div.fl{
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    width: 35px;
    display: block;
    float: none;
    margin: 0 auto;
    height: 35px;
    line-height: 32px;
    border: 1px solid rgb(253, 151, 56);
    box-sizing: border-box;
    color: rgb(253, 151, 56);
    border-radius: 50%;
    cursor: pointer;
    cursor: pointer;
}

.box>.right .tutor>div h4 {
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    /*margin-bottom: 15px;*/
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.box>.right .tutor>div p {
    font-size: 14px;
    line-height: 21px;
    color: #333333;
    font-weight: 400;
    /*margin-bottom: 15px;*/
}


/*分页*/


/* 分页*/

.page-box {
    width: 100%;
    text-align: center;
    margin: 32px 0 40px;
    font-size: 0;
}

.page-box a {
    display: inline-block;
    vertical-align: middle;
    height: 36px;
    background-color: #fff;
    line-height: 36px;
    font-size: 14px;
    color: #333333;
    text-align: center;
    transition: all 0.6s;
}

.page-box a.prev {
    margin-right: 12px;
}

.page-box a.prev,
.page-box a.next {
    width: 55px;
}

.page-box a.next {
    margin-right: 26px;
}

.page-box a.page {
    width: 36px;
    margin-right: 12px;
}

.page-box a.active,
.page-box a:hover {
    background-color: #ff7134;
    color: #fff;
}

.page-box span {
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}

.page-box em {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.page-box input {
    width: 46px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    font-size: 14px;
    margin-right: 14px;
}

.page-box button {
    width: 55px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #ff7134;
    font-size: 14px;
    color: #fff;
    margin-left: 15px;
}


/* 热门*/

.hot-box {
    width: 345px;
    overflow: hidden;
}

.hot-box>img {
    width: 100%;
    height: 195px;
    display: block;
    margin-bottom: 12px;
}

.hot-box>.box {
    width: 100%;
    background-color: #fff;
    padding-top: 21px;
    overflow: hidden;
}

.hot-box>.box h3 {
    width: 300px;
    margin: 0 auto 30px;
    font-size: 18px;
    color: #ff7134;
    padding-bottom: 10px;
    border-bottom: 1px solid #d4dbe3;
    position: relative;
}

.hot-box>.box h3::before {
    content: "";
    width: 72px;
    height: 3px;
    background-color: #ff7134;
    position: absolute;
    left: 0;
    bottom: -1px;
}

.hot-box>.box ul {
    width: 300px;
    margin: 0 auto 50px;
}

.hot-box>.box ul li {
    margin-bottom: 21px;
}

.hot-box>.box ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #47505b;
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
    border-radius: 50%;
}

.hot-box>.box ul a {
    display: inline-block;
    vertical-align: middle;
    width: 276px;
    font-size: 14px;
    line-height: 21px;
    color: #47505b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-box>.box>div {
    width: 300px;
    margin: 0 auto 28px;
}

.hot-box>.box>div img.fl {
    width: 97px;
    height: 85px;
    margin-right: 11px;
    object-fit: cover;
}

.hot-box>.box>div>a>div.fl {
    width: 170px;
}

.hot-box>.box>div h4 {
    font-size: 18px;
    line-height: 18px;
    color: #47505b;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-box>.box>div p {
    font-size: 14px;
    line-height: 14px;
    color: #666666;
    margin-bottom: 15px;
}

.hot-box>.box>div span {
    width: 77px;
    height: 23px;
    background-color: #ff7134;
    border-radius: 2px;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
}

.page-box a.actives,
.page-box a:hover {
    background-color: #ff9025;
    color: #fff;
}
.tutor div span{
    width: 77px;
    height: 23px;
    background-color: #3d8bfd;
    border-radius: 2px;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    margin-top: 8px;
}