@import "iconfont.css";

@font-face {
   font-family: YSXFont;
   src: url("../sunnafh/media/e77db3e5eeb79c76-s.p.otf") format("opentype");
   font-display: swap
}

@font-face {
   font-family: SanFranciscoBold;
   src: url("../sunnafh/media/SF-Pro-Nav.5b13a06b.ttf") format("truetype");
   font-display: swap
}

@font-face {
   font-family: YSIconfont;
   src: url("../sunnafh/media/iconfont.f60b93aa.woff") format("woff"), url("../sunnafh/media/iconfont.f3136ffd.ttf") format("truetype");
   font-display: block
}

:root {
   --ys-bg: #1f1f1f;
   --ys-bg-2: #181818;
   --ys-panel: #242424;
   --ys-panel-2: #2b2b2b;
   --ys-text: #f7f7f7;
   --ys-muted: #a8a8a8;
   --ys-sub: #777;
   --ys-line: rgba(255, 255, 255, .08);
   --ys-card: #252525;
   --ys-blue: #6f80ff;
   --ys-white: #fff;
   --ys-radius: 8px;
   --ys-shadow: 0 12px 32px rgba(0, 0, 0, .35)
}

* {
   box-sizing: border-box
}




html {
   background-color: var(--ys-bg);
   color: var(--ys-text);
   font-family: "PingFang SC", YSXFont, "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Arial, sans-serif;
   font-size: 16px;
   letter-spacing: 0;
   text-rendering: geometricPrecision;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scrollbar-color: #9f9f9f #f5f5f5;
   scrollbar-width: auto;
}

html.ys-dark {
   scrollbar-color: #9f9f9f #2c2c2c;
}


body {
   margin: 0;
   background: var(--ys-bg);
   color: var(--ys-text);
   min-width: 320px
}

a {
   color: inherit;
   text-decoration: none
}

img {
   display: block;
   max-width: 100%
}

.ys-wrap {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto
}

.ys-header {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 50;
   height: 72px;
   background: #fff;
   transition: background 0.2s linear;
}

.ys-nav {
   height: 72px;
   padding: 0 32px;
   display: flex;
   align-items: center;
   gap: 44px
}

.ys-logo {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 0 0 148px;
   width: 148px;
   min-width: 148px;
   overflow: hidden
}

.mt-\[20px\] {
   margin-top: 20px
}

.ys-logo-mark {
   width: 36px;
   height: 34px;
   flex: 0 0 36px;
   position: relative;
   display: block;
   transform: skewY(-18deg)
}

.ys-logo-mark:before,
.ys-logo-mark:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 12px;
   border-radius: 3px;
   background: #111;
   box-shadow: 0 2px 0 rgba(0, 0, 0, .14)
}

.ys-logo-mark:before {
   top: 3px;
   transform: rotate(-22deg)
}

.ys-logo-mark:after {
   bottom: 3px;
   transform: rotate(20deg)
}

.ys-logo-text {
   min-width: 0
}

.ys-logo-text strong {
   display: block;
   font-size: 24px;
   line-height: 1;
   font-weight: 800;
   color: #111;
   letter-spacing: 1px;
   white-space: nowrap
}

.ys-logo-text em {
   display: block;
   margin-top: 4px;
   font-style: normal;
   font-size: 12px;
   line-height: 1;
   color: #111;
   font-weight: 700;
   letter-spacing: .2px;
   white-space: nowrap
}

.ys-menu {
   display: flex;
   align-items: center;
   gap: 42px;
   white-space: nowrap
}

.ys-menu a {
   font-size: 18px;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.85);
   text-shadow: none;
   white-space: nowrap;
   transition: transform 0.15s;
   transform-origin: center center;
}

.ys-menu a.active,
.ys-menu a:hover {
   color: #121212;
   font-weight: 700;
   font-family: SanFranciscoBold;
   transform: scale(1.2)
}

.ys-search {
   margin-left: auto;
   display: flex;
   align-items: center;
   width: 266px;
   height: 36px;
   border-radius: 999px;
   background: #f4f4f4;
}

.ys-search input {
   width: 100%;
   height: 100%;
   border: 0;
   outline: 0;
   background: transparent;
   color: #222;
   padding: 0 16px 0 20px;
   font-size: 14px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ys-search input::placeholder {
   color: #666;
}

.ys-search button {
   width: 46px;
   height: 100%;
   border: 0;
   background: transparent;
   position: relative;
   cursor: pointer
}

.ys-search button:before {
   content: "";
   position: absolute;
   left: 13px;
   top: 12px;
   width: 13px;
   height: 13px;
   border: 2px solid #777;
   border-radius: 50%
}

.ys-search button:after {
   content: "";
   position: absolute;
   left: 27px;
   top: 26px;
   width: 8px;
   height: 2px;
   background: #777;
   transform: rotate(45deg);
   border-radius: 2px
}

.ys-tools {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 0 0 auto
}

.ys-tools a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   min-width: 34px;
   color: #111;
   font-size: 10px;
   font-weight: 500;
   line-height: 1.1;
   white-space: nowrap;
   word-break: keep-all;
}

.ys-tools a span {
   display: block;
   white-space: nowrap;
   word-break: keep-all;
   writing-mode: horizontal-tb;
   text-align: center;
   transition: 0.2s;
}

.ys-tools .ys-login-link {
   height: 32px;
   min-width: 76px;
   padding: 0 12px;
   flex-direction: row;
   gap: 6px;
   border: 1px solid #111;
   border-radius: 7px;
   font-size: 14px;
   font-weight: 500
}

.ys-tools .ys-login-link:hover {
   background-color: #121212;
   color: #fff;
}

.ys-tools a:not(.ys-login-link):hover {
   transform: scale(1.11111);
}

.ys-tools a:not(.ys-login-link):hover span{
   font-weight: 700;
   font-family: SanFranciscoBold;
}


.ys-ico {
   width: 16px;
   height: 16px;
   display: block;
   position: relative
}

.ys-ico-rank {
   border: 2px solid #111;
   border-radius: 4px
}

.ys-ico-rank:before {
   content: "";
   position: absolute;
   left: 4px;
   bottom: 3px;
   width: 2px;
   height: 6px;
   background: #111;
   box-shadow: 4px -3px 0 #111, 8px 1px 0 #111
}

.ys-ico-clock {
   border: 2px solid #111;
   border-radius: 50%
}

.ys-ico-clock:before {
   content: "";
   position: absolute;
   left: 7px;
   top: 3px;
   width: 2px;
   height: 6px;
   background: #111
}

.ys-ico-clock:after {
   content: "";
   position: absolute;
   left: 7px;
   top: 8px;
   width: 6px;
   height: 2px;
   background: #111;
   transform: rotate(25deg);
   transform-origin: left center
}

.ys-ico-chat {
   border: 2px solid #111;
   border-radius: 50%
}

.ys-ico-chat:after {
   content: "";
   position: absolute;
   right: 0;
   bottom: -3px;
   border-width: 4px 0 0 5px;
   border-style: solid;
   border-color: transparent transparent transparent #111
}

.ys-ico-list:before {
   content: "";
   position: absolute;
   left: 1px;
   top: 3px;
   width: 16px;
   height: 2px;
   background: #111;
   box-shadow: 0 6px 0 #111, 0 12px 0 #111
}

.ys-ico-list:after {
   content: "";
   position: absolute;
   right: 0;
   top: 1px;
   border-left: 6px solid #111;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
   filter: drop-shadow(0 6px 0 #111) drop-shadow(0 6px 0 #111)
}

.ys-ico-user {
   border: 2px solid #111;
   border-radius: 50%
}

.ys-ico-user:before {
   content: "";
   position: absolute;
   left: 5px;
   top: 3px;
   width: 5px;
   height: 5px;
   border: 2px solid #111;
   border-radius: 50%
}

.ys-ico-user:after {
   content: "";
   position: absolute;
   left: 3px;
   right: 3px;
   bottom: 2px;
   height: 6px;
   border: 2px solid #111;
   border-radius: 8px 8px 0 0;
   border-bottom: 0
}

.ys-main {
   min-height: 100vh;
   background: linear-gradient(180deg, #1d1d1d 0, #202020 60%, #1d1d1d 100%)
}

.ys-main-home {
   background: #f5f5f5;
   color: #121212;
   /* padding-top: 72px; */
   padding-bottom: 30px;
}

.ys-main-home:after {
   /* content: "";
   display: block;
   height: 1px;
   background: #f4f4f4 */
}

.ys-hero {
   position: relative;
   min-height: 747px;
   margin-bottom: 34px;
   background: #1f1f1f;
   overflow: hidden
}

.ys-hero:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0, rgba(0, 0, 0, .16) 54%, rgba(0, 0, 0, .58) 100%), linear-gradient(90deg, rgba(0, 0, 0, .24) 0, rgba(0, 0, 0, .04) 45%, rgba(0, 0, 0, .18) 100%);
   /* z-index: 2;
   pointer-events: none */
}

.ys-hero-slides {
   position: absolute;
   inset: 0
}

.ys-hero-slide {
   position: absolute;
   inset: 0;
   display: block;
   color: #fff;
   opacity: 0;
   visibility: hidden;
   transition: opacity .45s ease;
   /* z-index: 1 */
}

.ys-hero-slide::before {
   content: "";
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 160px;
   z-index: 1;
   pointer-events: none;
   touch-action: none;
   backdrop-filter: blur(20px);
   mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
   background: transparent;
}

.ys-hero-slide::after {
   content: "";
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 160px;
   z-index: 1;
   pointer-events: none;
   touch-action: none;
   background: linear-gradient(360deg, rgb(31, 31, 31) 0%, rgba(0, 0, 0, 0) 100%);
}

.ys-hero-slide.active {
   opacity: 1;
   visibility: visible
}

.ys-hero-bg {
   position: absolute;
   height: 100%;
   width: 100%;
   inset: 0px;
   object-fit: cover;
   color: transparent;
   transform: translateX(-50%);
   width: auto !important;
   left: 50% !important;
}

.ys-hero-copy {
   position: relative;
   z-index: 3;
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto;
   padding-top: 500px
}

.ys-hero-copy h1 {
   margin: 0 0 8px;
   font-size: 44px;
   line-height: 1.1;
   font-weight: 800;
   text-shadow: 0 3px 12px rgba(0, 0, 0, .55)
}

.ys-hero-copy p {
   margin: 0;
   color: #bdbdbd;
   font-size: 16px;
   font-weight: 500
}

.ys-hero-arrow {
   position: absolute;
   z-index: 5;
   top: 285px;
   width: 40px;
   height: 80px;
   border: 0;
   background-color: transparent;
   opacity: .55;
   border-radius: 8px;
   cursor: pointer;
}

.ys-hero-arrow.left {
   left: 0
}

.ys-hero-arrow.right {
   right: 0
}

.ys-hero-arrow:before {
   content: "";
   display: block;
   position: absolute;
   top: 26px;
   left: 12px;
   width: 24px;
   height: 24px;
   border-left: 4px solid #aaa;
   border-bottom: 4px solid #aaa;
   transform: rotate(45deg);
   
}
.ys-hero-arrow:hover { 
   background-color: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(8px);
}
    

.ys-hero-arrow.right:before {
   position: absolute;
   top: 26px;
   right: 12px;
   left: auto;
   transform: rotate(225deg)
}

.ys-dots {
   position: absolute;
   z-index: 5;
   left: 50%;
   bottom: 76px;
   transform: translateX(-50%);
   display: flex;
   gap: 12px;
   padding: 12px 16px;
   border-radius: 999px;
   background-color: rgba(0, 0, 0, 0.3);
}

.ys-dots i {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .32);
   cursor: pointer;
   transition: width .2s ease, background .2s ease
}

.ys-dots i.active {
   width: 24px;
   border-radius: 999px;
   background: #fff
}

.ys-hero.single .ys-hero-arrow {
   display: none
}

#ys-carousel,
#ys-hot,
#ys-trailer {
   scroll-margin-top: 92px
}

.ys-section {
   width: min(1340px, calc(100% - 88px));
   margin: 0 auto 58px
}

.ys-type-page .ys-section.mt-\[20px\] {
   margin-top: 20px
}

.ys-section-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px
}

.ys-section-title {
   display: flex;
   align-items: center;
   gap: 6px;
}

.ys-section-title .icon-tittle-gengduo-moren {
   font-weight: 400;
   font-size: 28px;
   cursor: pointer;
   color: rgba(121, 121, 121);
   transition: 0.2s;
}

.ys-section-title h2,
.ys-section-head h1 {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
}

.ys-section-title .chev {
   width: 17px;
   height: 17px;
   border-right: 3px solid rgba(0, 0, 0, 0.4);
   border-top: 3px solid rgba(0, 0, 0, 0.4);
   transform: rotate(45deg);
   margin-top: 5px;
   transition: 0.2s;
}

.ys-section-action {
   padding: 0px 13px;
   height: 28px;
   border-radius: 20px;
   border: 1px solid rgb(175, 175, 175);
   display: flex;
   gap: 2px;
   align-items: center;
   cursor: pointer;
   transition: 0.25s;
   font-size: 14px;
   color: rgb(11, 11, 11);
}

.ys-section-action .icon-web-refresh-copy {
   margin-left: 2px;
   color: #9b9b9b;
}

.ys-section-action:hover {
   border-color: rgb(18, 18, 18);
   color: rgb(11, 11, 11);
}

.ys-section-action:hover .icon-web-refresh-copy {
   color: rgb(11, 11, 11);
}

.ys-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 40px 19.5px
}

.ys-card {
   min-width: 0;
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 16px 0px;
   transform: scale(1.015, 1.01) translateY(0.1px);
}

.ys-poster {
   display: block;
   position: relative;
   aspect-ratio: 2/3;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
   overflow: hidden;
   background: #111;
   transition: 0.25s;
   will-change: contents;
}

.ys-poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .2s ease, filter .2s ease
}

.ys-poster:hover img,
.ys-card:hover .ys-poster img {
   transform: scale(1.06);
   filter: brightness(.72)
}

.ys-poster:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .72) 100%);
   pointer-events: none
}

.ys-corner {
   position: absolute;
   right: 8px;
   top: 8px;
   z-index: 2;
   border-radius: 4px;
   background: linear-gradient(180deg, #7c8cff, #5b70f4);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
   padding: 5px 6px;
   box-shadow: 0 4px 12px rgba(72, 93, 224, .35)
}

.ys-card-hover {
   position: absolute;
   inset: 0;
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 18px 16px 14px;
   color: #fff;
   background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .44) 38%, rgba(0, 0, 0, .88) 100%);
   opacity: 0;
   transform: translateY(8px);
   transition: opacity .18s ease, transform .18s ease;
   pointer-events: none;
   text-shadow: 0 2px 8px rgba(0, 0, 0, .45)
}

