@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: roboto, microsoft jhenghei, sans-serif;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;transition: color .3s ease}
a:hover {color: var(--main);text-decoration: none;}
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;}
.text-center {text-align: center;}

/* 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);min-height: 48px;}

/* header wrap */
.header-wrap {flex: 1;display: flex;align-items: center;position: relative;min-height: 48px;}
.header-wrap .left,
.header-wrap .center,
.header-wrap .right {display: flex;align-items: center;}

.header-wrap .right {position: absolute;right: 0;}

.header-menu-btn {margin-right: 1rem;}

.header-wrap .logo {font-weight: 600;}
.header-wrap .logo-icon {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;margin-right: 0.25rem;background-image: linear-gradient(to bottom, #f68538, #ee0100);border-radius: 6px;}
.header-wrap .logo .feather {color: #fff;width: 20px;height: 20px;}
.header-wrap .logo span {color: #ee0100;}

.header-wrap .btns {display: inline-flex;gap: 1rem;}
.header-wrap .btns .feather {width: 1.25rem;height: 1.25rem;}

.btn-user {}
.btn-user img {border-radius: 50%;}
.btn-user span {display: none;margin-left: .5rem;font-weight: 600;font-size: 14px;}

/* header nav */
.header-nav {display: none;align-items: center;}
.sub-menu > li > a {display: block;padding: 0.75rem 0;}

/* sub-menu */
.sub-menu {display: flex;}
.sub-menu > li {position: relative;margin: 0 1rem;font-size: 15px;}
.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: 0 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;}

/* 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;}

/* search form */
.search-form {background-color: initial;box-shadow: none;max-width: 640px;margin: auto;}
.search-form .form {position: relative;display: flex;align-items: center;border-radius: .25rem;overflow: hidden;margin: 1rem;}
.search-form .form .feather {width: 1.25rem;height: 1.25rem;margin-right: .5rem;}
.search-form .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 .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;}

/* menu */
.menu {display: none;width: 100%;position: fixed;top: 0;z-index: 999;padding-top: 56px;height: 100vh;background: rgba(17, 21, 32, .98);transition: .25s cubic-bezier(.215, .61, .355, 1);}
.menu nav {background-color: #202844;margin: 1rem 0 2rem;display: flex;align-items: center;min-height: 40px;}
.menu nav a {flex: 1;text-align: center;display: inline-flex;align-items: center;justify-content: center;min-height: 40px;font-size: 14px;transition: all 0.3s ease 0s;}
.menu nav a:hover {color: #fff;background-color: rgb(18, 141, 235);}
.menu dl {padding-bottom: 2rem;}
.menu dl dt {font-weight: 700;font-size: 22px;margin-bottom: 1rem;}
.menu dl dd {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1rem;}
.menu dl dd a {color: #f8f9fa;}
.menu dl dd a::before {content: '#';color: #6190c9;margin-right: 1px;}

/* 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);}

/* video list */
.video-list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;}
.video-item {display: inline-grid;}
.video-item-cover {position: relative;margin-bottom: 13px;border-radius: 5px;overflow: hidden;}
.video-item-cover a {display: block;background: #161a26;padding-bottom: 56.25%;}
.video-item-cover img {max-width: 100%;width: 100%;height: 100%;transition: all .3s;position: absolute;object-fit: cover;}
.video-item-cover-bottom-left {position: absolute;left: 15px;bottom: 15px;z-index: 100;}
.video-item-cover-bottom-left button {display: inline-flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, .18);color: #fff;height: 35px;width: 35px;border-radius: 50%;transition: all .5s;}
.video-item-cover-bottom-left .feather {height: 15px;width: 15px;}
.video-item-cover-bottom-right {position: absolute;right: 15px;bottom: 15px;z-index: 100;}
.video-item-cover-bottom-right label {background: rgba(0, 0, 0, .5);color: #fff;font-size: .8125rem;padding: .3rem .5rem;line-height: 25px;border-radius: .5rem;box-shadow: 0 8px 22px 0 rgba(0, 0, 0, .38);}
.video-item-detail {display: grid;}
.video-item-detail .name {font-size: 14px;margin-bottom: 5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.video-item-detail p {display: flex;color: #5e5d5a;align-items: center;font-size: 12px;gap: 1rem;height: 20px;}
.video-item-detail p span {display: inline-flex;align-items: center;}
.video-item-detail .feather {width: 14px;height: 14px;margin-right: .25rem;}

.video-item .hover-state {
	opacity: 0;
	transition: all .3s;
}
.video-item-cover:hover > .video-item-cover-bottom-left button,
.video-item-cover .hover-state.active {
	opacity: 1
}
.video-item-cover .hover-state.active,
.video-item-cover-bottom-left button:hover {
	background: rgba(255, 106, 136, .8)
}



/* 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-tips {position: absolute;height: 100%;width: 100%;top: 0;right: 0;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;color: #fff;background-color: rgba(0, 0, 0, 0.8);}
.video-tips p {margin-bottom: 15px;font-size: 1.14rem;color: #fff;}
.video-tips-btns {display: inline-flex;margin: 0 auto;}
.video-tips-btns button {display: inline-flex;line-height: 2.5rem;height: 2.5rem;padding: 0 1.6rem;background-color: #fe628e;border-radius: 4px;color: #fff;}

/* video detail */
.video-detail {margin: 1rem 0;}

.video-detail-info h1 {font-size: 18px;font-weight: 600;margin-bottom: .5rem;line-height: 1.2;color: #fff;}
.video-detail-info p {font-size: 14px;font-weight: 500;line-height: 1.2;display: flex;flex-wrap: wrap;align-items: center;color: #8e9194;}
.video-detail-info i {margin-right: .5rem;display: inline-flex;}
.video-detail-info span {display: inline-flex;align-items: center;margin-right: 1rem;}
.video-detail-info .feather {width: 1rem;height: 1rem;margin-right: .25rem;}

.video-detail-label {margin: 1.5rem 0;display: flex;justify-content: center;align-items: center;gap: .5rem;font-size: 1rem;font-weight: 500;}
.video-detail-label a.cat::before {content: '//';color: #ff8382;margin-right: 1px;font-size: 12px;}
.video-detail-label a.tag::before {content: '#';color: #6190c9;margin-right: 1px;font-size: 12px;}

.video-detail-btns {margin: 1.5rem 0;display: flex;justify-content: center;}
.video-detail-btns button {background-color: inherit;border: none;color: #b8babc;cursor: pointer;display: inline-flex;align-items: center;font-weight: 500;padding: 8px 16px;}
.video-detail-btns button .feather {width: 20px;height: 20px;}
.video-detail-btns button span {font-size: 12px;margin-left: .5rem;}
.video-detail-btns button.like {background: rgba(138, 128, 255, .09);color: #fff;border-radius: 16px;margin-right: .5rem;}
.video-detail-btns button.like .feather {color: #fe628e;}
.video-detail-btns button.active {color: #fe628e;}

.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-right-top {margin-bottom: 1rem;border-radius: 8px;overflow: hidden;}

/* 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-text p {font-size: 0.875rem;}
footer .grid-list {}
footer dl {}
footer dt {font-size: 1rem;margin-bottom: 1rem;}
footer dd {display: grid;grid-template-columns: repeat(3,1fr);gap: 0.5rem;font-size: 0.875rem;}
/*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 a {aspect-ratio: 100 / 56.25;text-align: center;display: flex;justify-content: center;align-items: center;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;}

/* layui */
.layui-form-container {padding: 15px;}
.layui-form-other {display: flex;justify-content: space-between;font-size: 14px;}
.layui-form-other span {color: #8e9194;}

.layui-menu {}
.layui-menu li {}
.layui-menu-body-title a {border-left: 4px solid transparent;}
.layui-menu-body-title a:hover {background: #f6f9fc;border-color: #fe628e;}

.layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button {font-size: 14px;}

@media (min-width: 1280px) {
    :root {
    	--mb: 3rem;
    }
    /* header */
	header .container {display: flex;justify-content: space-between;align-items: center;}

	.header-nav {display: flex;}
	.header-wrap .center {position: absolute;left: 50%;transform: translateX(-50%);}
	.btn-user span {display: inline-block;}

	/* video list */
	.video-list {grid-template-columns: repeat(4, 1fr);}

	.video-list-row {
		grid-template-columns: repeat(1, 1fr);
	}
	.video-list-row .video-item-cover {
		margin-bottom: 0;
	}
	.video-list-row .video-item {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.video-list-row .video-item-detail .name {
		margin: 0.5rem 0;
		white-space: normal;
		max-height: 2.8em;
		line-height: 1.5;
	}

	/* 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;}
    .player-btns {padding: .75rem 0 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);}
}