* {margin: 0;padding: 0;box-sizing: border-box;}
a {text-decoration: none;color: #898989;}
html {background: #1E1E1E;--side-width:320px;}
body {display: flex;}
li {list-style: none;}
button {border: none;cursor: pointer;}
::-webkit-scrollbar {width: 0px;height: 0px;}
  
#video-main {margin-left: var(--side-width);flex:1;}
#video-main .main {max-width: 1800px;margin: 0 auto;margin-bottom: 10px;}
@media screen and (max-width: 1400px) {#video-main {margin-left:0}}

@media screen and (max-width: 2200px) {#video-main .main {max-width: 1600px;}}
@media screen and (max-width: 2000px) {#video-main .main {max-width: 1400px;}}
@media screen and (max-width: 1800px) {#video-main .main {max-width: 1200px;}}
@media screen and (max-width: 1600px) {#video-main .main {max-width: 1000px;}}
@media screen and (max-width: 1400px) {#video-main .main {max-width: 1200px;}}
@media screen and (max-width: 1400px) {#video-main .main {max-width: 1000px;}}
@media screen and (max-width: 1000px) {#video-main .main {max-width: 800px;padding: 0 10px;}}

#video-side {width: var(--side-width );height: 100vh;overflow: auto;position: fixed;z-index: 2;background: #2C2C2C;display: flex; flex-direction: column; justify-content: space-between;padding: 18px 26px;}

#video-side .logo {padding: 0 14px;}
#video-side .logo img {width: 100%;}
#video-side .menu { display: flex;flex-direction: column;flex: 1;margin-top: 20px;}
#video-side .menu .item {padding: 12px 20px; background: #1E1E1E; margin: 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;}
#video-side .menu .item svg {margin-right:10px;fill: #999;}
#video-side .menu .item a {font-size: 20px;}
#video-side .menu .item:hover svg {fill: #EECFAF;}
#video-side .menu .item:hover span {color: #EECFAF;}
#video-side .menu .item.active svg {fill: #EECFAF;}
#video-side .menu .item.active span {color: #EECFAF;}

#video-side .menu .submenu {display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;margin: 8px;}
#video-side .menu .submenu a {background: #1E1E1E; border-radius: 5px; padding: 4px 6px;display: flex;justify-content: center;align-items: center;font-size: 14px;}
#video-side .menu .submenu a:hover,#video-side .menu .submenu a.active {color: #EECFAF;}

#video-side .copy .guide {display: flex;width: 100%;justify-content: center;opacity: .6;margin-bottom: 30px;}
#video-side .copy .guide img {width: 94%;}
#video-side .copy p {color: #999;font-size: 12px;}
#video-side .copy p.large {padding: 0 10px;}
#video-side .copy p.small {white-space: nowrap;margin-top: 10px;}

@media screen and (max-width: 1400px) { #video-side {display: none;}}

#video-side .copy .link {margin-bottom: 30px;}
#video-side .copy .link p {text-align: center;display: flex;justify-content: center;flex-wrap: wrap;}
#video-side .copy .link p a {margin: 0 10px;font-size: 14px;}


#video-side-menu{position:absolute;top:15px;left:15px;background:#FF5B82;width:38px;height:38px;border-radius:5px;display:flex;align-items:center;justify-content:center;fill:#fff}
#video-side-menu svg{width:20px;height:20px}


#video-main .find{display:flex;justify-content:center;align-items:center;padding:70px 0;background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.9)),url("search.png") no-repeat;background-size:cover}
#video-main .find .find-main{width:50%;border:2px solid #FF5B82;border-radius:100px;display:flex;height:50px;align-items:center;background:#252525;justify-content:space-between}
#video-main .find .find-main svg{fill:#898989;margin:0 10px}
#video-main .find .find-main input{height:100%;flex:1;background:transparent;border:none;outline:none;color:#898989;font-size:16px;min-width:0}
#video-main .find .find-main button{background:#FF5B82;border-radius:100px;height:100%;color:#eee;font-size:16px;width:150px}  
@media screen and (max-width:750px){
	#video-main .find .find-main{width:90%;height:40px}
	#video-main .find .find-main svg{margin:0 5px}
	#video-main .find .find-main button{width:100px}
}


#video-main .info{background:#2C2C2C;color:#fff;display:flex;border-radius:100px;padding:16px 20px;font-size:16px;margin:20px 0}
#video-main .info .item{display:flex;align-items:center;margin-right:10px}
#video-main .info .item .text{display:flex;align-items:center}
#video-main .info .item svg{fill:#999;margin-right:10px}
#video-main .info .item p{color:#999;display:flex;align-items:center}
#video-main .info .item b{color:#FF5B82;margin:0 4px;font-family:system-ui}
@media screen and (max-width:750px){
	#video-main .info{border-radius:10px}
	#video-main .info .item{flex:1;align-items:center;margin:0}
	#video-main .info .item .text{flex-direction:column;align-items:start;margin-left:10px}
	#video-main .info .item b{margin:0}
	#video-main .info .item svg{margin:0}
}


.list-title{margin:20px 0;color:#EECFAF;display:flex;align-items:center}
.list-title svg{margin-right:10px;fill:#EECFAF}
.list-title h2{flex:1;display:flex;align-items:center}
.list-title h2 .mark{font-size:14px;font-weight:normal;background:#FF5B82;height:26px;line-height:26px;margin-left:12px;padding:0 10px;border-radius:10px;color:#fff}

.website{display:flex;margin-bottom:20px;flex-wrap:wrap}
.website .item{width:calc(14.28% - 12px);margin:6px;background:#2C2C2C;display:flex;align-items:center;border-radius:6px;padding:10px;position:relative}
.website .item:hover{color:#EECFAF}
.website .item .detail{overflow:hidden;flex:1}
.website .item img{height:58px;width:58px;border-radius:50%;overflow:hidden;object-fit:cover;margin-right:10px;flex-shrink:0}
.website .item .small{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.website .item .mark{position:absolute;right:10px;top:0;font-size:12px;background:#525151;border-radius:0 0 5px 5px;color:#1E1E1E;padding:2px 4px}

@media screen and (max-width: 1800px) {.website .item {width: calc(20% - 12px);}}
@media screen and (max-width: 1600px) {.website .item {width: calc(25% - 12px);}}
@media screen and (max-width: 800px) {.website .item { width: calc(50% - 12px);} .website .item .detail {flex: auto;width: 170px;}}

.list-title{margin:20px 0;color:#EECFAF;display:flex;align-items:center}
.list-title svg{margin-right:10px;fill:#EECFAF}
.list-title h2{flex:1;display:flex;align-items:center}
.list-title h2 .mark{font-size:14px;font-weight:normal;background:#FF5B82;height:26px;line-height:26px;margin-left:12px;padding:0 10px;border-radius:10px;color:#fff}

#video-main .list {display: flex;flex-wrap: wrap;align-content: flex-start;}
#video-main .list .item {width: calc(16.66% - 12px); margin: 6px; background: #2C2C2C; border-radius: 4px;transition: 0.6s;}
#video-main .list .item:hover {transform: translateY(-6px); box-shadow: 0 34px 20px -24px rgba(0, 0, 0, 0.8);}
#video-main .list .item .thumb {position: relative;width: 100%;height: 180px;border-radius:4px;overflow: hidden;}
#video-main .list .item .thumb .icon {opacity: 0;transition: all .6s; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #FF5B82; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 23px; fill: #fff; border-radius: 50%;}
#video-main .list .item:hover .thumb .icon {opacity: 1;}
#video-main .list .item .thumb .icon svg {width: 16px;}
#video-main .list .item .thumb img {width: 100%; height: 100%; object-fit: cover;}
#video-main .list .item .thumb .duration {position: absolute;right: 10px;bottom: 10px;z-index: 1;background: rgba(0,0,0,.5);border-radius: 4px;padding: 2px 4px;color: #fff;font-size: 12px;}
#video-main .list .item .title {height: 40px;overflow: hidden;margin: 4px;}
#video-main .list .item .title p {font-size: 16px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#video-main .list .item .detail {margin: 0 10px 10px;}
#video-main .list .item .detail span {font-size: 12px;}
#video-main .list .empty {color: #999;}
@media screen and (max-width: 2200px) {#video-main .list .item {width: calc(20% - 12px);}}
@media screen and (max-width: 2000px) {#video-main .list .item {width: calc(25% - 12px);}}
@media screen and (max-width: 1800px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1600px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1400px) {#video-main .list .item {width: calc(25% - 12px);}}
@media screen and (max-width: 1200px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1000px) {#video-main .list .item {width: calc(50% - 12px);}}
@media screen and (max-width: 750px) {#video-main .list .item .thumb { height: 150px;}}
@media screen and (max-width: 470px) {#video-main .list .item .thumb { height: 120px;}}
.playico{}


#video-main .page {display: flex;flex-wrap: wrap;margin: 20px 0;align-content: flex-start;}
#video-main .page {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
#video-main .page li {display: flex; background: #2C2C2C; margin: 0 6px 6px 0; border-radius: 4px;overflow: hidden;}
#video-main .page li.dangqianye {background: #FF5B82;color: #fff;}
#video-main .page li.dangqianye a {color: #fff;font-size: 18px;}
#video-main .page li:hover {background: #FF5B82;}
#video-main .page li:hover a {background: #FF5B82;color: #fff;}
#video-main .page li a {padding: 4px 10px;    padding: 10px;font-size: 18px;}

/*PLAY*/
#video-main .watch {display: flex;margin-top: 20px;}
#video-main .watch #player {width: 1120px;margin-right: 10px;border-radius: 4px;overflow: hidden;background: #000;}

#video-main .watch #suggest {flex:1;background: #2C2C2C;border-radius: 4px;padding: 20px;color: #898989;display: flex;flex-direction: column;justify-content: space-between;}
#video-main .watch #suggest .title {margin-bottom: 10px;}
#video-main .watch #suggest .title>h4 {font-size: 20px;margin-bottom: 10px;}
#video-main .watch #suggest .title>div {display: flex;}
#video-main .watch #suggest .title>div>span {display: flex;align-items: center;font-size: 12px;}
#video-main .watch #suggest .title>div>span svg {fill: #999;margin-right: 10px;}
#video-main .watch #suggest .title>div>span p {margin-right: 10px;}

#video-main .watch #suggest .detail {flex: 1;}
#video-main .watch #suggest .detail .table {border-radius: 6px; overflow: hidden; margin-top: 20px;}
#video-main .watch #suggest .detail .table .item {font-size: 14px; display: flex; background: #1E1E1E; border: 1px solid #333; padding: 5px 10px;}
#video-main .watch #suggest .detail .table .item dl {margin-right: 10px;flex-shrink: 0;}
#video-main .watch #suggest .detail .table .item dd {font-size: 12px;}
                
#video-main .watch #suggest .detail .label {margin-top: 10px;}
#video-main .watch #suggest .detail .label a {background: #1E1E1E;color: #999;padding: 4px 10px;border-radius: 4px;font-size: 12px;}

#video-main .watch #suggest .source {display: flex;flex-wrap: wrap;margin-top: 10px;}
#video-main .watch #suggest .source p {margin-bottom: 10px;width: 100%;}
#video-main .watch #suggest .source a {background: #FF5B82;color: #fff;border-radius: 4px;padding: 2px 4px;margin-right: 10px;margin-bottom: 10px;}

#video-main .watch #suggest .action {display: flex;justify-content: space-between;}
#video-main .watch #suggest .action button {background: #FF5B82;color: #fff;border-radius: 6px;display: flex;align-items: center;width: 48%;justify-content: center;padding: 10px 0;font-size: 16px;}
#video-main .watch #suggest .action button svg {fill: #fff;margin-right: 6px;}

@media screen and (max-width: 1800px) {
    #video-main .watch {flex-direction: column;}
    #video-main .watch #player {width: 100%;margin-bottom: 10px;}
}

#downloadPopup {background: #1E1E1E;padding: 10px;}
#downloadPopup .item {margin-bottom: 20px;}
#downloadPopup .item em {font-size: 12px;}
#downloadPopup button {background: #FF5B82;color: #fff;padding: 5px 10px;border-radius: 4px;}
#downloadPopup p {display: flex;margin-bottom: 5px;}
#downloadPopup input {flex: 1;margin-right: 10px;}
.dark {background: #1E1E1E;color: #999;}
.dark .layui-layer-title {color: #EECFAF; border-bottom: 1px solid #333;}
.dark .layui-layer-btn0 {background: #FF5B82;border: none;}


.main .menu {
    display: none;
    flex-direction: column;
    flex: 1;
    margin-top: 20px;
    margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
	.main .menu {    display: block;}
}


.main .menu .item {
    padding: 5px;
    background: #2C2C2C;
	margin: 4px 0px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 100%;
}
.main .menu .item svg {
    margin-right: 10px;
    fill: #999;
}

.main .menu .submenu {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;

}
.main .menu .submenu a {

    background: #2C2C2C;
    border-radius: 5px;
    padding: 4px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin: 0px 0px;
}
.main .menu a.active {
    color: #EECFAF;
}

.tgas {
    background: #2C2C2C;
    overflow: auto;
    padding: 5px;
}
.tgas .submenu {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin: 8px;
}

@media screen and (max-width: 2200px) {.tgas .submenu {grid-template-columns: repeat(10, 1fr);}}
@media screen and (max-width: 2000px) {.tgas .submenu {grid-template-columns: repeat(10, 1fr);}}
@media screen and (max-width: 1800px) {.tgas .submenu {grid-template-columns: repeat(10, 1fr);}}
@media screen and (max-width: 1600px) {.tgas .submenu {grid-template-columns: repeat(10, 1fr);}}
@media screen and (max-width: 1400px) {.tgas .submenu {grid-template-columns: repeat(9, 1fr);}}
@media screen and (max-width: 1200px) {.tgas .submenu {grid-template-columns: repeat(8, 1fr);}}
@media screen and (max-width: 1000px) {.tgas .submenu {grid-template-columns: repeat(7, 1fr);}}
@media screen and (max-width: 750px) {.tgas .submenu {grid-template-columns: repeat(5, 1fr);}}
@media screen and (max-width: 470px) {.tgas .submenu {grid-template-columns: repeat(3, 1fr);}}
@media screen and (max-width: 400px) {.tgas .submenu {grid-template-columns: repeat(3, 1fr);}}


.tgas .title {
    color: #EECFAF;
    padding: 4px 16px;
}

.tgas .submenu a {
    background: #1E1E1E;
    border-radius: 5px;
    padding: 4px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}



.tgas .ss {

    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0;
    margin: 8px;
    list-style-type: none;


}
.tgas .ss a {
	float: left;
    margin: 1px;
    background: #1E1E1E;
    border-radius: 5px;
    padding: 4px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.ui-footer {
    color: #999;
	border-top: 1px solid rgba(0, 0, 0, .12);
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

.top-grid{font-size:0;padding:8px}
.top-grid .item{display:inline-flex;flex-direction:column;align-items:center;width:10%;color:#e5cdaa;font-size:13px;padding:10px 1px;border-radius:6px;-webkit-transition:font-weight,background,transform .3s;-moz-transition:font-weight,background,transform .3s;-o-transition:font-weight,background,transform .3s;transition:font-weight,background,transform .3s}
@media(max-width:1300px){
    .top-grid .item{width:16.6666667%}
}
@media(max-width:767px){
    .top-grid .item{width:20%}
}
@media(max-width:480px){
    .top-grid .item{width:25%;padding:10px 5px;font-size:12px}
    .top-grid .item .icon{width:40px;height:40px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}
}
.top-grid .item:hover{background:#444652;color:#ffcf26;font-weight:600;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
.top-grid .item .icon{width:56px;height:56px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.top-grid .item:hover .icon{-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);transform:rotateZ(360deg)}
.top-grid .item .icon img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.top-grid .item .name{width:100%;text-align:center;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}