@charset "UTF-8";

::-webkit-scrollbar {
    width: 0px
}

::-webkit-input-placeholder {
    opacity: 0.25;
}

ul,
ol {
    clear: both;
    border-left: 1px solid;
    padding-left: 1.5em;
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 549174 */
  src: url('../img/font_549174.woff2') format('woff2'),
       url('../img/font_549174.woff2') format('woff'),
       url('../img/font_549174.ttf') format('truetype');
}

@font-face {
  font-family: '仓耳非白W01';  /* Project id 549174 */
  src: url('../img/tsangerbaiW01.woff2') format('woff2'),
       url('../img/tsangerbaiW01.woff2') format('woff');
}

.bgmask ::selection {
    background: transparent;
    color: #fff;
}

*,
*:before,
*:after {
    /*Firefox3.5+*/
    /*Safari3.2+*/
    /*Opera9.6*/
    /*IE8*/
    box-sizing: border-box;
    /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+)*/
    -ms-overflow-style: none;
    /*IE10+滚动条隐藏*/
    font-family: "iconfont", sans-serif;
}

*:focus {
    outline: none;
}

html,
body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: var(--themecolor);
    background: var(--txtcolor);
    line-height: 1.5;
    font-family: "iconfont", sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-overflow-scrolling: touch;
    --themecolor: black;
    --txtcolor: white;
    --leftw: 15rem;
    --rightsidew: 15rem;
    --gap: 2.5rem;
}

body:before,
div.bgmask:after,
.imgmask:before,
.poster::before,
.popIframe:has(iframe[src*=player]):before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../img/bg_line.png") repeat top left;
    opacity: 0.25;
    pointer-events: none;
}

body.music,
body.books {
    font-family: "iconfont", cursive;
}

@media(max-width:375px) {
    html {
        font-size: 85%;
    }
}

@media(min-width:1280px) {
    html {
        font-size: 125%;
    }
}

body * {
    font-weight: normal !important;
}

body.loading:after,
.popIframe.loading:after {
    content: "";
    text-align: center;
    position: fixed;
    z-index: 999;
    opacity: 1;
    display: block;
    left: 50%;
    top: 50%;
    width: 20vmin;
    aspect-ratio: 1;
    margin-left: -10vmin;
    margin-top: -10vmin;
    border-radius: 50% !important;
    transition-duration: 0.5s;
    border: 2.5px solid;
    border-top-color: silver;
    border-left-color: transparent;
    border-right-color: transparent;
    background-size: 50%;
    opacity: 0.62;
    animation: rotate360 0.75s linear infinite;
}

.popIframe.loading:after {
    position: absolute;
    z-index: -1;
}

body.bgmask.loading:after {
    border-top-color: white;
}

.popmaskon {
    position: fixed;
    width: 100%;
}

.popmaskon .media,
.popmaskon video {
    display: none !important;
}

div.bgmask:after {
    opacity: 0.5;
}

.poster:before,
.date .layer:before,
.imgmask:before {
    position: absolute;
}

.imgmask:before {
    z-index: 1;
}

body.bgmask,
body.musicmask,
body.musicmask .popIframe {
    --themecolor: white;
    --txtcolor: black;
    background-color: #000;
}

body.bgmask .poster,
body.root.mvcat.bgmask .list .title {
    filter: sepia(0) grayscale(0) contrast(1) brightness(100%) !important;
}

div.bgmask {
    position: fixed !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition-duration2: 1.5s;
}

div.bgmask canvas {
    pointer-events: none;
    bottom: 0 !important;
}

.snow-container,
.particles-js-canvas-el {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition-duration: 1.5s !important;
    pointer-events: none;
}

body.pause div.bgmask .snow-container,
body.pause div.bgmask .particles-js-canvas-el,
body.pause #bloodsmoke,
body.pause #stars {
    opacity: 0 !important;
    transition-duration: 1.5s !important;
}

div.bgmask.layer {
    filter: brightness(0.62) blur(5px) opacity(1);
}

.snow-container {
    filter: blur(3px);
}

body .parallax .layer,
body.guess div.bgmask div {
    width: 140% !important;
    height: 120% !important;
    margin: 0 auto auto -20%;
    top: -10% !important;
}

body.guess div.bgmask {
    background-color: #333;
    filter: blur(0px);
}

body.guess.content * {
    color: white;
}

@media screen and (orientation:portrait) {
    body div.bgmask.parallax .layer {
        width: 120% !important;
        height: 140% !important;
        margin: 0 auto auto -10%;
        top: -20% !important;
        transition-duration: 0s;
    }
    body.guess div.bgmask div {
        background-size: contain;
    }
}

body.movie div.bgmask div {
    opacity: 1;
}

img {
    vertical-align: bottom;
    border: 0;
}

table {
    border-spacing: 0;
}

a {
    color: var(--themecolor);
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

a:hover {
    text-shadow: 0 0;
    opacity: 1 !important;
    transition-duration: 0.3s;
}

a.current {
    opacity: 1 !important;
    font-weight: bold !important;
}

a[href*='/']:before {
    display: inline-block;
    padding-right: .25em;
    text-decoration: none !important;
}

a[href*='baidu.com']:before {
    content: "\e75b"!important;
}

a[href*='chat.baidu.com']:before {
    content: "\e6db"!important;
}

a[href*='google.com']:before {
    content: "\e632"!important;
}

a[href*='bing.com']:before {
    content: "\e633"!important;
}

a[href*='wikipedia.org']:before {
    content: "\e688"!important;
}

a[href*='weibo.com']:before {
    content: "\e635"!important;
}

a[href*='zhihu.com']:before {
    content: "\e69a"!important;
}

a[href*='douban.com']:before {
    content: "\e604"!important;
}

a[href*='maoyan.com']:before {
    content: "\e62c"!important;
}

a[href*='metaso.cn']:before {
    content: "\e7a3"!important;
}

a[href*='n.cn']:before {
    content: "\e746"!important;
}

a[href*='perplexity.ai']:before {
    content: "\e745"!important;
}

a[href*='youtube.com']:before {
    content: "\e645"!important;
}

a[href*='bilibili.com']:before {
    content: "\e60a"!important;
}

a[href*='music.163.com']:before {
    content: "\e608"!important;
}

a[href*='iqiyi.com']:before {
    content: "\eb64"!important;
}

a[href*='youku.com']:before {
    content: "\e655"!important;
}

a[href*='1905.com']:before {
    content: "\e656"!important;
}

a[href*='v.qq.com']:before {
    content: "\e646"!important;
}

a[href*='ixigua.com']:before {
    content: "\e65e"!important;
}

a[href*='baike.com']:before {
    content: "\e629"!important;
}

a[href*='rottentomatoes.com']:before {
    content: "\e698"!important;
}

a[href*="metacritic"]:before {
    content: "\e6d0"!important;
}

a[href*='imdb.com']:before {
    content: "\e663"!important;
}

a[href*='themoviedb.org/']:before {
    content: "\e722"!important;
}

a[href*='pan.quark.cn']:before {
    content: "\e649"!important;
}

a[href*='alipan.com']:before {
    content: "\e64a"!important;
}

a[href*='pan.baidu.com']:before {
    content: "\e62d"!important;
}

a[href*='xunlei.com']:before {
    content: "\e60e"!important;
}

a[href*='drive.uc.cn']:before {
    content: "\e65c"!important;
}

a[href*='mgtv.com']:before {
    content: "\e65f"!important;
}

a[href*='miguvideo.com']:before {
    content: "\e64b"!important;
}

a[href*='yangshipin']:before {
    content: "\e659"!important;
}

a[href*='cctv.com']:before {
    content: "\e65b"!important;
}

a[href*='douyin.com']:before {
    content: "\e8db"!important;
}

a[href*='zimuku']:before {
    content: "\e67c"!important;
}

a[href*="thunder:"]:before,
#content a[href*="ed2k:"]:before,
#content a[href*="magnet:"]:before,
#content a[href*="ftp:"]:before,
#content a[href*=".torrent"]:before {
    content: "\e8f1"!important;
}

a[href*=".mp4"]:before,
a[href*=".m3u8"]:before {
    content: "\e87c"!important;
}

body.channel .right a:not(.social-share-icon):not(.text):before,
a.list:not(.text):before,
.list:not(.text) a:before,
.functions a:not(.ratings a):before,
.doubansummary a:not(.ratings a):before,
.media a:before {
    display: none;
}

.ratings a[href*="douban.com"]:before {
    color: green;
}

.ratings a[href*="imdb.com"]:before {
    color: goldenrod;
}

.ratings a[href*='rottentomatoes.com']:before {
    color: tomato;
}

.ratings a[href*="metacritic"]:before {
    color: limegreen;
}

textarea {
    color: var(--themecolor);
    background: none;
    font-size: 1em;
    width: 100%;
    line-height: 1.5;
    height: 7em;
    border: 1px dashed;
    padding: 0.5em;
    box-shadow: none;
    border-radius: 12px;
    outline: none;
}

input {
    color: var(--themecolor);
    position: relative;
    font-size: 1em;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px dashed;
    background: none;
    border-radius: 0;
    overflow: visible;
    outline: none;
    appearance: none;
}

input::-ms-clear {
    display: none;
}

input[type=text],
input[type=password] {
    appearance: none;
}

.sorter input[type=text] {
    font-size: 1em;
    width: 5em;
    padding: 0;
    border-bottom: 1px dashed;
    text-align: center;
}

input[type=radio]{
    appearance: auto;
    margin-right: .25em;
}

input[type=submit],
input[type=button],
button,
.button,
select {
    width: auto;
    border: none !important;
    color: var(--themecolor);
    background: transparent;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    font: unset;
    font-size: 1em;
    outline: none;
    }

button,
.button {
    display: inline-block;
    background: var(--themecolor);
    color: var(--txtcolor);
    border-radius: 2em;
    padding: .125em 0.75em;
    white-space: nowrap;
}

.insearch select {
    opacity: 0;
    -webkit-appearance: auto;
}

.insearch:hover select {
    opacity: 1;
}

form {
    display: inline;
}

blockquote {
    margin: 0;
    padding: 0.25em 0.75em;
    border-left: 1px dashed;
    background: rgba(0, 0, 0, 0.04);
    quotes: none;
}

blockquote:hover {
    border-left: 2px dashed;
    background: rgba(0, 0, 0, 0.08);
}

#content blockquote p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    border-bottom: 1px solid;
}

h1,
h2 {
    font-size: 1.8em;
}

#content h2 {
    font-size: 1.5em;
}

h3,
h4,
h5,
h6 {
    /* font-size: 1.2em; */
}

body.channel h1,
body.channel h2,
body.channel h3,
body.channel h4,
body>.rightside h3,
body.channel #author {
    position: relative;
    white-space: nowrap;
    width: calc(100% - var(--gap));
    margin-left: calc(var(--gap) / 2);
    text-overflow: ellipsis;
}

body>.right h1:first-child,
body>.right h2:first-child {
    margin-top: 0 !important;
    padding-top: 1.65em;
}

#favorite h2 {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 6%;
    padding-top: 1.65em;
}

body.content h1 {
    position: relative;
    width: auto;
    border-bottom: none;
    cursor: pointer;
}

body>.right h1.allsearch {
    cursor: pointer;
}

body>.right h1.allsearch:after {
    content: "\e60a";
    font-size: 0.65em;
    margin-left: 0.5em;
    transition-duration: 0.3s;
}

body.isWeixin2 h1:before,
body.isHtml5Plus2 h1:before {
    content: "\e6d8" !important;
    font-size: 1.5em !important;
    position: fixed !important;
    top: 0.5em !important;
    right: 0.5em !important;
}

body.inframe h1:before {
    display: none;
}

body>.right h1.allsearch:hover:after {
    color: black
}

body>.left {
    position: fixed;
    z-index: 2;








    float: left;
    top: 0;
    left: 0;
    width: var(--leftw);
    padding: 0 var(--gap);
    height: 100%;
    min-height: 100vh;
    overflow: visible;
    overflow-y: auto;
    background: url("../img/cat_tran.png") no-repeat center bottom;
    background-color: rgba(0, 0, 0, 0.04);
    background-size: 100% auto;
}

body>.left .logo {
    display: block;
    font-size: 2.5em;
    text-align: center;
    padding-top: 1em;
}

.menu {
    font-size: 1.8em;
    line-height: 2;
    text-align: center;
    padding: 0.5em 0;
}

.menu>a {
    display: block;
}

.menu.plus>a:nth-of-type(odd):before,
.menu.plus>a:nth-of-type(even):after {
    content: "\a0";
    line-height: 1;
    display: inline-block;
    width: .75em;
    border-bottom: 2px solid;
    padding: 0;
}

.submenu {
    position: relative;
    border-bottom: 1px solid;
    padding: 1.5em 0;
    clear: both;
    margin: 0 auto;
    text-align: center;
}

.submenu.copyright {
    border-bottom: none;
}

.submenu.copyright a {
    width: 100%;
}

.submenu#lcontrol {
    border: none;
    padding-top: 0;
    text-align: center;
}

#lcontrol label:first-child {
    margin-top: 2em !important;
}

.submenu a {
    display: inline-block;
    line-height: 1;
    margin: 0.5em 0;
    padding: 0 0.5em;
    text-align: center;
    min-width: 38%;
    width: auto;
    overflow: hidden;
}

.showleft,
#magic {
    width: 1.5em;
    height: 1em;
    line-height: 1;
    border-radius: 50%;
    position: fixed;
    z-index: 3;
    left: var(--leftw);
    bottom: 50%;
    margin-left: -0.75em;
    margin-bottom: -0.5em;
    font-size: 3.8em;
    text-align: center;
    background-size: cover;
    cursor: pointer;
    -webkit-touch-callout: none;
    transition-duration: 0s;
}

#magic {
    left: 1.25em;
}

body.bgmask .showleft,
body.bgmask #magic {
    background-color: transparent;
    text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}

.popmaskon .showleft {
    left: calc(var(--leftw) / 2);
}

.popside .showleft {
    left: var(--leftw);
}

.showleft:after,
#magic:after {
    content: "\e98b";
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    left: 0;
    zoom: 1;
}

#magic:after {
    content: "\ea24";
    color: var(--themecolor);
    text-shadow: 0 0 16px white, 0 0 1px white, 0 0 2px white, 0 0 4px white;
    opacity: 0.85;
}

#magic:hover:after {
    text-shadow: 0 0 32px gold, 0 0 2px gold, 0 0 4px gold, 0 0 8px gold;
}

body:not(.swipeLeft) .showleft {
    bottom: 50% !important;
}

body.swipeLeft .showleft:after {
    content: "\e64d";
}

body:not(.swipeLeft) .showleft:after {
    content: "\e98b" !important;
}

body>.right {
    position: relative;
    top: 0;
    left: var(--leftw);
    width: calc(100% - var(--leftw) - var(--rightsidew));
    min-height: 100vh;
    margin: 0;
    padding: 0 var(--gap);
    overflow-x: hidden;
}

body.channel>.right {
    width: calc(100% - var(--leftw));
    padding: 0 calc(var(--gap) / 2)
}

body.channel>.rightside {
    display: none;
}

body.swipeLeft>.left,
body.inframe>.left {
    left: -100vw;
    overflow: visible;
}

body.content.swipeLeft>.right,
body.inframe>.right,
body.inframe>.rightside,
body.swipeLeft>.rightside {
    position: relative;
    left: 0;
    width: 100% !important;
    min-height: auto;
    box-shadow: none !important;
    background: none;
}

body.content.swipeLeft #ftool,
body.inframe #ftool {
    right: 0;
}

body.channel.swipeLeft>.right {
    left: 0;
    width: 100%;
}

body>.right .sortbox {
    opacity: 1;
    width: 100%;
}

body.bgmask .echarts {
    opacity: 0.85;
}