.ys-card:hover {
   z-index: 6;
   transform: translateY(-8px) scale(1.045)
}

.ys-card:hover .ys-card-hover {
   opacity: 1;
   transform: translateY(0)
}

.ys-hover-head {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px
}

.ys-hover-head b {
   min-width: 0;
   flex: 1;
   font-size: 21px;
   line-height: 1.15;
   font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-hover-head strong {
   color: #fff;
   font-size: 23px;
   line-height: 1;
   font-weight: 800
}

.ys-hover-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-bottom: 10px
}

.ys-hover-tags em {
   font-style: normal;
   font-size: 12px;
   line-height: 1;
   border-radius: 4px;
   background: rgba(255, 255, 255, .13);
   padding: 5px 7px
}

.ys-hover-line {
   display: block;
   margin-top: 5px;
   font-size: 12px;
   line-height: 1.35;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: rgba(255, 255, 255, .82)
}

.ys-hover-desc {
   display: -webkit-box;
   margin-top: 7px;
   font-size: 12px;
   line-height: 1.45;
   color: rgba(255, 255, 255, .82);
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical
}

.ys-hover-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 13px;
   font-size: 12px;
   color: #fff
}

.ys-hover-foot i,
.ys-hover-foot u {
   font-style: normal;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   height: 26px;
   border-radius: 5px;
   background: rgba(0, 0, 0, .42);
   padding: 0 8px
}

.ys-hover-foot u {
   background: rgba(255, 255, 255, .14)
}

.ys-card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 8px;
   gap: 2px;
   box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 16px 0px;
}

.ys-card h3 {
   margin: 0;
   max-width: 140px;
   flex: 1;
   font-size: 16px;
   line-height: 1.25;
   font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-card strong {
   color: #7f7f7f;
   font-size: 17px;
   font-weight: 700
}

.ys-card p {
   margin: 4px 0 0;
   color: #858585;
   font-size: 13px;
   line-height: 1.35;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-home-board {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
   gap: 20px;
   align-items: stretch;
   color: #111
}

.ys-home-board .ys-section-head {
   margin-bottom: 16px
}

.ys-home-board .ys-section-title h2 {
   color: #0b0b0b;
   font-size: 28px;
   font-weight: 700;
   line-height: 28px;
   text-shadow: none
}

.ys-home-board .ys-section-title .chev {
   margin-top: 2px;
}

.ys-home-board .ys-section-action {
   padding: 0px 13px;
   height: 28px;
   line-height: 28px;
   border-radius: 20px;
   border: 1px solid rgb(175, 175, 175);
   display: flex;
   gap: 2px;
   align-items: center;
   cursor: pointer;
   transition: 0.25s;
   font-size: 14px;
   color: rgb(11, 11, 11);
}

.ys-home-board .ys-section-action .icon-back {
   color: rgba(121, 121, 121);
   transform: rotate(180deg);
}

.ys-home-board .ys-section-action:hover {
   border-color: rgb(18, 18, 18);
   color: rgb(11, 11, 11);
}

.ys-latest-grid {
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 40px 19.5px
}

.ys-home-board .ys-card {
   /* background: #fff; */
   border-radius: 8px;
   box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
   overflow: visible
}

.ys-home-board .ys-card:hover {
   box-shadow: 0 16px 32px rgba(0, 0, 0, .24)
}

.ys-home-board .ys-poster {
   border-radius: 8px 8px 0 0;
   box-shadow: none
}

.ys-home-board .ys-card-meta {
   /* padding: 7px 8px 0;
   margin-top: 0 */
}

.ys-home-board .ys-card h3 {
   color: #050505;
   font-size: 13px;
   font-weight: 650
}

.ys-home-board .ys-card strong {
   color: #8f8f8f;
   font-size: 18px;
   font-weight: 600
}

.ys-home-board .ys-card p {
   color: #858585;
   font-size: 12px
}

.ys-home-rank {
   min-width: 0;
   display: flex;
   flex-direction: column
}

.ys-rank-card {
   flex: 1;
   display: flex;
   flex-direction: column;
   /* background: #fff; */
   border: 1px solid #ddd;
   border-radius: 11px;
   padding: 8px 14px;
   box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 16px 0px;
}

.ys-rank-item {
   flex: 1 1 auto;
   display: grid;
   grid-template-columns: 24px 0 minmax(0, 1fr) 38px;
   gap: 0;
   align-items: center;
   min-height: 38px;
   padding: 5px 0;
   color: #111;
   transition: grid-template-columns .18s ease, gap .18s ease, min-height .18s ease
}

.ys-rank-item+.ys-rank-item {
   border-top: 1px solid #f1f2f4
}

.ys-rank-no {
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   border-radius: 6px;
   background-color: rgb(245, 245, 247);
   color: #777;
   font-size: 16px;
   font-weight: 600;
   font-family: "PingFang SC";
   text-align: center
}

.ys-rank-item:nth-child(-n+3) {
   grid-template-columns: 24px 62px minmax(0, 1fr) 38px;
   gap: 10px;
   min-height: 92px
}

.ys-rank-item:hover {
   grid-template-columns: 24px 62px minmax(0, 1fr) 38px;
   gap: 10px;
   min-height: 92px
}

.ys-rank-item:nth-child(1) .ys-rank-no,
.ys-rank-item:nth-child(2) .ys-rank-no,
.ys-rank-item:nth-child(3) .ys-rank-no {
   width: auto;
   height: auto;
   background: transparent;
   border-radius: 0;
   font-size: 24px;
   font-family: "DIN Alternate";
}

.ys-rank-item:nth-child(1) .ys-rank-no {
   color: rgb(255, 24, 62);
}

.ys-rank-item:nth-child(2) .ys-rank-no {
   color: rgb(255, 93, 56);
}

.ys-rank-item:nth-child(3) .ys-rank-no {
   color: rgb(255, 184, 32);
}

.ys-rank-item img {
   width: 0;
   height: 0;
   border-radius: 5px;
   object-fit: cover;
   background: #eee;
   opacity: 0;
   transform: scale(.96);
   transition: opacity .18s ease, transform .18s ease, width .18s ease, height .18s ease
}

.ys-rank-item:nth-child(-n+3) img,
.ys-rank-item:hover img {
   width: 62px;
   height: 82px;
   opacity: 1;
   transform: scale(1)
}

.ys-rank-info {
   min-width: 0;
   display: block;
   padding-left: 8px;
}

.ys-rank-info strong {
   display: block;
   color: #111;
   font-size: 13px;
   line-height: 1.3;
   font-weight: 650;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-rank-info em,
.ys-rank-info b {
   display: none
}

.ys-rank-item:nth-child(-n+3) .ys-rank-info em,
.ys-rank-item:hover .ys-rank-info em {
   display: inline-flex;
   margin: 4px 0 5px;
   padding: 3px 5px;
   border: 1px solid #e4e4e4;
   border-radius: 4px;
   color: #8a8a8a;
   font-style: normal;
   font-size: 11px;
   line-height: 1
}

.ys-rank-item:nth-child(-n+3) .ys-rank-info b,
.ys-rank-item:hover .ys-rank-info b {
   display: block;
   color: #777;
   font-size: 13px;
   line-height: 1;
   font-weight: 650
}

.ys-rank-hot {
   justify-self: end;
   color: #717171;
   font-size: 14px;
   white-space: nowrap
}

.ys-rank-hot .fire-icon{
   display: inline-block;
   width: 12px;
   height: 12px;
   background: url(../sunnafh/media/fire-icon-gray.png) 0% 0% / 100% 100%;
}

.ys-trailer-section {
   margin-top: 22px;
   margin-bottom: 46px
}

.ys-trailer-source {
   display: none
}

.ys-trailer-source.active {
   display: block
}

.ys-trailer {
   color: #050505
}

.ys-trailer-head {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 18px;
   margin-bottom: 20px
}

.ys-trailer-head h2 {
   margin: 0;
   font-size: 30px;
   line-height: 1.05;
   font-weight: 800;
   color: #050505
}

.ys-trailer-title {
   display: flex;
   align-items: baseline;
   gap: 4px;
   min-width: 0;
   color: #050505
}

.ys-trailer-title strong {
   max-width: 430px;
   font-size: 19px;
   line-height: 1.2;
   font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-trailer-title em {
   font-style: normal;
   font-size: 18px;
   font-weight: 700;
   white-space: nowrap
}

.ys-trailer-reserve {
   height: 28px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: 1px solid #111;
   border-radius: 6px;
   padding: 0 11px;
   color: #111;
   font-size: 14px;
   font-weight: 700;
   line-height: 1
}

.ys-trailer-reserve:before {
   content: "";
   width: 12px;
   height: 12px;
   background: #111;
   clip-path: path("M6 1.2c-2.2 0-3.8 1.6-3.8 3.8v2.5L1.2 9v.8h9.6V9L9.8 7.5V5c0-2.2-1.6-3.8-3.8-3.8Zm0 10.6c.9 0 1.6-.6 1.8-1.4H4.2c.2.8.9 1.4 1.8 1.4Z")
}

.ys-trailer-showcase {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 58%) minmax(360px, 1fr);
   gap: 38px;
   align-items: stretch
}

.ys-trailer-showcase:before,
.ys-trailer-showcase:after {
   display: none
}

.ys-trailer-player {
   position: relative;
   z-index: 3;
   display: block;
   height: 390px;
   border-radius: 10px;
   background: #050505;
   box-shadow: 0 18px 34px rgba(0, 0, 0, .18);
   overflow: hidden;
   color: #fff
}

.ys-trailer-player img,
.ys-trailer-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ys-trailer-player img {
   z-index: 1;
   filter: saturate(.96);
   opacity: .9;
   transition: opacity .18s ease
}

.ys-trailer-video {
   z-index: 1;
   background: #050505
}

.ys-trailer-player.is-video-ready img {
   opacity: 0
}

.ys-trailer-player.is-video-ready .ys-trailer-controls {
   display: none
}

.ys-trailer-player:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 48px;
   background: linear-gradient(180deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .58) 62%, rgba(0, 0, 0, 0));
   z-index: 2
}

.ys-trailer-player:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .7));
   z-index: 2;
   pointer-events: none
}

.ys-trailer-mark {
   position: absolute;
   left: 22px;
   top: 14px;
   z-index: 3;
   max-width: 58%;
   font-size: 20px;
   line-height: 1.1;
   font-weight: 800;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-shadow: 0 2px 8px rgba(0, 0, 0, .38)
}

.ys-trailer-controls {
   position: absolute;
   left: 22px;
   right: 22px;
   bottom: 22px;
   z-index: 4;
   display: grid;
   grid-template-columns: 26px minmax(0, 1fr) 24px;
   gap: 14px;
   align-items: center
}

.ys-trailer-controls i {
   width: 18px;
   height: 26px;
   border-left: 7px solid #fff;
   border-right: 7px solid #fff
}

.ys-trailer-controls b {
   height: 4px;
   border-radius: 999px;
   background: linear-gradient(90deg, #fff 0 18%, rgba(255, 255, 255, .35) 18% 100%)
}

.ys-trailer-controls em {
   position: relative;
   width: 22px;
   height: 22px;
   font-style: normal
}

.ys-trailer-controls em:before {
   content: "";
   position: absolute;
   left: 0;
   top: 5px;
   border-right: 10px solid #fff;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent
}

.ys-trailer-controls em:after {
   content: "";
   position: absolute;
   right: 1px;
   top: 4px;
   width: 6px;
   height: 14px;
   border: 2px solid #fff;
   border-left: 0;
   border-radius: 0 10px 10px 0
}

.ys-trailer-art {
   position: relative;
   z-index: 1;
   height: 390px;
   min-height: 390px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   overflow: hidden
}

.ys-trailer-art:before,
.ys-trailer-art:after {
   display: none
}

.ys-trailer-art-main {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: -58px;
   display: block;
   overflow: hidden;
   -webkit-clip-path: none;
   clip-path: none
}

.ys-trailer-art-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   filter: saturate(1.06) contrast(1.03);
   -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, rgba(0, 0, 0, .42) 94%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #000 0, #000 56%, rgba(0, 0, 0, .45) 82%, rgba(0, 0, 0, 0) 100%);
   mask-image: linear-gradient(90deg, #000 0, #000 84%, rgba(0, 0, 0, .42) 94%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #000 0, #000 56%, rgba(0, 0, 0, .45) 82%, rgba(0, 0, 0, 0) 100%);
   -webkit-mask-composite: source-in;
   mask-composite: intersect;
   transition: opacity .22s ease
}

/* 目标站那种约 2.7:1 的横幅物料：整张横跨左右两栏，左半边压在播放器下面，
   按容器高度等比铺、右对齐，左半边正好落在播放器底下，竖向不会裁到人物。
   竖版海报走上面的默认规则（只占右栏、cover 裁剪），由脚本按图片宽高比自动切换。 */
.ys-trailer-art.is-wide {
   position: static
}

.ys-trailer-art.is-wide .ys-trailer-art-main {
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 0;
   -webkit-clip-path: none;
   clip-path: none
}

.ys-trailer-art.is-wide .ys-trailer-art-main img {
   position: absolute;
   right: 0;
   bottom: 0;
   left: auto;
   width: auto;
   max-width: none;
   height: 100%;
   object-fit: fill;
   -webkit-mask-image: none;
   mask-image: none
}

.ys-trailer-thumbs-wrap {
   position: relative;
   z-index: 4;
   width: min(100%, 560px);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 0;
   -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%);
   mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%)
}

.ys-trailer-thumbs-wrap::-webkit-scrollbar {
   display: none
}

.ys-trailer-thumbs {
   display: flex;
   justify-content: flex-start;
   gap: 10px;
   width: max-content;
   max-width: none
}

.ys-trailer-thumb {
   position: relative;
   flex: 0 0 92px;
   width: 92px;
   height: 48px;
   border: 0;
   border-radius: 6px;
   padding: 0;
   overflow: hidden;
   background: #111;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
   cursor: pointer
}

.ys-trailer-thumb:after {
   content: "";
   position: absolute;
   inset: 0;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 6px;
   background: rgba(0, 0, 0, .5);
   transition: background .22s ease;
   pointer-events: none
}

