@charset "utf-8";
:root {
	--mb: 1.5rem;
	--main: #fe628e;
	--base: rgb(184 186 188);
	--base-light: rgb(236 239 244);
	--dark: #14181b;
	--white: #14181b;
	--bdbg: hsl(240 10% 3.9%);
	--tint: #1d2025;
	--line: rgb(55 65 81);
	--gray: #555;
	--plyr-color-main: #fe628e;
    --plyr-captions-background: rgba(0, 0, 0, 0.5);
}
* {margin: 0px;padding: 0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
html,body {font-family: -apple-system,BlinkMacSystemFont,"Microsoft Yahei",MiSans,"HarmonyOS Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height: 1.5;color: var(--base);font-size: 16px;background-color: var(--bdbg);}
ul,li {list-style: none;}
img {border: 0px;max-width: 100%;max-height: 100%;}
em,i,u,s,b,strong {font-style: normal;font-weight: normal;text-decoration: none;}
a {cursor: pointer;color: var(--base);text-decoration: none;display: inline-block;}
a:hover {color: var(--main);}
button {cursor: pointer;border: none;background-color: inherit;}
h1,h2,h3,h4,h5,h6 {font-weight: 400;}
h1 {font-size: 1.25rem;}
h2 {font-size: 1.25rem;}
h3 {font-size: 1rem;}
h4 {font-size: 0.875rem;}

.container {max-width: 1280px;padding: 0 1rem;margin: auto;position: relative;}
.text-muted {color: #777;font-size: 0.75rem;}
.nobook {font-size: 0.875rem;padding: 10px;color: var(--gray);}
.red {color: var(--main);}
.hidden {display: none;}

/* section */
section {margin: var(--mb) 0;}
section .head {display: flex;align-items: center;justify-content: space-between;padding-bottom: 1rem;}
section .head .left {margin-right: 0.75rem;}
section .head .right {}
section .head .more {font-size: 0.75rem;display: inline-flex;align-items: center;color: var(--base-light);}
section .head .more .feather {width: 1rem;height: 1rem;margin-left: 0.5rem;}
section .head h2 {color: var(--base-light);}
section .head h3 {position: relative;display: flex;align-items: center;}
section .head h3::before {content: "";height: 1rem;width: 4px;border-radius: 10px;background-color: var(--main);display: inline-block;margin-right: 13px;}
section .head nav {display: flex;align-items: center;}
section .head nav a {padding: 0.375rem 0.875rem;border-radius: 1rem;font-size: 0.875rem;color: var(--base-light);transition: all .2s ease-in-out;position: relative;margin-left: 0.75rem;}
section .head nav a.active,
section .head nav a:hover {color: #fff;background-color: #c99a05;}
section .head small {margin-top: 6px;color: #666;font-size: 0.75rem;line-height: 1.125rem;display: flex;align-items: center;}
section .head small span {color: #c99a05;margin: 0 0.375rem;}

/* header */
/*header {width: 100%;padding: 0.25rem 0;position: fixed;background-color: hsl(var(--bdbg) / .75);backdrop-filter: blur(8px);z-index: 1000;}*/
header {width: 100%;padding: 0.25rem 0;position: sticky;top: 0;z-index: 1000;background-image: linear-gradient(to bottom, #090812, rgb(9 8 18 / 0));}
header a {height: 100%;display: inline-flex;align-items: center;color: var(--base-light);}

/* header navbar */
.header-navbar {flex: 1;display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: wrap;}
.header-navbar .logo {margin-right: 2rem;}
.header-navbar .logo .feather {margin-right: 0.25rem;}
.header-navbar .btns {display: inline-flex;gap: 1rem;align-items: center;}
.header-navbar .btns .btn {padding: .875rem 0;}
.header-navbar .btns .feather {width: 1.25rem;height: 1.25rem;}
.header-navbar .btns .btn-menu {}

/* header nav */
.header-nav {display: none;flex: 1 0 100%;}
.sub-menu > li > a {display: block;padding: 0.75rem 0;}

/* sub-menu */
.sub-menu {flex: 1;display: flex;justify-content: space-evenly;}
.sub-menu > li {position: relative;flex: 1;text-align: center;justify-content: center;}
.sub-menu .children > a {position: relative;padding-right: 12px;}
.sub-menu .children > a::after {content: "";position: absolute;top: 50%;right: 0;margin-top: -1.5px;border: 3.5px solid rgba(0,0,0,0);transition: all .3s ease-in-out;border-top-color: var(--base-light);}

/* dropdown */
.dropdown {position: relative;display: inline-flex;align-items: center;}
.dropdown ul {position: absolute;top: 150%;left: 50%;padding: 0;margin: 0;background-color: rgb(229 233 240);color: rgb(46 52 64);z-index: 1000;height: auto;transform: translateX(-50%);border-radius: 6px;transition: all .3s ease-in-out;visibility: hidden;opacity: 0;padding: 5px 0;border-top: none;}
.dropdown ul::before,
.dropdown ul::after {content: "";position: absolute;top: -5px;left: 50%;margin-left: -5px;border-left: 5px solid rgba(0,0,0,0);border-right: 5px solid rgba(0,0,0,0);}
.dropdown ul::before {border-bottom: 5px solid rgb(229 233 240);}
.dropdown ul::after {border-bottom: 5px solid rgb(229 233 240);margin-top: 1px;}
.dropdown ul li a {padding: 8px 16px;display: flex;align-items: center;white-space: nowrap;font-size: 0.875rem;color: rgb(46 52 64);}
.dropdown ul li a:hover {background-color: #D8DEE9;}
.dropdown:hover ul {visibility: visible;opacity: 1;top: 100%;}

.dropdown-row {display: grid;grid-template-columns: repeat(3, 1fr);padding: 5px !important;}
.dropdown-row li {}
.dropdown-row li a {border-radius: 4px;}

/* switch */
.switch {}
.btn-switch img {width: 1.25rem;height: 1.25rem;}
.switch ul img {width: 1.25rem;height: 1.25rem;margin-right: 0.5rem;}
.switch ul li {width: 130px;}

/* search */
.search {display: none;}
.search-box {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;padding: 0 1.5rem;}
.search-shade {background-color: rgba(0,0,0,0.75);backdrop-filter: blur(8px);position: fixed;top: 0;right: 0;bottom: 0;left: 0;}
.search .form {position: relative;display: flex;align-items: center;border-radius: .25rem;overflow: hidden;max-width: 42rem;margin: 5rem auto;}
.search .form .feather {width: 1.25rem;height: 1.25rem;margin-right: .5rem;}
.search .form .input {display: flex;align-items: center;width: 100%;height: 50px;padding: 0 1rem;font-size: 0.875rem;flex: 1 1 0%;background-color: rgb(59, 66, 82);color: var(--base);outline: none;border: 2px solid rgb(129 161 193);}
.search .form .submit {color: rgb(36, 41, 51);display: inline-flex;align-items: center;height: 50px;background-color: rgb(129 161 193);padding: 0 1rem;font-size: 0.875rem;}

/* home search */
.home-search-title {color: #fff;font-size: 2.25rem;margin-bottom: 1.5rem;text-align: center;}
.home-search-title span {color: rgb(254 98 142);}
.home-search {margin: auto;max-width: 36rem;padding: 0 1rem;}
.home-search .form {position: relative;display: flex;align-items: center;border-radius: .25rem;}
.home-search .form .feather {color: rgb(156 163 175);width: 1rem;height: 1rem;margin-right: .5rem;}
.home-search .form .input {display: flex;width: 100%;height: 46px;line-height: 46px;padding: .5rem 1rem;font-size: 0.875rem;flex: 1 1 0%;background-color: #fff;color: var(--gray);outline: none;border: 1px solid rgb(209 213 219);border-top-left-radius: .375rem;border-bottom-left-radius: .375rem;}
.home-search .form .submit {color: rgb(36, 41, 51);display: inline-flex;align-items: center;background-color: rgb(249 250 251);border: 1px solid rgb(209 213 219);height: 46px;padding: .5rem 1rem;font-size: 0.875rem;margin-left: -1px;border-top-right-radius: .375rem;border-bottom-right-radius: .375rem;}

/* main */
main {}

/* pagetitle */
.pagetitle {color: rgb(216 222 233);font-size: 1.5rem;text-align: center;}

/* prenext */
.prenext {display: inline-flex;align-content: center;justify-content: center;font-size: 0.875rem;background-color: var(--line);margin: auto;line-height: 40px;border-radius: 20px;overflow: hidden;}
.prenext a {padding: 0 1.5rem;position: relative;}
.prenext a:first-child::before {content: none;}
.prenext a::before {content: "";width: 1px;height: 50%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background-color: var(--white);}

/* list */
.list {display: grid;grid-template-columns: repeat(2,1fr);gap: 1rem;}
.list a {display: inline-grid;font-size: 0.75rem;position: relative;}
.list .cover {width: 100%;aspect-ratio: 100 / 56.25;border-radius: 4px;position: relative;}
.list .cover img {width: 100%;height: 100%;object-fit: cover;position: absolute;border-radius: 4px;}
.list .cover video {width: 100%;height: 100%;object-fit: cover;position: absolute;border-radius: 4px;}
.list em {color: #fff;padding: .25rem .5rem;position: absolute;right: .25rem;bottom: .25rem;border-radius: .5rem;line-height: 1rem;background-color: rgb(31 41 55 / .75);color: rgb(229 233 240);}
.list h4 {width: 100%;height: 16px;line-height: 16px;margin-top: .5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.list span {color: var(--gray);height: 18px;overflow: hidden;}

/* list row */
.list-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;}
.list-row a {display: inline-grid;grid-template-columns: 1fr;gap: .5rem;align-items: center;font-size: 0.75rem;position: relative;}
.list-row .cover {width: 100%;aspect-ratio: 100 / 56.25;border-radius: 4px;position: relative;}
.list-row .cover img {width: 100%;height: 100%;object-fit: cover;position: absolute;border-radius: 4px;}
.list-row em {color: #fff;padding: .25rem .5rem;position: absolute;right: .25rem;bottom: .25rem;border-radius: .5rem;line-height: 1rem;background-color: rgb(31 41 55 / .75);color: rgb(229 233 240);}
.list-row h4 {height: 16px;line-height: 16px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.list-row span {color: var(--gray);height: 18px;overflow: hidden;}

/* btn */
.btn-del {border: 1px solid rgba(250, 100, 0, .5);padding: 0.25rem 0.5rem;color: rgba(250, 100, 0, .8);font-size: 0.75rem;position: absolute;top: 0.5rem;left: 0.5rem;background: rgba(255, 255, 255, 0.7);border-radius: 4px;}

/* player */
.player {margin: 0 -1rem;}
.player-main {position: relative;padding-bottom: calc(9 / 16 * 100%);}
.player-main .video {position: absolute;height: 100%;width: 100%;top: 0;right: 0;bottom: 0;left: 0;}
.player-main video {display: block;height: 100%;width: 100%;}
.player-main .m-player {width: 100%!important;height: 100%!important;}
.player-btns {display: flex;align-items: center;justify-content: space-between;padding: .75rem .75rem 0;}
.player-btns span {border: 1px solid #fff;border-radius: 0.375rem;overflow: hidden;display: inline-flex;}
.player-btns button {color: #fff;border-radius: 0;padding: 0.5rem 0.75rem;display: inline-flex;align-items: center;font-size: 0.75rem;line-height: 1rem;font-weight: 600;}
.player-btns button:hover {background-color: var(--main);}
.player-btns .feather {width: 1rem;height: 1rem;}
.player-btns-border {border-left: 1px solid #fff;border-radius: 0.375rem;border-right: 1px solid #fff;border-radius: 0.375rem;}
.player-btns .rewind {padding-left: .5rem;}
.player-btns .forward {padding-right: .5rem;}

/* detail */
.detail {display: flex;flex-wrap: wrap;row-gap: 0.25rem;font-size: 0.875rem;color: var(--gray);padding: 20px;}
.detail dl {width: 50%;display: inline-flex;align-items: baseline;}
.detail dt {display: inline-flex;margin-right: 0.5rem;white-space: nowrap;}
.detail dd {display: inline-flex;flex-wrap: wrap;}
.detail a {margin-right: 0.5rem;}
.detail .feather {width: 0.875rem;height: 0.875rem;}
.detail .fluid {width: 100%;}

.detail .tag {align-items: center;}
.detail .tag a {margin-right: 0.875rem;}
.detail .tag a::before {margin-right: 0.25rem;content: "#";color: var(--main);}

/* video grid */
.video-grid {display: grid;margin-bottom: var(--mb);}
.video-grid-left {}
.video-grid-right {}

/* video detail */
.video-detail {margin: 1rem 0;}
.video-detail h1 {color: var(--base-light);font-size: 1rem;line-height: 1.5rem;}
.video-detail .top {margin: 1rem 0;border-bottom: 1px solid var(--line);display: flex;justify-content: space-between;}
.video-detail .top h2 {font-size: .875rem;line-height: 1.25rem;display: inline-flex;align-items: center;color: rgb(248 113 113);border-bottom: 2px solid rgb(248 113 113);margin-bottom: -1px;padding-bottom: 1rem;}
.video-detail .top h2 .feather {width: 1rem;height: 1rem;margin-right: 0.5rem;}
.video-detail .top .btns {margin-bottom: -1px;padding-bottom: 1rem;}
.video-detail .top .btn {;font-size: .875rem;line-height: 1.25rem;display: inline-flex;align-items: center;}
.video-detail .top .btn-mark {}
.video-detail .top .btns .feather {width: .875rem;height: .875rem;margin-right: 0.375rem;}
.video-detail dl {display: flex;align-items: baseline;margin: .25rem 0;}
.video-detail dt {display: inline-flex;margin-right: 0.5rem;white-space: nowrap;}
.video-detail dd {}
.video-detail dd a {color: rgb(235 203 139);margin-right: 0.5rem;}

.brief {overflow: hidden;display: block;-webkit-box-orient: vertical;-webkit-line-clamp: 2;word-break: break-all;margin-bottom: .25rem;}
.brief-more {display: -webkit-box;}
.brief-btn {display: inline-flex;align-items: center;color: rgb(163 190 140);}
.show-less {display: none;}

/* links */
.links {display: flex;flex-wrap: wrap;font-size: 0.875rem;padding: 10px 20px;}
.links a {margin-right: 1rem;}

/* sort */
.sort {height: 40px;}
.sort .feather {width: 0.875rem;height: 0.875rem;margin-left: .5rem;}
.sort > a {display: inline-flex;align-items: center;color: var(--base-light);}

/* page */
.page {display: flex;align-items: center;justify-content: center;font-size: 0.875rem;}
.page span {color: var(--gray);}
.page span,
.page a {padding: 0 12px;margin: 0 0.25rem;border-radius: 6px;height: 46px;display: inline-flex;align-items: center;}
.page a:hover {background-color: var(--white);}

/* gotop */
.gotop {display: flex;justify-content: center;}
.gotop-btn {display: inline-flex;color: var(--base-light);padding: 0 1rem;}

/* footer */
footer {color: var(--base-light);}
footer a {color: var(--base-light);}
footer .copy {border-top: 1px solid var(--line);padding: 2rem 0;text-align: center;font-size: 0.75rem;}
footer .grid {display: grid;grid-template-columns: repeat(1,1fr);gap: 2rem;padding: 2rem 0;}
footer .grid-text {}
footer .grid-text a {font-weight: 800;font-size: 1.125rem;margin-bottom: 1rem;}
footer .grid-text a span {}
footer .grid-text a font {color: var(--main);}
footer .grid-list {}
footer dl {}
footer dt {font-size: 1.125rem;margin-bottom: 1rem;}
footer dd {display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem;}
/*footer dd {display: flex;gap: 1rem;flex-wrap: wrap;}*/

/* recTop */
.recTop {display: flex;align-items: center;flex-wrap: wrap;flex-direction: column;background-color: var(--white);padding: 2rem 0;position: relative;border-top: 1px solid var(--bdbg);margin-bottom: 1rem;}
.recTop h1 {display: inline-flex;align-items: center;margin: auto;padding: 0 0 1rem;}
.recTop time {font-size: .875rem;color: var(--gray);}
.recTop .arrow {position: absolute;background-color: var(--bdbg);width: 20px;height: 20px;bottom: -10px;transform: rotate(45deg);}

/* recIntro */
.recIntro {background-color: var(--white);border-radius: 6px;position: relative;display: flex;flex-direction: column;}
.recIntro p {line-height: 1.6;padding: 1rem;}

/* video-card */
.video-card {width: 100%;max-width: 640px;margin: auto auto 1rem;display: grid;grid-template-columns: 1fr;grid-gap: 1rem;padding: 1rem;background-color: var(--bdbg);}
.video-card .cover {width: 100%;aspect-ratio: 100 / 56.25;border-radius: 4px;overflow: hidden;position: relative;background-color: var(--white);}
.video-card .cover img {width: 100%;height: 100%;object-fit: cover;position: absolute;}
.video-card .info {display: flex;flex-direction: column;}
.video-card .info h3 {margin-bottom: .5rem;}
.video-card .info h3 a {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-break: break-word;}
.video-card .info small {font-size: .75rem;color: var(--gray);margin-bottom: .75rem;}
.video-card .info .label {font-size: .75rem;display: flex;flex-wrap: wrap;}
.video-card .info .label span {display: inline-flex;align-items: center;padding: .125rem .5rem;border-radius: .25rem;margin: 0 .75rem .5rem 0;color: #fdae31;border: 1px solid #fdae31;}

/* rec-list */
.rec-list {display: grid;grid-template-columns: repeat(1, 1fr);grid-gap: 1rem;}
.rec-list li {display: inline-grid;grid-template-columns: 1fr auto;grid-gap: .5rem;}
.rec-list a {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .875rem;}
.rec-list small {display: inline-flex;align-items: center;font-size: .75rem;color: var(--gray);}

/* swiper */
.swiper-drag-box {margin: auto;}
.swiper-drag {width: 100%;}
.swiper-drag .swiper-wrapper {display: flex;}
.swiper-drag .swiper-slide {aspect-ratio: 100 / 56.25;width: 25%;padding: 0 8px;}
/*.swiper-drag .swiper-slide a {width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;position: relative;border-radius: 5px;overflow: hidden;}*/
.swiper-drag .swiper-slide a {width: 100%;height: 100%;display: block;position: relative;border-radius: 5px;overflow: hidden;}
.swiper-drag .swiper-slide img {width: 100%;height: 100%;object-fit: cover;position: absolute;}
.swiper-drag .swiper-ribbon {position: absolute;background: #f32b8e;font-size: .75rem;color: #fff;text-align: center;top: -60px;left: -60px;height: 100px;width: 100px;line-height: 178px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);z-index: 100;}

@media (min-width: 1280px) {
    :root {
    	--mb: 3rem;
    }
    /* header */
	header .container {display: flex;justify-content: space-between;align-items: center;}
	.header-navbar .logo {order: 1;}
	.header-navbar .header-nav {order: 2;flex: 1;}
	.header-navbar .btns {order: 3;}
	.header-navbar .btns .btn-menu {display: none;}
	.header-nav {display: flex;align-items: center;padding-bottom: 0;}
	
	/* sub-menu */
	.sub-menu {justify-content: start;}
	.sub-menu > li {flex: none;margin: 0 1rem;}
	
	/* list */
	.list {grid-template-columns: repeat(4,1fr);gap: 1.25rem;}
	
	/* list row */
    .list-row {grid-template-columns: repeat(1, 1fr);gap: 1.25rem;}
    .list-row a {grid-template-columns: 165px 1fr;gap: 1rem;}
    .list-row h4 {height: 48px;-webkit-line-clamp: 3;}
	
	/*detail*/
	.detail {row-gap: 1rem;font-size: 0.875rem;}
	.detail dl {width: 25%;}
	.detail .feather {width: 1rem;height: 1rem;}
	
	/* player */
	.player {margin: 0;}
    
    /* video grid */
    .video-grid {display: grid;grid-template-columns: 1fr 300px;gap: 1.5rem;}
    .video-grid-left {}
    .video-grid-right {}
    
    /* video detail */
    .video-detail h1 {font-size: 1.125rem;line-height: 1.75rem;}
    
    /* footer */
    footer .grid {grid-template-columns: repeat(3,1fr);}
    
    /* recTop */
    .recTop {padding: 3rem 0;}
    
    /* recIntro */
    .recIntro p {margin: 1rem;}
    
    /* video-card */
    .video-card {min-width: 640px;grid-template-columns: 200px 1fr;border-radius: 6px;}
    
    /* rec-list */
    .rec-list {grid-template-columns: repeat(4, 1fr);}
    
    /* swiper */
    .swiper-drag .swiper-slide {width: 50%;}
}