.root .echarts {
    margin: 0 auto;
    min-height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.root.mvcat.swipeLeft>.right .sortbox,
body.root.mvcat:not(.swipeLeft)>.right .echarts,
body.root.mvcat:not(.swipeLeft)>.right .ad-inline,
body.root.mvcat:not(.swipeLeft)>.right .ads,

body.root.music.swipeLeft>.right,
body.root.music.swipeLeft>.rightside {
    display: none;
}

body.root.swipeLeft>.right .sortbox .list .poster.text {
    padding-bottom: 38%;
    -webkit-mask-image: none;
    box-shadow: none;
}

body.root.swipeLeft>.right .nav{
    
    max-width: 1200px;
    margin: 0 auto;
}

body.swipeLeft .popIframe {
    width: calc(100% - 4em);
}

body.swipeLeft .showleft {
    left: 0;
}

.selections .cate {
    width: 94%;
    margin: 1%;
    padding: 1% 2%;
    color: #ccc;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.65em;
    clear: both;
}

.list {
    position: relative;
    z-index: 0;
    float: left;
    width: calc(100% / 8);
    padding: .5em calc(var(--gap) / 2);
    transition-duration: 1s;
}

body.content:not(.swipeLeft) .list {
    width: calc(100% / 6);
}

.list.movie{
    transform: perspective(1000px) rotateX(15deg) rotateY(25deg);
}
.list.movie:hover{
    transition-duration: 1s;
    transform: perspective(1000px) rotateX(-15deg) rotateY(-25deg);
}
.list.movie .poster{
    box-shadow: -3px 2px;
}
.list.movie:hover .poster{
    box-shadow: 3px -2px, 0 0 0 1px;
}

body.root #right h2 {
    border: none;
    text-align: center;
    text-indent: 4px;
    width: 100%;
    margin: 1em 0;
}

body.root .sortbox .list{
    padding: calc(var(--gap) / 2);
}

@media screen and (max-width: 2560px) {
    .list {
        width: calc(100% / 6);
    }
    body.content:not(.swipeLeft) .list {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 1600px) {
    .list {
        width: calc(100% / 4);
    }
    body.content:not(.swipeLeft) .list {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 1440px) {
    body:not(.swipeLeft,.inframe) .list {
        width: calc(100% / 3);
    }
    body.content:not(.swipeLeft) .list {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 768px) {
    body,html{
        --gap: 1.25rem;
    }
    .list {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 600px) {
    .list {
        width: calc(100% / 2);
    }
    body:not(.swipeLeft) .list {
        width: calc(100% / 2);
    }
}

.list>a {
    float: left;
    width: 100%;
    border: none !important;
}

.music .list {
    margin: 0 !important;
    padding: 2em 2% !important;
    border: none !important;
}

.music .list:last-child {
    margin-bottom: 1em !important;
}

body.music.swipeLeft .columns .list {
    padding: 2em !important;
}

body.about .list {
    width: 16.6%;
}

body>.rightside h3 {
    margin: 2%;
    border: none;
}

.list.text {
    display: inline-block;
    float: none;
    width: auto!important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: .25em .5em;
    padding: 0;
    border-bottom: 1px dashed;
}

.list.text:hover{
    border-bottom: 1px solid;
}

a.list.text:before{
    content:"\e665";
}

.list.text .icon {
    margin-right: 0.5em;
    float: left;
}

.list.text .icon:before {
    content: "\e990";
}

.list.text .icon.link:before {
    content: "\e668";
}

.list.text .icon.music:before {
    content: "\e603";
}

.list.text .icon.history:before {
    content: "\e8a9";
}

.list.text .icon.faved:before {
    color: red;
    content: "\e77c";
}

.list.text .icon:hover:before {
    content: "\e990" !important;
}

.list.text .icon:not(.star):hover:before {
    content: "\e77c";
}

.list .title,
.list .summary {
    position: relative;
    margin: 0;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    border: none;
}

body.root.mvcat .list .title .mobile:after {
    content: " · ";
}

.list .title {
    padding: 0.5em 0 0.25em 0;
    font-size: 1em;
}

body.movie .list[class*=必看] .title {
    color: black !important;
}

.list[href*='//']:hover .title:before,
.list:hover .qBox a[href*='//'] .title:before {
    content: "\e668\00A0";

}

body.music.bgmask .list .title,
body.music.bgmask .list .summary {
    color: var(--themecolor);
    background: none;
    text-shadow: none;
}

.list .summary {
    font-size: 0.85em;
    height: 1.5em;
}

.list .title+.summary {
    padding-top: 0;
    opacity: 0.5;
}

body.swipeLeft .list .title+.summary span {
    display: inline;
}

.list .summary~.title {
    padding-bottom: 0;
}

.search .list .summary,
.about .list .summary {
    display: block;
}

.music .list .title {
    position: absolute;
    top: auto;
    left: 0;
    bottom: -1em;
    line-height: 2;
    text-align: center;
    margin: 0 !important;
    padding: 0 10% !important;
    color: var(--themecolor);
    background: none;
    text-shadow: none;
}

.music .list .summary {
    display: none !important;
}

.list:hover .summary {
    opacity: 1;
}

.poster {
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 0;
    width: 100%;
    padding-bottom: 62%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center 38%;
    background-image: url("../img/bg_spaceman_640.jpg");
    background-size: cover;
    box-shadow: 0 0 88px inset;
    border-radius: 14px 28px 14px 14px;
    transition-duration: 1.5s;
    filter: grayscale(0) contrast(1) brightness(100%);
}

.poster:hover:before {
    opacity: 0;
}

.poster:hover,
a:hover .poster,
.poster.playing,
.poster#mplay,
body.themecolor .poster {
    opacity: 1;
    border-radius: 14px;
    background-position: center top;
    filter: grayscale(0) contrast(1) brightness(100%) !important;
}

.poster:hover a {
    color: black;
}

.poster.cover:hover,
.poster.cover.playing {
    transition-duration: .5s!important;
    box-shadow: 0 0 0 inset,0 0 0 8px, 0 0 32px!important;
}

.poster.cover.playing {
    color: var(--themecolor)!important;
}

body.greatman #right .list .poster {
    padding-bottom: 100%;
    border-radius: 50%;
}

.poster.text {
    background-image: none;
    margin: 0 auto;
    padding-bottom: 38%;
    color: var(--txtcolor);
    background-color: var(--themecolor);
    box-shadow: none;
    border-bottom: 1px solid;
    border-radius: 14px 14px 0 0!important;
}

.poster.text+.title {
    font-size: 1em;
    color: var(--txtcolor);
    background: var(--themecolor);
}

body.root:not(.music) .list:hover .poster.text {
    background-image: url("../img/bg_wood_320.jpg");
}

.list.goods .poster:before {
    display: none;
}

.list.movie .poster {
    padding-bottom: 150% !important;
}

.poster video {
    position: absolute;
    top: 0;
    background: black;
    border: none;
    overflow: hidden;
}

body .list.logo .poster {
    background-size: auto 68%;
    background-position: center center;
}

body.guess>.right .poster {
    box-shadow: 0 0 5px #fff inset !important;
}

.content .poster#cover {
    width: 38% !important;
    padding-bottom: 38% !important;
}

body:not(.swipeLeft) .content .poster#cover {
    width: 62% !important;
    padding-bottom: 62% !important;
}

.poster[style*="loading"] {
    box-shadow: none;
}

.music .poster,
.poster.cover {
    width: 100%;
    padding-bottom: 100% !important;
    border-radius: 50% !important;
    background-position: center center;
    -webkit-mask-image: none;
    transition-duration: .5s;
}

.music .poster.cover {
    padding-bottom: 100% !important;
    margin: 0 auto;
}

.music .poster.cover:hover,
.music .poster.cover.playing {
    opacity: 1;
}

.word .poster {
    background-size: cover !important;
}

.icon.play:before {
    content: "\e87c\00A0";
}

.poster .play {
    position: absolute !important;
    left: 50%;
    bottom: 50%;
    margin-left: -1.5em;
    margin-bottom: -1.5em;
    width: 2.4em;
    height: 2.4em;
    box-shadow: 0 0 0 2px;
    line-height: 2.4em;
    vertical-align: middle;
    font-size: 1.5em;
    font-weight: bold;

    text-align: center;
    color: black;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
}

.poster .play:before {
    content: "\e662";
}

.poster .play.ticket:before {
    content: "\e723";
}

.poster .play.link:before {
    content: "\e668";
}

.list .poster:hover .play,
body.isMobile .poster .play {
    opacity: 0.65;
    box-shadow: 0 0 0 2px, 0 0 40px;
}

.list .poster .play:hover {
    opacity: 1;
}

.poster img,
#content .poster img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    margin: 0 !important;
}

.aplayer {
    margin-bottom: 1em;
    border: none !important;
    overflow: visible;
}

body.channel.swipeLeft #right{
    padding-bottom: 4em;
}

body.musicmask.play:not(.mvcat) .showleft,
body.musicmask.play:not(.mvcat) .sleepycat,
body.musicmask.play:not(.mvcat) #ftool,
body.musicmask.play:not(.mvcat) #category,
body.musicmask.play:not(.mvcat) #right,
body.musicmask.play:not(.mvcat) #rightside,
body.musicmask.play:not(.mvcat) .floatbtn,
body.musicmask.play:not(.mvcat) .chat-widget-container{
    display: none;
	pointer-events: none;
}

#mplay {
    color: white;
    font-size: 8em;
    margin-bottom: 1.5rem;
    background-image: none;
    background-color: black;
    box-shadow: none;
}

#mplay:hover{
    text-shadow: 0 0 1rem;
}
#mplay:hover:before,
#mplay:hover:after{
    opacity: 1!important;
}

body.swipeLeft #mplay,
body.inframe #mplay,
body.root.mvcat.swipeLeft #mplay {
    position: fixed;
    opacity: 1;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
    padding-bottom: 0 !important;
    left: calc(50% - .5em);
    bottom: 0;
    margin-bottom: -0.5em;
    filter: none!important;
    transition-duration: 0s;
    transform: rotate(-120deg);
}

body.swipeLeft.play #mplay,
body.inframe #mplay.playing{
    animation: rotate360 3s linear infinite;
    text-shadow: 0 0 1rem;
}

body.music.root.swipeLeft #mplay {
    display: block;
}

body.root.mvcat.swipeLeft #mplay:after {
    content: "\e6d4";
}

body.root.mvcat.swipeLeft #mplay:before,
body.root.music.swipeLeft #mplay:before {
    display: none;
}

body:not(.loading).root.music.swipeLeft.isDesktop:hover2 #mplay {
    opacity: 0.62;
    transition-duration: 1.5s;
}

body.root.music.swipeLeft.popmaskon #mplay {
    display: none !important;
}

body.swipeLeft #mplay.playing .acycle,
body.inframe #mplay.playing .acycle {
    display: none;
}

body.swipeLeft.bgmask #mplay:after {
    color: inherit;
}

body.swipeLeft #mplay.playing canvas {
    display: none;
}

.poster.cover,
body.pause .poster.cover {
    cursor: url("../img/play.cur"), pointer;
}

.poster.cover.playing {
    cursor: url("../img/pause.cur"), pointer;
}

.poster.cover:after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    text-align: center;
    font-size: 0.75em;
    padding: 0 0.5em;
    letter-spacing: 2px;
    background: white;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25);
}

.poster.cover.playing:after {
    content: '单曲';
}

body.单曲 .poster.cover.playing:after {
    content: '单曲';
}

body.随机 .poster.cover.playing:after {
    content: '随机';
}

body.pause .poster.cover.playing:after {
    content: '暂停';
}

#mplay:after {
    display: inline-block;
    content: "\e615";
    box-shadow: none;
    background: none;
    width: 1em;
    height: 1em;
    line-height: 1em;
    margin-left: -1em;
    margin-top: -0.5em;
    transition-duration: 0s;
    opacity: .5;
}

#mplay.playing:after{
    opacity: .85;
}

body.musicmask #mplay.playing:after{
    color: inherit;
}



.acycle {
    opacity: 0.85;
    overflow: hidden;
}

.toplist .poster.cover.playing .acycle,
.playlist .poster.cover.playing .acycle,
body>.rightside .poster.cover.playing .acycle {
    display: none;
}

.toplist .poster.cover:after,
.playlist .poster.cover:after {
    content: " " !important;
}

.url .list img {
    display: block !important;
    margin: 0 auto;
    padding: 5px 15px;
    height: 38px;
    width: 62%;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 25px;
}

.music .list img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.list.tags {
    color: rgba(0, 0, 0, 0.04);
    float: none;
    width: auto;
    height: auto;
    line-height: 1.8;
    white-space: normal;
}

.list.more {
    background: none !important;
}

.list.more .poster {
    position: relative;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

.list.more .poster:before {
    display: none;
}

.list.more .poster:after,
.list .poster.text>* {
    content: "\e9a0";
    position: absolute;
    width: 100%;
    font-size: 3em;
    letter-spacing: 0.25em;
    top: 50%;
    line-height: 1;
    margin-top: -0.5em;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.list.more:hover .poster:after,
.list:hover .poster.text>* {
    font-size: 4em;
    opacity: 1;
    transition-duration: 0.3s;
}

.list .poster.text>* {
    display: block;
    padding: 0 1em;
    font-size: 1.8em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list:hover .poster.text>* {
    font-size: 2.0em;
    transition-duration: 0.5s;
    text-shadow: 0 1px 1px black;
    opacity: 0.62;
    animation: rotateY 4s linear infinite;
    padding: 0;
    overflow: visible;
}

.list.more img {
    box-shadow: none;
    background-color: transparent;
}

.list.more h3 {
    border: none !important;
}

body.content>.right {
    word-wrap: break-word;
}

body.music.swipeLeft #right .social-share {
    font-size: 1.2em;
}

#content p {
    clear: left;
    margin: 1em 0;
}

#content li p {
    margin: 0.25em 0;
}

#content .list.img {
    float: none;
    width: 38%;
    max-width: 500px;
    margin: 0;
    padding: 0 1em 0em 0;
}

#content figure {
    margin: 0;
    padding: 0;
}

#content figure .list.img {
    padding-top: 0;
}

.music #content {
    text-transform: capitalize;
}

body.music.song #content * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.wiki #content p,
body.music.prose #content p {
    margin: 1em auto;
}

body.music.prose #content p {
    text-indent: 2em;
}

body.music.prose #content blockquote p {
    margin: 0;
    text-indent: 0;
}

/*音乐首页插件模式*/
body.music.inframe #ftool {
    display: none !important;
}

/*音乐首页插件模式*/
.slyric {
    position: fixed;
    width: 100%;
    padding: 0 1em;
    text-align: center;
    z-index: 0;
    left: 0;
    bottom: 50%;
    transform: translate(0, 50%);
    font-size: 3.8vw;
    line-height: 1.5;
    font-style: italic;
    font-weight: lighter !important;
    letter-spacing: 4px;
    word-spacing: 4px;
    opacity: 0.62;
	font-family: '仓耳非白W01', sans-serif;
    text-shadow: 0.01em 0.01em #000;
    transition-duration: 1s;
    filter: blur(0.62px);
}

@media screen and (max-width: 768px) {
    .slyric {
        font-size: 1.8em;
        filter: blur(0.38px);
    }
}

body.pause .slyric {
    opacity: 0;
}

.slyric:hover {
    opacity: 1;
}

body.root.mvcat .slyric {
    display: none;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    margin: 1em auto !important;
    padding: 0 !important;
    border: none;
    text-overflow: ellipsis;
}

#content h2 em,
#content h3 em,
#content h4 em,
#content h5 em,
#content h6 em {
    font-style: normal;
}

body>.rightside>h3 {
    margin: 1em 2% 0.5em 2%;
}

#content em {
    font-style: normal;
}

#author {
    text-align: center;
    margin-top: 1.5em;
    padding: 0.75em 0;
    border-top: 1px dashed;
    border-bottom: 2px solid;
    font-size: 0.75em;
}

body.content>.right table {
    max-width: 100%;
    table-layout: auto;
    border-spacing: 0;
    word-break: break-all;
    border-collapse: collapse;
}