.ys-trailer-thumb:hover:after,
.ys-trailer-thumb.active:after {
   background: rgba(0, 0, 0, 0)
}

.ys-trailer-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ys-trailer-nav {
   display: none
}

.ys-trailer-nav:hover {
   background: #fff;
   transform: translateY(-2px)
}

.ys-trailer-nav:before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 10px;
   height: 10px;
   border-left: 2px solid #111;
   border-bottom: 2px solid #111
}

.ys-trailer-nav-prev {
   left: 8px
}

.ys-trailer-nav-next {
   right: 8px
}

.ys-trailer-nav-prev:before {
   transform: translate(-35%, -50%) rotate(45deg)
}

.ys-trailer-nav-next:before {
   transform: translate(-65%, -50%) rotate(-135deg)
}

.ys-loader {
   width: 38px;
   height: 38px;
   border: 5px solid #555;
   border-top-color: #ddd;
   border-radius: 50%;
   animation: ysSpin 1s linear infinite
}

@keyframes ysSpin {
   to {
      transform: rotate(360deg)
   }
}

.ys-panel {
   /* background: var(--ys-panel);
   border: 1px solid var(--ys-line);
   border-radius: 8px;
   box-shadow: var(--ys-shadow) */
}

.ys-breadcrumb {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto 18px;
   padding-top: 92px;
   color: #8b8b8b;
   font-size: 14px
}

.ys-breadcrumb a {
   color: #bbb
}

.ys-detail-hero {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto 34px;
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr) 220px;
   gap: 28px;
   padding: 24px;
   background: linear-gradient(180deg, #282828, #202020)
}

.ys-detail-poster img {
   width: 100%;
   aspect-ratio: 2/3;
   object-fit: cover;
   border-radius: 8px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .38)
}

.ys-detail-main h1 {
   margin: 0 0 13px;
   font-size: 38px;
   line-height: 1.15;
   font-weight: 800
}

.ys-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin: 0 0 15px;
   padding: 0;
   list-style: none
}

.ys-meta li {
   display: block;
   width: max-content;
   padding: 4px 11px;
   border-radius: 4px;
   border: 1px solid rgb(217, 217, 217);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   color: rgb(113, 113, 113);
   line-height: 1;
}

.ys-desc {
   color: #20242d;
   line-height: 2.2;
   margin: 0
}

.ys-desc strong {
   color: #fff
}

.ys-detail-page .ys-detail-stats span.ys-stat-icon {
   font-size: 16px;
}

.ys-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 22px
}

.ys-btn,
.ys-btn-secondary {
   height: 42px;
   line-height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   padding: 0 22px;
   font-weight: 700
}

.ys-btn {
   background: #fff;
   color: #111
}

.ys-btn:hover {
   background: #e9e9e9
}

.ys-btn-secondary {
   background: #333;
   color: #fff;
   border: 1px solid var(--ys-line)
}

.ys-score {
   padding: 18px;
   border-radius: 8px;
   background: #1c1c1c;
   text-align: center
}

.ys-score strong {
   display: block;
   font-size: 42px;
   color: #fff
}

.ys-score span {
   font-size: 13px;
   color: #888
}

.ys-playlist {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto 34px;
   padding: 22px
}

.ys-source-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 4px 0 18px
}

.ys-source-tab {
   min-width: 86px;
   border: 1px solid var(--ys-line);
   border-radius: 8px;
   background: #303030;
   color: #e7e7e7;
   cursor: pointer;
   font-size: 15px;
   font-weight: 700;
   line-height: 1;
   padding: 10px 16px;
   text-align: center
}

.ys-source-tab:hover,
.ys-source-tab.active {
   background: #fff;
   border-color: #fff;
   color: #111
}

.ys-source.is-hidden {
   display: none
}

.ys-source {
   margin-top: 18px
}

.ys-source h3 {
   margin: 0 0 12px;
   font-size: 18px
}

.ys-episodes {
   display: grid;
   gap: 12px;
   text-align: center;
   max-height: 480px;
   overflow-y: auto;
   grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
}

.ys-episodes a {
   min-width: 86px;
   text-align: center;
   border-radius: 8px;
   border: 1px solid var(--ys-line);
   padding: 10px 12px;
   color: #e7e7e7;
}

.ys-episodes a:hover,
.ys-episodes a.active {
   background: #fff;
   color: #111
}

.ys-player-layout {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   border: 1px solid rgb(234, 234, 234);
   background-color: rgb(255, 255, 255);
   border-radius: 12px;
   overflow: hidden;
   /* gap: 18px */
}

.ys-player-box {
   background: #121212;
   overflow: hidden;
   min-height: 610px;
}

.ys-player-box .MacPlayer,
.ys-player-box iframe,
.ys-player-box video {
   width: 100% !important;
   height: 610px !important
}

.ys-sidebar {
   /* padding: 22px; */
   background-color: #fff;
}

.ys-sidebar h2 {
   margin: 0 0 18px;
   font-size: 28px
}

.ys-sidebar .ys-source h3 {
   color: #333
}

.ys-sidebar .ys-episodes a {
   background: #fff;
   color: #111;
   border-color: #e6e6e6
}

.ys-sidebar .ys-episodes a.active {
   color: #fff;
   background: #ff5a00
}

body.ys-play-page {
   background: #f5f5f5;
   color: #111
}

.ys-play-page .ys-main {
   background: #f5f5f5
}

.ys-play-page .ys-breadcrumb {
   color: #888
}

.ys-play-page .ys-breadcrumb a {
   color: #121212
}

.ys-play-page .ys-playlist {
   background: #fff;
   border-color: #e8e8e8;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
   color: #111
}

.ys-play-page .ys-playlist h1 {
   color: #050505
}

.ys-play-page .ys-playlist .ys-desc {
   color: #4b5563
}

.ys-play-page .ys-play-info {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto 30px;
   padding: 34px 0 42px;
   color: #0b0b0b
}

.ys-play-page .ys-play-info .icon-back{
   font-size: 20px;
   transform: rotate(180deg);
}

.ys-play-page .ys-play-info h1 {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 14px;
   margin: 0 0 24px;
   color: #0b0b0b;
   font-size: 30px;
   font-weight: 800;
   line-height: 1.27;
   text-shadow: none
}

.ys-play-page .ys-play-info h1 em {
   color: #1f2933;
   font-style: normal;
   font-weight: 700
}

.ys-play-page .ys-play-info h1 strong {
   color: #717171;
   font-weight: 500;
   font-size: 24px;
}

.ys-play-page .ys-play-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0 16px;
   margin: 0 0 16px;
   color: #0b0b0b;
   font-size: 14px;
   line-height: 1
}

.ys-play-page .ys-play-meta>span {
   display: inline-flex;
   align-items: center;
   min-height: 28px
}

.ys-play-page .ys-play-meta>span+span:before {
   content: "";
   width: 1px;
   height: 18px;
   margin-right: 16px;
   background: #c9cdd3
}

.ys-play-page [data-ys-current-count]:empty {
   display: none
}

.ys-play-page .ys-play-score {
   font-weight: 650
}

.ys-play-page .ys-play-tags {
   gap: 10px
}

.ys-play-page .ys-play-tags:before {
   display: none
}

.ys-play-page .ys-play-tags i {
   display: inline-flex;
   align-items: center;
   padding: 5px 11px;
   border: 1px solid #d8dde3;
   border-radius: 5px;
   color: #717171;
   font-size: 14px;
   font-style: normal;
   line-height: 1.1
}

.ys-play-page .ys-play-desc {
   max-width: 1360px;
   margin: 0;
   color: #0b0b0b;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5
}

.ys-play-page .ys-play-desc strong {
   font-weight: 500
}

.ys-play-page .ys-section-title h2 {
   color: #050505;
   text-shadow: none
}

.ys-play-page .ys-sidebar {
   align-self: start;
   height: 610px;
   color: #0b0b0b
}

.ys-play-page .ys-sidebar h2 {
   box-sizing: border-box;
   font-size: 20px;
   line-height: 24px;
   font-weight: 500;
   padding: 20px 24px ;
   color: rgb(11, 11, 11);
   margin: 0;
   /* border-bottom: 1px solid;
   border-color: #ddd; */

}

.ys-play-page .ys-sidebar .ys-source {
   height: calc(100% - 65px);
   margin: 0
}

.ys-play-page .ys-sidebar .ys-episodes {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: 22px 28px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   scrollbar-width: thin;
   border-top: 1px solid rgb(238, 238, 238);
}

.ys-play-page .ys-sidebar .ys-episodes a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 45px;
   height: 45px;
   border-radius: 6px;
   font-size: 16px;
   user-select: none;
   color: rgb(23, 23, 23);
   border: 1px solid ;
   border-color: rgb(217, 217, 217);
   cursor: pointer;
   transition: 0.25s;
   padding: 0;
}


.ys-play-page .ys-episode-tools {
   display: none
}

.ys-play-page .ys-source.is-episode-list .ys-episode-tools {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px 24px;
   height: 32px;
}

.ys-play-page .ys-source.is-episode-list .ys-episode-range {
   display: inline-flex;
   align-items: center;
   align-self: stretch;
   border-bottom: 2px solid #0b0b0b;
   color: #050505;
   font-size: 18px;
   font-weight: 500;
}

.ys-play-page .ys-episode-sort {
   width: 36px;
   height: 36px;
   border: 0;
   background: transparent;
   color: #111;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0
}

.ys-detail-sort-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   flex: 0 0 auto;
   color: currentColor;
   font-family: YSIconfont !important;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   -webkit-font-smoothing: antialiased
}

.ys-detail-sort-icon:before {
   content: "\e64d";
   display: block
}

.ys-detail-sort-icon:after {
   content: none
}

.ys-play-page .ys-source.is-episode-list .ys-episodes {
   height: calc(100% - 52px);
   padding: 16px 24px;
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   align-content: flex-start;
   gap: 10px
}

.ys-play-page .ys-source.is-episode-list .ys-episodes a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 45px;
   height: 45px;
   min-width: 45px;
   border-radius: 6px;
   font-size: 16px;
   user-select: none;
   color: rgb(23, 23, 23);
   border: 1px solid ;
   border-color: rgb(217, 217, 217);
   cursor: pointer;
   transition: 0.25s;
   padding: 0 2px;
   word-break: break-all;
}

.ys-play-page .ys-sidebar .ys-episodes a:hover{
   border-color: #121212;
}

.ys-play-page .ys-sidebar .ys-episodes a.active {
   color: #fff;
   background-color: #121212;
}


html.ys-dark .ys-play-page .ys-sidebar {
   background: rgba(255, 255, 255, 0.04);
   border-color: #2e2e2e;
   color: #fff
}

