:root{
  --hong:#f71735;
  --huang:#fff462;
  --babi:#1d9cfb;
  --more:#1d9cfb;
  --qian:#7eccc2;
  --bai:#fff;
  --hei:#222;
  --tan:#888;
  --hui:#f0f0f0;
  --yin:#f6f6f6;
  --shenhui:#686666;
}
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(--bai);}
#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{ display:block; width:300px; height:60px; background:url(../images/logo.svg) no-repeat; background-position:0 50%;background-size:80%;box-shadow: none !important;}
.logo svg{height:2rem;margin-right:.5rem;}
.logo h1{font-size:1.5rem;font-weight:800;color:#005061;}

.soso{width: 35rem; border-radius:2px;border:1px solid var(--hei);overflow: hidden;display: flex;align-items: center;}
.soso input{width: 100%;height:2.125rem; padding:0 1em;box-sizing: border-box;caret-color:#0f1010;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:#000;}

.soso2{width: 55rem; border-radius:2px;border:1px solid var(--hei);overflow: hidden;display: flex;align-items: center;}
.soso2 input{width: 100%;height:2.125rem; padding:0 1em;box-sizing: border-box;caret-color:#0f1010;color:var(--hei);font-size:.875rem;background-color:var(--bai);}
.soso2 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;}
.soso2 button svg{width:1.125rem;height:1.125rem;fill:#000;}

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: .0075rem;background-color:var(--bai); display: flex;flex-direction:column;}
.title{padding:0 .5rem;width: 100%;background-color:#000;box-sizing: border-box;border-top-left-radius:.25rem;border-top-right-radius: .25rem;display: flex;justify-content: space-between;align-items: center;color: #333}
.title h3{font-size: 1.12rem;line-height: 2.5rem;color: var(--bai);margin: 0 1px;}
.title a{display: block; font-size:.875rem;line-height: 1.5rem; color: #fff;background-color:#005061;border-radius: 1rem;padding: 0 .5rem;margin: 0 1px;}
.title a:hover{color:var(--huang);}


.nav{width:100%;margin-bottom:.0075rem;display:grid;grid-template-columns: repeat(5, 1fr);grid-gap:.25rem;background-color: #d9dcdd00;}
.nav a{display: block;width:100%; height: 2rem;line-height:2rem; font-size: 1rem;text-align:center; overflow: hidden;background-color:#1C1C1C;color:var(--bai);}
.nav a:hover{
  background-color: #c93838;
  color: #fff;}
a:hover {
  /*background-color: #ff6c6c;*/
  color: #ff6c6c;
}

.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: 0px solid #005061;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: 1rem;text-align:center; overflow: hidden;background-color:#1C1C1C;color:var(--bai);}
.links a:hover{color: var(--huang);}

.vods{ width: 100%;padding:.1rem .1rem;border: 0px solid #d16239;box-sizing: border-box;border-bottom-left-radius:.25rem;border-bottom-right-radius: .25rem;display:flex;flex-wrap:wrap;}
.vod{width:50%;padding:.3rem .3rem .9rem 0.3rem;box-sizing: border-box;display: flex;flex-wrap: wrap;/*background-color: var(--bai);*/}
.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;*/border-bottom-left-radius:.25rem;border-bottom-right-radius: .25rem;border-bottom-right-radius: 0rem;border-bottom-left-radius: 0rem;overflow: hidden; background-color: var(--bai)}
.vod-img img{width: 100%;transition: all 0.5s;}
.vod-img img:hover{transform: scale(1.1)}
.vod-txt{width: 100%; height:2.2rem;}
.vod-txt2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

/*.vod-txt{width: 100%;height:3.5rem;margin-top:0; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;/*background-color: var(--hei);}*/


.vod-txt a{display:block;padding: 0 1px;font-size:.875rem;line-height:2.2rem;color:#000;}
.vod-txt a:hover{color:#d16239;}

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


.nav1 {
  display: grid;
  padding: .5rem;
  width: 100%;
  background-color: #005061;
  grid-template-columns: repeat(5, 20%);
  justify-content: center;
}

.yinying{
    margin: 0 auto;
    width: 99%;
    height: 80px;
    background-color: #fff;
    /*box-shadow: 0px 5px 2px 0px rgba(201, 200, 200, 0.75);*/
    box-shadow: 0px 0px 15px  rgba(184, 183, 183, 0.75);*/

}

.footer{width: 100%; background-color: var(--b2);margin-top: 1rem;margin-bottom: 1rem; padding: 1rem 0;font-size: .8rem;text-align: center;display: flex; flex-direction:column;align-items: center;}
@media (max-width:440px) {
  .soso{width: 12rem};
  .soso2{width: 18rem};
}
@media (max-width:900px) {

  .soso2{width: 18rem};
}

@media (max-width:767px){
    box-shadow: 0px 0px 15px  rgba(184, 183, 183, 0.75);*/
.logo{width:180px;height:45px;background:url(../images/logo_f.png) no-repeat;background-position:50% 50%;background-size:cover;}
}

@media (min-width:540px) {

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

@media (min-width:1224px) {
  #app{width:1280px;}

  .vod{width:25%;}
  .nav{grid-template-columns: repeat(10, 1fr);}
}
@media (max-width:760px) {
    .links{grid-template-columns: repeat(4, 1fr);}
    .nav{grid-template-columns: repeat(4, 1fr);}
    menu{grid-template-columns: repeat(4, 25%);}
    .vod{width:50%;}
}

@media (max-width:400px) {
    .links{grid-template-columns: repeat(3, 1fr);}
    .nav{grid-template-columns: repeat(3, 1fr);}
    menu{grid-template-columns: repeat(3, 33.33333%);}
}

.boxapp{width:100%;margin-bottom: .75rem;flex-direction:column;}


.block_app {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.block_app img {
	border-radius: 15%;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.block_app_item {
	width: auto;
	display: block;
	text-align: center;
	width: calc(100% / 20);
	width: 80px;
}

.block_app_item_title {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: black;
	white-space: nowrap;
}

.block_app_item_image {
	margin: 5px auto;
}

@media only screen and (max-width: 760px) {
	.block_app_item {
		width: calc(100% / 4);
	}
}


.col6{
    width: 50%;
    float: left;
}
.col6 a{
    display: block !important;
}
@media screen and (max-width: 750px){
     
.col6 {
    width: 100%!important;
}
.col6  img{
    height: 50px !important;
}
}


.hidden{
    display: none;
}

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


.mt5{
    margin-top:5px;
}
.mt10{
    margin-top:10px;
}
.mt15{
    margin-top:15px;
}

.top{
    width: 100%;
    height: 80px;
    margin: 0 auto;
    overflow: auto;
    _display: inline-block;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}