body.content>.right table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.04);
}

body.content>.right table td:nth-child(even) {
    background: rgba(0, 0, 0, 0.04);
}

body.content>.right table td,
body.content>.right table th {
    font-size: 0.75em;
    padding: 0.25em 0.5em;
    border: 1px solid;
}

.content.music h1,
.content.music #summary,
.content.music .author,
.content.music #author {
    text-align: center;
}

.content.music.song #content2 {
    max-height: 8em;
    overflow: scroll;
}


.content.music.song #content,
.content.music.poem #content {
    text-align: center;
    line-height: 2;
    font-size: 1.2em;
}

.content.music.song #content {


    max-height: 6em;
    overflow: auto;
}

.content.music.poem #content {
    line-height: 3;
}

.functions {
    margin: 1em auto;
    border-collapse: collapse;
    box-shadow: 0 0 0 1px inset;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
}

.functions #function {
    width: 100%;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.04);
}

.functions #info {
    display: flex;
    font-size: 0.75em;
    padding: 8px;
    width: 100%;
    border: 1px solid;
    border-radius: 12px;
}

.functions #info .infos {
    max-height: 15em;
    overflow: auto;
}

.functions #info .infos a {
    border-bottom: 1px solid;
}

.functions #info .infos div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.functions #info .infos:hover div {
    white-space: normal;
}

#info strong,
#doubansummary strong,
#doubancomment strong {
    cursor: pointer;
}

#info strong:before,
#doubansummary strong:before,
.icon.copy:before {
    content: "\e630";
    padding-right: 2px;
}

.functions .function {
    flex-grow: 1;
    position: relative;
    white-space: nowrap;
    margin: 0;
    padding: 8px;
    font-size: 0.75em;
    text-align: center;
    border: none !important;
    border-right: 1px dashed rgba(0, 0, 0, 0.04) !important;
}

.functions .function:last-child {
    border-right: none !important;
}

.functions .poster:first-child {
    min-width: 12em;
    max-width: 12em;
    height: 100%;
    padding: 0;
    margin-right: 8px;
}

.functions .function a {
    display: block;
}

.functions .function span.icon {
    font-size: 2.4em;
}

.functions .function span.icon {
    display: inline-block;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.functions .function:hover span.icon {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
    transition-duration: 1.5s;
}

#content .link:after {
    content: "\e639";
    margin: 0 0.25em;
}

body.books #content .link:after {
    content: "\e870";
}

#content .play:before {
    content: "\e87c";
    margin-right: 0.25em;
}

#content a:not(.list) {
    border-bottom: 1px dashed;
}

#content a:not(.list):hover {
    border-bottom: 1px solid;
}

#content .play {
    border: none !important;
}

body.isDesktop #content a.hide {
    background: gray;
    color: transparent !important;
    transition-duration: 0.8s;
    border-radius: 15px;
}

body.isDesktop #content a.hide:hover {
    background: none;
    font-weight: bold !important;
    border-radius: 0;
}

#content h2 a,
#content h3 a {
    overflow: hidden;
    display: inline;
}

#content img {
    height: auto !important;
    margin: 0.5em 0 !important;
}

.media,
video,
object,
embed,
.vplayer {
    width: 100% !important;
    height: 62vh;
    max-height: 62vw;
    min-height: 375px;
    border: none;
    overflow: hidden;
    color: var(--txtcolor);
    background: var(--themecolor);
    border: 1px solid var(--themecolor);
    transition-duration: 0s !important;
    border-radius: 12px;
}

.media .media {
    border: none;
}

#popIframe .media,
#popIframe video,
#popIframe object,
#popIframe embed,
#popIframe .vplayer {
    height: 100% !important;
    max-height: none;
    min-height: 0;
}

body.channel div.media {
    width: calc(100% - var(--gap)) !important;
    margin: 0 1rem;
}

.media+.media {
    margin-top: 1em;
}

.media.fullscreen {
    position: fixed !important;
    z-index: 999;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    width: 100% !important;

    height: 100% !important;
    max-height: none;
}

iframe[src*="music.163.com/outchain/player?type=2"] {
    width: 100% !important;
    height: 86px !important;
}

iframe[src*="music.163.com/outchain/player?type=0"],

iframe[src*="music.163.com/outchain/player?type=1"] {
    width: 100% !important;
    height: 450px !important;
}

#right #copyright{
    text-align: center;
    font-size: 12px;
    padding: 3rem 0;
    line-height: 1;
}

body.content #right #copyright{
    border-bottom: 4px solid;
}


#content .copyright {
    text-transform: none;
    font-size: 0.75em;
    text-align: center;
    margin: 1em auto;
    border: none;
}

.autosort .sort,
.autosort .sorts a {
    font-size: 0.85em;
    margin-left: 8px;
    display: inline-block;

}

.autosort .sort.current,
.autosort .sorts a.current {
    /* border-bottom: 1px solid; */
}

body>.right .box {
    position: relative;
    min-height: 68vh;
    margin: 2%;

    margin-top: 4%;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

body>.right .box * {
    color: white;
}

body>.right .box #mguess {
    position: fixed;
    z-index: 1;
    top: 50%;
    margin-top: -0.75em;
    left: 0;
    right: 0;
}

body.content>.right .box #mguess {
    position: fixed;
    top: 50%;
}

body.swipeLeft>.right .box #mguess {
    left: 0;
    width: 100%;
}

body>.right .box input[type=text] {
    text-align: center;
    color: white;
}

body>.right .box input[type=button] {
    color: white;
    font-size: 1.4em;
    vertical-align: middle;
}

body>.right .box .gimage {
    display: none;
    width: 100% !important;
    border-radius: 3.8vw;
    box-shadow: 0 0 5px #fff;
    background-size: cover;
}

body>.right .box #gmusic {
    font-size: 2.4em;
    width: 2.4em;
    height: 2.4em;
    line-height: 2.4em;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.5em;
    margin-top: -1.5em;
    text-shadow: 0 0 15px #fff;
    box-shadow: none !important;
}

body>.right .box .boxpage {
    width: 80%;
    left: 20%;
    top: 50%;
    margin-top: -1.2em;
    padding: 0 3%;
    border: 0;
    height: 0;
    overflow: visible;
    position: fixed;
    z-index: 1;
    font-size: 2.4em;
    line-height: 2.4em;
}

body.swipeLeft>.right .box .boxpage {
    width: 100%;
    left: 0;
}

body>.right .refresh {
    width: 100%;
    text-align: center;
    float: left;
    font-size: 2em;
    cursor: pointer;
}

body.imovie .comment_box {
    display: none;
}

.related {
    margin: 0 calc(var(--gap) / -2);
}

.related h2 {
    margin-top: 1.65em;
    border: none;
    text-align: center;
}

.music .related h2 {
    text-align: center;
}

body>.rightside {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--rightsidew);
    padding: 0 calc(var(--gap) * 1);
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.04);
}

body.music>.rightside {
    padding-bottom: 2%;
}

body>.rightside li {
    list-style: none;
    line-height: 1.5em;
    word-break: break-all;

    height: 1.5em;
    overflow: hidden;
}

body>.rightsearch {
    margin: 2em 1% 0 1%;
    position: relative;
    overflow: hidden;
}

body>.rightsearch #searchword {
    width: 96%;
    background: #fff;
}

body>.rightsearch #submit {
    font-size: 2em;
    position: absolute;
    top: 0;
    right: 0;
}

body>.rightside .tags {
    margin: 1em 0;
}

body.content>.left:hover,
body.content>.rightside:hover {
    opacity: 1 !important;
}

body .comment_box {
    padding: 0 !important;
}

body .comment_box .comment_title {
    display: none;
}

body .comment_box .comment_textarea {
    margin-top: 1em;
    margin-bottom: 0;
}

body .comment_box .comment_avator {
    float: right;
    padding: 0;

    width: auto;
    white-space: nowrap;
    line-height: 2;

}

.comment_box .user_content .text p {
    font-size: 1em !important;
}

body .comment_box .submit_box span {
    font-size: 0.75em;
}

body .comment_box .comment_btn {
    float: left;
    width: auto !important;
    background: none !important;
    font-size: 1em;
    padding: 0;
    line-height: 2;
}

body .comment_box .comment_btn:before {
    content: "〉"

}

body .comment_box .comment_btn:after {
    content: "〈"
}

body .comment_box .user_content .name,
body .comment_box .user_content .zan_box a {
    font-size: 0.75em;

    opacity: 0.5;
}



body .comment_box .user_content .zan_box .fa-thumbs-down,
body .comment_box .user_content .zan_box .fa-reply {
    width: auto;
    height: auto;
    display: inline-block;
    background: none;
    vertical-align: baseline;
}

body .comment_box .user_content .zan_box .fa-reply:before {
    content: "回复"
}

body .comment_box .user_content .zan_box .fa-thumbs-down:before {

    content: "赞"

}

body .comment_box .submit_box {
    margin-bottom: 1em;
    border-bottom: none;
    padding: 0;
}

body .comment_box img.avator_img {
    float: right;
    width: 1.5em;
    height: 1.5em;
    margin: 0.25em 0 0 0.25em;
}

body .comment_box .ly_item {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 16px;
    border-bottom: none;
    border-top: 1px solid;
}

body .comment_box .ly_item .text p span {
    display: block;
    color: var(--themecolor) !important;
    font-size: 0.75em;
    margin-bottom: 0.5em;
    opacity: 0.38;
}

body .comment_box .ly_item .wonderful {
    top: 0;
    display: none;
}

#frmComment textarea {
    width: 100%;
    height: 80px;
    margin: 10px 0;
}

#commentSuccess,
#commentFailure {
    display: none;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
}

#commentFailure {
    color: #f00;
}

.comments ul {
    margin: 0;
    padding: 0;
}

.comment {
    font-size: 0.85em;
    border-bottom: 1px dashed #000;
    padding: 5px 0;
    margin: 5px 0;
    overflow: hidden;
}

.comment:hover {
    font-weight: bold;
    border-bottom: 1px solid #000;
}

.comment .digg {
    float: right;
    font-size: 10px;
}

.comment blockquote {
    color: #999;
    font-size: 0.75em;
}

.pages {
    display: block;
    text-align: center;
    border: none;
    width: calc(100% - var(--gap));
    margin: 3em calc(var(--gap) / 2);
    padding: 1em;
    float: none;
    color: var(--txtcolor);
    background: var(--themecolor);
    border-radius: 14px;
    overflow: hidden;
    float: left;
}

.pages a,
.pages span {
    margin: 0 .25em;
}

.pages a {
    color: var(--txtcolor);
    border-bottom: 1px solid;
}

.sorter {
    font-size: 0.62em;
    white-space: normal;
}

.sorter.vol {
    font-size: 0.75em;
    letter-spacing: normal;
}

.sorter#vcate {
    margin: 1% 2%;
    font-size: 0.75em;
}

.sorter#vcate .vcates {
    float: left;
    margin-right: 1%;
}

.sorter#vcate a,
.sorter#vcate form {
    display: inline-block;
    vertical-align: middle;
    padding: 0 8px 0 0;
    font-size: 1em;
}

body.bgmask .sorter a.current,

body.bgmask .sorter a:hover {
    text-decoration: underline;
}

body .tags {
    margin-top: 0.5em;
    display: flex;
    gap: 0.25em;
    flex-wrap: wrap;
}

.tags .tag {
    padding: 0em .4em 0em .75em;
    font-size: 0.85rem;
    line-height: 2em;
    height: 2em;
    white-space: nowrap;
    border-radius: 1em;
    background: var(--themecolor);
    color: var(--txtcolor);
    flex-grow: 1;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tags .tag:hover {
    filter: brightness(1.2)
}

.tags .tag:after {
    content: "\e9a0";
}

.tags .tag[href*='douban.com'] {
    color: white;
    background: green;
}

.tags .tag[href*='metacritic'] {
    color: white;
    background: limegreen;
}

.tags .tag[href*='imdb.com'] {
    color: white;
    background: goldenrod;
}


.tags .tag[href*='rottentomatoes.com'] {
    color: white;
    background: tomato;
}

.insearch {
    position: relative;
}

body>.right>.insearch {
    display: none;
}


.insearch:after {
    content: "\e870";
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1.5em;
    line-height: 1;
}

body>.rightside .insearch {
    width: 100%;
    margin: 2.4em 0 0 0;
}

#content .insearch {
    display: block !important;
    border-left: 4px solid !important;
    padding: 0.35em;
    clear: both;
    width: 100%;
    line-height: 1.2;
}

#content .insearch:after {
    content: "\a0 搜索资源 \e870";
    padding: 0.2em;
    font-size: 0.75em;
    border-radius: 2em;
    backdrop-filter: blur(2px);
    background: var(--txtcolor);
}

body.books #content .insearch:after {
    content: "\e870";
    font-size: 1.2em;
    z-index: -1;
}

.insearch input,
.insearch select {
    line-height: 1.5;

}

.insearch #searchword {
    width: 100%;
    text-overflow: ellipsis;
    font-family: inherit;

}

body>.left .insearch #searchword {
    border-bottom: 1px solid;

    text-align: center;
}

.insearch form {

    position: relative;
    display: block;
    width: 100%;
}

.insearch #submit,
.insearch button {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 2em;
    bottom: 0;
    padding: 0;
    text-indent: -9999px;
}

#mobilesearch:focus {
    text-align: center !important;
    font-size: 16px !important;
}

#searchscope label input {
    display: none;
}

#searchscope label span:before {
    content: "";
    display: inline-block;
    width: .75em;
    height: .75em;
    margin-right: 0.25em;
    border: 1px solid;
    border-radius: 50%;
}

#searchscope label input:checked~span {
    font-weight: bold;
}

#searchscope label input:checked~span:before {
    background-color: var(--txtcolor);
}

.right .insearch .help {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 100%;
    padding: 0 1em;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    font-size: 0.75em;
    box-shadow: 0 0 0 500px inset;
    border-radius: 0 0 12px 12px;
}

.right .insearch .help * {
    color: var(--txtcolor);
}

.right .insearch .help a,.right .insearch .help label {
    display: inline-block;
    padding-right: .5em;
    cursor: pointer;
}

.right .insearch form:hover .help {
    display: block !important;
    z-index: 5;
    opacity: 0.95 !important;
}

.playlist .mplayer,
.toplist .mplayer {
    background-image: none !important;
}

@keyframes colorflow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.colorflow {
    background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    animation: colorflow 5s infinite linear;
    }

.musicmask .colorflow {
    -webkit-text-fill-color: var(--themecolor);
}

.colorflow:hover {
    text-shadow: none !important;
}