html.ys-dark body.ys-play-page {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-play-page .ys-main {
   background: #1f1f1f
}

html.ys-dark .ys-play-page .ys-playlist {
   background: #202020;
   border-color: #303030;
   box-shadow: none;
   color: #f5f5f5
}

html.ys-dark .ys-play-page .ys-playlist h1 {
   color: #fff
}

html.ys-dark .ys-play-page .ys-playlist .ys-desc {
   color: #b8b8b8
}

html.ys-dark .ys-play-page .ys-play-info {
   color: #f5f5f5
}

html.ys-dark .ys-play-page .ys-play-info h1 {
   color: #fff
}

html.ys-dark .ys-play-page .ys-play-info h1 em {
   color: #d7d7d7
}

html.ys-dark .ys-play-page .ys-play-info h1 strong {
   color: #aeb4bc
}

html.ys-dark .ys-play-page .ys-play-meta {
   color: #fff
}

html.ys-dark .ys-play-page .ys-play-meta>span+span:before {
   background: #4a4a4a
}

html.ys-dark .ys-play-page .ys-play-tags i {
   background: #202020;
   border-color: #3a3a3a;
   color: #d8d8d8
}

html.ys-dark .ys-play-page .ys-play-desc {
   color: #f5f5f5
}

html.ys-dark .ys-play-page .ys-section-title h2 {
   color: #f5f5f5
}

html.ys-dark .ys-play-page .ys-sidebar h2 {
   border-bottom-color: #3b3b3b;
   color: #fff;
}

html.ys-dark .ys-play-page .ys-sidebar .ys-episodes {
   border-top: 1px solid #3b3b3b;
}

html.ys-dark .ys-play-page .ys-sidebar .ys-episodes a {
   background: transparent;
   border-color: rgba(255, 255, 255, .12);
   color: rgba(255, 255, 255, .9)
}

html.ys-dark .ys-play-page .ys-sidebar .ys-episodes a:hover {
   border-color: #fff;
}

html.ys-dark .ys-play-page .ys-sidebar .ys-episodes a.active {
   background-color: #fff;
   color: #121212
}

html.ys-dark .ys-play-page .ys-breadcrumb a {
   color: #ccc
}

html.ys-dark .ys-play-page .ys-source.is-episode-list .ys-episodes {
   border-top: 1px solid rgb(255, 255, 255, 0.08);
}

html.ys-dark .ys-play-page .ys-source.is-episode-list .ys-episode-range {
   border-bottom-color: #fff;
   color: #fff
}

html.ys-dark .ys-play-page .ys-episode-sort {
   color: #fff
}

html.ys-dark .ys-player-layout {
   border: none;
   background-color: rgba(255, 255, 255, 0.04);
}

html.ys-dark .ys-section-action{
   color: rgb(255, 255, 255);
   border-color: rgba(255, 255, 255, 0.12);
}

html.ys-dark .ys-section-action:hover {
   border-color: rgba(255, 255, 255);
}

html.ys-dark .ys-section-action:hover .icon-web-refresh-copy, html.ys-dark .ys-section-action:hover .icon-back {
   color: #fff;
}


html.ys-dark .ys-card {
   box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 16px 0px;
}

html.ys-dark .ys-card {
   box-shadow: rgba(255, 255, 255, 0.5) 0px -1px 3px 0px;   
}

.ys-filter {
   width: min(1360px, calc(100% - 80px));
   margin: 0 auto 28px;
   padding: 18px;
   background: #242424
}

.ys-filter-row {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   margin: 10px 0
}

.ys-filter-row strong {
   color: rgb(18, 18, 18);
   border: 1px solid #121212;
   width: max-content;
   min-width: 64px;
   min-height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
   padding: 5px 18px;
   font-weight: 400;
   line-height: 140%;
   flex-shrink: 0;
   border-radius: 6px;
}

.ys-filter-row div {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.ys-filter-row a {
   border-radius: 999px;
   background: #303030;
   border: 1px solid rgb(217, 217, 217);;
   padding: 7px 13px;
   color: #cfcfcf;
   font-size: 14px
}

.ys-filter-row a:hover {
   background: #fff;
   color: #111
}

.ys-empty {
   padding: 30px;
   border-radius: 8px;
   background: #111;
   color: #aaa;
   text-align: center
}

.mac-paging {
   width: min(1340px, calc(100% - 88px));
   margin: 24px auto 10px;
   color: var(--ys-text)
}

.mac-paging .page {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center
}

.mac-paging .page li {
   display: block;
   float: none;
   margin: 0;
   padding: 0;
   list-style: none;
   width: auto
}

.mac-paging .page>li>a,
.mac-paging .page>li:not(.page_jump)>span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 38px;
   height: 34px;
   padding: 0 13px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 999px;
   background: rgba(255, 255, 255, .06);
   color: #d8d8d8;
   font-size: 14px;
   font-weight: 650;
   line-height: 1;
   text-decoration: none;
   white-space: nowrap
}

.mac-paging .page li.active a,
.mac-paging .page a:hover {
   border-color: #fff;
   background: #fff;
   color: #111
}

.mac-paging .page .btns_disad,
.mac-paging .page a.btns_disad {
   cursor: default;
   opacity: .45;
   pointer-events: none
}

.mac-paging .page_jump_inner {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 34px;
   padding: 0 8px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 999px;
   background: rgba(255, 255, 255, .06);
   white-space: nowrap
}

.mac-paging .page_jump_label {
   color: #bdbdbd;
   font-size: 13px;
   font-weight: 600
}

.mac-paging .page_jump_input {
   width: 54px;
   height: 24px;
   border: 0;
   border-radius: 4px;
   background: #fff;
   color: #111;
   text-align: center;
   outline: 0
}

.mac-paging .page_jump_btn {
   height: 100%;
   border: 0;
   border-radius: 5px;
   background: #fff;
   color: #111;
   padding: 0 8px;
   font-size: 12px;
   font-weight: 650;
   cursor: pointer
}

.mac-paging .page_tips {
   margin-top: 16px;
   color: #d8d8d8;
   font-size: 14px;
   font-weight: 650;
   text-align: center
}

.mac-paging .show-mobile {
   display: none
}

html.ys-dark .mac-paging .page>li>a,
html.ys-dark .mac-paging .page>li:not(.page_jump)>span,
html.ys-dark .mac-paging .page_jump_inner {
   border-color: rgba(255, 255, 255, .12);
   background: rgba(255, 255, 255, .06);
   color: #d8d8d8
}

body.ys-type-page {
   background: #f5f6f7;
   color: #111
}

.ys-type-page .ys-main-type {
   min-height: auto;
   padding-top: 72px;
   padding-bottom: 0;
   background: #f5f6f7;
   color: #111
}

.ys-type-page .ys-wrap {
   width: 100%;
   margin: 0
}

.ys-type-page .ys-breadcrumb {
   width: min(1340px, calc(100% - 88px));
   padding-top: 28px;
   margin-bottom: 18px;
   color: #8c949d
}

.ys-type-page .ys-breadcrumb a {
   color: #79818a
}

.ys-type-page .ys-filter {
   width: min(1340px, calc(100% - 88px));
   margin: 24px auto 24px;
   padding: 14px 18px;
   background: #fff;
   border-color: #eceff3;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .04)
}

.ys-type-page .ys-filter-row {
   margin: 15px 0
}

.ys-type-page .ys-filter-row strong {
   color: #111
}

.ys-type-page .ys-filter-row a {
   width: max-content;
   min-width: 64px;
   min-height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px 18px;
   line-height: 140%;
   flex-shrink: 0;
   border-radius: 6px;
   background: #fff;
   color: #0b0b0b
}

.ys-type-page .ys-filter-row a:hover {
   /* background-color: #111; */
   border-color: #121212;
}

.ys-type-page .ys-filter-row a.active,
.ys-type-page .ys-filter-row a.active:hover {
   background: #111;
   border-color: #111;
   color: #fff
}

.ys-type-page .ys-section {
   width: min(1340px, calc(100% - 88px));
   margin: 0 auto;
   padding-bottom: 0
}

.ys-type-page .ys-type-sortbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin: 0 0 12px;
   color: #717171;
   font-size: 18px;
   font-weight: 400;
   line-height: 28px
}

.ys-type-page .ys-type-sortlinks {
   display: flex;
   align-items: center;
   gap: 0;
   min-width: 0;
   white-space: nowrap
}

.ys-type-page .ys-type-sortlinks a {
   display: inline-flex;
   align-items: center;
   color: #717171;
   text-decoration: none
}

.ys-type-page .ys-type-sortlinks a.active,
.ys-type-page .ys-type-sortlinks a:hover {
   color: #050505
}

.ys-type-page .ys-type-sortlinks a+a:before {
   content: "";
   display: block;
   width: 1px;
   height: 18px;
   margin: 0 32px;
   background: #d6d6d6
}

.ys-type-page .ys-type-sort-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   margin-left: 5px;
   color: currentColor;
   font-family: YSIconfont !important;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   -webkit-font-smoothing: antialiased
}

.ys-type-page .ys-type-sort-icon:before {
   content: "\e70a";
   display: block
}

.ys-type-page .ys-section-head {
   margin-bottom: 12px
}

.ys-type-page .ys-section-title h1 {
   color: #050505;
   font-size: 22px;
   font-weight: 700;
   text-shadow: none
}

.ys-type-page .ys-section-title .chev {
   border-color: #9aa1a8;
   width: 14px;
   height: 14px
}

.ys-type-page .ys-grid {
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 40px 20px
}

.ys-type-page .ys-card {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
   overflow: hidden
}

.ys-type-page .ys-poster {
   border-radius: 8px 8px 0 0;
   box-shadow: none
}

.ys-type-page .ys-card-meta {
   padding: 8px 10px 0;
   margin-top: 0
}

.ys-type-page .ys-card h3 {
   color: #050505;
   font-size: 14px;
   font-weight: 650
}

.ys-type-page .ys-card strong {
   color: #7f7f7f;
   font-size: 17px;
   font-weight: 700;
}

.ys-type-page .ys-card p {
   padding-bottom: 10px;
   color: #9aa1a8;
   font-size: 12px
}

.ys-type-page .mac-paging {
   width: min(1340px, calc(100% - 88px));
   margin: 72px auto 88px;
   padding: 0;
   color: #111
}

.ys-type-page .mac-paging .page {
   gap: 12px
}

.ys-type-page .mac-paging .page>li.hidden_mb {
   display: none
}

.ys-type-page .mac-paging .page>li>a,
.ys-type-page .mac-paging .page>li:not(.page_jump)>span {
   min-width: 36px;
   height: 36px;
   padding: 0 12px;
   border: 1px solid #d9dde3;
   border-radius: 5px;
   background: #fff;
   color: #111;
   font-size: 13px;
   font-weight: 500
}

.ys-type-page .mac-paging .page li.active a,
.ys-type-page .mac-paging .page a:hover {
   border-color: #050505;
   background: #050505;
   color: #fff
}

.ys-type-page .mac-paging .page .btns_disad,
.ys-type-page .mac-paging .page a.btns_disad {
   opacity: 1;
   color: #9aa1a8;
   background: #fff;
   pointer-events: none
}

.ys-type-page .mac-paging .page>li:nth-child(2) a,
.ys-type-page .mac-paging .page>li:nth-child(2) span,
.ys-type-page .mac-paging .page>li:nth-last-child(3) a,
.ys-type-page .mac-paging .page>li:nth-last-child(3) span {
   min-width: 36px;
   padding: 0;
   font-size: 0
}

.ys-type-page .mac-paging .page>li:nth-child(2) a:before,
.ys-type-page .mac-paging .page>li:nth-child(2) span:before {
   content: "‹";
   font-size: 26px;
   font-weight: 300;
   line-height: 1;
   color: #9aa1a8
}

.ys-type-page .mac-paging .page>li:nth-last-child(3) a:before,
.ys-type-page .mac-paging .page>li:nth-last-child(3) span:before {
   content: "›";
   font-size: 26px;
   font-weight: 300;
   line-height: 1;
   color: #9aa1a8
}

.ys-type-page .mac-paging .page>li.page_jump {
   display: inline-flex;
   align-items: center;
   margin-left: 10px
}

.ys-type-page .mac-paging .page_jump_inner {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
   gap: 8px !important;
   width: auto !important;
   min-width: 0 !important;
   height: 36px !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   background: transparent !important;
   color: #111 !important;
   box-shadow: none !important
}

.ys-type-page .mac-paging .page_jump_label {
   display: inline-flex;
   align-items: center;
   height: 36px;
   color: #656d76;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap
}

.ys-type-page .mac-paging .page_jump_input {
   width: 76px;
   height: 36px;
   border: 1px solid #d9dde3;
   border-radius: 5px;
   background: #fff;
   color: #111;
   font-size: 14px
}

.ys-type-page .mac-paging .page_jump_btn {
   width: 42px;
   min-width: 42px;
   height: 36px;
   border: 1px solid #d9dde3;
   border-radius: 5px;
   background: #fff;
   color: #111;
   padding: 0;
   font-size: 13px;
   font-weight: 500
}

.ys-type-page .mac-paging .page_jump_label span,
.ys-type-page .mac-paging .page_jump_btn span {
   display: inline !important;
   width: auto !important;
   min-width: 0 !important;
   height: auto !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   background: transparent !important;
   color: inherit !important;
   font-size: inherit !important;
   font-weight: inherit !important;
   line-height: 1 !important
}

.ys-type-page .mac-paging .page_tips {
   display: none
}

body.ys-type-page .ys-footer {
   border-top-color: #d9d9d9
}

