@charset "utf-8";
/*
Theme ID: ecms45
Author: 懒鸟飞移植
Author QQ：1430826160
Author Email：1430826160@qq.com
Author URL: http://www.lanniaofei.com/
*/
* {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: 60px;}
@media screen and (max-width: 1400px) {#video-main {margin-left:0;width:100%}}

@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: 8px; 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 .item img{height: 20px;margin-right: 10px;}


#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;
text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 
}
#video-side .menu .submenu a:hover {color: #EECFAF;}

#video-side .copy .guide {display: flex;width: 100%;justify-content: center;opacity: .6;margin-bottom: 30px;}
#video-side .copy .guide img {width: 84%;}
#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 .fa{color:#fff;}
#video-side-menu .fa-bars:before{

}
#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("../images/searchbg.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;margin: 0 auto;}
#video-main .find .find-main img{width: 25px;margin-left: 15px;margin-right: 10px;}
#video-main .find form{height: 100%; width: 100%;}
#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 img{height: 20px;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;}

.list-title h2 .item {display: flex;align-items: center;margin-right: 10px;font-size: 16px;margin-left: 10px;}
.list-title h2 .item img{height: 20px;margin-right: 10px;}
.list-title h2 .item .text { display: flex;align-items: center;color: #999;}
.list-title h2 .item svg {fill: #999;margin-right: 10px;}
.list-title h2 .item p {color: #999;display: flex;align-items: center;}
.list-title h2 .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 img{height: 20px;margin-right: 5px;}
.list-title svg {margin-right: 10px;fill: #EECFAF;}
.list-title h2 {flex: 1;display: flex;align-items: center;}
.list-title h2 a{color: #EECFAF;}
.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;}}




#video-main .page {display: flex;flex-wrap: wrap;margin: 20px 0;align-content: flex-start;}
#video-main .page li {display: flex; background: #2C2C2C; margin: 0 6px 6px 0; border-radius: 4px;overflow: hidden;}
#video-main .page li.active {background: #FF5B82;color: #fff;}
#video-main .page li.active 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;}

/******列表页********/
.webinfo {width: 100%;background: #2C2C2C;margin: 20px 0;border-radius: 10px;color: #999;padding: 10px;display: flex;align-items: center;}
.webinfo .thumb {width: 60px;height: 60px;border-radius: 50%;overflow: hidden;margin-right: 10px;flex-shrink: 0;}
.webinfo .thumb img {width: 100%;height: 100%;}
.webinfo .detail .large {font-weight: 600;}
.webinfo .detail .small {font-size: 12px;}


.webtype {display: flex;flex-wrap: wrap;}
.webtype .item {background: #2C2C2C;margin-right: 10px;padding: 4px 10px;border-radius: 5px;margin-bottom: 10px;}
.webtype .item:hover {color: #EECFAF;}
.webtype .item.active {background: #FF5B83;color: #fff;}

@media screen and (max-width: 750px) {
    .webtype .item {
        width: calc(25% - 10px);
        text-align: center;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

}


/******内容页*******/
#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 #player img{
  max-width: 100%;
  height: auto;
}


#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;
  display: inline-block;
  margin-bottom: 5px;}
#video-main .watch #suggest .detail .label a:hover{
  color: #EECFAF;
}

#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 a{color: #fff;}
#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;}


.neirong{
  background: #2C2C2C;
  border-radius: 4px;
  padding: 20px;
  color: #898989;
  margin-top: 5px;
}



/*****播放页****/
@media only screen and (min-width:1024px) {
.videowrap{
  height: 554px;
}

.playera1{ width:100%;height: 100%;}

}

@media only screen and (max-width:768px) {

.videowrap{
  height:200px;
}
.playera1{ width:100%;height: 100%;}

}


.videowrap .playera1 iframe{
    width: 100% !important;
    height: 100% !important;
}

@media only screen and (max-width:768px) {

.info-bf iframe{
    height: 540px!important;
}


}

@media screen and (max-width: 768px){
  .info-bf embed,.baiduplay iframe,.info-bf iframe,#videoplay{
    height:400px!important;
    }
}
@media screen and (max-width: 460px){
  .info-bf embed,.baiduplay iframe,.info-bf iframe,#videoplay{
    height:300px!important;
    }
}



/********新视频按钮列表*********/
.stui-pannel {
    position: relative;
}
.stui-pannel-bg {
    border-radius: 2px;
}
.stui-pannel-bg {
    
/*box-shadow: 0 1px 2px rgb(0 0 0 / 5%);*/
    clear: both;
    overflow: hidden;


}
.stui-pannel-box {

}
.stui-pannel_hd {
    padding: 10px;
}
.stui-pannel__head {
    position: relative;
    height: 30px;
}
.stui-pannel__head.active {
    height: 40px;
}
.pull-right {
    float: right !important;
}
.text-muted {
    color: #999999;
}
.stui-pannel__head .more {
    line-height: 30px;
}
.stui-pannel__head .title {
    float: left;
    margin: 0;
    padding-right: 10px;
    line-height: 24px;
}
.bottom-line:after, .bottom-line-dot:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
}
.bottom-line:after {
    border-bottom: 1px solid #666;
}

.col-pd, .col-lg-1, .col-lg-10, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding: 10px;
}
.stui-content__playlist {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0;
    margin: 0 !important;
}
.stui-content__playlist button{
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    list-style: none;

    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    color:#333;
    text-decoration: unset;

}


@media (max-width:768px) {
.stui-content__playlist button{
  margin-right: 5px;
    margin-left: 5px;
    display: inline-block;
    float: none;
}

.col-pd{
  padding: 0px;
}

}



.stui-content__playlist button:hover,.stui-content__playlist button.active{ 
  border: 1px solid #FF9900; 
  background-color: #FF9900; 
  color: #FFFFFF;
}