@keyframes breath {
    0% {

        opacity: 1;

    }
    40% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.breath {
    animation: breath 5s linear infinite;
    /*IE10 FF Opera*/
    }

@keyframes shine {
    0% {
        opacity: 0.62;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.62;
    }
}

.shine {
    animation: shine 8s linear infinite;
    /*IE10 FF Opera*/
    }

body:not(.play) .shine,
body.music.word .shine,
body.music.today .shine {
    animation: none;


}

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.rotate360 {
    animation: rotate360 16s linear infinite;
    /*IE10 FF Opera*/
    }

body.pause .rotate360 {
    animation: none;
}

.sorrow .rotate360 {
    animation: rotate360 32s linear infinite;
}


.happy .rotate360,

.anger .rotate360 {
    animation: rotate360 8s linear infinite;
}

@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }
    45% {
        transform: rotateY(45deg);
    }
    55% {
        transform: rotateY(315deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.rotateY {
    animation: rotateY 4s linear infinite;
}

.rotateY:hover {
    animation: none;
}

@keyframes rotateX {
    0% {
        transform: rotateX(0deg);
    }
    45% {
        transform: rotateX(30deg);
    }
    55% {

        transform: rotateX(330deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

.rotateX {
    animation: rotateX 4s linear infinite;
}

.rotateX:hover {
    animation: none;
}


@keyframes jumps {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translateY(8px) scaleX(1.2) scaleY(.8)
    }
    30% {
        transform: translateY(-5px) scaleX(1) scaleY(1) rotate(5deg)
    }
    50% {
        transform: translateY(3px) scale(1) rotate(0)
    }
    55% {
        transform: translateY(0) scaleX(1.1) scaleY(.9) rotate(0)
    }
    70% {
        transform: translateY(-5px) scaleX(1) scaleY(1) rotate(-2deg)

    }
    80% {
        transform: translateY(0) scaleX(1) scaleY(1) rotate(0)
    }
    85% {
        transform: translateY(0) scaleX(1.05) scaleY(.95) rotate(0)
    }

    to {
        transform: translateY(0) scaleX(1) scaleY(1)
    }
}

.jumps:hover {
    animation: jumps 1.2s ease 1;
}

.jumps.active {
    animation: jumps 1.2s ease infinite;
}

.clear {
    display: flow-root;
}

.center {
    text-align: center;
}

.block {
    display: block;
    overflow: hidden;
}

.inline {
    display: inline;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme {
    color: var(--themecolor);
}

.grayscale {
    filter: sepia(0) grayscale(1) contrast(1.2) brightness(100%);
    transition-duration: 1.5s !important;
}

.grayscale:hover,
.bgmask .grayscale,
.themecolor .grayscale,
.isMobile .grayscale {
    filter: sepia(0) grayscale(0) contrast(1) brightness(110%);
}

.rotate3D {
    transform: perspective(1000px) rotateX(20deg) rotateY(-30deg) rotateZ(15deg) translateX(-20px);
    box-shadow: 3px 3px, 5px 10px 15px gray;
    transition-duration: 1s !important;

}

.rotate3D:hover,
.rotate3D.hover {
    box-shadow: -3px -1px, -5px 10px 15px gray;
    transform: perspective(1000px) rotateX(-15deg) rotateY(30deg) rotateZ(3deg) translateX(20px);
}

.heart:before {
    content: "\e797";
}

.heart.faved:before {
    color: red;
    content: "\e77c";
}

.white {
    color: white;
}

.black {
    color: #333;
}

.bgblack {
    background-color: #333;
}

.red,
.red:before,
.red:after {
    color: red !important;
}

.green,
.green:before,
.green:after {
    color: green !important;
}

.blue,
.blue:before,
.blue:after {
    color: blue !important;
}

.colorbg * {
    color: #fff;
}


.colorbg>*:nth-child(7n+1) {
    background: red;
}

.colorbg>*:nth-child(7n+2) {
    background: orange;
}

.colorbg>*:nth-child(7n+3) {
    background: yellowgreen;
}

.colorbg>*:nth-child(7n+4) {
    background: green;
}

.colorbg>*:nth-child(7n+5) {
    background: darkcyan;
}

.colorbg>*:nth-child(7n+6) {
    background: blue;
}

.colorbg>*:nth-child(7n+7) {
    background: purple;
}

.colortxt>*:nth-child(7n+1) {
    color: red;
}

.colortxt>*:nth-child(7n+2) {
    color: darkorange;
}

.colortxt>*:nth-child(7n+3) {
    color: limegreen;
}

.colortxt>*:nth-child(7n+4) {
    color: darkcyan;
}

.colortxt>*:nth-child(7n+5) {
    color: deepskyblue;
}

.colortxt>*:nth-child(7n+6) {
    color: purple;
}



.colortxt>*:nth-child(7n+7) {
    color: brown;
}

body.themecolor .colortxt>*,
body.musicmask .colortxt>* {
    color: var(--themecolor);
}

.shape-magic {
    width: 2.4em;
    height: 2.4em;
    line-height: 2.4em;
    position: fixed;
}

.shape-magic:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 32px;
    top: 16px;
    width: 0;
    height: 36px;
    border-left: 1px solid;
    border-radius: 5px;
    box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.15);
    background: transparent;
    transform: rotate(-45deg);
}

.shape-magic:after {
    content: "✮";
    font-size: 2.4em;
    width: 2.4em;
    height: 2.4em;

    line-height: 2.4em;
    position: absolute;
    left: -6px;
    top: -9px;
    box-shadow: 0 0 0 1px;
    transform: rotate(22.5deg);

}

.shape-heart {
    position: relative;
    width: 1.5em;
    height: 1.5em;
    margin: 12px;
    margin-top: 18px;
    border-radius: 1px;
    transform: rotate(45deg);
    color: black;
    cursor: pointer;
    text-indent: -999px;
}

.shape-heart:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0px;
    left: -50%;
}

.shape-heart:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: 0px;
    top: -50%;
}

.shape-heart,
.shape-heart:before,
.shape-heart:after {
    box-shadow: 0 0 0 48px inset;
}

.shape-heart.red,
.shape-heart.red:before,
.shape-heart.red:after {
    box-shadow: 0 0 0 48px red inset;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.line-through {
    text-decoration: line-through !important;
}

.scrollLock {
    overflow: hidden !important;
}

.none {
    display: none;
}

.pointer {
    cursor: pointer;
}

#stars {
    transition-duration: 1s;
}

#ftool {
    position: fixed;
    z-index: 1;
    top: 50%;
    right: var(--rightsidew);
    transform: translateY(-50%);
}

#ftool:hover {
    opacity: 1;
    transition-duration: 0.3s;
}

body.channel #ftool a.qr {
    display: block;
}

#ftool a {
    display: block;
    float: right;
    clear: both;
    position: relative;
    font-size: 1.2em;
    letter-spacing: 2px;
    line-height: 1.5em;
    width: 3em;
    height: 3em;
    margin: 6px 0;
    margin-right: -0.5em;
    text-align: center;
    transition-duration: 0.1s;
}

#ftool a:hover {
    margin-right: 0;
}

#ftool a:hover:after {
    left: 1em !important;
}

#ftool a img {
    width: 100%;
}

.music #ftool a,
body.channel #ftool a.qr,
body.root.mvcat #ftool a {
    display: none;
}

body.root.mvcat #ftool a.ffavorite,
.music #ftool a.ffullscreen,
.music #ftool a.ffavorite,
.music #ftool a.fdaily {
    display: block;
}

body.root .ffavorite,
body.tags .ffavorite {
    display: none;
}

#ftool .icon {
    width: 1em;
    height: auto;
    line-height: 1em;
    font-size: 3em;
    text-align: center;
}

#ftool .icon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

#ftool .icon.totop:before {
    content: "\e9c9";
}

#ftool .icon.tobot:before {
    content: "\e99d";
}

#ftool .icon.tocomments:before {
    content: "\e60b";
}

#ftool .icon.tocategory:before {
    display: block;
    content: "\e66c";
    transform: rotateZ(45deg);
}

#ftool .qr:before {
    content: "\e631";
}

#ftool .home:before {
    content: "\e650";
}

body.channel #ftool {
    left: auto;
    right: 0;
}

.channel #ftool a {
    float: right;
}

body.root.swipeLeft .right .insearch {
    display: block;
    width: 25%;
    min-width: 20em;
    margin: 0 auto;
}

body.root .right .insearch:before {
    content: "\e001";
    display: block;
    width: 100%;
    text-align: center;
    font-size: 8em;

    line-height: 1.2;

    padding-top: 2rem;
    transform: perspective(200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

body.root.swipeLeft .right .insearch:hover:before {
    transform: perspective(200px) rotateX(-60deg) rotateY(720deg) rotateZ(0deg);
    transition-duration: 2.5s;
}

body.root.swipeLeft .right .insearch:after,
body.root.swipeLeft .right .insearch #submit {
    font-size: 1.8em;
}

body.root.swipeLeft .right .insearch #searchword {
    line-height: 1.8;
    border-bottom: 2px solid;
    text-align: center;
    padding: 0 2.2em;
}

body.root.swipeLeft.music .insearch {
    display: none;
    position: fixed;
    width: auto;
    left: 2.4em;
    top: 50%;
    margin-top: -12px;
}

#favorite {
    position: fixed;
    z-index: 2;
    top: 0;
    right: -100%;
    width: var(--rightsidew);
    height: 100% !important;
    overflow: auto;
    padding: 0 1.5em 1.5em;
    background: var(--txtcolor);
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

#favorite.show {
    transition-duration: 0.25s !important;
    right: 0;
}

#favorite .list {
    display: block;
    margin: .25em 0 !important;
}

#favorite a.list:before {
    content: "";
    display: inline-block;
    font-size: 12px;
    opacity: 0.5;
    vertical-align: super;
    line-height: 1;
    padding-right: 0;
}

#favorite a[href$="/"]:before,
#favorite a[href*="/?"]:before,
#favorite a[href*="/#"]:before {
    content: "栏目"
}

#favorite a[href*=".html"]:before {
    content: "文章"
}

#favorite a[href*="/movie/"]:before {
    content: "佳片"
}

#favorite a[href*="/movies/"]:before {
    content: "影辑"
}

#favorite a[href*="/cut/"]:before {
    content: "混剪"
}

#favorite a[href*="/short/"]:before {
    content: "短片"
}

#favorite a[href*="/douban/"]:before {
    content: "电影"
}

#favorite a[href*="/search"]:before {
    content: "搜索"
}

#favorite a[href*="/music"]:before {
    content: "音乐"
}

#favorite h2 span {
    float: right !important;
    margin: 0;
    margin-left: 0.5em;
    cursor: pointer;
}

#favorite .close:before {
    content: "\e990";
    color: red;
}

#favorite.show .close:after {
    content: " ";
    position: fixed;
    z-index: -1;
    top: 0;
    right: var(--rightsidew);
    margin-right: 48px;
    width: 100%;
    height: 100%;
}

.bgmask #favorite {
    background: rgba(0, 0, 0, 0.88);
}

#share {
    color: black;
    border-bottom: 1px solid;
    background: rgba(0, 0, 0, 0.04);
    padding: 8px 16px;
    margin: 0;
}

#share a {
    color: black;
}

body.imovie .left,
body.imovie .showleft,
body.imovie #share,
body.imovie #ftool {
    display: none;
}

#digg {
    display: none;
    width: 410px;
    margin: 20px auto;
    overflow: hidden;
}

.hm-t-go-top {
    background-color: #333 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999;
}

.content .hm-t-go-top {
    left: 80% !important;
}

.bdcs-container .bdcs-search,
.bdcs-container .bdcs-search-form-input {
    border-radius: 0 !important;
}

.bdsharebuttonbox {
    text-align: center;
}

.bdsharebuttonbox a {
    font-size: 0.85em !important;
    margin: 0 !important;
    float: none !important;
    background: none !important;



    padding: 0 10px !important;
}

#selectsearch-icon img {
    border-radius: 30px;
    border: 3px solid #ff4500 !important;
    box-shadow: 0px 0px 10px #000;
}

/* columns */

@media (min-width: 411px) {
    body.swipeLeft .columns {
        column-count: 2;
        column-gap: 0;
        counter-reset: item-counter;
    }
    body.swipeLeft .columns .list {
        break-inside: avoid;
        width: 100%;
        margin: 0;
        padding: 4%;
        transition-duration: 0s;
    }
    body.swipeLeft .columns .list .poster:hover {
        background-size: cover;
    }
    body.swipeLeft .columns .list .title {
        border-top: none;
    }
    body.swipeLeft .columns .list .summary {
        display: block;
        white-space: normal;
    }
    body.swipeLeft .columns .list:before,
    body.swipeLeft .columns .list:after {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .mobile {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .desktop {
        display: none !important;
    }
}

body:not(.isWechat) .wechat,
body.isWechat .nowechat,

body.inframe .noframe,
body.inframe #translate,
body.isHtml5Plus .app {
    display: none !important;
}

@media (min-width: 769px) {
    body.swipeLeft .columns {
        margin: 10px calc(2% - 10px);
        column-count: 3;

    }
    body.root.mvcat:not(.swipeLeft)>.right .columns {
        display: none !important;
    }
    body.root.mvcat.swipeLeft>.right .columns {

        display: block;
        width: calc(50% + 20px);
        height: auto;
        margin: 10px auto;
        column-count: 2;
        min-height: -webkit-fill-available;
        min-height: -moz--fill-available;
        min-height: fill-available;
        overflow: hidden;
    }
}

@media (min-width: 991px) {
    body.swipeLeft .columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    body.swipeLeft .columns {
        column-count: 5;
    }
}

@media (min-width: 1440px) {
    body.swipeLeft .columns {
        column-count: 6;
    }
}

@media (min-width: 1920px) {
    body.swipeLeft .columns {
        column-count: 7;
    }
}

@media (min-width: 2560px) {
    body.swipeLeft .columns {
        column-count: 8;
    }
}

/* columns end */
/* Infinite Scroll loader */
#infscr-loading,

.jstip {
    position: fixed;
    width: fit-content;
    z-index: 9999;
    margin: 0 auto;
    padding: 0.5em 1em;
    bottom: 50%;
    transform: translate(0, 50%);
    left: 0;
    right: 0;
    text-align: center;
    color: var(--txtcolor);
    background: var(--themecolor);
    border-style: solid;
    border-width: 0 2px 0 2px;
    font-size: 15px;
}

.jstip * {
    color: var(--txtcolor);
}

.jstip.failure,
.jstip.failure * {
    color: white;
    background: red;
}

.jstip.success,
.jstip.success * {
    color: white;
    background: limegreen;
}

.jstip.warning {
    width: 100%;
    height: 100%;
    color: yellow;
    background-color: red;
    opacity: 0.95;
    padding-top: 40vh;
}

.jstip.warning:before {
    content: "\e8a5";
    display: block;
    font-size: 4em;
}

.jstip.top {
    top: 0;
    bottom: auto;
    border-radius: 0 0 1em 1em;
    transform: none;
}

.jstip.bottom {
    bottom: 0;
    border-radius: 1em 1em 0 0;
    transform: none;
}

#infscr-loading * {
    color: #fff !important;
}

.content #infscr-loading {
    right: var(--rightsidew);
}

#infscr-loading img {
    display: none;
}

#qlink{
    clear: both;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 calc(var(--gap) / -2);
}
body.channel #qlink{
    margin: 0 calc(var(--gap) / 4);
}
@media screen and (max-width: 1920px) {
    #qlink{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 768px) {
    #qlink{
        grid-template-columns: 1fr;
    }
}

.qBox {
    margin: .5em calc(var(--gap) / 2);
    border: 1px solid;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

body.channel .qBox {
    margin: 1em 2%;
}

h1+#qlink .qBox {
    margin-top: 0;
}

.qBox legend {
    line-height: 1;
}

.qBox legend .keyword {
    display: inline-block;
    max-width: 50vw-webkit-fill-available;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}



.qBox.qSearch,
.qBox.qSearch legend {
    background: var(--txtcolor);
    border: 1px dashed;
}

.qBox.qSearch {
    opacity: 0.95;
}

.qBox a {
    flex-grow: 1;
    align-self: center;
    display: inline-block;
    float: left;
    width: auto;
    min-width: 6em;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.9em;
    height: 2em;
    padding: 0 0.6em;

    margin: 0.25em;
    max-width: calc(100% - 0.5em);
    font-size: 0.85em;
    border: 1px dashed;
    border-radius: 1em;
    opacity: 1;
    word-break: break-all;
    color: var(--txtcolor);
    border-color: var(--themecolor);
    background-color: var(--themecolor);
}

.qBox a:hover,
.qBox a.hover {
    color: var(--txtcolor);
    border-color: var(--themecolor);
    background-color: var(--themecolor);
}

.qBox a.watch:before {
    content: "\e601"

}

.qBox a.download:before {
    content: "\e8f1"
}

.qBox #closeqBox {
    font-size: 12px;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: 2.5em;
    right: 2.5em;
    z-index: 999;
    cursor: pointer;
}

.qBox #closeqBox:after {
    content: "\e990";
    color: red;
}