html.ys-dark body.ys-type-page {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-type-page .ys-main-type {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-type-page .ys-filter,
html.ys-dark .ys-type-page .ys-card {
   background: #1f1f1f;
   border-color: #303030;
   box-shadow: rgba(255, 255, 255, 0.5) 0px -1px 3px 0px;
}

html.ys-dark .ys-type-page .ys-section-title h1,
html.ys-dark .ys-type-page .ys-card h3,
html.ys-dark .ys-type-page {
   color: #f5f5f5
}

html.ys-dark .ys-type-page .ys-filter-row a {
   color: rgb(255, 255, 255);
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: unset;
}
html.ys-dark .ys-type-page .ys-filter-row a:hover{
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgb(255, 255, 255);
   color:#fff;
}
html.ys-dark .ys-type-page .ys-filter-row a.active,
html.ys-dark .ys-type-page .ys-filter-row a.active:hover{
   background: #fff;
   border-color: #fff;
   color: #111;
}
html.ys-dark .ys-type-page .mac-paging .page>li>a,
html.ys-dark .ys-type-page .mac-paging .page>li:not(.page_jump)>span {
   border-color: rgba(255, 255, 255, .12);
   background: rgba(255, 255, 255, .06);
   color: #d8d8d8
}

html.ys-dark .ys-type-page .mac-paging .page_jump_inner {
   border: 0 !important;
   background: transparent !important;
   color: #d8d8d8 !important
}

html.ys-dark .ys-type-page .mac-paging .page li.active a,
html.ys-dark .ys-type-page .mac-paging .page a:hover {
   border-color: #fff;
   background: #fff;
   color: #111
}

body.ys-detail-page {
   background: #f5f6f7;
   color: #111
}

.ys-detail-page .ys-main-detail {
   min-height: auto;
   padding-top: 72px;
   padding-bottom: 0;
   background: #f5f6f7;
   color: #111
}

.ys-detail-page .ys-breadcrumb {
   width: 100%;
   max-width: calc(1750px + 80px);
   margin: 0 auto 18px;
   padding: 28px 40px 0;
   color: #888
}

.ys-detail-page .ys-breadcrumb a {
   color: #121212
}

.ys-detail-page .ys-panel {
   background: #fff;
   border-color: #eceff3;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .06)
}

.ys-detail-page .ys-detail-hero {
   width: 100%;
   max-width: calc(1750px + 80px);
   display: flex;
   align-items: stretch;
   gap: 0;
   margin: 0 auto 40px;
   padding: 24px 40px;
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   color: #111
}

.ys-detail-page .ys-detail-poster {
   flex: 0 0 236px;
   margin-right: 24px;
   overflow: hidden;
   border-radius: 12px;
   position: relative;
   cursor: pointer;
}

.ys-detail-page .ys-detail-poster img {
   height: 340px;
   aspect-ratio: auto;
   box-shadow: none;
   transition: 0.2s;
}



.ys-detail-page .ys-detail-poster .hover-mask {
   position: absolute;
   inset: 0px;
   width: 100%;
   height: 100%;
   opacity: 0;
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.5s;
}

.ys-detail-page .ys-detail-poster .hover-mask .mask-img {
    opacity: 0;
    width: 70px;
    height: 70px;
    background: url(../sunnafh/media/mask-play-icon.png) 0% 0% / cover;
    transition: 0.5s;
}

.ys-detail-page .ys-detail-poster:hover img {
   transform: scale(1.1);
}

.ys-detail-page .ys-detail-poster:hover .hover-mask  {
   opacity: 1;
}
.ys-detail-page .ys-detail-poster:hover .hover-mask .mask-img {
   opacity: 1;
   width: 54px;
   height: 54px;
}
    

.ys-detail-page .ys-detail-main {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

.ys-detail-page .ys-detail-side {
   display: none
}

.ys-detail-page .ys-detail-main h1,
.ys-detail-page .ys-section-title h2,
.ys-detail-page .ys-source h3 {
   color: #050505;
   text-shadow: none
}

.ys-detail-page .ys-detail-main h1 {
   font-size: 36px;
   font-weight: 600;
   line-height: 1.3;
   margin: -4px 0 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-detail-page .ys-meta li {
   background: #f5f6f7;
   border-color: #d9d9d9;
   color: #6b7280
}

.ys-detail-page .ys-desc {
   color: #20242d
}

.ys-detail-page .ys-desc strong {
   color: #717171;
   font-weight: normal
}

.ys-detail-page .ys-btn {
   background: #121212;
   color: #fff;
   transition: 0.25s;
}

.ys-detail-page .ys-btn .bofang-icon {
   display: inline-block;
   width: 24px;
   height: 24px;
   font-size: 24px;
   margin-right: 4px;
   background-image: url(../sunnafh/media/bofang-light-icon.png);
   background-repeat: no-repeat;
   background-size: 24px 24px;
}

.ys-detail-page .ys-btn:hover {
   background: #2a2a2a
}

.ys-detail-page .ys-btn-secondary {
   background: #f5f6f7;
   color: #121212;
   border-color: #d9d9d9
}

.ys-detail-page .ys-detail-stats {
   display: flex;
   align-items: flex-start;
   gap: 0;
   margin-top: 14px;
   color: #111
}

.ys-detail-page .ys-detail-stats>div {
   min-width: 96px;
   text-align: center
}

.ys-detail-page .ys-detail-stats strong {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   color: #111;
   font-size: 16px;
   font-weight: 500;
   line-height: 20px
}

.ys-detail-page .ys-detail-stats span {
   display: block;
   color: #717171;
   font-size: 12px;
   line-height: 22px
}

.ys-detail-page .ys-detail-stats i {
   width: 1px;
   height: 40px;
   margin: 2px 10px 0;
   background: #e3e6eb
}

.ys-detail-page .ys-score {
   background: #f5f6f7;
   border: 1px solid #eceff3
}

.ys-detail-page .ys-score strong {
   color: #111
}

.ys-detail-page .ys-score span {
   color: #8c949d
}

.ys-detail-page .ys-source-tab {
   background: #f5f6f7;
   border-color: #121212;
   color: #171717
}

.ys-detail-page .ys-source-tab:hover,
.ys-detail-page .ys-source-tab.active {
   background: #050505;
   border-color: #050505;
   color: #fff
}

.ys-detail-page .ys-episodes a {
   background: #f5f6f7;
   border-color: #d9d9d9;
   color: #121212
}

.ys-detail-page .ys-empty {
   background: #f5f6f7;
   color: #8c949d
}

.ys-detail-page .ys-detail-lower {
   position: relative;
   width: 100%;
   max-width: calc(1750px + 80px);
   margin: 0 auto 26px;
   padding: 0 40px;
   color: #111
}

.ys-detail-page .ys-detail-intro {
   max-width: none;
   margin: 0 0 24px;
   color: #0b0b0b;
   font-size: 16px;
   line-height: 1.5
}

.ys-detail-page .ys-detail-intro strong {
   font-weight: 500
}

.ys-detail-page .ys-detail-playlist {
   position: relative;
   max-width: none;
   padding-top: 24px;
   border-top: 1px solid #d9d9d9;
}

.ys-detail-page .ys-detail-playlist-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 0 28px
}

.ys-detail-page .ys-detail-playlist-head h2 {
   margin: 0;
   color: #0b0b0b;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.2;
   text-shadow: none
}

.ys-detail-page .ys-detail-sort {
   position: absolute;
   right: 0;
   top: 116px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 3px;
   min-height: 32px;
   padding: 3px 9px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   background: #fff;
   color: #2d2d2d;
   font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   cursor: pointer;
   box-shadow: none
}

.ys-detail-page .ys-detail-playlist .ys-source-tabs {
   margin: 0 0 16px
}

.ys-detail-page .ys-detail-playlist .ys-source {
   margin-top: 0
}

.ys-detail-page .ys-detail-playlist .ys-episodes a {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 42px;
   line-height: 42px;
   box-sizing: border-box;
   border-radius: 6px;
   font-size: 14px;
   border: 1px solid #d9d9d9;
}

.ys-detail-page .ys-section {
   width: 100%;
   max-width: calc(1750px + 80px);
   margin: 0 auto 34px;
   padding: 0 40px
}

.ys-detail-page .ys-card {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
   overflow: hidden
}

.ys-detail-page .ys-poster {
   border-radius: 8px 8px 0 0;
   box-shadow: none
}

.ys-detail-page .ys-card-meta {
   padding: 8px 10px 0;
   margin-top: 0
}


.ys-detail-page .ys-episodes a:hover,
.ys-detail-page .ys-episodes a.active {
   border: 1px solid #121212;
}


.ys-detail-page .ys-card h3 {
   color: #050505;
   font-size: 14px;
   font-weight: 650
}

.ys-detail-page .ys-card strong {
   color: #8c939b;
   font-size: 18px;
   font-weight: 650
}

.ys-card .ys-card-hover .ys-hover-head strong {
   color: #fff;
   font-size: 32px;
   font-weight: 600
}

.ys-detail-page .ys-card p {
   padding-bottom: 10px;
   color: #9aa1a8;
   font-size: 12px
}

@media (min-width:1400px) and (max-width:1750px) {

   .ys-detail-page .ys-breadcrumb,
   .ys-detail-page .ys-detail-hero,
   .ys-detail-page .ys-detail-lower,
   .ys-detail-page .ys-section {
      max-width: calc(1400px + 80px)
   }
}

@media (max-width:1100px) {

   .ys-detail-page .ys-breadcrumb,
   .ys-detail-page .ys-detail-hero,
   .ys-detail-page .ys-detail-lower,
   .ys-detail-page .ys-section {
      padding-left: 60px;
      padding-right: 60px
   }
}

body.ys-detail-page .ys-footer {
   border-top-color: #d9d9d9
}

html.ys-dark body.ys-detail-page {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-detail-page .ys-main-detail {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-detail-page .ys-panel,
html.ys-dark .ys-detail-page .ys-card {
   background: #202020;
   border-color: #303030;
}

html.ys-dark .ys-detail-page .ys-detail-hero {
   /* background: linear-gradient(180deg, #282828, #202020); */
   color: #f5f5f5
}

html.ys-dark .ys-detail-page .ys-detail-main h1,
html.ys-dark .ys-detail-page .ys-section-title h2,
html.ys-dark .ys-detail-page .ys-source h3,
html.ys-dark .ys-detail-page .ys-card h3 {
   color: #f5f5f5
}

html.ys-dark .ys-detail-page .ys-meta li {
   background: #333;
   border-color: var(--ys-line);
   color: #cfcfcf
}

html.ys-dark .ys-detail-page .ys-desc {
   color: #fff
}

html.ys-dark .ys-detail-page .ys-desc strong {
   color: rgba(255, 255, 255, 0.6);
}

html.ys-dark .ys-detail-page .ys-btn {
   background: #fff;
   color: #111
}

html.ys-dark .ys-detail-page .ys-btn .bofang-icon {
   background-image: url(../sunnafh/media/bofang-dark-icon.png);
}

html.ys-dark .ys-detail-page .ys-btn-secondary {
   background: #333;
   color: #fff;
   border-color: var(--ys-line)
}

html.ys-dark .ys-detail-page .ys-score {
   background: #1c1c1c;
   border-color: transparent
}

html.ys-dark .ys-detail-page .ys-score strong {
   color: #fff
}

html.ys-dark .ys-detail-page .ys-source-tab {
   background: #1f1f1f;
   border-color: #666;
   color: #e7e7e7
}

html.ys-dark .ys-detail-page .ys-source-tab:hover,
html.ys-dark .ys-detail-page .ys-source-tab.active {
   background: #fff;
   border-color: #999;
   color: #111
}

html.ys-dark .ys-detail-page .ys-episodes a {
   background: #1f1f1f;
   border-color: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.898)
}

html.ys-dark .ys-detail-page .ys-episodes a:hover,
html.ys-dark .ys-detail-page .ys-episodes a.active {
   border-color: #fff;
}

html.ys-dark .ys-detail-page .ys-detail-lower {
   color: #f5f5f5
}

html.ys-dark .ys-detail-page .ys-detail-intro,
html.ys-dark .ys-detail-page .ys-detail-playlist-head h2 {
   color: #f5f5f5
}

html.ys-dark .ys-detail-page .ys-detail-sort {
   background: #202020;
   border-color: #3a3a3a;
   color: #f5f5f5
}


html.ys-dark .ys-detail-page .ys-breadcrumb a {
   color: #ccc
}

body.ys-rank-page {
   background: #f3f3f3;
   color: #111
}

.ys-rank-main {
   min-height: auto;
   padding: 112px 0 66px;
   background: #f3f3f3;
   color: #111
}

.ys-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap
}

.ys-rank-page-grid {
   width: min(1680px, calc(100% - 112px));
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px
}

.ys-rank-page-card {
   min-width: 0;
   background: #fff;
   border-radius: 11px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
   overflow: hidden
}

.ys-rank-page-head {
   height: 60px;
   display: flex;
   align-items: center;
   padding: 0 20px;
   border-bottom: 1px solid #f0f0f0
}

.ys-rank-page-head h2 {
   margin: 0;
   color: #121212;
   font-size: 20px;
   line-height: 1;
   font-weight: 750
}

.ys-rank-page-list {
   padding: 12px 26px 18px
}

.ys-rank-page-item {
   display: grid;
   grid-template-columns: 30px 72px minmax(0, 1fr) 78px;
   gap: 14px;
   align-items: center;
   min-height: 116px;
   color: #111;
   border-bottom: 1px solid #f0f1f3;
   transition: transform .16s ease, background .16s ease
}

.ys-rank-page-item:last-child {
   border-bottom: 0
}

.ys-rank-page-item:hover {
   transform: translateY(-2px)
}

.ys-rank-page-no {
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: 7px;
   background: #f3f4f6;
   color: #777;
   font-size: 15px;
   line-height: 1;
   font-weight: 700
}

.ys-rank-page-item:nth-child(1) .ys-rank-page-no,
.ys-rank-page-item:nth-child(2) .ys-rank-page-no,
.ys-rank-page-item:nth-child(3) .ys-rank-page-no {
   width: auto;
   height: auto;
   background: transparent;
   border-radius: 0;
   font-size: 25px;
   font-weight: 800
}

.ys-rank-page-item:nth-child(1) .ys-rank-page-no {
   color: #ff174d
}

.ys-rank-page-item:nth-child(2) .ys-rank-page-no {
   color: #ff5635
}

.ys-rank-page-item:nth-child(3) .ys-rank-page-no {
   color: #ffb000
}

.ys-rank-page-item img {
   width: 72px;
   height: 96px;
   border-radius: 5px;
   object-fit: cover;
   background: #eee
}

.ys-rank-page-info {
   min-width: 0;
   display: block
}

.ys-rank-page-info strong {
   display: block;
   color: #050505;
   font-size: 16px;
   line-height: 1.28;
   font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ys-rank-page-info em {
   display: inline-flex;
   margin: 8px 0 9px;
   padding: 4px 7px;
   border: 1px solid #e3e4e8;
   border-radius: 4px;
   color: #8a8a8a;
   font-style: normal;
   font-size: 12px;
   line-height: 1
}

.ys-rank-page-info b {
   display: block;
   color: #777;
   font-size: 14px;
   line-height: 1;
   font-weight: 700
}

.ys-rank-page-hot {
   justify-self: end;
   color: #6e7680;
   font-size: 15px;
   line-height: 1;
   white-space: nowrap
}
.ys-rank-page-hot .fire-icon {
   display: inline-block;
   width: 12px;
   height: 12px;
   background: url(../sunnafh/media/fire-icon-gray.png) 0% 0% / 100% 100%;
}

/* .ys-rank-page-hot:before {
   content: "\e717";
   display: inline-block;
   margin-right: 4px;
   font-family: YSIconfont;
   font-size: 13px;
   color: #aaa;
   vertical-align: -1px
} */

.ys-rank-page-item:nth-child(n+4) {
   grid-template-columns: 30px minmax(0, 1fr) 78px;
   min-height: 64px;
   gap: 14px
}

.ys-rank-page-item:nth-child(n+4) img {
   display: none
}

.ys-rank-page-item:nth-child(n+4) .ys-rank-page-info em,
.ys-rank-page-item:nth-child(n+4) .ys-rank-page-info b {
   display: none
}

.ys-rank-page-item:nth-child(n+4) .ys-rank-page-info strong {
   font-size: 16px
}

html.ys-dark body.ys-rank-page {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-rank-main {
   background: #1f1f1f;
   color: #fff
}

html.ys-dark .ys-rank-page-card {
   background-color: rgba(255, 255, 255, 0.04);
   box-shadow: none;
}

html.ys-dark .ys-rank-page-head {
   border-bottom-color: #303030
}

html.ys-dark .ys-rank-page-head h2,
html.ys-dark .ys-rank-page-info strong {
   color: #f5f5f5
}

html.ys-dark .ys-rank-page-item {
   color: #f5f5f5;
   border-bottom-color: #303030
}

html.ys-dark .ys-rank-page-no {
   background: #333;
   color: #aaa
}

html.ys-dark .ys-rank-page-info em {
   border-color: #3a3a3a;
   color: #aaa
}

html.ys-dark .ys-rank-page-info b,
html.ys-dark .ys-rank-page-hot {
   color: #aaa
}

.ys-footer {
   position: relative;
   overflow: hidden;
   margin-top: 0;
   padding: 54px 0 30px;
   background-color: #f4f4f4;
   color: #121212;
   border-top: 1px solid #dcdcdc
}

.ys-footer:before {
   /* content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(247, 247, 247, .94) 0, rgba(247, 247, 247, .8) 46%, rgba(247, 247, 247, .94) 100%);
   z-index: 1 */
}

.ys-footer-bg {
   position: absolute;
   left: 50%;
   bottom: -76px;
   width: min(860px, 70vw);
   height: 360px;
   transform: translateX(-50%);
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   opacity: .11;
   filter: grayscale(1) blur(1px);
   z-index: 0
}

.ys-footer-inner {
   position: relative;
   z-index: 2;
   width: min(1320px, calc(100% - 88px));
   margin: 0 auto
}

.ys-footer-panels {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 46px
}

.ys-footer-panel h2 {
   margin: 0 0 18px;
   text-align: center;
   color: #0b0b0b;
   font-size: 16px;
   line-height: 1.2;
   font-weight: 700
}

.ys-footer-list {
   min-height: 118px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px 32px;
   align-content: center;
   padding: 24px 48px;
   border-radius: 9px;
   background: rgba(230, 230, 230, .64);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42)
}

.ys-footer-list-five a:last-child {
   grid-column: 2
}

.ys-footer-list a {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #6e6e6e;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap
}

.ys-footer-list a:hover {
   color: #111
}

.ys-footer-ico {
   position: relative;
   display: inline-block;
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   color: #878787
}

.ys-footer-ico:before,
.ys-footer-ico:after {
   content: "";
   position: absolute;
   box-sizing: border-box
}

.ys-footer-ico-cat:before {
   inset: 2px;
   border: 2px solid currentColor;
   border-radius: 50%
}

.ys-footer-ico-cat:after {
   left: 8px;
   top: 3px;
   width: 3px;
   height: 3px;
   background: currentColor;
   border-radius: 50%;
   box-shadow: -4px 5px 0 currentColor, 4px 5px 0 currentColor, 0 9px 0 currentColor
}

.ys-footer-ico-new:before {
   left: 3px;
   top: 3px;
   width: 12px;
   height: 12px;
   border: 2px solid currentColor;
   border-radius: 50%
}

.ys-footer-ico-new:after {
   right: 0;
   bottom: 1px;
   width: 7px;
   height: 7px;
   border-left: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(-45deg)
}

.ys-footer-ico-hot:before {
   left: 5px;
   top: 1px;
   width: 9px;
   height: 15px;
   border: 2px solid currentColor;
   border-radius: 50% 50% 55% 55%;
   transform: rotate(18deg)
}

.ys-footer-ico-score:before {
   left: 2px;
   top: 2px;
   width: 14px;
   height: 14px;
   border: 2px solid currentColor;
   border-radius: 4px;
   transform: rotate(45deg)
}

.ys-footer-ico-score:after {
   left: 5px;
   top: 8px;
   width: 8px;
   height: 2px;
   background: currentColor
}

.ys-footer-ico-soon:before {
   left: 4px;
   top: 1px;
   width: 10px;
   height: 16px;
   border-top: 2px solid currentColor;
   border-bottom: 2px solid currentColor
}

.ys-footer-ico-soon:after {
   left: 5px;
   top: 5px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid currentColor;
   filter: drop-shadow(0 4px 0 currentColor)
}

.ys-footer-ico-star:before {
   left: 1px;
   top: 1px;
   width: 16px;
   height: 16px;
   background: currentColor;
   clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 91%, 50% 70%, 21% 91%, 32% 55%, 2% 34%, 39% 34%)
}

.ys-footer-ico-star:after {
   left: 5px;
   top: 5px;
   width: 8px;
   height: 8px;
   background: rgba(230, 230, 230, .64);
   clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 91%, 50% 70%, 21% 91%, 32% 55%, 2% 34%, 39% 34%)
}

.ys-footer-ico-history:before {
   inset: 1px;
   border: 2px solid currentColor;
   border-radius: 50%
}

.ys-footer-ico-history:after {
   left: 8px;
   top: 4px;
   width: 6px;
   height: 6px;
   border-left: 2px solid currentColor;
   border-bottom: 2px solid currentColor
}

.ys-footer-ico-person:before {
   left: 6px;
   top: 2px;
   width: 6px;
   height: 6px;
   border: 2px solid currentColor;
   border-radius: 50%
}

.ys-footer-ico-person:after {
   left: 3px;
   right: 3px;
   bottom: 2px;
   height: 7px;
   border: 2px solid currentColor;
   border-radius: 9px 9px 0 0;
   border-bottom: 0
}

.ys-footer-ico-gear:before {
   inset: 2px;
   border: 2px solid currentColor;
   border-radius: 50%
}

.ys-footer-ico-gear:after {
   left: 8px;
   top: 0;
   width: 2px;
   height: 18px;
   background: currentColor;
   box-shadow: 0 0 0 0 currentColor;
   transform: rotate(45deg)
}

.ys-footer-bottom {
   margin-top: 54px;
   padding-top: 30px;
   border-top: 1px solid rgba(0, 0, 0, .09);
   text-align: center;
   color: #7a7a7a
}

.ys-footer-links {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   flex-wrap: wrap;
   margin-bottom: 18px
}

.ys-footer-links a {
   position: relative;
   padding: 0 34px;
   color: #777;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.2
}

.ys-footer-links a+a:before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 1px;
   height: 18px;
   background: #d0d0d0;
   transform: translateY(-50%)
}

.ys-footer-links a:hover {
   color: #111
}

.ys-footer-bottom p {
   margin: 0;
   font-size: 14px;
   color: #777
}

.ys-float-actions {
   position: fixed;
   right: 24px;
   bottom: 42px;
   z-index: 60;
   display: flex;
   flex-direction: column;
   gap: 20px
}

.ys-float-btn {
   width: 52px;
   height: 52px;
   border: 0;
   border-radius: 50%;
   background-color: #fff;
   color: #121212;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: 0.5px solid;
   box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
   border-color: rgb(244, 244, 244);
   transition: 0.3s;

}

.ys-float-btn .icon-gotop{
   transform: scale(1.25);
   font-size: 24px;
}

.ys-float-btn .icon-rj {
   transform: scale(1.25);
   font-size: 20px;
}

.ys-float-btn:hover {
   border-color: rgb(206, 206, 206);
}

.ys-float-btn em {
   font-style: normal;
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
   margin-top: 2px
}

.ys-ico-moon {
   width: 21px;
   height: 21px;
   border: 2px solid #111;
   border-radius: 50%;
   position: relative;
   display: block
}

.ys-ico-moon:after {
   content: "";
   position: absolute;
   right: -5px;
   top: -5px;
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: #fff
}

.ys-ico-top {
   width: 19px;
   height: 21px;
   position: relative;
   display: block
}

.ys-ico-top:before {
   content: "";
   position: absolute;
   left: 8px;
   top: 2px;
   width: 2px;
   height: 18px;
   background: #111;
   border-radius: 2px
}

.ys-ico-top:after {
   content: "";
   position: absolute;
   left: 4px;
   top: 2px;
   width: 12px;
   height: 12px;
   border-left: 2px solid #111;
   border-top: 2px solid #111;
   transform: rotate(45deg);
   border-radius: 2px
}

body.ys-login-lock {
   overflow: hidden
}

.ys-login-modal {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: none;
   color: #111
}

.ys-login-modal.is-open {
   display: block
}

.ys-login-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .62);
   backdrop-filter: blur(1px)
}

