/*当前页面样式*/
.container .left-bar { width: 765px; height: auto; }
.container .right-bar { width: 359px; height: auto;}
.container .right-bar.on{
    display: none;
    /* position: fixed;
    bottom: 0;
    right: 50%;
    margin-right: -569px;
    pointer-events: none;
    z-index: 1; */
}
/*882*/
#banner { width: 765px; height: 303px; position: relative;background: #ffffff}
#banner .swiper-container { height:  100%;border-radius: 4px }
#banner .swiper-slide { width: 765px; height: 303px; overflow: hidden; position: relative; border-radius: 4px}
#banner .swiper-slide img { display: block; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; }
#banner .swiper-slide a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; }
#banner .swiper-pagination { display: flex; justify-content: center; align-items: center;  width: 100%; height: 44px; position: absolute; bottom: 0; left: 0; right: 0; }
#banner .swiper-pagination-bullet{ width:20%; height: 100%; font-size: 16px; line-height: 44px; color: #fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background: rgb(51, 51, 51, .75); border-radius: 0; opacity: 1; padding: 0 10px; }
#banner .swiper-pagination-bullet:first-child{border-radius: 0 0 0 4px}
#banner .swiper-pagination-bullet:last-child{border-radius: 0px 0 4px 0}
#banner .swiper-pagination .active { background: #c4943d; }