.popmask {
    position: fixed;
    z-index: 9;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: white;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

.inframe .popIframe {
    width: calc(100% - 4em);
}


.popmask.moviedaily,
.popmask.musicdaily {
    width: 50%;
}

.dailycontent {
    width: calc(100% - var(--gap));
    padding: 1rem;
    overflow: hidden;
    position: absolute;
    bottom: 10%;
    text-shadow: 0 0 1px #999;
    font-size: 1.2em;
    text-align: center;
    overflow: hidden;
}

.openwindow {
    position: fixed;
    z-index: 8;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    color: var(--themecolor);
    border-bottom: 2em solid transparent;
    border-right: 2em solid;
    cursor: pointer;
}

.openwindow:after {
    content: "\ecab";
    position: absolute;
    top: 0;
    right: -1.85em;
    color: var(--txtcolor);
}

/* popIframe start */
.popIframe {
    position: fixed;
    z-index: 9;
    top: 0;
    left: auto;
    right: 0;
    width: calc(100% - var(--leftw));
    height: 100%;
    background: white;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

body.popside .popIframe {
    width: 50%;
    min-width: 400px;
}

.popIframe,
.popIframe iframe,
.popIframe #选集 {
    /* border-radius: 14px 0 0 14px; */
}

.popIframe iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color-scheme: light;
}

.openurl{
    display: block;
    position: absolute;
    right: 0;
    top: 4em;
    padding: .38em 0;
    writing-mode: vertical-rl;
    background: red;
    color: white;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    letter-spacing: 2px;
    user-select: none;
	font-size: 16px;
}
.openurl:before{
    padding-right: 0!important;
    padding-bottom: .25em;
}

.closemask {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    color: red;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
    border-left: 32px solid;
    cursor: pointer;
}

.popIframe .closemask {
    top: 50%;
    margin-top: -32px;
    left: -4px;
    border-radius: 8px !important;
}

.popIframe .closemask:before {
    content: "";
    position: fixed;
    width: 4rem;
    height: 100%;
    left: 0;
    top: 0;
}

.inframe .popIframe .closemask:before {
    width: 4rem;
}

.popIframe .closemask:after {
    display: block;
    content: "\e9a0";
    line-height: 0;
    font-size: 22px;
    color: #fff;
    margin-left: -30px;
    font-family: 'iconfont';
}

.popIframe .closemask:hover:after {
    text-shadow: 0 0;
}

@media screen and (orientation: portrait) {
    .popIframe {
        width: 100% !important;
        left: 0 !important;
        top: 40px;
        height: calc(100% - 40px);
        border-left: none;
    }
    .popIframe,
    .popIframe iframe,
    .popIframe #选集 {
        border-radius: 14px 14px 0 0;
    }
    .popIframe {
        /* border-top: 3px solid; */
    }
    .popmask .closemask {

        top: 0;
        left: 50%;
        margin-top: -19px;
        margin-left: -1em;
        transform: rotateZ(90deg);
    }
    .popIframe .closemask:after {
        content: "\e990";
        font-size: 14px;
        margin-left: -28px;
    }
    .popIframe .closemask:before {
        width: 40px !important;
        height: 100vw;
        left: -69px;

        top: -50vw;
    }
}

/* popIframe end*/
.popImgMask {
    position: fixed;
    left: 0;

    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    backdrop-filter: blur(15px);
    z-index: 999;
}

@media screen and (orientation: portrait) {
    .popImgMask {
        background-size: auto 100%;
        background-position: 38% 0;
        animation: bgmove linear 15s;
    }
    @keyframes bgmove {

        0% {
            background-position: 38% 0;
        }
        100% {
            background-position: 100% 0;
        }
    }

}

@media screen and (orientation: landscape) {
    .popImgMask {
        background-size: 100% auto;
        background-position: 38% 0;
        animation: bgmove linear 15s;
    }
    @keyframes bgmove {

        0% {
            background-position: 0 38%;
        }
        100% {
            background-position: 0 100%;
        }
    }
}

.popImg {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 14px;
}

.imgNav {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    margin-top: -30px;
}

.imgNav a {
    font-size: 60px;
    line-height: 60px;
    padding: 0 3%;
    z-index: 999;
    opacity: .65;
    color: white;
}

.imgNav a:hover {
    opacity: 1
}

.imgNav a#nextImg {
    float: right;
}

.imgNav a#nextImg:before {
    content: "\e9a0";
}

.imgNav a#prevImg:before {
    content: "\e98b";
}

#comments {
    position: relative;
    margin: 0 auto;
    overflow: visible;
}

body.channel #comments {
    padding: 0 calc(var(--gap) / 2);
}

#comments iframe {
    color-scheme: light;
}

.imovie #comments .social-share {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
}

.jukebox {
    position: relative;
    margin: 4em 2% 0 2%;
}

.jukebox .disc {
    width: 48%;
}

.jukebox .poster {
    width: 100% !important;
    padding-bottom: 100% !important;
    -webkit-mask-image: none;
}

.jukebox h1 {
    border: none !important;
    margin: 0.5em 0 !important;

}

.jukebox .content {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.jukebox #content,
.jukebox #summary {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.word .jukebox .disc {
    margin-left: 52%;
}

.word .jukebox .content {
    left: 0;
    right: auto;
}

.themecolors .themecolor {
    cursor: pointer;
    text-shadow: 0 0 8px;
}

.themecolors .themecolor:hover {
    text-shadow: 0 0 16px;
}

#tooltip {
    width: auto;
    height: auto;
    max-width: 240px;
    color: black;
    color: var(--txtcolor);
    background: white;
    background: var(--themecolor);
    position: absolute;
    z-index: 9999999999;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    font-size: 0.85em;
    padding: 8px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border: 2px solid black;
    border: 2px solid var(--themecolor);
    overflow: visible;
    border-radius: 8px;
    word-break: break-all;
}

#tooltip img {
    opacity: 0.95;
    box-shadow: 0 0 0 8px #fff, 0 0 0 114px inset #fff;
    border-radius: 2px;
}

/* triangle decoration */
#tooltip:after {
    width: 0;
    height: 0;
    color: var(--themecolor);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.ttop:after {
    border-top-color: transparent;
    border-bottom: 10px solid;
    border-top: none;
    top: -10px;
    bottom: auto;
}

#tooltip.tleft:after {
    left: 20px;
}


#tooltip.tright:after {
    right: 10px;
    left: auto;
}

img[src*="/sitefiles/bairong/icons/loading.gif"] {
    display: block;
    margin: 2.4em auto;
}

body.inframe .showleft,
body.music .sleepycat,
body.music.root .showleft,
body.music #ftool {
    display: none !important;
}

.checkbox-ios {
    display: none !important;
}


.checkbox-ios+label {
    display: block;
    position: relative;
    margin: 1em auto;
    clear: both;
    border-radius: 100px;
    font-size: 0.85em;
    width: 4.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 2px #ccc inset;
    cursor: ew-resize;
}

.bgmask .checkbox-ios+label {
    background-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 0 2px inset;
}

.checkbox-ios+label:after {
    content: '关闭';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding: 0 0.75em;
    border-radius: 100px;
    opacity: 0.5;
}

.checkbox-ios+label:before {
    content: ' ';
    position: absolute;
    text-align: center;
    width: 1.8em;
    height: 1.8em;
    color: var(--txtcolor);
    background: var(--themecolor);
    top: 0;
    left: -2px;
    border-radius: 50%;
    box-shadow: 0 0 1px var(--themecolor);
}

.acontrol .checkbox-ios+label:before {
    content: '♪';
}

.checkbox-ios:active+label:before {
    left: 0;
}

.checkbox-ios:checked:active+label:before {
    left: auto;
    right: 0;
}

.checkbox-ios+label:active {
    opacity: 1;
}

.checkbox-ios:checked+label:before {
    left: auto;
    right: -1px;
}

.checkbox-ios:checked+label:after {
    content: '打开';
    text-align: left;
    opacity: 1;
}

.checkbox-ios#fullscreen+label:after {
    content: '全屏';
}

.checkbox-ios#fullscreen:checked+label:after {
    content: '全屏';
}

.checkbox-ios#themecolor+label:after {
    content: '主题';
}

.checkbox-ios#themecolor:checked+label:after {
    content: '主题';
}

.checkbox-ios#playtone+label:after {
    content: '音效';
}

.checkbox-ios#playtone:checked+label:after {
    content: '音效';
}

.checkbox-ios#tabmode+label:after {
    content: '折叠';
}

.checkbox-ios#tabmode:checked+label:after {
    content: '折叠';
}

.checkbox-ios#qrmode+label:after {
    content: '扫码';
}

.checkbox-ios#qrmode:checked+label:after {
    content: '扫码';
}

.checkbox-ios#freemode+label:after {
    content: '自由';
}

.checkbox-ios#freemode:checked+label:after {
    content: '自律';
}

.checkbox-ios#eyecare+label:after {
    content: '护眼';
}

.checkbox-ios#eyecare:checked+label:after {
    content: '护眼';
}

.checkbox-ios#musicbg+label:after {
    content: '背景';
}

.checkbox-ios#musicbg:checked+label:after {
    content: '背景';
}

.checkbox-ios#cyclemode+label:after {
    content: '随机';
}

.checkbox-ios#cyclemode:checked+label:after {
    content: '单曲';
}

body.bgmask .themecolor,
body.musicmask .eyecare,
body.bgm .playtone,
body.musicmask .ad,
body.musicmask #treebranches {
    display: none !important;
}

@media screen and (min-width: 1201px) {
    body:not(.swipeLeft):not(.inframe) .rightside .list {
        width: 100%;
    }
}

@media screen and (min-width: 480px) {
    body:not(.swipeLeft) .list:hover .wordsloop {

        display: inline-block;
        animation: 8s wordsloop linear infinite normal;
    }
    body.isIE .list:hover .wordsloop {
        display: inline;
        animation: none;
    }
    @keyframes wordsloop {
        0% {
            margin-left: 100%;
            transform: translate(0, 0);
        }
        100% {
            margin-left: 0;
            transform: translate(-100%, 0);
        }
    }
}



@media screen and (max-width: 1200px) {
    body>.left .logo {
        font-size: 1.75em;
        padding-top: 0.75em;
    }
    body>.left,
    body>.rightside {
        opacity: 1 !important;
    }
    body:not(.inframe) h1,
    body:not(.inframe) h2 {
        font-size: 1.5em;
    }
    body:not(.inframe)>.right h1:first-child,
    body:not(.inframe)>.right h2:first-child,
    body:not(.inframe) #favorite h2 {
        padding-top: 1em;
    }
    @media screen and (max-width: 960px) {
        body.inframe h1,
        body.inframe h2 {
            font-size: 1.5em;
        }
    }
    .menu {
        font-size: 1.5em;
    }
    body.music.content .showleft {
        display: block;
    }
    body>.right,
    body.content>.right {
        width: calc(100% - var(--leftw));
        box-shadow: none !important;
    }
    body.content:not(.swipeLeft)>.right .social-share {
        width: 100%;
    }
    #content img,
    body.swipeLeft #content img {
        width: 50% !important;
    }
    body.about .list {
        width: 20%;
    }
    body>.rightside {
        width: calc(100% - var(--leftw));
        height: auto;
        min-height: 0;
        position: relative;
        left: var(--leftw);
        padding: 0 var(--gap);
        background-color: transparent;
    }

    body.swipeLeft>.rightside {
        width: 100%;
    }
    body>.rightside .mCSB_inside>.mCSB_container {
        top: 0 !important;
    }
    .poster#cover {

        width: 62%;
        padding-bottom: 62%;
    }
    #ftool,
    .content .hm-t-go-top {
        left: auto;
        right: 0;
    }
    #ftool a {
        float: right;
    }
    .content #infscr-loading {
        right: 0;
    }
    .list .poster.cover:after,
    body>.left .poster.cover:after {
        width: 64px;
        height: 64px;
        line-height: 64px;
        margin-left: -32px;
        margin-top: -32px;
    }
}

@media screen and (max-width: 1024px) {
    body.about .list,
    .music .list {
        width: 25%;
    }
    .poster.cover:hover,
    .poster.cover.playing {
        box-shadow: 0 0 0 4px rgb(255 255 255 / 25%) inset, 0 0 16px rgb(0 0 0 / 25%) !important;
    }
    .poster.cover:after {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
    }
    body.channel.movie.swipeLeft h2 {
        margin-bottom: 2%;
    }
    .content .poster#cover {
        width: 62% !important;
        padding-bottom: 62% !important;
    }
}

@media screen and (max-width: 768px) {
    .list .poster.text+.title {
        text-align: left;
        padding: 8px 1em;
    }
    body.root.mvcat .list .poster.text+.title {
        text-align: center;
        border-radius: 14px 14px 0 0;
    }
    .poster.text {
        display: none;
    }
    #content .list.img {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    body:after {
        left: 50% !important;
    }
    .media,
    video,
    object,
    embed,
    .vplayer {
        min-height: 240px;
    }
    .related h2 {
        margin: 1em !important;
    }
    body>.left .logo,
    body>.right h1:first-child,
    body>.right h2:first-child,
    body #favorite h2 {
        letter-spacing: 0px;
        border: none;
    }
    body>.right h1.back:before {
        content: "\e98b";
        position: absolute;
        left: 0;
    }
    .contribute {
        float: none !important;
        letter-spacing: 0;
        font-size: 16px;
    }
    body>.right h1.allsearch:after {
        display: none;
    }
    body.root.mvcat.swipeLeft>.right .masonry {
        display: none;
    }
    body.about .list,
    .music .list {
        width: 50%;
    }
    body.music>.right,
    body.music>.rightside {
        padding: 0 4% 2% 4%;
    }
    .music .list {
        padding: 6% 4% !important;
        float: left;
    }
    .poster {
        opacity: 1;
    }
    body.music.swipeLeft #content,
    body.music.swipeLeft #comments {
        width: 100%;
    }
    body.music>.rightside {
        padding-bottom: 1.5em;
    }
    body {
        overflow-y: auto;
    }
    body.content:not(.swipeLeft)>.right .social-share {
        width: 100%;
        left: 0;
    }
    #content img,
    body.swipeLeft #content img {
        width: 100% !important;
        max-width: none !important;
    }
    .jukebox {
        margin: 2%;
    }
    body.music.swipeLeft .showleft {
        opacity: 1 !important;
    }
    #magic {
        left: 50%;
        bottom: 2em;
    }
    body.root.music #ftool {
        top: 2.8em;
        right: 50%;
        margin-right: -1.5em;

        bottom: auto;
    }
    body.root.music #ftool a {
        margin-right: 0;
    }
    @media screen and (orientation:landscape) {
        body.root.music.swipeLeft .showleft {
            left: 0;
            bottom: 50%;
        }
        body.root.music.swipeLeft .showleft:after {
            -webkit-text-fill-color: unset;
        }
        body.root.music.swipeLeft.scrollTop .showleft:after {
            content: '\e64d';
        }

        body.root.music #ftool {
            top: 50%;
            right: 0;
        }

    }
    body.swipeLeft.scrollTop.root.mvcat .showleft {
        opacity: 0;
        z-index: -1;
    }
    body.popmaskon .showleft {
        left: 50%;
        opacity: 1 !important;
    }
    #daodream-container .daodream-launcher-enabled {
        bottom: 108px !important;
        right: 50% !important;
        margin-right: -1.5em !important;
    }
    .social-share {
        font-size: 1.2em !important;
    }
    body.root.music #ftool {
        display: block;
    }
    body.music.swipeLeft #mplay {
        display: none;
    }
    body.bgmask>.left {
        background-color: rgba(0, 0, 0, 0.88) !important;
    }
    .popIframe iframe {
        background-position: center 30px;
    }
    .functions.simple .function {
        width: 160px;
        height: 160px;
    }
    #content .media,
    #content video,
    #content object,
    #content embed,
    .vplayer {
        width: 100% !important;
        height: 200px !important;
    }
    .content.music #content {
        font-size: 1em;
    }
    .content.poem #content {
        font-size: 0.88em;
    }
    .functions .function span.icon {
        font-size: 1.8em;
    }
    .br,
    .channelcontent {
        display: none !important;
    }
    #ftool .icon.fplayer {
        display: block;
        border-radius: 25px 0 0 0;
    }
    .hm-t-go-top {
        display: none !important;
    }
    .pages center {
        display: inline;
    }
    .pages a,
    .pages span {
        padding: 4px;
    }
    *.none {
        display: none;
    }
    body>.rightside .insearch {
        margin: 1em 0;
    }
    body.music.swipeLeft #right>* {
        width: 100%;
    }
    .content .poster#cover {
        width: 62% !important;
        padding-bottom: 62% !important;
    }
    .jukebox .cover {
        width: 100% !important;
        padding-bottom: 100% !important;
    }
    .jukebox .disc {
        width: 100%;
        margin: 2em 0 1em 0 !important;
    }
    .jukebox .content {
        text-align: center;
        position: relative;
        width: 100%;
        height: 8em;
        overflow: auto;
    }
    .word .jukebox .disc {
        margin: 1em 0 !important;
    }
    .popmask.moviedaily,
    .popmask.musicdaily {
        width: 100%;
    }
    .dailycontent {
        width: calc(100% - var(--gap));
        left: 0;
        font-size: 0.75em;
    }

    .bdsharebuttonbox a {
        padding: 0 5px !important;
    }
    .sorter form {
        display: none;
    }
}