.ys-login-dialog {
   position: absolute;
   left: 50%;
   top: 50%;
   width: min(560px, calc(100% - 36px));
   min-height: 430px;
   transform: translate(-50%, -50%);
   box-sizing: border-box;
   padding: 70px 88px 50px;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .28)
}

.ys-login-close {
   position: absolute;
   right: 24px;
   top: 24px;
   width: 30px;
   height: 30px;
   border: 0;
   background: transparent;
   cursor: pointer
}

.ys-login-close:before,
.ys-login-close:after {
   content: "";
   position: absolute;
   left: 3px;
   top: 14px;
   width: 25px;
   height: 2px;
   background: #777;
   border-radius: 2px
}

.ys-login-close:before {
   transform: rotate(45deg)
}

.ys-login-close:after {
   transform: rotate(-45deg)
}

.ys-login-close:hover:before,
.ys-login-close:hover:after {
   background: #111
}

.ys-login-tabs {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 42px;
   border-bottom: 1px solid #dedede
}

.ys-login-tabs button {
   position: relative;
   width: 170px;
   height: 46px;
   border: 0;
   background: transparent;
   color: #777;
   font-size: 18px;
   font-weight: 700;
   line-height: 46px;
   cursor: pointer
}

.ys-login-tabs button.active {
   color: #111
}

.ys-login-tabs button.active:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 2px;
   background: #111;
   border-radius: 2px
}

.ys-login-pane {
   display: none
}

.ys-login-pane.active {
   display: block
}

.ys-login-field {
   display: flex;
   align-items: center;
   height: 54px;
   border-bottom: 1px solid #e2e2e2
}

.ys-login-field+.ys-login-field {
   margin-top: 12px
}

.ys-login-field span {
   padding-right: 12px;
   color: #111;
   font-size: 18px;
   line-height: 1
}

.ys-login-field i {
   width: 1px;
   height: 20px;
   margin-right: 20px;
   background: #e4e4e4
}

.ys-login-field input {
   min-width: 0;
   flex: 1;
   border: 0;
   outline: 0;
   background: transparent;
   color: #111;
   font-size: 18px
}

.ys-login-field input::placeholder {
   color: #8f8f8f
}

.ys-login-field button {
   flex: 0 0 auto;
   border: 0;
   background: transparent;
   color: #111;
   font-size: 15px;
   line-height: 1;
   cursor: pointer
}

.ys-login-submit {
   width: 100%;
   height: 48px;
   margin-top: 46px;
   border: 0;
   border-radius: 6px;
   background: #111;
   color: #fff;
   font-size: 17px;
   font-weight: 700;
   letter-spacing: 0;
   cursor: pointer
}

.ys-login-submit:hover {
   background: #000
}

.ys-login-submit:disabled {
   opacity: .72;
   cursor: not-allowed
}

.ys-login-dialog p {
   margin: 18px 0 0;
   text-align: center;
   color: #777;
   font-size: 15px;
   line-height: 1.4
}

.ys-login-forgot {
   display: block;
   margin: 18px 0 0;
   text-align: center;
   color: #777;
   font-size: 15px;
   line-height: 1.4
}

.ys-login-forgot:hover {
   color: #111
}

.ys-login-error {
   min-height: 20px;
   margin: 12px 0 0 !important;
   color: #ef4444 !important;
   text-align: center;
   font-size: 13px !important;
   line-height: 1.4 !important
}

html.ys-dark .ys-login-modal {
   color: #f5f5f5
}

html.ys-dark .ys-login-backdrop {
   background: rgba(0, 0, 0, .72);
   backdrop-filter: blur(3px)
}

html.ys-dark .ys-login-dialog {
   width: min(582px, calc(100% - 48px));
   min-height: 484px;
   padding: 80px 115px 42px;
   border-radius: 8px;
   background: #222;
   color: #f5f5f5;
   box-shadow: 0 28px 90px rgba(0, 0, 0, .55)
}

html.ys-dark .ys-login-close {
   right: 26px;
   top: 26px
}

html.ys-dark .ys-login-close:before,
html.ys-dark .ys-login-close:after {
   background: #f2f2f2
}

html.ys-dark .ys-login-close:hover:before,
html.ys-dark .ys-login-close:hover:after {
   background: #fff
}

html.ys-dark .ys-login-tabs {
   margin-bottom: 40px;
   border-bottom-color: #3c3c3c
}

html.ys-dark .ys-login-tabs button {
   height: 48px;
   color: #999;
   font-size: 18px;
   line-height: 48px
}

html.ys-dark .ys-login-tabs button.active {
   color: #fff
}

html.ys-dark .ys-login-tabs button.active:after {
   background: #fff
}

html.ys-dark .ys-login-field {
   height: 48px;
   border-bottom-color: #373737
}

html.ys-dark .ys-login-field+.ys-login-field {
   margin-top: 12px
}

html.ys-dark .ys-login-field span {
   color: #fff
}

html.ys-dark .ys-login-field i {
   background: #373737
}

html.ys-dark .ys-login-field input {
   color: #f5f5f5
}

html.ys-dark .ys-login-field input::placeholder {
   color: #8d8d8d
}

html.ys-dark .ys-login-field button {
   color: #fff
}

html.ys-dark .ys-login-submit {
   height: 48px;
   margin-top: 28px;
   padding: 1px 6px;
   border-radius: 6px;
   background: #fff;
   color: #121212;
   font-family: Arial, sans-serif;
   font-size: 18px;
   font-weight: 400
}

html.ys-dark .ys-login-submit:hover {
   background: #f4f4f4
}

html.ys-dark .ys-login-dialog p,
html.ys-dark .ys-login-forgot {
   margin-top: 16px;
   color: rgba(255, 255, 255, .6);
   font-size: 16px;
   line-height: 16px
}

html.ys-dark .ys-login-forgot:hover {
   color: #fff
}

html.ys-dark body {
   background: #1f1f1f;
   color: #f5f5f5
}

html.ys-dark .ys-header {
   background-color: #121212;
}

html.ys-dark .ys-menu a {
   color: rgba(255, 255, 255, .85)
}

html.ys-dark .ys-menu a.active,
html.ys-dark .ys-menu a:hover {
   color: #fff
}

html.ys-dark .ys-logo-mark:before,
html.ys-dark .ys-logo-mark:after {
   background: #fff;
   box-shadow: 0 2px 0 rgba(255, 255, 255, .22)
}

html.ys-dark .ys-logo-text strong,
html.ys-dark .ys-logo-text em,
html.ys-dark .ys-tools a {
   color: #fff
}

html.ys-dark .ys-search {
   color: rgb(255, 255, 255);
   background: rgba(255, 255, 255, 0.08);
}

html.ys-dark .ys-search input {
   color: #fff
}

html.ys-dark .ys-search input::placeholder {
   color: rgb(255, 255, 255, 0.4);
}

html.ys-dark .ys-search button:before {
   border-color: #aaa
}

html.ys-dark .ys-search button:after {
   background: #aaa
}

html.ys-dark .ys-ico-rank,
html.ys-dark .ys-ico-clock,
html.ys-dark .ys-ico-chat,
html.ys-dark .ys-ico-user {
   border-color: #f7f7f7
}

html.ys-dark .ys-ico-rank:before,
html.ys-dark .ys-ico-clock:before,
html.ys-dark .ys-ico-clock:after {
   background: #f7f7f7
}

html.ys-dark .ys-ico-rank:before {
   box-shadow: 4px -3px 0 #f7f7f7, 8px 1px 0 #f7f7f7
}

html.ys-dark .ys-ico-chat:after {
   border-color: transparent transparent transparent #f7f7f7
}

html.ys-dark .ys-ico-user:before,
html.ys-dark .ys-ico-user:after {
   border-color: #f7f7f7
}

html.ys-dark .ys-ico-list:before {
   background: #f7f7f7;
   box-shadow: 0 6px 0 #f7f7f7, 0 12px 0 #f7f7f7
}