.left-bar .left-box { width: 100%; height: auto; background: #fff; margin-top: 15px;border-radius: 4px }
.left-box .menu-box { width: 100%; height: 64px; font-size: 0; text-align: left; border-bottom: 1px solid #f0f0f0;position: relative; }
.left-box .menu-box a { height: 100%; font-size: 20px; line-height: 64px; color: #333; text-align: center; display: inline-block; vertical-align: top; padding: 0 20px; position: relative; transition: all .3s; }
.left-box .menu-box a:nth-child(1) { padding-left: 26px; }
.left-box .menu-box a:hover, .left-box .menu-box a.on { color: #c4943d; font-weight: bold; }
/* .left-box .menu-box a:hover:after,  */
.left-box .menu-box a.on:after { content: ''; width: 100%; height: 3px; background: #c4943d; position: absolute; bottom: -1px; left: 0; pointer-events: none; }

.article-list li { width: 100%; height: auto; padding: 20px 20px; padding-bottom: 11px;}
.article-list .moment-list {
    padding-bottom: 20px;
}
.article-list li:not(.top) { border-top: 1px solid #f0f0f0; }
.article-list li .author-box { width: 100%; height: 40px; display: flex; justify-content: space-between; }
.article-list li .avatar-box { font-size: 0; text-align: left; }
.article-list li .avatar-box a { width: auto; display: inline-block; }
.article-list li .avatar { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; display: inline-block; vertical-align: middle; }
.article-list li .avatar img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.article-list li .avatar-box .user-info { display: inline-block; vertical-align: middle; margin-left: 10px; }
.article-list li .avatar-box .author { font-size: 16px; line-height: 20px; color: #333; font-weight: bold; }
.article-list li .avatar-box .user-tag {
    font-size: 13px;
    line-height: 18px;
    margin-top: 5px;
    color: #999; }
.article-list li .avatar-box i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0px;
    transform: scale(.8);
    transform-origin: 0 20%;}
.article-list li .author-box .btn-follow { font-size: 18px; line-height: 38px; color: #fffff2; text-align: center; margin-top: 6px; transform: scale(.78); transform-origin: 100% 0; }
.article-list li .author-box .btn-follow.on { color: #979797; }
.article-list li .author-box .btn-follow:hover { background: #FCFAEA; }
/* .article-list li .author-box .btn-follow.on:hover { filter: brightness(.9); } */
.article-list li .article-title { width: 100%; height: auto; font-size: 20px; line-height: 20px; color: #333; font-weight: bold; text-align: justify; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.article-list li .article-text { letter-spacing: 0.4px;width: 100%; font-size: 16px; line-height: 25px; color: #979797; text-align: justify; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; text-overflow:ellipsis; margin-top: 10px; }
.article-list li .article-text a{
    color: #333;
}
.article-list li .img-wrap { width: 100%; height: auto; font-size: 0; text-align: left; margin-top: 10px; }
.article-list li .img-box { width: 310px; height: 170px; overflow: hidden; display: inline-block; vertical-align: top; margin-right: 10px; cursor: pointer;position: relative;}
.article-list li .heightImg { width: 200px; height: 300px; overflow: hidden; display: inline-block; vertical-align: top; margin-right: 10px; cursor: pointer; }
.article-list li .widthImg { width: 235px; height: 130px; overflow: hidden; display: inline-block; vertical-align: top; margin-right: 10px; cursor: pointer; }
.article-list li .squareImg { width: 100px; height: 100px; overflow: hidden; display: inline-block; vertical-align: top; margin-right: 10px; cursor: pointer; }
.article-list li .img-box img {min-height: 130px; max-height: 418px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: all .3s; border-radius: 4px}
.article-list li>a:hover .article-title { color: #c4943d; }
.article-list li .tag-box { width: 100%; height: auto; font-size: 0; text-align: left; margin-top: 10px; }
.article-list li .tag-box a {     font-size: 14px;line-height: 20px;color: #979797;display: inline-block;vertical-align: top;margin-right: 13px;background: #F6F8FA;padding: 5px 15px;border-radius: 18px; }
.article-list li .tag-box i.i-hex { display: inline-block; vertical-align: middle; font-size: 15px; line-height: 20px; text-align: center; margin: -2px 7px 0 0; }
.article-list li .tag-box i.i-job { width: 20px; height: 20px; overflow: hidden; border-radius: 4px; display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; }
.article-list li .tag-box i.i-job img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.article-list li .info-box { margin-top: 24px; }
/*.article-list li>a:hover img { transform: scale(1.1); }*/
/*.article-list li .img-box:hover img { transform: scale(1.1); }*/

.article-list li .info-box { width: 100%; height: 16px; font-size: 14px; line-height: 0px; color: #979797; text-align: left; }
.article-list li .moment-info-box {  line-height: 16px; margin-top: 15px;}

.article-list li .info-box .left { width: 50%; float: left; }
.article-list li .info-box .right { width: 50%; float: right; text-align: right; }
.article-list li .info-box .author { display: inline-block; vertical-align: top; margin-right: 20px; }
.article-list li .info-box .time { display: inline-block; vertical-align: top; margin-right: 20px; position: relative; }
/*.article-list li .info-box .use-ip { margin-left: 4px }*/
.article-list li .info-box .date { margin-right: 2px }
/*.article-list li .info-box .time:after { content: ''; width: 4px; height: 4px; background: #979797; border-radius: 50%; position: absolute; top: 50%; right: -18px; margin-top: -2px; pointer-events: none; }*/
.article-list li .info-box p { width: auto; height: 16px; display: inline-block; vertical-align: top; margin-left: 20px; }
.article-list li .info-box a { width: auto; height: 16px; color: #979797; display: inline-block; vertical-align: top; margin-left: 20px; }
.article-list li .info-box p.view,.article-list li .info-box a.msg { pointer-events: none; }
/*.article-list li .info-box .num { color: #333 }*/
.article-list li .right span { width: 22px; height: 100%; display: inline-block; vertical-align: top; position: relative; } 
.article-list li .right .msg b, .article-list li .right .like b { transition: color .3s; }
.article-list li .right p i.spr, .article-list li .right a i.spr { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }
.article-list li .right p i.spr.on, .article-list li .right a i.spr.on { opacity: 0; }
.article-list li .right p.on i.spr, .article-list li .right a.on i.spr { opacity: 0; }
.article-list li .right a.on i.spr.on, .article-list li .right a:hover i.spr.on { opacity: 1; }
/* .article-list li .right a.msg.on b, 
.article-list li .right a.msg:hover b,  */
.article-list li .right a.like.on b, 
.article-list li .right a.like:hover b { color: #c4943d !important; }

.article-list li.top { font-size: 0; text-align: left; padding: 10px 0; }
.article-list li.top p { width: 100%; display: inline-block; vertical-align: top; padding: 0 20px; margin: 10px 0; }
.article-list li.top p a { font-size: 18px; line-height: 20px; color: #333; font-weight: bold; }
.article-list li.top p i { border-radius: 4px; width: 56px; height: 30px; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 30px; color: #fff; text-align: center; background-color: #c4943d; margin: -4px 14px 0 0; }
.article-list li.top a:hover { color: #c4943d; }

.article-list li.article1 a { width: 100%; height: auto; display: flex; justify-content: space-between; }
.article-list li.article1 .article-box { width: 504px; height: 96px; }
.article-list li.article1 p.article-title { width: 100%; height: 56px; font-size: 18px; line-height: 28px; color: #333; font-weight: bold;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: initial;
    text-overflow: ellipsis;}
.article-list li.article1 a:hover p.article-title { color: #c4943d; }
.article-list li.article1 .img-box {width: 155px;height: 86px;overflow: hidden; cursor: pointer;position: relative; }
.article-list li.article1 .img-box img {min-height: auto; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.article-list li.article1 .img-box .video-icon{
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(./PC/comm/video-new.png) no-repeat center top;
    top: 50%;
    background-size: 100%;
    right: 50%;
    z-index: 111;
}
.article-list li.article1 .img-box .video-bg{
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    /* background-color: rgba(0,0,0,0.5); */
    z-index: 100;
}
.article-list li.ad { padding: 0; overflow: hidden; }
.article-list li.ad img { width: 100%; height: auto; transition: all .3s; }
/*.article-list li.ad:hover img { filter: brightness(1.1); transform: scale(1.1); }*/
.article-list li.ad a { width: 100%; height: auto; display: block; }

.right-bar .right-box {     
    width: 100%;
    height: auto;
    background: #fff;
    padding: 1px 0;
    margin-bottom: 15px;
    border-radius: 4px;}
.right-bar .right-title-box { 
    width: 100%;
    /* height: 42px;  */
    padding: 20px 20px 0 20px;
 }
.right-bar .right-title-box .title-txt { 
    font-size: 20px; 
    /* line-height: 42px;  */
    color: #333; 
    font-weight: bold; 
    float: left;
 }
.right-bar .right-title-box a { 
    display: inline-block; font-size: 16px;
    color: #979797; float: right; transition: color .3s;
    height: 22px;
    line-height: 22px;
 }
.right-bar .right-title-box a:after { content: ''; width: 6px; height: 10px; background: #979797; display: inline-block; vertical-align: middle; -webkit-mask: url(../PC/comm/arrow-right.png) no-repeat; -webkit-mask-size: 100%; margin: -2px 0 0 3px; transition: background .3s; }
.right-bar .right-title-box a:hover { color: #c4943d; }
.right-bar .right-title-box a:hover:after { background: #c4943d; }
.right-bar .right-box.right-box1{
    padding-bottom: 20px;
}
.right-box1 .act-list { width: 100%; height: auto; font-size: 0; text-align: left; padding: 0 20px; padding-bottom: 8px}
.right-box1 .field { width: 100%; height: 68px; display: inline-block; vertical-align: top; margin: 20px 0 0; position: relative; }
.right-box1 .field a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; }
/*.right-box1 .field .img-box { width: 126px; height: 100%; overflow: hidden; display: inline-block; vertical-align: top; }*/
.right-box1 .field .img-box { width: 102px; height: 77px; overflow: hidden; display: inline-block; vertical-align: top; }
.right-box1 .field .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
/*padding-top: 8px;*/
.right-box1 .field .field-info { width: 172px; height: 100%; display: inline-block; vertical-align: top;  margin-left: 10px; }
/*line-height: 26px;*/
.right-box1 .field .title { width: 100%; height: 26px; font-size: 18px;  color: #333; font-weight: bold; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .3s; }
.right-box1 .field .desc { 
    width: 100%; 
    /* height: 20px;  */
    font-size: 14px;  
    color: #979797; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;  */
    line-height: 20px;
    margin-top: 5px; 
    transition: color .3s;
 }
.right-box1 .field:hover .title { color: #c4943d; }
.right-box1 .field:hover .desc { color: #c4943d; }
/*.right-box1 .field:hover img { transform: scale(1.1); }*/

.right-box2 .tools-list { width: 100%;height: auto;font-size: 0;text-align: center;margin-top: 30px;display: flex;flex-wrap: wrap;justify-content: space-around; padding-bottom: 4px;}
.right-box2 .item-box { width: auto; height: 90px; display: inline-block; vertical-align: top; margin: 6px 12px; position: relative; }
.right-box2 .item-box a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; }
.right-box2 .item-box .icon-box { width: 100%; height: 58px; position: relative; }
.right-box2 .item-box i.spr { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.right-box2 .item-box span { width: auto; height: 22px; display: block; font-size: 15px; line-height: 22px; color: #333; text-align: center; margin-top: 6px; transition: color .3s; }
.right-box2 .item-box:hover span { color: #c4943d; }

.right-box3 .btn-list { width: 100%; height: auto; font-size: 0; text-align: center; margin-top: 3px; }
.right-box3 .btn-list a { font-size: 18px; line-height: 50px; color: #fffff2; text-align: center; text-shadow: 0 1px 2px #585654; display: inline-block; margin: 6px auto 9px; }
.right-box3 .btn-list a:hover { filter: brightness(1.1); }

/*.right-bar .right-box4 { height: 525px; }*/

/*.right-bar .right-box5 { height: 1120px; }*/


.side-box { 
    /* width: 100px; height: 160px;  */
    position: fixed; bottom: 0; right: 50%; margin: -170px -662px 0 0; z-index: 9; pointer-events: none; }
    /* padding-top: 120px; */
.side-box .publish-box { width: 100%; pointer-events: all; position: relative; overflow: hidden; padding-top: 80px; }
.side-box .btn-publish { font-size: 20px; line-height: 24px; color: #fff; font-weight: bold; text-align: center; display: block; text-shadow: 0 0 4px #d5b8ff; padding-top: 56px; margin: 0 auto; position: relative; z-index: 9; }
.side-box .btn-publish:hover { filter: brightness(1.1); }
.side-box .side-btn-box {font-size: 0; text-align: center; position: absolute; top: 178px; left: 0; z-index: 8; transition: top .3s; overflow: hidden; }
.side-box .publish-box.on .side-btn-box { top: 0; }
.side-box .side-btn-box i { display: inline-block; width: 100%; height: 10px; }
.side-box .side-btn-box a { width: 100%; height: 32px; font-size: 16px; line-height: 50px; color: #5817bb; display: inline-block; margin: 10px 0; transition: all .3s; }
.side-box .side-btn-box a:hover { font-weight: bold; }
.side-box .btn-b2top { opacity: 0; pointer-events: none; transition: opacity 1s; margin-top: 6px; }
.side-box .btn-b2top.on { opacity: 1; pointer-events: all;display: block; transition: opacity 1s;}
.side-box .btn-b2top:hover { filter: brightness(1.1); }

.side-right { 
    width: 359px; height: auto; position: fixed; 
    /* top: 85px; */
    /* top: -240px; */
    bottom: 0;
    right: 50%; margin-right: -569px; 
    opacity: 0; pointer-events: none; z-index: 1;
    /* transition: opacity .3s;  */
}
.side-right.on { opacity: 1; pointer-events: all; }
.side-right .right-box { 
    width: 100%; height: auto; background: #fff; 
    padding: 10px 0; 
    margin-bottom: 10px; }
.side-right .right-title-box { 
    /* width: 100%; height: 42px; padding: 0 20px; */
    width: 100%;
    /* height: 42px;  */
    padding: 10px 20px 0 20px;
 }
.side-right .right-title-box .title-txt { 
    /* font-size: 20px; line-height: 42px; color: #333; 
    font-weight: bold; float: left;  */
    font-size: 20px; 
    /* line-height: 42px;  */
    color: #333; 
    font-weight: bold; 
    float: left;
}
.side-right .right-title-box a { 
    display: inline-block; font-size: 16px;
    color: #979797; float: right; transition: color .3s;
    height: 22px;
    line-height: 22px;
 }
 .side-right .right-box .right-box2{
    padding-bottom: 0;
 }
.side-right .right-title-box a:after { content: ''; width: 6px; height: 10px; background: #979797; display: inline-block; vertical-align: middle; -webkit-mask: url(../PC/comm/arrow-right.png) no-repeat; -webkit-mask-size: 100%; margin: -2px 0 0 3px; transition: background .3s; }
.side-right .right-title-box a:hover { color: #c4943d; }
.side-right .right-title-box a:hover:after { background: #c4943d; }
.side-right .right-box6 { position: relative; margin-top: 15px; }
/* .side-right .right-box1, .side-right .right-box4, .side-right .right-box5 { display: none; } */
/* .side-right .right-box1 ,.side-right .right-box5{display: none;} */
/* .side-right .right-box1, .side-right .right-box2,.side-right .right-box4 { display: none; } */
.side-right  .right-box.right-box4{
    padding-top: 0;
}
.side-right  .right-box.right-box4 .title2{
    padding-top: 16px;
}
.side-right .right-box.right-box4 .adventure_box{
    margin-bottom: 10px;
}
.side-right  .right-box.right-box2 .tools-list li:nth-last-child(1){
    display: none;
}
.side-right  .right-box.right-box2 .tools-list li:nth-last-child(2){
    display: none;
}
.side-right  .right-box.right-box2 .tools-list li:nth-last-child(3){
    display: none;
}
/*.side-right .right-box2 .tools-list li:nth-child(-n+3) { display: none; }*/
/*.side-right .right-box2 .tools-list li:nth-child(-n+3) { display: none; }*/




/* 0614 */
.left-box .video-list-box{
    padding: 20px 20px;
  
}
.left-box .video-list-box li{
    display: inline-block;
    vertical-align: top;
    width: 228px;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;
}
.left-box .video-list-box li:nth-child(3n){
    margin-right: 0;
}
.left-box .video-list-box .video-con{
    width: 100%;
    height: 130px;
    position: relative;
}
.video-con .video-img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}
.video-con .video-info{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #fff;
    padding: 0 10px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
    height: 30px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.video-info .info-left{
    display: flex;
    align-items: center;
}
.video-info .info-left .video-play-icon{
    width: 18px;
    height: 18px;
    background: url(../PC/comm/video-play-icon.png) no-repeat center top;
    background-size: 100%;
    margin-right: 5px;
}
.video-list-link:hover .video-title{
    color: #c4943d;
}
.video-list .video-bottom{
    margin-top: 8px;
}
.video-list .video-title{
    height: 44px;
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 22px;
}
.video-bottom .video-article-box{
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #8D98B2 !important;
}
.video-article-box .bottom-left{
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.video-bottom .video-article-box .num{
    color: #8D98B2;
    margin-top: 2px;
    display: inline-block;
    vertical-align: top;
}
/* .video-bottom .bottom-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.bottom-right  .msg{
    margin-right: 10px;
}
.bottom-right  .msg, .bottom-right  .like{
    width: auto;
    height: 16px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}
.bottom-right span{
    width: 22px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.bottom-right span i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s;
}
.bottom-right .like:hover .num{
    color: #c4943d;
}
.bottom-right .like.on i.spr{
    opacity: 0;
}
.bottom-right .like.on .num{
    color: #c4943d;
}
.bottom-right .like.on i.spr.on{
    opacity: 1;
}
.bottom-right .like i.spr.on { opacity: 0;}
.bottom-right .like:hover i.spr.on{
    opacity: 1;
}
.bottom-right .like:hover i.spr{
    opacity: 0;
}
.bottom-right .like:hover i.spr.on{
    opacity: 1;
}
.video-title a{
    cursor: pointer;
}
.video-title .emoji-img{
    width: 20px !important;
}



.tag-list-topic{
    margin-top: 20px;
    margin-bottom: -16px;
}

.long-text{
    line-height: 23px;
    letter-spacing: 0.4px;
    color: #333;
}
.article-text span{
    font-weight: bold;
    margin: 10px 0px 5px 0px;
    display: inline-block;
}
.bigInfo_box{
    cursor: pointer;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.tag-list-topic{
    margin-top: 20px;
    margin-bottom: -16px;
}

.long-text{
    line-height: 23px;
    letter-spacing: 0.4px;
    color: #333;
}
.article-text .title{
    font-weight: bold;
    color: #000;
    margin: 10px 0px 5px 0px;
    display: inline-block;
}
.bigInfo_box{
    cursor: pointer;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}