@media screen and (max-width: 375px) {
    body>.rightside {
        padding-bottom: 4% !important;
    }
    body>.right .list,
    body>.rightside .list,
    body.inframe>.rightside .list,
    body.swipeLeft>.rightside .list,
    body>.right .box {
        width: 100%;
        margin: 0;
        padding: .25em .75em;
    }
    body.root.mvcat>.right .list,
    body.greatman>.right .list {
        width: 50%;
    }
    body.greatman>.right .list .summary {
        white-space: nowrap;
    }
    body.content:not(.swipeLeft) .list {
        width: 100%;
    }
    .music .list {
        width: 50% !important;
        padding: 8% 4% !important;
    }
    .music .list .title {
        font-size: 1em;
    }
    body.music.swipeLeft .columns .list {
        width: 100% !important;
    }
    .list.more .poster {
        padding-bottom: 38% !important;
    }
    .list.more .poster:after {

        content: "> 查看更多 <";
        font-size: 1.2em !important;
    }
    .list .summary {
        display: block;
        height: auto;
        white-space: normal;
        opacity: 1;
    }
    body.root {
        background-size: 100% auto;
        font-size: 15px;
    }
    #content .list2 {
        width: 100%;
        margin: 0;
        border: none !important;
    }
    .simple .list .poster {
        display: none;

    }
    .simple .list .title {
        text-align: left;
        font-size: 1em;
        padding: 1em 0;
    }
    .simple .list .title:after {
        content: "\0A0\e9a0";
    }
    .simple .list .summary {
        text-align: left;
        padding: 0 0.62em;
        border-left: 1px solid;
        opacity: 0.5;
    }
    body.themecolor .poster,
    body.bgmask .poster {
        box-shadow: 0 0 88px inset !important;
    }
    .media,
    video,
    object,
    embed,
    .vplayer {
        border: 2px solid var(--themecolor);
    }
    .media .media {
        border: 2px solid var(--themecolor);
    }
    .functions {
        margin: 4% auto;
        box-shadow: 0 0 0 1px inset;
    }
}

/* social-share */
.social-share {
    margin-top: 1em;
    width: auto;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    text-align: center;
    font-size: 1.8em;
    line-height: 2;
}

body.popmaskon .social-share {
    z-index: 1;
}

.social-share:before {
    content: "\e64f\a收藏到 ";
}

.social-share:after2 {
    content: " · 分享";
    opacity: 10.19;
}

.social-share .social-share-icon:before {
    content: "\e871";
}

.social-share .icon-qq:before {
    content: "\e612";
}

.social-share .icon-weibo:before {
    content: "\e635";
}

.social-share .icon-wechat:before {
    content: "\e681";
}

.social-share .icon-douban:before {
    content: "\e654";
}

.social-share .icon-heart:before {
    content: "\e86d";
}

.social-share .icon-like:before {
    content: "\e873";
}

.social-share .icon-qzone:before {
    content: "\e62e";
}

.social-share .icon-linkedin:before {
    content: "\e787";
}

.social-share .icon-facebook:before {
    content: "\e636";
}

.social-share .icon-google:before {
    content: "\e611";
}

.social-share .icon-twitter:before {
    content: "\e70f";
}

.social-share a {
    position: relative;
    display: inline-block;
    margin: 0 4px;
    outline: none;
    text-decoration: none;
    opacity: 0.75;
    transition-duration: 0.3s;

}

.social-share .social-share-icon {
    position: relative;
    display: inline-block;
}

.social-share .social-share-icon:hover {
    opacity: 1;
}

.social-share .icon-heart:hover {
    color: red !important;
}

.social-share .icon-weibo:hover {
    color: #ff763b !important;
}

.social-share .icon-qq:hover {
    color: #56b6e7 !important;

}

.social-share .icon-qzone:hover {
    color: #FDBE3D !important;
}

.social-share .icon-douban:hover {
    color: #33b045 !important;
}

.social-share .icon-linkedin:hover {
    color: #0077B5 !important;
}

.social-share .icon-facebook:hover {
    color: #44619D !important;
}


.social-share .icon-google:hover {
    color: #db4437 !important;
}

.social-share .icon-twitter:hover {
    color: #000 !important;

}

.social-share .icon-diandian:hover {
    color: #307DCA !important;
}

.social-share .icon-wechat {
    position: relative;
}

.social-share .icon-wechat:hover {
    color: #7bc549 !important;
}

.social-share .icon-wechat .wechat-qrcode {
    position: absolute;
    bottom: 5em;
    left: 50%;
    z-index: 9;
    visibility: hidden;
    margin-left: -80px;
    width: 160px;
    background-color: #fff;
    box-shadow: 0 2px 10px #aaa;
    color: #666;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    -moz-transition: all 350ms;

    transition: all 200ms;
    filter: alpha(opacity=0);
    -webkit-transition: all 350ms;
}

.social-share .icon-wechat .wechat-qrcode h4 {
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
    color: #777;
    font-weight: normal;
}

body.bgmask .social-share .icon-wechat .wechat-qrcode {
    opacity: 0.85;
}

.social-share .icon-wechat .wechat-qrcode .qrcode {
    margin: 1em auto;
    width: 100px;
}

.social-share .icon-wechat .wechat-qrcode .help p {
    padding: 0 1em;
    color: #666;
    font-weight: normal;
    line-height: 16px;
}

.social-share .icon-wechat .wechat-qrcode:after {
    position: absolute;
    bottom: -13px;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 8px 6px 6px 6px;
    content: '';
}

.social-share .icon-wechat:hover .wechat-qrcode {
    visibility: visible;
    border-color: #fff transparent transparent transparent;
    opacity: 1;
    filter: alpha(opacity=100);
}

/* social-share */
/*用户中心*/
body.home {
    text-align: center;
}

body.home h1:before {
    content: "\e98b";
    position: absolute;
    left: 5px;
}

body.home .nmf_aler,
.nmf_aler * {
    display: inline;
}

body.home .nmf_aler .nmf_st1 {
    display: none;
}

body.home #tipPannel {
    margin-top: 1em;
}

@media screen and (orientation: portrait) {
    body>.left,
    body.inframe>.left {
        overflow: visible;
    }
    body.channel>.right {
        left: 0;
        width: 100%;
        padding: 0 .75rem;
    }
    body.root.mvcat .right .insearch {
        display: block;
        width: 96%;
        margin: 0 auto;
        margin-top: -2%;
    }
    body.root .right .insearch:before {
        font-size: 38vw !important;
        margin-top: 1rem;
    }
    @media screen and (min-width: 500px) {
        body.root.swipeLeft .insearch #searchword {
            line-height: 2;
            font-size: 1.4em;
        }
        body>.left,
        #favorite {
            font-size: 2.5vw;
        }
        #favorite {
            font-size: 2.5vw;
        }
        body.root.swipeLeft .insearch:after {
            font-size: 2.8em;
        }
    }
    body.root .echarts,
    .sortbox h2.desktop,
    #ftool {
        display: none;
    }
    .showleft,
    body.swipeLeft .showleft {
        transition-duration: 0s !important;
        left: 50% !important;
        bottom: 7rem;
        /* display: none; */
    }
    .showleft:after,
    body.swipeLeft .showleft:after {
        content: '\e001';
    }
    body:not(:not(.swipeLeft)):not(.music) .showleft:after {
        background-image: linear-gradient(to right, red, yellow, green, blue, green, yellow, red, yellow, green, blue, green, yellow, red);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        animation: colorflow 5s infinite linear;
        }
    body.root .sortbox {
        display: block !important;
        width: 100%;
        margin: 2% 0 1% 0;
    }
    body>.left {
        width: 50%;
        overflow: auto;
        border-right: 1px dashed;
    }
    body>.left,
    body>#favorite {
        transition-duration: .5s;
        transition-timing-function: ease-in;
        background-color: var(--txtcolor);
        box-shadow: none;
    }
    body:not(.swipeLeft) #favorite {
        right: 0;
    }
    body:not(.swipeLeft) #favorite h2 .close {
        display: none;
    }
    #favorite {
        width: 50% !important;
        padding: 0 4% 4% 4%;
    }

    body.inframe #favorite{
        display: none;
    }
    
    body>.right,
    body>.rightside {
        position: relative !important;
        background: none !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 0;
        left: 0;
        background-image: none;
        overflow: hidden;
    }
    body>.right h1,
    body>.right h2,
    .related h2 {

        border: none;
        text-align: center;
        text-indent: 4px;
    }
    .sorter#vcate .vcates {
        float: none;
    }
    h1>*,
    h2>*,
    .rightside h3>* {
        display: block;
        float: none !important;
        margin-top: 1em;
        white-space: normal;
    }
}

/*深色模式*/
@media (prefers-color-scheme: dark) {
    body,
    .popIframe,
    body>#favorite,
    .popIframe,
    .popIframe.loading {
        background-color: black;
    }
    body {
        --themecolor: silver;
        --txtcolor: black;
    }
    body.root .right .insearch:before {
        text-shadow: 0 0 0.5em;
    }
    iframe {
        color-scheme: light;
    }
    @media screen and (max-width: 768px) {
        body>.left {
            background-color: black;
        }
    }
}

/*深色模式*/
/*护眼模式*/
body.eyecare,
body.eyecare .popIframe,
body.eyecare .popIframe.loading {
    background-color: #C7EDCC;
}

body.eyecare .left {
    background-color: rgba(0, 0, 0, 0.04);
}

body.eyecare {
    --themecolor: forestgreen !important;
    --txtcolor: #e7e7e7 !important;
    font-size: 120%;
}

/*护眼模式*/
/*自律模式*/
body.selfmode .ad {
    display: none !important;
}

body.selfmode[class*=movie] .list:not([class*=必看]) {
    display: none !important
}

/*自律模式*/
/*隐藏部件*/
body.root.loading:not(.popmaskon) .showleft,
body.root.loading:not(.popmaskon) #ftool,
body.root.loading:not(.popmaskon) .sleepycat {
    opacity: 0 !important;
}

body.idle #back,
body.idle #translate,
body.idle #gamebar,
body.idle #ftool,
body.idle #collect-movie-btn,
body.idle #petbar,
body.idle .app,
body.idle .get-vip,
body.idle .ad,
body.idle .ad,
body.idle .adtag {
    display: none !important;
    opacity: 0 !important;
}

body.root.music.pause.swipeLeft #mplay,
body.root.music.pause .showleft,
body.root.music:not(.swipeLeft) .showleft,
body.root.music.pause #ftool {
    opacity: 1;
}

/*隐藏部件*/
span[id*=ajaxElement] {
    display: block;
    height: auto;
    overflow: hidden;
}

.scrollfixed {
    margin-top: 0 !important;
}

/*IE Hack*/
body.isIE #lcontrol .playtone,
body.isIE #lcontrol .fullscreen {
    display: none;
}

body2.music.inframe>*:not(.musicmask),
body2.music.inframe .showleft {
    display: none !important;
}

body.crossframe .showleft,
body.crossframe #ftool {
    display: none;
}

/* sleepycat start */
@keyframes sleepycat-tail {
    5% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(10deg);
    }
    15% {
        transform: rotate(-5deg);
    }
    20% {
        transform: rotate(30deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    45% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    55% {
        transform: rotate(10deg);

    }
}

@keyframes sleepycat-body {
    65% {
        transform: scaleY(1);
    }
    10% {
        transform: scaleY(1.15);
    }
    16% {
        transform: scaleY(1);
    }
    20% {
        transform: scaleY(1.25);
    }
    26% {
        transform: scaleY(1);
    }
    46% {
        transform: scaleY(1.15);
    }
    53% {
        transform: scaleY(1);


    }
    56% {
        transform: scaleY(1.15);
    }
}

@keyframes sleepycat-left-whisker {
    6% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(0deg);
    }
    16% {
        transform: rotate(-5deg);
    }
    20% {
        transform: rotate(0deg);
    }
    26% {
        transform: rotate(0deg);
    }
    46% {
        transform: rotate(10deg);
    }
    53% {
        transform: rotate(-5deg);
    }
    56% {
        transform: rotate(10deg);
    }
}

@keyframes sleepycat-right-whisker {
    6% {
        transform: rotate(180deg);
    }
    10% {
        transform: rotate(190deg);
    }
    16% {
        transform: rotate(180deg);
    }
    20% {
        transform: rotate(175deg);
    }
    26% {
        transform: rotate(190deg);
    }
    46% {
        transform: rotate(180deg);
    }
    53% {
        transform: rotate(185deg);
    }
    56% {
        transform: rotate(175deg);
    }
}

@keyframes sleepycat-left-ear {
    0% {
        transform: rotate(-20deg);
    }
    6% {
        transform: rotate(-6deg);
    }
    13% {
        transform: rotate(-15deg);
    }
    26% {
        transform: rotate(-15deg);
    }
    33% {
        transform: rotate(-30deg);
    }
    40% {
        transform: rotate(-30deg);
    }
    46% {
        transform: rotate(0deg);
    }
    53% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    80% {
        transform: rotate(-15deg);
    }
    93% {
        transform: rotate(-6deg);
    }
    100% {
        transform: rotateZ(-6deg);
    }
}

@keyframes sleepycat-right-ear {
    0% {
        transform: rotateZ(-16deg);
    }
    6% {
        transform: rotateZ(-16deg);
    }
    13% {
        transform: rotateZ(-19deg);
    }
    26% {
        transform: rotateZ(-19deg);
    }
    33% {
        transform: rotateZ(-30deg);
    }
    36% {
        transform: rotateZ(-19deg);
    }
    37% {
        transform: rotateZ(-30deg);
    }
    38% {
        transform: rotateZ(-19deg);
    }
    40% {
        transform: rotateZ(-19deg);
    }
    40% {
        transform: rotateZ(-30deg);
    }
    41% {
        transform: rotateZ(-19deg);
    }
    46% {
        transform: rotateZ(-9deg);
    }
    53% {
        transform: rotateZ(-9deg);
    }
    60% {
        transform: rotateZ(-19deg);
    }
    60% {
        transform: rotateZ(-30deg);
    }
    61% {
        transform: rotateZ(-19deg);
    }
    62% {
        transform: rotateZ(-19deg);
    }
    63% {
        transform: rotateZ(-30deg);
    }
    64% {
        transform: rotateZ(-19deg);
    }
    80% {
        transform: rotateZ(-19deg);
    }
    93% {
        transform: rotateZ(-16deg);
    }
    100% {
        transform: rotateZ(-16deg);
    }
}

.sleepycat {
    width: 160px;
    position: absolute;
    z-index: 1;
    right: 4%;
    margin: 0;
    bottom: auto;
    cursor: pointer;
    transition-duration: 0s !important;
}

