/**
██   ██ ██    ██ ██████  ██  ██████ ███    ███ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ████  ████ ██      
███████ ██    ██ ██   ██ ██ ██      ██ ████ ██ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ██  ██  ██      ██ 
██   ██  ██████  ██████  ██  ██████ ██      ██ ███████ 
            ===========================================
 * @Sign
================================
        Keep calm and get rich.
                    Is the best huudi.
 */
:root{
  --hong:#f71735;
  --huang:#fff462;
  --babi:#66c;
  --more:#77c;
  --qian:#88f;
  --bai:#fff;
  --hei:#222;
  --tan:#888;
  --hui:#f0f0f0;
  --yin:#f6f6f6;
}
body,button,div,form,h1,h2,h3,h4,h5,h6,html,iframe,img,input,p{margin:0;padding:0;border:0;outline:0}
html,body{-webkit-font-smoothing: antialiased;}html{text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a,button{cursor:pointer;transition:all .3s ease-in-out}
a,a:active,a:visited,button{text-decoration:none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
body{font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,"Helvetica Neue","PingFang SC",Helvetica,"Microsoft Yahei",Arial,sans-serif;background-color:var(--yin);}
#app{width:100%;margin:0 auto; box-sizing: border-box;display: flex;flex-direction:column;align-items: center;}



.header{width:100%;padding:.625rem;box-sizing: border-box;height: 5rem;display: flex;justify-content:space-between;align-items: center;}
.logo{display: flex;align-items: center; }
.logo svg{height:1.75rem;margin-right:.5rem;fill:var(--more)}
.logo h1{font-size:1.5rem;font-weight:800;color:var(--more);}

.soso{width: 15rem; border-radius:1rem;border:1px solid var(--hui);overflow: hidden;display: flex;align-items: center;}
.soso input{width: 100%;height:2.125rem; padding:0 1em;box-sizing: border-box;caret-color:var(--babi);color:var(--hei);font-size:.875rem;background-color:var(--bai);}
.soso button{border:0;padding:0 1em;height:2.125rem;cursor:pointer;white-space:nowrap;background-color:var(--bai); display: flex;align-items: center;justify-content: center;}
.soso button svg{width:1.125rem;height:1.125rem;fill:var(--babi);}
input{appearance: none;-webkit-appearance:none;outline: none;}
input::-webkit-input-placeholder{color:var(--tan);font-size:.875rem;}
input::-moz-input-placeholder{color:var(--tan);font-size:.875rem;}
input:-ms-input-placeholder{color:var(--tan);font-size:.875rem;}

.nav{width: 62.5%;background-color:var(--babi);margin-bottom:.75rem;}
.menu{width: 100%;margin: 0 auto;padding: .5rem;box-sizing: border-box; display:flex;flex-wrap: wrap;}
.menu a{display: block;width: 20%; height:2.5rem;line-height:2.5rem;text-align: center; font-size:1rem;color:var(--bai);}
.menu a:hover,.menu .on{color:var(--huang);}



.box{ width:100%;margin-bottom: .75rem;background-color:var(--bai); display: flex;flex-direction:column;}
.txt{padding: 0.75rem 0.625rem;}
.title{padding: .75rem .625rem 0;box-sizing: border-box;width: 100%;display: flex;justify-content: space-between;align-items: center;}
.title h3{font-size: 1.0625rem;line-height: 1.5rem;color: var(--hei);margin: 0 1px;}
.title a{display: block; font-size:.8125rem;line-height: 1.375rem; color: #fff;background-color:var(--more);border-radius: 1rem;padding: 0 .5rem;margin: 0 1px;}
.title a:hover{color:var(--huang);}


.links{width: 100%;padding:.625rem .75rem;box-sizing: border-box;display:grid;grid-template-columns: repeat(5, 1fr);grid-gap:.25rem;}
.links a{display: block;width:100%; height: 2rem;line-height:2rem; font-size: .875rem;text-align:center; overflow: hidden;background-color:var(--yin);color:var(--hong);}
.links a:hover{background-color: var(--hui);}


.vods{ width: 100%;padding:.375rem .3125rem;box-sizing: border-box;display:flex;flex-wrap:wrap;}
.vod{width:50%;padding:.3125rem;box-sizing: border-box;display: flex;flex-wrap: wrap;}
.vod-img{width: 100%;height:0;padding-top:56.25%;position: relative;}
.vod-img a{display: block;width: 100%;height: 100%; position: absolute;top: 0;left: 0;cursor: pointer;border-radius:3px;overflow: hidden; background-color: var(--yin)}
.vod-img img{width: 100%;height: 100%;transition: all 0.5s;}
.vod-img img:hover{transform: scale(1.1)}
.vod-txt{width: 100%;height:2.4rem;margin-top:.3125rem;}
.vod-txt a{display:block;padding: 0 1px;line-height:1.2rem;font-size:.875rem;color:var(--hei);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.vod-txt a:hover{color:var(--babi);}

.pages{width: 100%;margin:.75rem 0; display: flex;justify-content: center;}
.pages a{padding:.5em 1em;margin:.25rem;border-radius:3px;background-color:var(--yin);font-size:.875rem;color:var(--hei);}
.pages a:hover{background-color:var(--hui);}
.pages .num{display: none}
.pages .on{color:var(--babi);}


.player{width:100%;height:0;padding-top:56.25%;position: relative}
.player iframe{position: absolute;top:0;left:0;width:100%;height:100%}



.footer{width: 100%; background-color: var(--b2);margin-top: 2rem; padding: 3rem 0;font-size: .8rem;text-align: center;display: flex; flex-direction:column;align-items: center;}
@media (max-width:479px) {
	.nav{width: 100%;background-color:var(--babi);margin-bottom:.75rem;}
}
@media (max-width:540px) {
	.nav{width: 100%;background-color:var(--babi);margin-bottom:.75rem;}
}
@media (max-width:864px) {
	.nav{width: 100%;background-color:var(--babi);margin-bottom:.75rem;}
}
@media (max-width:1080px) {
	.nav{width: 100%;background-color:var(--babi);margin-bottom:.75rem;}
}
@media (max-width:1100px) {
	.nav{width: 100%;background-color:var(--babi);margin-bottom:.75rem;}
}
@media (min-width:540px) {
.vods{height:calc(37.5vw + 6.425rem);overflow:hidden;}
  .vod{width:33.3333%;}
}
@media (min-width:864px) {
  .menu{padding: 0;}
  .menu a{width: 10%;height:3rem;line-height:3rem;}
  .menu .on{background-color: var(--qian);color: var(--bai);}
  .links{grid-template-columns: repeat(10, 1fr);}
  .vods{height:auto}
  .vod{width:25%;}
  .pages .num{display:block;}
  
}
@media (min-width:1080px) {
  .header,.menu,.box,.player{width:1080px;}
}
@media (min-width:1100px) {
  .header{padding:0}
}