:root{
  --hong:#f71735;
  --huang:#fff462;
  --babi:#1d9cfb;
  --more:#1d9cfb;
  --qian:#7eccc2;
  --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;padding:0 4px; box-sizing: border-box;display: flex;flex-direction:column;align-items: center;}



.header{width:100%;padding:.625rem 0;box-sizing: border-box;height: 5rem;display: flex;justify-content:space-between;align-items: center;}
.logo{display: flex;align-items: center; }
.logo svg{height:2rem;margin-right:.5rem;}
.logo h1{font-size:1.5rem;font-weight:800;color:#007c99;}

.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:#007c99;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:#007c99;}
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;}


.stui-content__thumb,.stui-content__detail{margin: 10px;}
.stui-content__thumb .pic{ display: block; width: 325px;max-width: 100%}
.stui-content__detail .data{margin-bottom:8px}
.stui-content__detail .data li{float:left;margin-right:20px}
.stui-content__detail .desc{padding-left:42px}
.fl-l{float: left;}
.fl-r{float: right;}
.btn-primary{padding: 1px 5px;}


.player{
  position: relative;
}
#addsclose {
text-align: center;
}
#xxbutton {
top: 0;right: 0;width: 14px;height: 14px;line-height: 14px;text-align: center!important;font-size: 1.4rem!important;z-index: 99999999999999999999999;font-size: 20px!important; box-shadow: 0px 0px 16px 2px black; background: white; color: black; border-radius: 15px; position: absolute;
}
#xxa {
max-height: 220px;
text-align: center;
display: inline-block;
max-width: 100%;
overflow:hidden;
}
@media screen and (max-device-width: 760px) {
#xxbutton {
right: 0;
display: block;
}
#xxa {
max-height: 110px;
display: block;
}
}



.detail img{
    max-width: 100%;
}

 .searchkey_wrapper a{
         padding: 1px 4px!important;
    border-radius: 1px;
    margin: 2px;

    line-height: 20px!important;
    border-right:unset!important;
    border-bottom: 1px solid!important;
		 color:#3A88E9;
		 font-size: 14px;
	 }



.box{ width:100%;margin-bottom: .75rem;background-color:var(--bai); display: flex;flex-direction:column;}
.title{padding:0 .5rem;width: 100%;background-color:#007c99;box-sizing: border-box;border-top-left-radius:.25rem;border-top-right-radius: .25rem;display: flex;justify-content: space-between;align-items: center;color: #fff}
.title h3{font-size: .9375rem;line-height: 2.5rem;color: var(--bai);margin: 0 1px;}
.title a{display: block; font-size:.875rem;line-height: 3rem; color: #fff;background-color:#007c99;border-radius: 1rem;padding: 0 .5rem;margin: 0 1px;}
.title a:hover{color:var(--huang);}


.nav{width:100%;margin-bottom:.75rem;display:grid;grid-template-columns: repeat(5, 1fr);grid-gap:.25rem;}
.nav a{display: block;width:100%; height: 2rem;line-height:2rem; font-size: .9375rem;font-weight:bold;text-align:center; overflow: hidden;background-color:#007c99;color:var(--bai);}

.link1{width:100%;margin-bottom:.25rem;display:grid;grid-template-columns: repeat(5, 1fr);grid-gap:.25rem;}
.link1 a{display: block;width:100%; height: 2rem;line-height:2rem; font-size: .875rem;text-align:center; overflow: hidden;background-color:var(--bai);color:var(--hong);}

.links{width: 100%;padding:.625rem .5rem;border: 1px solid #007c99;box-sizing: border-box;border-bottom-left-radius:.25rem;border-bottom-right-radius: .25rem;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 .375rem;border: 1px solid #007c99;box-sizing: border-box;border-bottom-left-radius:.25rem;border-bottom-right-radius: .25rem;display:flex;flex-wrap:wrap;}
.vod{width:50%;padding:.375rem;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%;transition: all 0.5s;}
.vod-img img:hover{transform: scale(1.1)}
.vod-txt{width: 100%;height:2.4rem;margin-top:.3125rem; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.vod-txt a{display:block;padding: 0 1px;font-size:.875rem;line-height:1.2rem;color:var(--hei);}
.vod-txt a:hover{color:#007c99;}

.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:#007c99;}






.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 (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);}
  .nav, .link1, .links{grid-template-columns: repeat(10, 1fr);}
  .vods{height:auto}
  .vod{width:25%;}
  .pages .num{display:block;}
}
@media (min-width:1088px) {
  #app{width:1088px;}
}


.boxapp{width:100%;margin-bottom: .75rem;background-color:var(--bai);flex-direction:column;}


.photo-two {
    display: inline-block;
    margin: 10px;
    text-align: center;
    width: 58px;
    line-height: 10px;
}

.photo-two a {
    line-height: 12px;
}

.photo-two img {
    border-radius: 12%;
    height: 60px;
    width: 60px;
    margin-bottom: 5px;
}

.photo-name {
    font-size: large;
    font-weight: bold;
    font-size: small;
    color: var(--hei);
}




.hidden{
    display: none;
}

@media screen and (max-width:750px){
.hidden{
    display: inline-block!important;
}
}