.sleepycat .stand {
    position: absolute;
    bottom: 0;
    right: 1px;
    height: 12px;
    width: 160px;
    border-radius: 20px !important;
    background-color: var(--themecolor);
}

.sleepycat .cat {
    width: 110px;
    height: 50px;

    position: absolute;
    right: 0;
    bottom: 8px;
    border-top-left-radius: 100px !important;
    border-top-right-radius: 100px !important;
}

.sleepycat .cat .body {
    width: 109px;
    height: 50px;
    background-color: var(--themecolor);
    position: absolute;
    border-top-left-radius: 100px !important;
    border-top-right-radius: 100px !important;

    animation: sleepycat-body 12s none infinite;
}

.sleepycat .cat .head {
    width: 70px;
    height: 43px;
    background-color: var(--themecolor);
    position: absolute;
    top: calc(50% - 10px);
    left: -40px;
    border-top-left-radius: 80px !important;
    border-top-right-radius: 80px !important;
}


.sleepycat .cat .tail-container {
    position: absolute;

    right: 2px;
    bottom: -13px;
    z-index: 3;
}

.sleepycat.top .cat .tail-container:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    left: -50px;
    top: -10px;

}

.sleepycat .cat .tail {
    position: absolute;
    height: 30px;
    width: 14px;
    bottom: -10px;
    right: 0;
    border-bottom-right-radius: 5px !important;
    background-color: var(--themecolor);
    z-index: 0;
}



.sleepycat .cat .tail>.tail {
    animation: sleepycat-tail 12s none infinite;

    height: 100%;

    width: 14px;

    transform-origin: left;
    border-bottom-left-radius: 20px 20px !important;
    border-bottom-right-radius: 20px 20px !important;
    border-top-right-radius: 40px !important;
}

.sleepycat .cat .ear {
    position: absolute;
    left: 5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid black;
    border-bottom: 20px solid var(--themecolor);
    transform: rotate(-30deg);
    animation: sleepycat-left-ear 12s both infinite;
}

.sleepycat .cat .ear+.ear {
    animation: sleepycat-right-ear 12s both infinite;
    top: -10px;
    left: 30px;
}

.sleepycat .cat .nose {
    position: absolute;
    bottom: 14px;
    left: 20px;
    background-color: white;
    background-color: var(--txtcolor);
    height: 5px;
    width: 5px;
    border-radius: 50% !important;
}

.sleepycat .cat .whisker-container {
    position: absolute;
    bottom: 7px;
    left: -4px;
    width: 20px;
    height: 10px;
    transform-origin: right;
    animation: sleepycat-left-whisker 12s both infinite;
}

.sleepycat .cat .whisker-container+.whisker-container {
    left: 10px;
    bottom: 16px;
    transform-origin: right;
    transform: rotate(180deg);
    animation: sleepycat-right-whisker 12s both infinite;
}

.sleepycat .cat .whisker {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    background-color: var(--txtcolor);
    transform-origin: 100% 0;
    transform: rotate(10deg);
}

.sleepycat .cat .whisker:last-child {
    top: 0;
    transform: rotate(-20deg);
}

.sleepycat.top {
    position: fixed;
    top: 0;
    bottom: auto;
}

.sleepycat.bottom {
    position: fixed;
}

@media screen and (max-width:1024px) {
    .sleepycat {
        zoom: 0.62;
        right: 10%;
    }
}

/* sleepycat end */

#nav{
    position: fixed;
    z-index: 5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px var(--gap) var(--gap) var(--gap);
    overflow: auto;
    background: var(--txtcolor);
}
#nav h2{
    position: relative;
    overflow: visible;
    width: calc(100% - var(--gap));
    margin: calc(var(--gap) / 2);
    margin-top: 1.65em;
    text-align: left;
}
.subnav {
    width: calc(25% - var(--gap));
    margin: calc(var(--gap) / 2);
    padding: 1em 1em 0.5em 1em;
    float: left;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    font-size: 16px;
}

.subnav .items {
    height: 38vh;
    overflow: auto;
    position: relative;
}

.subnav a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 0.5em;
}

.subnav a:hover {
    text-decoration: underline;
}

.subnav a:before {
    content: "\e66c";
    opacity: 0.75;
    padding-right: .25em;
}

.subnav[class *='电影'] a:before {
    content: "\e6d4";
}

.subnav[class *='影辑'] a:before {
    content: "\e64f";
}

.subnav[class *='将映'] a:before {
    content: "\e791";


}

.subnav[class *='热映'] a:before {
    content: "\e6ba";
}

.subnav[class *='预告'] a:before,
.subnav[class *='解说'] a:before {
    content: "\e87c";
}

.subnav[class *='资讯'] a:before {
    content: "\e669";
}

body.bgmask .subnav {

    background: var(--themecolor);
}

body.bgmask .subnav * {
    color: var(--txtcolor);
}

@media screen and (max-width: 1024px) {
    .subnav {
        width: calc(50% - var(--gap));
    }
}

@media screen and (max-width: 600px) {
    .subnav {
        width: calc(100% - var(--gap));
    }
}

@media (prefers-color-scheme: dark) {
    .subnav {
        background: rgba(0, 0, 0, 0.25);
    }
    body.themecolor .subnav {

        background: rgba(0, 0, 0, 0.04);
    }
}

/* colorpicker start */

#colorpicker {
    position: fixed;
    z-index: 9;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -140px;
    border-radius: 50%;
    color: #000;
    box-shadow: 0 0 2px, 0 0 0 40px inset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#closecolorpicker {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: zoom-out;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#colorpickerfixed {
    position: fixed;
    z-index: 9;
    width: 16em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
    margin-top: 180px;
}

#colorpickerfixed>div {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
}

#colorpickerfixed>div {
    background: linear-gradient(-45deg, #eee 50%, transparent 0%);
}

#colorpickerfixed>div:nth-child(1) {
    background-color: black;
}

#colorpickerfixed>div:nth-child(2) {
    background-color: deeppink;
}

#colorpickerfixed>div:nth-child(3) {
    background-color: tomato;
}

#colorpickerfixed>div:nth-child(4) {
    background-color: brown;
}

#colorpickerfixed>div:nth-child(5) {
    background-color: goldenrod;
}

#colorpickerfixed>div:nth-child(6) {
    background-color: forestgreen;
}

#colorpickerfixed>div:nth-child(7) {
    background-color: darkcyan;
}

#colorpickerfixed>div:nth-child(8) {
    background-color: royalblue;
}

#colorpickerfixed>div:nth-child(9) {
    background-color: darkorchid;
}

#colorpickerfixed>div:nth-child(10) {
    background: linear-gradient(-45deg, black 50%, transparent 50%);
    background-color: greenyellow;
}

#colorpickerfixed>div:nth-child(11) {
    background: linear-gradient(-45deg, black 50%, transparent 50%);
    background-color: gold;
}

#colorpickerfixed>div:nth-child(12) {
    background: linear-gradient(-45deg, black 50%, transparent 50%);
    background-color: #eee;
}

/* colorpicker end */
#category {
    position: fixed;
    z-index: 1;
    top: 0;
    right: -100%;
    width: var(--rightsidew);
    height: 100% !important;
    overflow: auto;
    padding: 0 1.5em 1.5em;
    background: var(--txtcolor);
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}

#category.show {
    transition-duration: 0.25s !important;
    right: 0;
}

#category h2 {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 6%;
    padding-top: 1.65em;
}

#category h2 .close {
    float: right;
    color: red;
    cursor: pointer;
}

#category .headers a {
    padding: 0.25em 0;
    opacity: 0.75;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#category .headers a.current:after {
    content: " #";

}

#category .headers a[class*='h-'] {
    padding-left: 0 !important;
}

#category .headers a[class*='h-']:before {
    opacity: 0.25;
}

#category .headers a.current[class*='h-']:before {
    opacity: 1;
}

#category .headers a.h-1:before {
    content: "# ";
    opacity: 1;
}

#category .headers a.h-2:before {
    content: "· "
}

#category .headers a.h-3:before {
    content: "·· "
}

#category .headers a.h-4:before {
    content: "··· "
}

#category .headers a.h-5:before {
    content: "···· "
}

#category .headers {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    transition-duration: 0.3s;
}

.mindzone {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.mindzone .submind {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mindzone .mind {
    position: relative;
    display: flex;
    align-items: center;
}

.mind:before {
    content: '';
    position: absolute;
    left: -30px;

    width: 1px;
    /*这里的高度要等于自身高度 + 节点间margin高度 */
    height: calc(100% + 20px);
    top: 0;
    transform: translateY(-10px);
    background: #ccc;
}

.mindzone .mind .mindtitle {
    display: block;
    padding: 10px 20px;
    border-radius: 100px;
    color: var(--txtcolor);
    background: var(--themecolor);
    margin: 10px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    margin-right: 60px;
    position: relative;
}


.mindzone .mind .mindtitle:before {
    content: "";
    position: absolute;
    left: -30px;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #ccc;
}

.mindzone .mind .mindtitle:after {
    content: '';
    width: 30px;
    height: 1px;
    background: #ccc;
    position: absolute;
    right: -30px;
    top: 50%;
}

.mindzone .mind:first-child:before {
    height: calc(50% + 10px);
    transform: unset;
    top: 50%;
}

.mindzone .mind:last-child:before {
    height: calc(50% + 10px);
    transform: unset;
    top: -10px;
}

.mindzone>.mind>.mindtitle:first-child:before {
    display: none;
}

.mindzone .mind .submind:not(:has(*)) {
    /*空节点*/
    display: none;
}

.mind:first-child:last-child:before {
    /*单节点*/
    display: none;
}

.mindzone .mind .mindtitle:not(:has(+.submind)):after {
    /*末节点*/
    display: none;
}

.ad {
    position: relative;
}

.ad2:after {
    content: "广告";
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 4px;
    color: #666;
    background: #eee;
}

.placeholder {
    height: 100%;
    background: linear-gradient(var(--themecolor) 62%, transparent 38%);
    background-size: 50% 1.2em;
    column-span: all;
    filter: opacity(0.1);
}

/*全屏隐藏*/
:fullscreen {
    .openwindow,
    .app {
        display: none !important;
    }
}

/*soundsleep start*/
body.soundsleep {
    overflow: hidden;
    user-select: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

#soundsleep {
    display: none;
    position: fixed;
    z-index: 999999999;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 2em;
    height: 100%;
    overflow-y: auto;
    background: #333333;
    background-image: url("../img/bg_wood_repeat.jpg");
    background-attachment: local;
    font-family: "iconfont", "Kai", "KaiTi", cursive;
    user-select: none;
    font-size: 15px;
}

body.soundsleep>div {
    display: none;
}

body.soundsleep #soundsleep {
    display: block !important;
}

#soundsleep:before,
#soundsleep:after {
    display: block;
    margin: 0 auto;
    line-height: 1.8;
    opacity: 0.62;
    color: #000;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 2px #000;
}

#soundsleep:before {
    content: "\e001";
    font-size: 11em;
}

#soundsleep .footer {
    line-height: 3;
    margin: 2em 0;
    opacity: 0.62;
    white-space: nowrap;
    color: black;
    text-shadow: 0 0 1px #000;
    font-size: 1.5em;
}

#soundsleep .footer .hello{
   font-family: '仓耳非白W01', cursive;
}

#soundsleep input[type='range'] {
    height: 4px;
    background: black;
    border-radius: 2px;
    border: none;
    vertical-align: middle;
    appearance: none;
}

#soundsleep input[type='range']::-webkit-slider-thumb {
    appearance: none;
    font-size: 1.62em;
    width: 1em;
    height: 1em;
    background: #333;
    border-radius: 50%;
    border: 3px double #333;
    background:
        radial-gradient(35% 25% at 60% 25%, rgb(255 255 255) 10%, transparent),
        radial-gradient(35% 25% at 32% 75%, rgb(199 198 198), transparent),
        radial-gradient(55% 25% at 65% 78%, rgb(80 80 80), transparent),
        radial-gradient(150% 150% at center, rgb(164 160 160) 100%, transparent);
}

