body,.ty-header,.ty-footer{margin:0;font-size:16px;font-family: PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,微软雅黑,STHeitiSC-Light,simsun,宋体,WenQuanYi Zen Hei,WenQuanYi Micro Hei,"sans-serif";}
a{text-decoration: none;color:#262626;}
a:hover{color:#0C82FB}
ul{list-style: none;padding: 0;margin:0}
.wrap{width:100%;box-sizing: border-box;width: 100%; max-width:1200px;padding:0 10px;margin:0 auto;text-align: left;}

/*bar*/
#bar{width:100%;background-color:#414755;color:#d8d8d8;font-size:.75em;white-space: nowrap;padding: 5px 0;line-height:1.45;}
#bar .wrap{display: flex;justify-content: space-between;align-items: center;overflow: hidden;}
.bar-app{cursor:pointer;padding-left:1.25em;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='%23f4ea2a' width='200' height='200'%3E%3Cpath d='M810.667 554.667V768H213.334V554.667h-85.333v298.667h768V554.667z'/%3E%3Cpath d='M512 682.667l170.667-213.333h-128V170.667h-85.333v298.667h-128z'/%3E%3C/svg%3E") no-repeat left center;background-size:1.125em 1.125em;}
.vue-score #bar{position:relative;z-index:2;}

/*header*/
.ty-header{width: 100%;background-color: #FCFCFC;white-space: nowrap;box-shadow: 0 0 4px rgb(0 0 0 / 20%);position: relative;z-index:2;}
.ty-header .wrap{height:3.75em;display: flex;align-items: center;}
.ty-header nav{flex:1;display: flex;align-items: center;font-size:1.125em;}
.ty-header nav a{color: #666;margin-left:50px;}
.ty-header nav a:hover{color:#333}
.ty-header nav b{font-weight: normal;}
.header-logo{width:135px;height:40px;background:url("logo_l.png") no-repeat;background-size: cover;}

/*main*/
main{width: 100%;}
.channel .wrap{display:flex;margin-top:25px;}
.channel .list-wrap{flex:1;width: auto;margin-top:0;padding:0;display: flex;}
.page .wrap{display:flex;margin-top:25px;}


/*menu*/
.menu{width:126px;margin-right:18px;}
.menu aside{position:sticky;top:25px;width: 100%;text-align: center;}
.menu-link{border:1px solid #F0F0F0;}
.menu h2{width: 100%;font-size: 1.025em;background: #0C82FB;margin: 0;color: #fff;padding: .75em 0;border-radius: 4px 4px 0 0;}
.menu a{display: block;padding: 1em 0;border-top: 1px solid #f0f0f0;}
.menu a:hover{color: #9a7f01;}
.menu a:first-of-type{border-top:0}
.menu a.active{background: #F3F6F8;color: #9a7f01;}

/*list-arc*/
.list-arc{flex:1;padding-bottom: 30px;flex-grow: 1;min-width: 500px}
.list-arc ul{margin-top: -20px;}
.list-arc li{width: 100%;display: flex;box-sizing: border-box;padding: 20px 0;border-bottom: 1px solid #f3f3f3;}
.list-arc .img{display:block;width:200px;height: 132px; overflow: hidden;margin-right: 18px;}
.list-arc .img img{width: 100%;height:100%;object-fit: cover;transition: transform .3s ease-out;}
.list-arc .img:hover img{transform:scale(1.05);}
.list-arc .detail{flex:1;position:relative;height: 132px;}
.list-arc h3{font-size: 1.125em;margin: 0;font-weight: normal;max-height: 2.8em;overflow: hidden;}
.list-arc h3 a{text-align: justify;}
.list-arc h3 a:hover{text-decoration: underline;}
.list-arc .info{
    margin-top:10px;font-size:0.8125em;line-height: 20px; letter-spacing: 0; text-align: justify;color: #787878;
    max-height:3em;overflow: hidden;word-break: break-all;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
.list-arc .tags{position:absolute;bottom:0;width: 100%;height: 1em;overflow: hidden;}
.list-arc .tags a{float:left;color:#bb9e14; font-size: 0.75em;margin-right:10px;}
.list-arc .tags span{float:right;padding-left:1em;font-size: 0.75em;color:#b5b5b5;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M508.8 992C246.4 992 32 777.6 32 512S246.4 32 508.8 32s476.8 214.4 476.8 480c3.2 265.6-211.2 480-476.8 480zm0-896C281.6 96 96 281.6 96 512s185.6 416 412.8 416c227.2 0 412.8-185.6 412.8-416 3.2-230.4-182.4-416-412.8-416z' fill='%23b5b5b5'/%3E%3Cpath d='M704 576H480c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32s32 12.8 32 32v192h192c19.2 0 32 12.8 32 32s-12.8 32-32 32z' fill='%23b5b5b5'/%3E%3C/svg%3E") no-repeat left center;background-size: 0.75em 0.75em;}
@media screen and (max-width: 560px){
    .list-arc .img{width:140px;height:104px;margin-right:8px;}
    .list-arc .detail{height:104px;}
    .list-arc .info{height: 1.5em;}
}
@media screen and (max-width:370px){
    .list-arc .img{display: none;}
    .list-arc .tags{position: static;margin-top: 20px;}
}

/*list-video*/
.list-video{flex:1;padding-bottom:30px;}
.list-video ul{width: 100%;display: flex;flex-flow: row wrap;justify-content: space-between;}
.list-video li{width:24%;box-sizing: border-box;overflow: hidden;margin-bottom: 20px;}
.list-video .pre{display:block; width: 100%;position: relative;overflow: hidden;padding:60% 0 0 0;background: #ccc;}
.list-video img{position: absolute;left: 0;top: 0;width:100%; height:100%; object-fit: cover;transition: transform .3s ease-out;}
.list-video .pre:hover img{transform:scale(1.05);}
.list-video b{position: absolute;right: 3px;bottom: 3px;font-size: .725em;color: #fff;padding: 2px 4px;background: rgb(0 0 0 / 78%);}
.list-video .tit{
    margin-top: 6px;
    width: 100%;
    height: auto;
    max-height: 3em;
    overflow: hidden;
    font-size: 0.875em;
    line-height: 1.5em;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
@media screen and (max-width: 1000px){
    .list-video li{width:32.2%;}
}
@media screen and (max-width: 800px){
    .list-video li{width:49%;}
}
@media screen and (max-width: 480px){
    .list-video li{width:100%;}
}

/*pagebreak*/
.pagebreak{display: flex;justify-content: center;padding:10px 0;margin-top:20px}
.pagebreak a,.pagebreak strong{display: block;padding:0 .75em;margin: 0 3px;line-height:2.1em; height:2em;overflow: hidden;font-size: 1em;border-radius: 3px;border: 1px solid #eee;}
.pagebreak a:hover{border-color: #0C82FB ;}
.pagebreak strong{color: #fff;background-color:#0C82FB ;border-color: #0C82FB ;}

/*article*/
.article{flex:1;padding-right:30px;flex-grow: 1;min-width: 500px}
.article h1{margin: 0;font-size: 2em;}
.article .content{color: #262626;letter-spacing: 0;text-align: justify;font-size:1em; line-height:2;}
.article .content p{margin-bottom: 26px;word-wrap: break-word;}
.article .content img{max-width: 100%;display: block;margin:.6em auto;}
.article .cpy{font-size: 0.875em;color: #ccc;margin-bottom: 20px;}

.autor{font-size: 0.75em;padding: 16px 0;color: #888;}
.autor span{margin-right: 15px;}
.autor a{color: #0C82FB;}

.linked{border-top:2px solid #FFDA2F;box-sizing: border-box;background: #FCFCFC;padding:5px 10px 10px 0;font-size: 1em;display: flex;flex-wrap: wrap;align-items: center;margin-bottom: 30px;}
.linked span{color:#717171;margin: 5px 0 0 10px;}
.linked a{margin: 5px 0 0 10px; display: inline-block;padding: 4px 10px;line-height: 1.2;border-radius: 5px;color: #bb9e14;border: 1px solid #bb9e14;}
.linked a:hover{color: #0C82FB;border: 1px solid #0C82FB;}

/*video*/
.video-page{flex:1;flex-grow: 1;min-width: 520px}
.video-page .autor{padding: 10px 0 30px 0;}
.video-ratio{position: relative;overflow: hidden;width: 100%;padding:56% 0 0 0;background-color: #000;}
.video-container{position: absolute;width: 100%;height: 100%;left:0;top:0;}
#video-player{width: 100%;height: 100%;}
.video-page h1{margin: 0;font-size: 1.25em;font-weight: normal; margin-top: 10px;}
.video-bottom{width: 100%;box-sizing: border-box;}


/*comment*/
.comment{border:1px solid #d8d8d8;margin-bottom: 30px;border-radius: 4px;overflow: hidden;display: flex;flex-direction: column;}
.comment textarea{width: 100%;height: 90px;border: 0;resize: none;padding: 10px;box-sizing: border-box;}
.comment textarea:disabled{background: #fff;}
.comment .post{width: 100%;background: #F7F9FA; display: flex;justify-content:space-between;align-items: center;padding: 10px 0;}
.comment span{color: #c5c5c5;margin-left: 1em;}
.comment button{border: 0;background: #0C82FB;color: #fff;margin-right: 1em;padding: 0.5em 1em;border-radius: 2px;}

/*split*/
.spt-tit{font-size: 1.35em;color: #0c82fb; text-align: center;margin-bottom: 30px;position: relative;}
.spt-tit b{display: inline-block;background-color: #fff;padding: 0 20px;}
.spt-tit::before{content: ""; display: block;position: absolute;width: 100%;height: 2px;background:#68B2FD;top: 15px;z-index: -1;}


/*sidebar*/
.sidebar{max-width:280px;margin-left:20px;}

.list-tit{box-sizing: border-box;background: #f9f9f9;padding: 12px;border-radius:6px;margin-bottom: 20px;}
.list-tit h3{margin: 0;color: #9a7f01;font-size: 1.25em;}
.list-tit ul{padding: 10px 0;}
.list-tit li{margin-top:5px}
.list-tit a{display:block;font-size: 0.875em;border-radius: 3px;padding: 10px;color:#615d4d}
.list-tit a:hover{background:#F1EEE9;}

.list-vdo{margin-bottom: 20px;}
.list-vdo a{display: block;color:#615d4d;overflow: hidden;padding-bottom:5px;margin-bottom:15px;background:#f9f9f9;border-radius:6px;}
.list-vdo img{display: block; width: 100%;transition: transform .3s ease-out;}
.list-vdo a:hover{background:#F1EEE9;color:#0C82FB;}
.list-vdo a:hover img{transform:scale(1.05);}
.list-vdo p{margin: 0;padding: 10px;position: relative;text-indent: 1.2em;font-size: .875em;}
.list-vdo p::before{display: block;content: "";width:1.2em;height:1.2em;position: absolute;left:7px;top: 11px;background:url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zm3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM383.232 287.616l384 224.896-384 223.104v-448z' fill='%230C82FB'/%3E%3C/svg%3E");background-size: cover;}

.qrblock{position:sticky;top:25px;box-sizing: border-box;border: 1px solid #e6e6e6;padding: 25px;border-radius: 5px;text-align: center;color: #999;}
.qrblock .qr{width: 100%;min-height: 40px;}
.qrblock .qr img{width: 100%;}

/*footer*/
.ty-footer{background-color: #414755;color: #878ea6;padding-top:20px}
.ty-footer p{margin:1em 0;}
.ty-footer .wrap{display: flex;font-size: 0.875em;}
.ty-footer .ft{flex:1;line-height: 1.5;}
.ty-footer .fr{text-align: center;margin-left:200px}
.ty-footer .qr{width:126px;height:126px;background-size: cover; background-image: url("./qr.png");}
.vue-score .ty-footer{position:relative;z-index:2;}

/*menu inline*/
@media screen and (max-width: 1280px){
    .channel{width: 100%;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN88x8AAt0B7bEE+qwAAAAASUVORK5CYII=") repeat-x;background-position: 0 calc(2.75em - 1px);}
    .channel .wrap{margin-top:0;flex-direction: column;}
    .channel .list-wrap{flex-direction: row;flex-wrap: nowrap;width: 100%;}
    .pagebreak a,.pagebreak strong{font-size: 0.875em;}

    .menu{width: 100%;margin: 0 0 20px 0;}
    .menu aside{position:static;}
    .menu-link{display:flex;border:0;white-space: nowrap;overflow-y: hidden;overflow-x: auto;}
    .menu h2{display: none;}
    .menu a{box-sizing: border-box;height: 2.75em;padding:.75em 1em 0 1em;border-top:0;}
    .menu a:hover{background-color: #f1f1f1;}
    .menu a.active{background: none;color: #9a7f01;border-bottom: 1px solid #9a7f01;}

    .article{padding-right: 10px;}
    .video-page{padding-right: 0;}
}

/*short header nav*/
@media screen and (max-width: 768px){
    /*header*/
    .ty-header .wrap{height:2.875em;}
    .ty-header nav{font-size:1em;justify-content:space-between;height: 100%;}
    .ty-header nav a{margin:0;height: 100%;line-height: 2.875em;display: flex;align-items: center;justify-content: center;width: 25%;}
    .ty-header nav b{display:block;overflow: hidden; text-indent: -2em;}
    .ty-header nav a:first-child b{text-indent: 0;}
    .header-logo{width:95px;height:28px;margin-right:5px;}

    .sidebar,.ty-footer .fr{display: none;}
    .list-arc{min-width: 0;}
    .list-arc h3 a:hover{text-decoration: none;}
    .article{min-width:0;}
    .article h1{font-size: 1.5em;}

    .video-wrap{padding:0;}
    .page .video-wrap{margin-top:0}
    .video-page{min-width: 0;}
    .video-bottom{padding:0 10px}
}

@media screen and (max-width: 768px){
    
}

@media screen and (max-width: 375px){
    .header-logo{width:30px;}
}

/*mini scroll*/
@media (hover: hover) {
    .mscroll{scrollbar-width: thin;overflow-x: hidden;overflow-y:hidden;}
    .mscroll::-webkit-scrollbar{width:6px;}
    .mscroll::-webkit-scrollbar-thumb{border-radius:3px;}
    .mscroll::-webkit-scrollbar-track{background:#f3f3f3;}
    .mscroll::-webkit-scrollbar-thumb{background:#d8d8d8ec;}
    .mscroll::-webkit-scrollbar-thumb:hover{background:#b6b6b6}
    .mscroll:hover{overflow-y:auto;}
}
@media (hover: none) {
    .mscroll{
        overflow-y: auto;
    }
}

.empty{min-height:800px;}