html.ys-dark .ys-ico-list:after {
   border-left-color: #f7f7f7;
   filter: drop-shadow(0 6px 0 #f7f7f7) drop-shadow(0 6px 0 #f7f7f7)
}

html.ys-dark .ys-tools .ys-login-link {
   border-color: #fff
}

html.ys-dark .ys-tools .ys-login-link:hover {
   background-color: #fff;
   color: #121212;
}

html.ys-dark .ys-main-home {
   color: rgb(255, 255, 255);
   background-color: #111318;
}

html.ys-dark .ys2-card .ys2-card-body h3 {
   color: #ccc;
}

html.ys-dark .ys2-card:hover .ys2-card-body h3 {
   color: #fff;
}

html.ys-dark .ys-section-title .chev {
   border-right: 3px solid rgba(255, 255, 255, 0.4);
   border-top: 3px solid rgba(255, 255, 255, 0.4);
}

html.ys-dark .ys-trailer,
html.ys-dark .ys-trailer-head h2,
html.ys-dark .ys-trailer-title {
   color: #f5f5f5
}

html.ys-dark .ys-trailer-reserve {
   border-color: #f5f5f5;
   color: #f5f5f5
}

html.ys-dark .ys-trailer-reserve:before {
   background: #f5f5f5
}

html.ys-dark .ys-trailer-showcase:before,
html.ys-dark .ys-trailer-showcase:after,
html.ys-dark .ys-trailer-art:before,
html.ys-dark .ys-trailer-art:after {
   display: none
}

html.ys-dark .ys-trailer-nav {
   background: rgba(22, 22, 22, .72)
}

html.ys-dark .ys-trailer-nav:hover {
   background: #222
}

html.ys-dark .ys-trailer-nav:before {
   border-color: #fff
}

html.ys-dark .ys-home-board,
html.ys-dark .ys-home-board .ys-section-title h2,
html.ys-dark .ys-rank-item,
html.ys-dark .ys-card h3,
html.ys-dark .ys-rank-info strong {
   color: #f5f5f5
}

html.ys-dark .ys-home-board .ys-card,
html.ys-dark .ys-rank-card,
html.ys-dark .ys-home-board .ys-section-action {
   color: rgb(255, 255, 255);
   border-color: rgba(255, 255, 255, 0.12);
}

html.ys-dark .ys-home-board .ys-section-action:hover {
   border-color: rgba(255, 255, 255);
}

html.ys-dark .ys-rank-item+.ys-rank-item {
   border-top-color: #303030
}

html.ys-dark .ys-rank-no {
   background: #2b2b2b;
   color: #aaa
}

html.ys-dark .ys-rank-info em {
   border-color: #3a3a3a;
   color: #aaa
}

html.ys-dark .ys-rank-info b,
html.ys-dark .ys-rank-hot,
html.ys-dark .ys-card strong,
html.ys-dark .ys-card p {
   color: #aaa
}

html.ys-dark .ys-float-btn {
   background: #333;
   color: #fff;
   border-color: rgba(255, 255, 255, 0.08);
}

html.ys-dark .ys-float-btn:hover {
   border-color: rgba(255, 255, 255, 0.2);
}

html.ys-dark .ys-ico-moon {
   border-color: #fff
}

html.ys-dark .ys-ico-moon:after {
   background: #242424
}

html.ys-dark .ys-ico-top:before {
   background: #fff
}

html.ys-dark .ys-ico-top:after {
   border-color: #fff
}

html.ys-dark .ys-footer {
   background-image: url(../sunnafh/media/light-card-bg.fea1f76c-dark.png);
   border-top-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.6);
   background-color: rgb(31, 31, 31);
}

html.ys-dark .ys-footer:before {
   /* background: linear-gradient(180deg, rgba(20, 20, 20, .9) 0, rgba(20, 20, 20, .78) 48%, rgba(20, 20, 20, .93) 100%) */
}

html.ys-dark .ys-footer-panel h2 {
   color: #f5f5f5
}

html.ys-dark .ys-footer-list {
   background: rgba(42, 42, 42, .72);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
}

html.ys-dark .ys-footer-list a,
html.ys-dark .ys-footer-links a,
html.ys-dark .ys-footer-bottom p {
   color: #a9a9a9
}

html.ys-dark .ys-footer-list a:hover,
html.ys-dark .ys-footer-links a:hover {
   color: #fff
}

html.ys-dark .ys-footer-bottom {
   border-top-color: rgba(255, 255, 255, .08)
}

html.ys-dark .ys-footer-links a+a:before {
   background: #383838
}

html.ys-dark .ys-type-page .ys-type-sortlinks a.active,html.ys-dark .ys-type-page .ys-type-sortlinks a:hover {
   color: #fff;
}


html.ys-dark  .ys-filter-row strong {
   border-color: #fff;
   color: #fff;
}


html.ys-dark  .ys-detail-page .ys-detail-stats strong {
   color: #fff;
}

html.ys-dark .ys-detail-page .ys-detail-stats span.ys-stat-icon {
   color: #fff;
}


html.ys-dark .ys-detail-page .ys-detail-playlist {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width:1100px) {
   .ys-tools {
      display: none
   }

   .ys-menu {
      gap: 26px
   }

   .ys-search {
      width: 250px
   }

   .ys-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }

   .ys-home-board {
      grid-template-columns: 1fr
   }

   .ys-latest-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }

   .ys-detail-hero {
      grid-template-columns: 210px 1fr
   }

   .ys-detail-side {
      grid-column: 1/-1
   }

   .ys-player-layout {
      grid-template-columns: 1fr
   }
}

@media (max-width:760px) {

   .ys-wrap,
   .ys-section,
   .ys-breadcrumb,
   .ys-detail-hero,
   .ys-playlist,
   .ys-player-layout,
   .ys-filter,
   .ys-footer-grid {
      width: calc(100% - 48px)
   }

   .ys-main-home {
      padding-top: 62px
   }

   .ys-header {
      height: 62px
   }

   .ys-nav {
      height: 62px;
      padding: 0 20px;
      gap: 16px
   }

   .ys-logo-text strong {
      font-size: 20px
   }

   .ys-logo-text em {
      font-size: 10px
   }

   .ys-menu {
      gap: 6px
   }

   .ys-menu a {
      display: none
   }

   .ys-menu a.active {
      display: block;
      font-size: 20px
   }

   .ys-menu a.active:after {
      content: "";
      display: inline-block;
      margin-left: 5px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 6px solid #111;
      vertical-align: middle
   }

   .ys-search {
      width: 130px;
      height: 36px
   }

   .ys-search button {
      display: none
   }

   .ys-hero {
      min-height: 330px;
      margin-bottom: 36px
   }

   .ys-hero-copy {
      width: calc(100% - 120px);
      padding-top: 178px;
      margin-left: 60px
   }

   .ys-hero-copy h1 {
      font-size: 24px
   }

   .ys-hero-copy p {
      font-size: 12px
   }

   .ys-hero-arrow {
      top: 112px
   }

   .ys-dots {
      bottom: 112px
   }

   .ys-section-head {
      margin-bottom: 12px
   }

   .ys-section-title h2,
   .ys-section-head h1 {
      font-size: 24px
   }

   .ys-grid,
   .ys-latest-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px
   }

   .ys-home-board .ys-section-title h2 {
      font-size: 24px
   }

   .ys-rank-item {
      grid-template-columns: 24px 0 minmax(0, 1fr);
      gap: 0
   }

   .ys-rank-item:nth-child(-n+3),
   .ys-rank-item:hover {
      grid-template-columns: 24px 52px minmax(0, 1fr);
      gap: 9px;
      min-height: 76px
   }

   .ys-rank-hot {
      display: none
   }

   .ys-rank-item img {
      width: 0;
      height: 0
   }

   .ys-rank-item:nth-child(-n+3) img,
   .ys-rank-item:hover img {
      width: 52px;
      height: 68px
   }

   .ys-card h3 {
      font-size: 16px
   }

   .ys-float-actions {
      right: 18px;
      bottom: 34px;
      gap: 10px
   }

   .ys-float-btn {
      width: 48px;
      height: 48px
   }

   .ys-trailer {
      display: block
   }

   .ys-trailer h2 {
      margin-bottom: 10px
   }

   .ys-trailer-box {
      height: 198px
   }

   .ys-detail-hero {
      grid-template-columns: 120px 1fr;
      gap: 16px;
      padding: 16px
   }

   .ys-detail-main h1 {
      font-size: 25px
   }

   .ys-detail-side {
      display: none
   }

   .ys-player-box {
      min-height: 260px
   }

   .ys-player-box .MacPlayer,
   .ys-player-box iframe,
   .ys-player-box video {
      height: 260px !important
   }

   .ys-sidebar {
      background: #242424;
      color: #fff
   }

   .ys-footer-grid {
      display: block
   }

   .ys-footer-links {
      margin-top: 14px
   }
}

@media (max-width:760px) {
   .ys-type-page .ys-type-sortbar {
      display: block;
      margin-bottom: 12px;
      font-size: 16px;
      line-height: 24px
   }

   .ys-type-page .ys-type-sortlinks {
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none
   }

   .ys-type-page .ys-type-sortlinks::-webkit-scrollbar {
      display: none
   }

   .ys-type-page .ys-type-sortlinks a+a:before {
      height: 16px;
      margin: 0 18px
   }
}

@media (max-width:430px) {

   .ys-wrap,
   .ys-section,
   .ys-breadcrumb,
   .ys-detail-hero,
   .ys-playlist,
   .ys-player-layout,
   .ys-filter,
   .ys-footer-grid {
      width: calc(100% - 36px)
   }

   .ys-nav {
      padding: 0 18px
   }

   .ys-logo-mark {
      width: 32px
   }

   .ys-logo {
      min-width: 130px
   }

   .ys-search {
      margin-left: auto;
      width: 120px
   }

   .ys-hero-copy {
      width: calc(100% - 120px);
      margin-left: 60px
   }

   .ys-section {
      margin-bottom: 44px
   }

   .ys-poster {
      border-radius: 7px
   }

   .ys-detail-hero {
      display: block
   }

   .ys-detail-poster {
      width: 160px;
      margin-bottom: 16px
   }

   .ys-filter-row {
      display: block
   }

   .ys-filter-row strong {
      display: block;
      width: auto;
      margin-bottom: 8px
   }

   .ys-footer {
      display: none
   }
}

@media (max-width:760px) {

   .ys-detail-page .ys-breadcrumb,
   .ys-detail-page .ys-detail-lower,
   .ys-detail-page .ys-section {
      width: calc(100% - 48px);
      max-width: none;
      padding-left: 0;
      padding-right: 0
   }

   .ys-detail-page .ys-detail-hero {
      display: grid;
      width: calc(100% - 48px);
      max-width: none;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 16px;
      padding: 16px
   }

   .ys-detail-page .ys-detail-poster {
      flex: auto;
      margin-right: 0
   }

   .ys-detail-page .ys-detail-poster img {
      height: auto;
      aspect-ratio: 2/3
   }

   .ys-detail-page .ys-detail-main {
      display: block
   }

   .ys-detail-page .ys-detail-main h1 {
      white-space: normal
   }

   .ys-detail-page .ys-detail-sort {
      position: static;
      margin-left: auto
   }

   .ys-detail-page .ys-detail-playlist-head {
      gap: 12px
   }
}

@media (max-width:430px) {

   .ys-detail-page .ys-breadcrumb,
   .ys-detail-page .ys-detail-hero,
   .ys-detail-page .ys-detail-lower,
   .ys-detail-page .ys-section {
      width: calc(100% - 36px)
   }

   .ys-detail-page .ys-detail-hero {
      display: block
   }

   .ys-detail-page .ys-detail-poster {
      width: 160px;
      margin-bottom: 16px
   }
}

.ys-footer {
   display: block;
   background-image: url("../sunnafh/media/light-card-bg.fea1f76c.png");
   background-size: cover;
   background-position: center center;
}

@media (max-width:1100px) {
   .ys-footer-panels {
      gap: 20px
   }

   .ys-footer-list {
      padding: 24px 28px;
      gap: 22px 24px
   }
}

@media (max-width:1200px) {
   .ys-rank-page-grid {
      width: min(980px, calc(100% - 64px));
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px
   }

   .ys-rank-main {
      padding-top: 96px
   }
}

@media (max-width:760px) {
   .ys-rank-main {
      padding: 82px 0 42px
   }

   .ys-rank-page-grid {
      width: calc(100% - 32px);
      grid-template-columns: 1fr;
      gap: 18px
   }

   .ys-rank-page-head {
      height: 58px;
      padding: 0 18px
   }

   .ys-rank-page-head h2 {
      font-size: 22px
   }

   .ys-rank-page-list {
      padding: 8px 18px 12px
   }

   .ys-rank-page-item {
      grid-template-columns: 28px 58px minmax(0, 1fr);
      gap: 10px;
      min-height: 90px
   }

   .ys-rank-page-hot {
      display: none
   }

   .ys-rank-page-item img {
      width: 58px;
      height: 78px
   }

   .ys-rank-page-info strong,
   .ys-rank-page-item:nth-child(n+4) .ys-rank-page-info strong {
      font-size: 14px
   }

   .ys-rank-page-info em {
      margin: 6px 0 7px;
      font-size: 11px
   }

   .ys-rank-page-item:nth-child(n+4) {
      grid-template-columns: 28px minmax(0, 1fr);
      min-height: 52px
   }
}

@media (max-width:760px) {
   .ys-footer {
      margin-top: 42px;
      padding: 42px 0 28px
   }

   .ys-footer-inner {
      width: calc(100% - 48px)
   }

   .ys-footer-panels {
      grid-template-columns: 1fr;
      gap: 22px
   }

   .ys-footer-panel h2 {
      margin-bottom: 12px
   }

   .ys-footer-list {
      min-height: 0;
      padding: 22px 28px
   }

   .ys-footer-bottom {
      margin-top: 36px;
      padding-top: 24px
   }

   .ys-footer-links {
      gap: 14px;
      margin-top: 0
   }

   .ys-footer-links a {
      padding: 0 14px
   }

   .ys-footer-bg {
      width: 110vw;
      height: 300px;
      bottom: -40px
   }
}

@media (max-width:430px) {
   .ys-footer-inner {
      width: calc(100% - 36px)
   }

   .ys-footer-list {
      grid-template-columns: 1fr 1fr;
      padding: 20px 22px;
      gap: 18px 20px
   }

   .ys-footer-list a {
      font-size: 14px
   }

   .ys-footer-links a {
      font-size: 14px;
      padding: 0 10px
   }
}

@media (max-width:560px) {
   .ys-login-dialog {
      width: calc(100% - 28px);
      min-height: 390px;
      padding: 58px 28px 38px
   }

   .ys-login-close {
      right: 16px;
      top: 16px
   }

   .ys-login-tabs {
      margin-bottom: 30px
   }

   .ys-login-tabs button {
      width: 132px;
      font-size: 17px
   }

   .ys-login-field input {
      font-size: 16px
   }

   .ys-login-submit {
      margin-top: 34px
   }
}

@media (max-width:1100px) {
   .ys-trailer-showcase {
      grid-template-columns: 1fr;
      gap: 18px
   }

   .ys-trailer-player,
   .ys-trailer-art {
      height: 330px;
      min-height: 330px
   }

   .ys-trailer-art {
      display: none
   }
}