.switch {
    position: relative;
    display: inline-block;
    margin: 5em auto;
    width: 8em;
    text-align: center;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.switch label {
    position: absolute;
    left: 50%;
    top: -5em;
    width: 3em;
    height: 3em;
    margin-left: -1.5em;
    background-color: red;
    background-image: radial-gradient(0.5em 0.25em at 60% 18%, rgb(255, 255, 255) 25%, rgba(255, 255, 255, 0)),
        radial-gradient(0.25em 0.25em at 30% 75%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
        radial-gradient(0.3em 0.3em at 60% 80%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
        radial-gradient(100% 100%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0.80) 50%);
    border-radius: 50%;
    box-shadow: 0 0 2em darkred, 0 0 0px 0.5px black;
    display: inline-block;
    animation: jitter 0.015s infinite 0.015s;
}

.switch label span {
    display: inline-block;
    font-size: 1.5em;
    line-height: 2;
    color: transparent;
    text-shadow: #fff 0 0 2px;
    opacity: 0.5;
    overflow: hidden;
}

/* Lever */
.switch .lever {
    cursor: pointer;
    display: inline-block;
    outline: 0;
    position: relative;
    width: 6em;
    height: 6em;
    appearance: none;
    background-image:
        radial-gradient(1.25em 1.25em at 50% 50%, rgb(204, 204, 204) 25%, rgb(170, 170, 170) 49%, rgba(170, 170, 170, 0) 50%),
        radial-gradient(1em 0.65em at 50% 53%, rgb(68, 68, 68), rgba(68, 68, 68, 0)),
        radial-gradient(0.75em 0.75em at 55% 45%, rgb(255, 255, 255), rgba(255, 255, 255, 0)),
        radial-gradient(0.5em 0.4em at 43% 56%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
        radial-gradient(0.5em 0.4em at 55% 57%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
        radial-gradient(0.5em 0.4em at 50% 60%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
        radial-gradient(100% 100% at 50% 50%, rgb(238, 238, 238), rgb(170, 170, 170) 10%, rgb(0, 0, 0) 18%, rgb(0, 0, 0) 21%, rgb(153, 153, 153) 21.5%, rgb(153, 153, 153) 24%, rgba(153, 153, 153, 0) 24.5%, rgba(221, 221, 221, 0) 30%, rgb(221, 221, 221) 30.5%, rgb(221, 221, 221) 33%, rgb(68, 68, 68) 33.5%, rgb(68, 68, 68) 35%, rgba(68, 68, 68, 0) 35.5%, rgba(221, 221, 221, 0) 41%, rgb(221, 221, 221) 41.5%, rgb(238, 238, 238) 45%, rgb(68, 68, 85) 45.5%, rgb(68, 68, 85) 49%, rgba(68, 68, 85, 0) 50%),
        radial-gradient(2em 2em at 35% 20%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em),
        radial-gradient(2em 2em at 65% 80%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em),
        radial-gradient(2em 2em at 80% 35%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em),
        radial-gradient(1em 1em at 20% 65%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em),
        radial-gradient(100% 100% at center, rgb(170, 170, 170) 49%, rgba(170, 170, 170, 0) 50%);
    background-position: 0 0.5em, 0 0.5em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    border: 0.5px solid #000;
    border-radius: 50%;
    box-shadow: -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.3);
    transition-duration: 0.15s;
}

.switch .lever:before,
.switch .lever:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
}


.switch .lever:before {
    animation: leverAOff 0.15s linear forwards;
    background:
        radial-gradient(35% 25% at 60% 25%, rgb(136, 136, 153) 20%, rgba(136, 136, 153, 0)),
        radial-gradient(1em 0.75em at 32% 75%, rgb(102, 102, 102), rgba(102, 102, 102, 0)),
        radial-gradient(1em 0.75em at 65% 78%, rgb(102, 102, 102), rgba(102, 102, 102, 0)),
        radial-gradient(100% 100% at center, rgb(68, 68, 68) 49.5%, rgba(68, 68, 68, 0) 50%);
    box-shadow:
        -1em 2em 1em rgba(0, 0, 0, 0.3),
        -1em 2.5em 2em rgba(0, 0, 0, 0.2),
        -1em 3.5em 2em rgba(0, 0, 0, 0.2),
        -1em 4.5em 2em rgba(0, 0, 0, 0.2),
        -1em 5.5em 2em rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 2em;
    height: 2em;
    transform: translate(-50%, 100%);
    z-index: 1;
}

.switch .lever:checked {
    background-position: 0 -0.5em, 0 -0.5em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.switch .lever:checked:before {
    animation: leverAOn 0.15s linear forwards;
}

.switch .lever:after {
    animation: leverBOff 0.15s linear forwards;
    background-color: #333;
    border-radius: 8em;
    box-shadow: 0 0 0.25em #667 inset;
    width: 2em;
    height: 3.5em;
    transform: translate(0.25em, -50%);
}

.switch .lever:checked:after {
    animation: leverBOn 0.15s linear forwards;
}



@keyframes jitter {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.95;
    }
    100% {
        opacity: 1;
    }
}

.switch .lever:checked+label {
    background-color: #0d0;
    box-shadow: 0 0 3em green, 0 0 0px 0.5px black;
    animation: jitter 0.01s infinite 0.01s;
    transition-duration: 0.75s;
}

.switch .lever:checked+label span {
    text-shadow: #000 0 0 1px;
    transition-duration: 1.5s;
}

.switch.song label {
    top: -2.75em;
    height: 8px;
    border-radius: 4px;
    background-image: none;
    filter: contrast(0.85);
}

.switch.song label span {
    display: none;
}

@keyframes leverAOn {
    from {
        box-shadow:
            -1em 2em 1em rgba(0, 0, 0, 0.3),
            -1em 2.5em 2em rgba(0, 0, 0, 0.2),
            -1em 3.5em 2em rgba(0, 0, 0, 0.2),
            -1em 4.5em 2em rgba(0, 0, 0, 0.2),
            -1em 5.5em 2em rgba(0, 0, 0, 0.2);
        transform: translate(-50%, 100%);
    }
    50% {
        box-shadow:
            0.5 3em 1em rgba(0, 0, 0, 0.3),
            0.5 2.5em 2em rgba(0, 0, 0, 0.2),
            0.5 3.5em 2em rgba(0, 0, 0, 0.2),
            0.5 4.5em 2em rgba(0, 0, 0, 0.2),
            0.5 5.5em 2em rgba(0, 0, 0, 0.2);
    }
    to {
        box-shadow:
            0 3em 1em rgba(0, 0, 0, 0.3),
            0 2.5em 2em rgba(0, 0, 0, 0.2),
            0 3.5em 2em rgba(0, 0, 0, 0.2),
            0 4.5em 2em rgba(0, 0, 0, 0.2),
            0 5.5em 2em rgba(0, 0, 0, 0.2);
        transform: translate(-50%, -200%);
    }
}

@keyframes leverAOff {
    from {
        box-shadow:
            0 3em 1em rgba(0, 0, 0, 0.3),
            0 2.5em 2em rgba(0, 0, 0, 0.2),
            0 3.5em 2em rgba(0, 0, 0, 0.2),
            0 4.5em 2em rgba(0, 0, 0, 0.2),
            0 5.5em 2em rgba(0, 0, 0, 0.2);
        transform: translate(-50%, -200%);
    }
    50% {
        box-shadow:
            0.5 3em 1em rgba(0, 0, 0, 0.3),
            0.5 2.5em 2em rgba(0, 0, 0, 0.2),
            0.5 3.5em 2em rgba(0, 0, 0, 0.2),
            0.5 4.5em 2em rgba(0, 0, 0, 0.2),
            0.5 5.5em 2em rgba(0, 0, 0, 0.2);
    }
    to {
        box-shadow:
            -1em 2em 1em rgba(0, 0, 0, 0.3),
            -1em 2.5em 2em rgba(0, 0, 0, 0.2),
            -1em 3.5em 2em rgba(0, 0, 0, 0.2),
            -1em 4.5em 2em rgba(0, 0, 0, 0.2),
            -1em 5.5em 2em rgba(0, 0, 0, 0.2);
        transform: translate(-50%, 100%);
    }
}

@keyframes leverBOn {
    from {
        width: 2em;
        transform: translate(-50%, 0.25em);
    }
    50% {
        height: 3.5em;
        transform: translate(-50%, -50%);
    }
    to {
        width: 2em;
        transform: translate(-50%, -3.5em);
    }
}

@keyframes leverBOff {
    from {
        width: 2em;
        transform: translate(-50%, -3.5em);
    }
    50% {
        height: 3.5em;
        transform: translate(-50%, -50%);
    }
    to {
        width: 2em;
        transform: translate(-50%, 0.25em);
    }
}


/*crtscreen*/
#crtscreen {
    display: inline-block;
    width: 21em;
    max-width: 90%;
    height: auto;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: 0 0 0 1px black, 0 0 2px black inset, 0 0 8px black inset;
}

#crtswitch {
    display: none;
}

#crtswitch:checked+.crtswitch-label::before {
    background: #22ff55;
}

#crtswitch:checked+.crtswitch-label::after {
    content: "off";
}

@keyframes flicker {
    0% {
        opacity: 0.28768;
    }
    5% {
        opacity: 0.17856;
    }
    10% {
        opacity: 0.86288;
    }
    15.0% {
        opacity: 0.94554;
    }
    20% {
        opacity: 0.0689;
    }
    25% {
        opacity: 0.29983;
    }
    30.0% {
        opacity: 0.51994;
    }
    35% {
        opacity: 0.85166;
    }
    40% {
        opacity: 0.26873;
    }
    45% {
        opacity: 0.75565;
    }
    50% {
        opacity: 0.07236;
    }
    55.0% {
        opacity: 0.60959;
    }
    60.0% {
        opacity: 0.90671;
    }

    65% {
        opacity: 0.93449;
    }
    70% {
        opacity: 0.90519;
    }
    75% {
        opacity: 0.38337;
    }
    80% {
        opacity: 0.00992;
    }
    85.0% {
        opacity: 0.18882;
    }
    90% {
        opacity: 0.75577;
    }
    95% {
        opacity: 0.8731;
    }
    100% {
        opacity: 0.17659;
    }
}

.crtscreen {
    position: relative;
    width: 19em;
    max-width: 90%;
    height: 16em;
    margin-top: 1em;
    overflow: hidden;
    background: gray;
    border-radius: 50px;
    color: #444;
    box-shadow: 0 0 2px 0px inset, 0 0 8px 0px inset, 0 0 8px 0px inset, 0 0 12px 0px inset, 0 0 16px 0px inset, 0 0 0 1px #000;
    cursor: zoom-in;
}

.crtscreen.fullscreen {
    position: fixed;
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    cursor: zoom-out;
}

.crtscreen.fullscreen,
.crtscreen.fullscreen *,
.crtscreen.fullscreen:before,
.crtscreen.fullscreen:after {
    border-radius: 0;
    box-shadow: none;
}

#crtscreen #visualizer {
    z-index: 99999;
}

@media screen and (orientation:landscape) {
    .crtscreen.fullscreen .crtoverlay {
        font-size: 3vw;
    }
}

.crtscreen::after {
    content: "";
    display: block;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
}

.crtscreen::before {
    content: "";
    display: block;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
}

#crtswitch:checked~.crtscreen::after {
    animation: flicker 0.15s infinite;
}

@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-filter: brightness(2);
        filter: brightness(2);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-filter: brightness(2);
        filter: brightness(2);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(0) brightness(0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
    }
}

@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);

        filter: brightness(1);
        opacity: 1;

    }
    60% {
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }
    100% {

        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    background: gray;
    background-size: cover;
    background-position: center center;
    border-radius: 40px;
    box-shadow: 0 0 2px 0px inset, 0 0 8px 0px inset, 0 0 8px 0px inset, 0 0 12px 0px inset, 0 0 16px 0px inset;
}

#crtswitch~.crtscreen>.screen {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;

}

#crtswitch:checked~.crtscreen>.screen {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
    background-image: url('../img/bg_spaceman_640.jpg');
    transition-duration: 1.5s;
}


@keyframes crtoverlay-anim {
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }

}

.crtoverlay {
    color: snow;
    position: absolute;
    width: 100%;
    padding: 2em;
    bottom: 0;
    visibility: hidden;
    font-size: 1em;
    opacity: 0.5;
    letter-spacing: 0.1em;
    font-weight: lighter;
    font-style: italic;
    font-family: '仓耳非白W01', sans-serif;
}

#crtswitch:checked~.crtscreen .crtoverlay {
    z-index: 5;
    animation: crtoverlay-anim 3s linear;
    animation-fill-mode: forwards;
}

.crtadjust {
    height: 0;
    pointer-events: none;
    transition-duration: 0s;
    overflow: hidden;
}

#crtswitch:checked~.crtadjust {
    pointer-events: auto;
    height: 5em;
    overflow: visible;
}

#crtswitch:checked~.crtadjust input[type='range']::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.5px lawngreen inset;
    cursor: ew-resize;
}

/*redswitch*/

.redswitch {
    display: block;
    zoom: 0.5;
    background-color: black;
    width: 150px;
    height: 195px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #333, inset 0 0 2px 22px black;
    border-radius: 24px;
    padding: 20px;
    perspective: 700px;
}

.redswitch input {
    display: none;
}

.redswitch input:checked+.button {
    transform: translateZ(20px) rotateX(25deg);
    box-shadow: 0 -10px 20px #ff1818;
}

.redswitch input:checked+.button .light {
    animation: flicker 0.2s infinite 0.3s;
}

.redswitch input:checked+.button .shine {
    opacity: 1;
}

.redswitch input:checked+.button .shadow {
    opacity: 0;
}

.redswitch .button {
    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
    transform-origin: center center -20px;
    transform: translateZ(20px) rotateX(-25deg);
    transform-style: preserve-3d;
    background-color: #9b0621;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    cursor: pointer;
    background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
    background-repeat: no-repeat;
    border-radius: 0;
}

.redswitch .button::before {
    content: "";
    background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    transform-origin: top;
    transform: rotateX(-90deg);
    position: absolute;
    top: 0;
    left: 0;
}

.redswitch .button::after {
    content: "";
    background-image: linear-gradient(#650000, #320000);
    width: 100%;
    height: 50px;
    transform-origin: top;
    transform: translateY(50px) rotateX(-90deg);
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.redswitch .light {
    opacity: 0;
    animation: light-off 1s;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#ffc97e, transparent 40%), radial-gradient(circle, #ff1818 50%, transparent 80%);
}

.redswitch .dots {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
    background-size: 10px 10px;
}

.redswitch .characters {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
    background-repeat: no-repeat;
}

.redswitch .shine {
    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
    opacity: 0.3;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
    background-repeat: no-repeat;
}

.redswitch .shadow {
    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
    background-repeat: no-repeat;
}

@keyframes flicker {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes light-off {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
}


/*screen*/
@media screen and (max-width: 768px) {
    #soundsleep {
        padding: 0 1em
    }
    #soundsleep:before {
        font-size: 10em;
    }
    .switch {
        zoom: 0.88
    }
    .redswitch {
        zoom: 0.4;
    }
}

@media screen and (max-width: 375px) {
    #soundsleep:before {
        font-size: 9em;
    }
    .switch {
        width: 7em;
    }
    .crtscreen {
        height: 220px;
    }
}

@media screen and (max-width: 320px) {
    .switch {
        zoom: 0.75
    }
    .crtscreen {
        height: 180px;
    }
}

/*----------------------------
	knobKnob Styles
-----------------------------*/

.knobknob {
    width: 6em;
    height: 6em;
    margin: 3em;
    position: relative;
}

.knobknob:after {
    content: "";
    position: absolute;
    top: -1em;
    left: -1em;
    width: 8em;
    height: 8em;
    border: 4px dotted #000;
    border-radius: 50%;
    opacity: 0.5;
}

.knobknob .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 6em;
    height: 6em;
    border: 3px double #333;
    background: conic-gradient(#8a8a8a, #cecece, #878787 115deg, #d0d0d0, #9c9c9c, #d5d5d5, #949494 280deg, #bebebe, #8a8a8a) content-box, linear-gradient(90deg, #b3b3b3, #777) padding-box, conic-gradient(#c7c7c7, #b3b3b3, #7a7a7a, #b0b0b0, #828282, #dcdcdc, #e2e2e2, #f9f9f9, #c7c7c7) border-box;
    border-radius: 50%;
    z-index: 10;
    cursor: move;
}

.knobknob .base {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #333, 0 0 0 6px #000;
    box-shadow: 0 2px 0 #555, 0px 5px 5px #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.knobknob .top:before {
    display: none;
    content: '';
    width: 4px;
    height: 4px;
    background-color: red;
    position: absolute;
    left: 50%;
    bottom: -1.2em;
    margin-left: -2px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333 inset;
}

.knobknob .top:after {
    content: '';
    width: 2px;
    height: 10px;
    background-color: red;
    position: absolute;
    left: 50%;
    bottom: 4px;
    margin-left: -1px;
    border-radius: 1px;
    box-shadow: 0 0 1px #666 inset;
}

.knobknob.on .top:before,
.knobknob.on .top:after {
    background-color: lawngreen;
}

.knobknob [draggable] {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

}


/*深色模式*/
@media (prefers-color-scheme: dark) {
    #soundsleep {
        background-image: url("../img/bg_cloth_repeat.jpg");
    }
    #soundsleep .footer {
        color: white;
        opacity: 0.38;


    }
    .knobknob:after {
        border-color: #000;
        opacity: 1;
    }
}

/*soundsleep end*/

/* 像素画风格类 */
.pixel {
    filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pixelate' x='0' y='0'><feFlood x='2' y='2' height='1' width='1'/><feComposite width='4' height='4'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='2'/></filter></svg>#pixelate");
}

.pixel:hover {
    filter: none;
}

#translate {
    position: fixed;
    z-index: 7;
    top: 0;
    right: 0;
    font-size: 14px;
    /* color: var(--txtcolor); */
    /* background: var(--themecolor); */
    cursor: pointer;
    padding: 0 .25em;
    border-radius: 0 0 0 .75em;
}

#translate * {
    /* color: var(--txtcolor); */
}

#translate:after {
    content: "\e788";
    padding-left: 2px;
}

#translate select {
    display: inline-block;
    text-align: right;
  /* 关键属性 */
  width: max-content;
  min-width: fit-content;
  field-sizing: content;
  white-space: nowrap;
  /* safari兼容 */
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
}

#back {
    position: fixed;
    z-index: 7;
    padding: 0 .75em 0 .25em;
    font-size: 14px;
    top: 0;
    cursor: pointer;
}

.get-vip {
    position: fixed;
    z-index: 7;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 0 0 .75em .75em;
    padding: 0 .75em;
    font-size: 14px;
    color: var(--txtcolor);
    background: var(--themecolor);
    cursor: pointer;
}

.floatbtn{
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--txtcolor);
	background: var(--themecolor);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	z-index: 1;
	user-select: none;
	transition: transform .2s;
}

.floatbtn:hover{
	transform: scale(1.1);
}

.floatbtn.askwx{
	bottom: 85px;
	background2: limegreen;
}

.floatbtn.soundsleep{
	font-weight: bold !important;
    text-shadow: 0 0 3px;
}

.chat-widget-container.bottom-right {bottom: 150px!important;}

.chat-widget-btn{
	background2: dodgerblue!important;
}

body.postermode:before, body.postermode > *,body.postermode .ipage,body.postermode > #right > *,body.postermode #content > *,body.postermode .title,body.postermode .summary{
    display: none!important;
}
body.postermode > #right,body.postermode #content,body.postermode #content .related{
    margin: 0!important;
    padding: 0!important;
    display: block!important;
}
body.postermode .list,body.postermode #content .related{
    margin: 0!important;
    padding: 1rem!important;
    overflow: hidden;
}
body.postermode .list.movie{
    transform: none;
}
body.postermode .list.movie .poster{
    box-shadow: none;
}