@media (max-width:760px) {
   .ys-trailer-section {
      margin-bottom: 40px
   }

   .ys-trailer-head {
      display: block;
      margin-bottom: 14px
   }

   .ys-trailer-head h2 {
      margin-bottom: 8px;
      font-size: 24px
   }

   .ys-trailer-title {
      display: flex;
      margin-bottom: 10px
   }

   .ys-trailer-title strong {
      max-width: 100%;
      font-size: 17px
   }

   .ys-trailer-title em {
      font-size: 15px
   }

   .ys-trailer-player {
      height: 220px;
      border-radius: 8px
   }

   .ys-trailer-mark {
      left: 16px;
      top: 12px;
      max-width: 72%;
      font-size: 17px
   }

   .ys-trailer-controls {
      left: 16px;
      right: 16px;
      bottom: 16px
   }
}

/* Target-site asset overrides: fonts, logo, iconfont and footer media. */
.ys-logo {
   height: 72px;
   background: url("/template/ys002_rou_pc/asset/img/logo-mobile-white.png") left center/150px auto no-repeat
}

html.ys-dark .ys-logo {
   filter:invert(1)
}

.ys-logo>* {
   display: none !important
}

.ys-menu a {
   font-family: SanFranciscoBold, "PingFang SC", YSXFont, sans-serif
}

.ys-search button:before,
.ys-search button:after,
.ys-ico:before,
.ys-ico:after,
.ys-footer-ico:before,
.ys-footer-ico:after,
.ys-ico-moon:after,
.ys-ico-top:before,
.ys-ico-top:after {
   content: none !important;
   display: none !important
}

.ys-search button {
   display: grid;
   place-items: center;
   color: #777;
   font-family: YSIconfont !important;
   font-size: 20px;
   line-height: 1
}

.ys-search button:before {
   content: "\e639" !important;
   display: block !important;
   position: static !important;
   width: auto !important;
   height: auto !important;
   border: 0 !important;
   background: none !important;
   transform: none !important;
   border-radius: 0 !important;
   font-family: YSIconfont !important
}

.ys-ico,
.ys-footer-ico,
.ys-ico-moon,
.ys-ico-top {
   display: inline-grid;
   place-items: center;
   position: relative;
   width: 20px;
   height: 20px;
   border: 0 !important;
   border-radius: 0 !important;
   background: none !important;
   color: currentColor;
   font-family: YSIconfont !important;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   transform: none !important
}

.ys-ico:before,
.ys-footer-ico:before,
.ys-ico-moon:before,
.ys-ico-top:before {
   display: block !important;
   position: static !important;
   width: auto !important;
   height: auto !important;
   border: 0 !important;
   background: none !important;
   box-shadow: none !important;
   filter: none !important;
   clip-path: none !important;
   transform: none !important;
   font-family: YSIconfont !important;
   font-size: 20px;
   line-height: 1;
   color: currentColor
}

.ys-ico-rank:before {
   content: "\e64d" !important
}

.ys-ico-clock:before {
   content: "\e6c1" !important
}

.ys-ico-chat:before {
   content: "\e6bf" !important
}

.ys-ico-list:before {
   content: "\e70a" !important
}

.ys-ico-user:before {
   content: "\e6fa" !important
}

.ys-tools .ys-login-link .ys-ico-user:before {
   font-size: 18px
}

.ys-footer-list-five a:nth-child(1) .ys-footer-ico-cat:before {
   content: "\e71d" !important
}

.ys-footer-list-five a:nth-child(2) .ys-footer-ico-cat:before {
   content: "\e71c" !important
}

.ys-footer-list-five a:nth-child(3) .ys-footer-ico-cat:before {
   content: "\e71b" !important
}

.ys-footer-list-five a:nth-child(4) .ys-footer-ico-cat:before {
   content: "\e71a" !important
}

.ys-footer-list-five a:nth-child(5) .ys-footer-ico-cat:before {
   content: "\e719" !important
}

.ys-footer-ico-new:before {
   content: "\e718" !important
}

.ys-footer-ico-hot:before {
   content: "\e717" !important
}

.ys-footer-ico-score:before {
   content: "\e716" !important
}

.ys-footer-ico-soon:before {
   content: "\e715" !important
}

.ys-footer-ico-star:before {
   content: "\e71e" !important
}

.ys-footer-ico-history:before {
   content: "\e714" !important
}

.ys-footer-ico-person:before {
   content: "\e713" !important
}

.ys-footer-ico-gear:before {
   content: "\e712" !important
}

.ys-ico-moon:before {
   content: "\e6de" !important;
   font-size: 24px
}

.ys-ico-top:before {
   content: "\e6e6" !important;
   font-size: 22px
}

.ys-footer:before {

}

.ys-footer-bg {
   /* background-image: url("../sunnafh/media/dark-card-bg.8f665c3f.png");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat */
}

html.ys-dark .ys-footer:before {
   background: linear-gradient(180deg, rgba(20, 20, 20, .9) 0, rgba(20, 20, 20, .78) 48%, rgba(20, 20, 20, .93) 100%), url("../sunnafh/media/dark-mask-bg.92a593da.png") center center/cover no-repeat
}

html.ys-dark .ys-search button {
   color: rgba(255, 255, 255, .4)
}

html.ys-dark .ys-ico,
html.ys-dark .ys-footer-ico,
html.ys-dark .ys-ico-moon,
html.ys-dark .ys-ico-top {
   border: 0 !important;
   color: currentColor
}

@media (min-width:761px) {

   .ys-type-page .ys-breadcrumb,
   .ys-type-page .ys-filter,
   .ys-type-page .ys-section,
   .ys-type-page .mac-paging {
      width: calc(100% - 64px);
      max-width: none
   }
}

@media (max-width:760px) {
   .ys-logo {
      height: 62px;
      background-size: 128px auto
   }

   .ys-menu a.active:after {
      font-family: YSIconfont;
      content: "\e709";
      border: 0;
      margin-left: 6px;
      font-size: 8px;
      vertical-align: middle
   }
}
/* 帮助中心 / 常见问题 / 意见反馈 / 隐私政策 */
body.ys-doc-page {
   background: #f3f3f3;
   color: #111
}

.ys-doc-main {
   padding: 112px 0 66px
}

.ys-doc-layout {
   width: min(1100px, calc(100% - 80px));
   margin: 0 auto;
   display: grid;
   grid-template-columns: 200px minmax(0, 1fr);
   gap: 24px;
   align-items: start
}

.ys-doc-nav {
   position: sticky;
   top: 96px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 10px;
   background: #fff;
   border-radius: 11px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .05)
}

.ys-doc-nav a {
   padding: 11px 16px;
   border-radius: 8px;
   color: #444;
   font-size: 15px;
   transition: background .2s, color .2s
}

.ys-doc-nav a:hover {
   background: #f3f4f6;
   color: #050505
}

.ys-doc-help .ys-doc-nav [data-doc=help],
.ys-doc-faq .ys-doc-nav [data-doc=faq],
.ys-doc-gbook .ys-doc-nav [data-doc=gbook],
.ys-doc-privacy .ys-doc-nav [data-doc=privacy] {
   background: #111;
   color: #fff;
   font-weight: 600
}

.ys-doc-card {
   min-width: 0;
   padding: 34px 40px 40px;
   background: #fff;
   border-radius: 11px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
   color: #333;
   font-size: 15px;
   line-height: 1.85
}

.ys-doc-card h1 {
   margin: 0 0 10px;
   color: #050505;
   font-size: 28px;
   line-height: 1.2;
   font-weight: 750
}

.ys-doc-card h2 {
   margin: 28px 0 8px;
   color: #050505;
   font-size: 18px;
   line-height: 1.4;
   font-weight: 700
}

.ys-doc-card p {
   margin: 0 0 10px
}

.ys-doc-card a {
   color: #ff5635
}

.ys-doc-card a:hover {
   text-decoration: underline
}

.ys-doc-lead {
   padding-bottom: 18px;
   border-bottom: 1px solid #f0f0f0;
   color: #777
}

.ys-doc-more {
   margin-top: 28px !important;
   color: #777
}

.ys-doc-qa {
   border-bottom: 1px solid #f0f0f0
}

.ys-doc-qa summary {
   position: relative;
   padding: 16px 32px 16px 0;
   color: #050505;
   font-size: 16px;
   font-weight: 600;
   list-style: none;
   cursor: pointer
}

.ys-doc-qa summary::-webkit-details-marker {
   display: none
}

.ys-doc-qa summary:after {
   content: "";
   position: absolute;
   right: 6px;
   top: 50%;
   width: 8px;
   height: 8px;
   margin-top: -6px;
   border-right: 2px solid #999;
   border-bottom: 2px solid #999;
   transform: rotate(45deg);
   transition: transform .2s
}

.ys-doc-qa[open] summary:after {
   margin-top: -2px;
   transform: rotate(-135deg)
}

.ys-doc-qa p {
   padding: 0 0 16px;
   color: #555
}

.ys-gbook-form {
   margin-top: 22px
}

.ys-gbook-form textarea {
   width: 100%;
   height: 120px;
   padding: 12px 14px;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   background: #fafafa;
   color: #111;
   font: inherit;
   resize: vertical;
   outline: 0
}

.ys-gbook-form textarea:focus,
.ys-gbook-verify:focus {
   border-color: #111;
   background: #fff
}

.ys-gbook-bar {
   margin-top: 12px;
   display: flex;
   align-items: center;
   gap: 10px
}

.ys-gbook-count {
   margin-right: auto;
   color: #999;
   font-size: 13px
}

.ys-gbook-count b {
   font-weight: 400
}

.ys-gbook-verify {
   width: 110px;
   height: 38px;
   padding: 0 12px;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   background: #fafafa;
   color: #111;
   font: inherit;
   outline: 0
}

.ys-gbook-verify-img {
   height: 38px;
   border-radius: 6px;
   cursor: pointer
}

.ys-gbook-submit {
   height: 38px;
   padding: 0 22px;
   display: inline-flex;
   align-items: center;
   border: 0;
   border-radius: 8px;
   background: #111;
   color: #fff !important;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none !important
}

.ys-gbook-submit:hover {
   background: #333
}

.ys-gbook-msg {
   min-height: 22px;
   margin: 8px 0 0 !important;
   color: #ff174d;
   font-size: 13px
}

.ys-gbook-msg.is-ok {
   color: #16a34a
}

.ys-gbook-list {
   margin-top: 20px
}

.ys-gbook-list h2 {
   margin: 0 0 4px
}

.ys-gbook-list h2 em {
   margin-left: 8px;
   color: #999;
   font-size: 14px;
   font-style: normal;
   font-weight: 400
}

.ys-gbook-item {
   padding: 16px 0;
   border-bottom: 1px solid #f0f0f0
}

.ys-gbook-meta {
   display: flex;
   align-items: center;
   gap: 12px
}

.ys-gbook-meta strong {
   color: #050505;
   font-size: 15px
}

.ys-gbook-meta time {
   color: #999;
   font-size: 13px
}

.ys-gbook-text {
   margin-top: 6px;
   color: #333;
   word-break: break-all
}

.ys-gbook-reply {
   margin-top: 10px;
   padding: 10px 14px;
   border-radius: 8px;
   background: #f6f6f6;
   color: #555;
   font-size: 14px
}

.ys-gbook-reply b {
   color: #ff5635
}

.ys-gbook-empty {
   padding: 40px 0;
   color: #999;
   text-align: center
}

html.ys-dark body.ys-doc-page {
   background: #151515;
   color: #f5f5f5
}

html.ys-dark .ys-doc-nav,
html.ys-dark .ys-doc-card {
   background: var(--ys2-surface);
   box-shadow: none
}

html.ys-dark .ys-doc-nav a {
   color: #bbb
}

html.ys-dark .ys-doc-nav a:hover {
   background: #666;
   color: #f5f5f5
}

html.ys-dark .ys-doc-help .ys-doc-nav [data-doc=help],
html.ys-dark .ys-doc-faq .ys-doc-nav [data-doc=faq],
html.ys-dark .ys-doc-gbook .ys-doc-nav [data-doc=gbook],
html.ys-dark .ys-doc-privacy .ys-doc-nav [data-doc=privacy] {
   background: #f5f5f5;
   color: #111
}

html.ys-dark .ys-doc-card,
html.ys-dark .ys-doc-qa p,
html.ys-dark .ys-gbook-text {
   color: #ccc
}

html.ys-dark .ys-doc-card h1,
html.ys-dark .ys-doc-card h2,
html.ys-dark .ys-doc-qa summary,
html.ys-dark .ys-gbook-meta strong {
   color: #f5f5f5
}

html.ys-dark .ys-doc-lead,
html.ys-dark .ys-doc-qa,
html.ys-dark .ys-gbook-item {
   border-color: #303030
}

html.ys-dark .ys-doc-lead,
html.ys-dark .ys-doc-more {
   color: #999
}

html.ys-dark .ys-gbook-form textarea,
html.ys-dark .ys-gbook-verify {
   border-color: #3a3a3a;
   background: #181818;
   color: #f5f5f5
}

html.ys-dark .ys-gbook-form textarea:focus,
html.ys-dark .ys-gbook-verify:focus {
   border-color: #888;
   background: #151515
}

html.ys-dark .ys-gbook-submit {
   background: #f5f5f5;
   color: #111 !important
}

html.ys-dark .ys-gbook-submit:hover {
   background: #ddd
}

html.ys-dark .ys-gbook-reply {
   background: #2a2a2a;
   color: #bbb
}

@media (max-width:760px) {
   .ys-doc-main {
      padding: 82px 0 42px
   }

   .ys-doc-layout {
      width: calc(100% - 32px);
      grid-template-columns: 1fr;
      gap: 14px
   }

   .ys-doc-nav {
      position: static;
      flex-direction: row;
      overflow-x: auto;
      padding: 6px
   }

   .ys-doc-nav a {
      flex: 0 0 auto;
      padding: 8px 14px;
      font-size: 14px
   }

   .ys-doc-card {
      padding: 22px 18px 26px
   }

   .ys-doc-card h1 {
      font-size: 23px
   }

   .ys-gbook-bar {
      flex-wrap: wrap
   }
}

html.ys-dark .home-header {
   background: linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.ys-float-btn .icon-rj {
   display: none;
}

html.ys-dark .ys-float-btn .ys-ico-moon {
   display: none;
}

html.ys-dark .ys-float-btn .icon-rj {
   display: block;
}