@charset "utf-8";

/*** Reset ***/
html {overflow-y:scroll;}
body { margin:0; color:#666; background:#f6f8f9; font-family:Helvetica Neue,Verdana, Geneva, sans-serif, '微软雅黑', '宋体'; }
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p, button { font:14px Arial, "微软雅黑", "\5B8B\4F53";   padding:0; margin:0;  }
table, td, tr, th { font-size:14px; }
li { list-style-type:none; }
img { vertical-align:top; border:0; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-size:14px; font-weight:normal; }
strong{ font-weight:normal; }
address, cite, code, th { font-weight:normal; font-style:normal; }
em{  font-style:normal; }
.clear { clear:both; }
a { text-decoration:none; }

@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }

.c-red { color:#e54d42 !important; }
.c-blue { color:#0081ff !important; }
.c-yellow { color:#fbbd08 !important; }
.c-green { color:#39b54a !important; }
.c-purple { color:#967ada !important; }
.c-orange { color: #f37b1d !important; }
.c-cyan { color: #1cbbb4 !important; }
.c-pink { color: #e03997 !important; }

.mt40 { margin-top: 40px; }

.header { position: fixed; top:0; left:0; right: 0; background-color: #fff; width: 100%; margin:0 auto; border-bottom:1px solid #ebebeb; z-index: 999; }
.header .center { width: 100%; overflow: hidden; margin:0 auto; display: flex; flex-direction: column; align-items: center; padding: 0; }
.header .center .navgation { width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: #25262B; height: 44px; color: #fff; }
.header .center .navgation .ix { flex: 1; }
.header .center .navgation .ix.nav-left { padding-left: 12px; font-size: 15px; cursor: pointer; }
.header .center .navgation .ix.middle { display: flex; justify-content: center; align-items: center; flex: 2 !important; text-align: center; font-size: 16px; font-weight: bold; }
.header .center .navgation .ix.middle .logo { width:28px; height: 28px; margin-right: 4px; }
.header .center .navgation .ix.nav-right { text-align: right; padding-right: 12px; font-size: 15px; cursor: pointer; }

.drawer-left { margin: 0; padding: 0; }
.drawer-left .search { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.drawer-left .search .bar { width: 100%; outline: none; margin:0 10px; background-color: #ebebeb; padding-left: 16px; font-size: 13px; height: 36px; border-radius: 20px; border:none; }
.drawer-left .search .sec { position: absolute; right: 20px; top: 8px; font-size: 18px; z-index: 1; }
.drawer-left .menus { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top:16px; }
.drawer-left .menus .item { flex: 1; display: flex; min-height: 24px; padding: 6px 0 6px 16px; align-items: center; }
.drawer-left .menus .item .ax { display: inline-block; width: 100%; height: 100%; justify-content: center; padding-left: 4px; font-size: 1.1rem; color: #666; }
.drawer-left .menus .item.cur {  font-size: 15px; background-color: #ebebeb; }
.drawer-left .menus .item:hover { background-color: #fafafa; }
.drawer-left .menus .item:active { background-color: #fafafa; }

.drawer-right {  margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer-right .userbar { display: flex; flex-direction: column; align-items: center; border-bottom:1px solid #ebebeb; padding-bottom: 10px; }
.drawer-right .userbar .btnlogin { padding: 6px 20px; border-radius: 4px; cursor: pointer; }
.drawer-right .userbar .profile { display: flex; flex-direction: column; width: 100%; align-items: center; padding-bottom: 10px; }
.drawer-right .userbar .profile .cov { width: 55px; height: 55px; border-radius: 50%; }
.drawer-right .userbar .profile .nam { cursor: pointer; font-size: 15px; color:#1A1B1E; margin-top:6px;  }
.drawer-right .userbar .profile .gold { padding: 2px 10px; border-radius: 12px; margin-top:4px; font-size: 13px; }
.drawer-right .control { display: flex; flex-direction: column; padding: 10px 0; }
.drawer-right .control .item { display: flex; align-items: center; cursor: pointer; position: relative; width: 100%; font-size: 14px; padding: 10px 0; border-bottom: 1px solid #f6f6f6; }
.drawer-right .control .item .arrow { position: absolute; top: 12px; right: 0px; color: #999 !important; }
.drawer-right .control .item::before { margin-right: 4px; }
.drawer-right .control .item:last-child { border-bottom: none; }
.drawer-right .control .item:active { background-color: #ebebeb; }
.drawer-right .control .item >a { color: inherit; font-weight: bold; color:#FF9EB5; }
.drawer-right .control .like { margin-top: 10px; display: flex; align-items: center; cursor: pointer; position: relative; width: 100%; font-size: 14px; padding: 10px 0; border-bottom: 1px solid #f6f6f6; }
.drawer-right  .control .slide-fade-enter-active { transition: all 0.2s ease-out; }
.drawer-right .control .slide-fade-leave-active { transition: all 0.2s ease; }
.drawer-right .control .slide-fade-enter-from, .drawer-right .control .slide-fade-leave-to { transform: translateY(-10px); opacity: 0;}


.user { position: relative; max-width: 1045px; margin: 0 auto; }
.picture { position:relative; max-width: 1045px; margin:0 auto; display: flex; flex-direction: column; background-color: #2A2B2E; overflow: hidden; }
.picture .avt { display: flex; align-items: center; border-left: 1px solid #2C2E33; margin-left: 16px; margin-top: 20px; }
.picture .avt .ig { color: #343A41; width: 45px; height: 45px; border-radius: 50%; z-index: 10; }
.picture .avt .vp { cursor: pointer; line-height: 45px; background-color: #1A1B1E; font-size: 15px; border-radius: 0 19px 19px 0; padding: 0 14px 0 18px; color:#fff; position: relative; left:-10px; }
.picture .bc { position:absolute; top:20px; right: -40px; font-size: 160px; color: rgba(255,255,255,0.04); }
.counter { max-width: 1045px; margin:0 auto; display: flex; align-items: center; padding: 0 16px; margin: 30px 0;  }
.counter .ix { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #333;  }
.counter .ix:last-child { border-right: none; }
.counter .ix .num { font-size: 26px; line-height: 30px; color:#ebebeb; }
.counter .ix .name { color: #666; }
.grid { max-width: 1045px; display: flex; background-color: #fff; border:1px solid #ebebeb; border-radius: 16px; margin:16px auto; }
.grid .ct { flex:1; display: flex; cursor: pointer; flex-direction: column; align-items: center; padding: 16px 0; }
.grid .ct .xc { font-size: 24px; }
.grid .ct .nm { margin-top: 6px; font-size: 13px; color: #999; }
.table-view { max-width: 1045px; margin:0 auto; display: flex; flex-direction: column; background-color: #fff;  }
.table-view .cell { display: flex; cursor: pointer; justify-content: space-between; align-items: center; padding:12px 16px; border-bottom:1px solid #ebebeb;  }
.table-view .cell:last-child { border-bottom: none; }
.table-view .cell .infom { flex: 1; }
.table-view .cell .arrow { font-size: 16px; color:#999; }
.outbtn { max-width: 1045px;  display: flex; align-items: center; padding: 0 16px; margin: 20px auto; }
.outbtn .wp { width: 100%; border-radius: 6px; display: flex; padding: 10px 0; align-items: center; justify-content: center; background-color: #e54d42; color:#fff; cursor: pointer; }
.btn-home { cursor: pointer; max-width: 1045px; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: absolute; right: 10px; top: 80vh; width: 44px; height: 44px; top: 84vh; right: 10px; background-color: #fff; border-radius: 50%; border:1px solid #ebebeb; }
.btn-home .cu { font-size: 26px; }

.roles { position: absolute; right: 0; top: 22px; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; font-size: 14px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.roles .tms { font-size: 11px !important; }

.video { max-width: 800px; overflow-y: scroll; margin:0 auto; display: flex; flex-direction: column; margin-top: 42px; padding-bottom: 40px; padding: 12px; padding-bottom: 80px; }
.video .vp { display: flex; flex-direction: column; }
.video .vp .ta { background-color: #fff; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; }
.video .vp .ta .cls { font-size: 20px; font-weight: bold; color:#000; }
.video .item { border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; border-bottom: 1px solid #ebebeb; box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15); margin-bottom: 20px; background-color: #fff; cursor: pointer; }
.video .item .cover { position: relative; width: 100%; height: 280px;  overflow: hidden; }
.video .item .cover .vd { color: rgba(255, 255, 255, 0.8); font-size: 50px; position: absolute; cursor: pointer; left:45%; top:38%; width: 60px; height: 60px; z-index: 1; }
.video .item .cover .img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.video .item .info { display: flex; flex-direction: column; align-content: center; width: 100%; padding: 10px 0; }
.video .item .info .tit { color: #333; padding: 0 10px; font-size: 15px; font-weight: bold; line-height: 20px; }
.video .item .info .own { display: flex; align-items: center; justify-content: space-between; padding:0 10px; margin-top: 6px; }
.video .item .info .own .cv { display: flex; align-items: center; margin-right: 10px; }
.video .item .info .own .cv .av { width: 18px; height: 18px; background-color: #ebebeb; border-radius: 50%; }
.video .item .info .own .cv .nm { margin-left: 4px; }
.video .item .info .own .cv .time { font-size: 13px; }
.video .more { display: flex; justify-content: center; align-content: center; }
.video .more .load { animation: rotate 1s linear infinite; font-size: 22px; color:#999; }

.pagebar { width: 100%; display: flex; align-items: center; justify-content: center; max-width: 800px; margin: 20px auto;  }
.pagebar .pg { padding: 6px 12px; border-radius: 4px; cursor: pointer;  }
.pagebar .num { display: flex; align-items: center; justify-content: center; margin:0 12px; padding: 7px 12px; font-size: 14px; background-color: #fff; border-radius: 4px; border: 1px solid #ebebeb; color:#666;  }
.pagebar .more { flex: 1; margin: 10px 16px; padding: 9px 0; border-radius: 4px; cursor: pointer; font-size: 15px; }

.play { width: 100%; max-width: 900px; margin:0 auto; padding: 0 0 12px 0; display: flex; justify-content: center; flex-direction: column; border-radius: 6px; overflow: hidden; }
.play .wp { position: relative; width:100%; margin:0 auto; margin-top: 60px; padding:0; overflow: hidden; }
.play .wp .back { position: absolute; cursor: pointer; top: 20px; left: 10px; z-index: 99; width: 30px; text-align: center; font-size: 26px; color: #fff; }
.play .wp .infomation { background-color: #25262B; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden; }
.play .wp .title { display: flex; align-items: center; padding: 16px;  }
.play .wp .title .name { font-size: 1rem; color:#C1C2C5; }
.play .wp .player-div { width: 100%; height: 500px;  }
.play .wp .desc { display: flex; padding:0 16px; }
.play .wp .desc .le { display: flex; width: 90%; }
.play .wp .desc .le .dx { margin-right: 16px; color:#C1C2C5 }
.play .wp .desc .le .dx::before { padding-right: 2px; }
.play .wp .desc .rg { display: flex; align-items: flex-end; flex: 1; position: relative; top: -16px; }
.play .wp .context { padding: 16px; color:#ebebeb; line-height: 22px; }
.play .wp .tags { display: flex; align-items: center; padding:16px; padding-top: 0; gap: 6px; }
.play .wp .tags .item { padding: 4px 16px; font-size: 12px; border-radius: 16px; background-color: #000; color:#fff; }

.play .wp .m3u8 { width:100%; display: flex; align-items: center; justify-content: center; position: absolute; top: 20%; color:#fff; z-index: 9999; }
.play .wp .vips { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.play .wp .vips .ct { padding: 6px 16px; border-radius: 15px; font-size: 13px; }
.play .wp .vips .ct>a { color:#fff; }
.play .wp .vips .ct::before { margin-right: 4px; }

.source { width: 100%; padding: 16px; display: flex; justify-content: center; flex-direction: column; background: #fff;  }
.source .wp { position: relative; width:100%; margin:0 auto; margin-top:46px; padding:0; border-bottom: 1px solid #ebebeb; padding-bottom: 10px; }

.source .wp .pleyer { width: 100%; height: 375px; }

.source .wp .m3u8 { width:100%; display: flex; align-items: center; justify-content: center; position: absolute; top: 20%; color:#fff; z-index: 9999; }
.source .wp .vips { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.source .wp .vips .ct { padding: 6px 16px; border-radius: 15px; font-size: 13px; }
.source .wp .vips .ct>a { color:#fff; }
.source .wp .vips .ct::before { margin-right: 4px; }




.rand { width: 100%; padding: 12px; margin: 0 auto 0 auto; margin-top: 20px; display: flex; flex-direction: column;  flex-wrap: wrap; background-color: #fff; }
.rand .item { width: 100%; display: flex; overflow: hidden; border-bottom: 1px solid #ebebeb; }
.rand .item .cv { margin: 0; overflow: hidden; padding: 12px; }
.rand .item .cv .as { width: 130px; height: 90px; overflow: hidden; display: inline-block; text-decoration: none; outline: 0; cursor: pointer; }
.rand .item .cv .as .iimm { width:100%; height: 100%; background-color: #ebebeb; }
.rand .item .if { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 12px 12px 0 0; }
.rand .item .if .tl { text-align: left; font-size: 16px; line-height: 22px; color: #000; overflow: hidden; }
.rand .item .if .ds { text-align: left; font-size: 13px; color: #999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top:10px; }
.rand .item .if .at { display: inline-block; color: inherit; }

.sign { margin:0 auto; max-width:800px; }
.sign .join { display: flex; align-items: center; margin:0 auto; width:340px; height: 60px; }
.sign .join .back { font-size: 32px; color:#777; }
.sign .warp { width:340px; margin:90px auto; margin-top:80px; padding:20px; border:1px solid #ebebeb; border-radius: 8px; box-shadow: 0 6px 10px 0 rgba(95, 101, 105, .15);   }
.sign .warp .lgwp { width: 100%; display: flex; justify-content: center; align-items: center; }
.sign .warp .lgwp .imx { display: flex; align-items: baseline;  }
.sign .warp .lgwp .imx img { width: 100%; height: 88px; border-radius: 6px; object-fit: cover; }
.sign .warp .tpo { display: flex; align-items: baseline; justify-content: center; font-size:20px; color:#333; font-weight: bold; margin:20px 0; }
.sign .warp .tpo span {  font-size:16px; font-weight: normal; color:#999; margin-left:10px;  }
.sign .warp .input .textfiled { margin:0 0 0 0; position:relative; margin-top:16px; }
.sign .warp .input .textfiled .ii { position:absolute; top:13px; left:10px; }
.sign .warp .input .textfiled input { width: 100%;height: 42px;line-height: 20px;box-sizing: border-box;padding: 14px;padding-left:30px; box-shadow: 2px 0 5px 0 #fff;background: rgba(28,31,33,.06);border-radius: 4px;border: 0; outline:none; }
.sign .warp .input .textfiled button { width:100%;line-height: 42px;box-sizing: border-box;padding:0 14px;padding-left:30px;font-size: 16px;border-radius: 24px; color:#fff; border: 0;background: #E8503D; outline:none; cursor:pointer; }
.sign .warp .input .textfiled button:hover { background: #E8503D; }
.sign .warp .input .textfiled .login { display:inline-block; margin-top:14px; color:#666; margin-top: 20px; }
.sign .warp .input .textfiled .msg { height:22px; }
.sign .warp .input .textfiled span { font-size:12px; color:#E8503D; line-height:22px;  }


.nav-bar { position: fixed; top:0; left:0; right: 0; z-index: 2; max-width: 800px;  margin:0 auto; display: flex; border-bottom: 1px solid #ebebeb; background-color: #fff; justify-content: center; align-items: center; font-size: 16px; height: 44px; }
.nav-bar .back { position: absolute; left:14px; font-size: 26px; color:#777; cursor: pointer; }

.menu { position: fixed; top:45px; left:0; right: 0; z-index: 2; max-width: 800px;  margin:0 auto; display: flex; align-items: center; background-color: #fff; height: 44px; border-bottom: 1px solid #ebebeb; }
.menu .item { flex: 1; display: flex; min-height: 24px; justify-content: center; }
.menu .item.cur { color:#E8503D; font-size: 15px; }

.mylist { max-width: 800px; margin:0 auto; margin-top: 90px; display: flex; flex-direction: column;  padding-bottom: 40px; }
.mylist .item { display: flex; border-bottom: 1px solid #ebebeb;  padding: 16px; background-color: #fff; cursor: pointer; }
.mylist .item .cover {  position: relative; width: 130px; height: 90px;  overflow: hidden; }
.mylist .item .cover .vd { color: rgba(255, 255, 255, 0.8); font-size: 30px; position: absolute; cursor: pointer; left:41%; top:32%; width: 60px; height: 60px; z-index: 1; }
.mylist .item .cover .img { width: 130px; height: 100%; object-fit: cover; cursor: pointer; }
.mylist .item .info { position: relative;  flex: 2; display: flex; flex-direction: column; }
.mylist .item .info .tit { color: #333; padding: 0 10px; font-size: 15px; font-weight: bold; line-height: 20px; }
.mylist .item .info .ops { display: flex; align-items: center; padding: 0 10px; margin-top:6px; align-items: center; }
.mylist .item .info .ops .ts { color:#999; font-size: 13px; margin-right: 10px; font-weight: normal !important; }
.mylist .more { display: flex; justify-content: center; align-content: center; }
.mylist .more .load { animation: rotate 1s linear infinite; font-size: 22px; color:#999; }
.mylist .item .del { position: absolute; right: 0; bottom: 0; }

.mobile-warp { max-width: 800px; margin: 0 auto; margin-top: 60px; background-color: #fff; }

.setmeal { margin:20px 0 60px 0; display: flex; flex-direction: row; flex-wrap: wrap; }
.setmeal .items { background-color: #F6DAD7; border:1px solid #ebebeb; padding: 10px 0; margin:0 10px 20px 0; flex: 1; cursor: pointer; color: #C85960; border-radius: 4px; }
.setmeal .items .le { text-align: center; font-size:16px;  font-weight: bold; }
.setmeal .items .pre {  text-align: center; font-size:13px; }
.setmeal .items.cur { background-color:#E15345; color:#fff; }

.vipmeal { margin:20px 0 60px 0; display: flex; flex-direction: row; flex-wrap: wrap; }
.vipmeal .items { background-color: #D0E6FE; border:1px solid #D0E6FE; padding: 10px 0; margin:0 10px 20px 0; width: 110px; cursor: pointer; color: #3282FF; border-radius: 4px; }
.vipmeal .items .le { text-align: center; font-size:16px;  font-weight: bold;  }
.vipmeal .items .pre {  text-align: center; font-size:13px; }
.vipmeal .items.cur { background-color:#3282FF; color:#fff; }

.buttons { display: flex; flex-direction: row; flex-wrap: wrap; }
.buttons .btn { flex: 1; margin-top:20px; line-height: 40px; border:none; color:#fff; padding: 0 14px; cursor: pointer; font-size:14px; margin-right:10px; }
.services {  background-color: #ED7C30;  }
.services:hover { background-color: #ED7C30; }
.alipay {  background-color: #007ACC;  }
.alipay:hover { background-color: #007ACC; }
.wxpay {  background-color: #1AAD19;  }
.wxpay:hover { background-color: #1AAD19; }
.union {  background-color: #666666;  }
.union:hover { background-color: #666666; }

.nodata { display: flex; flex-direction: column; justify-content: center; height: 60vh; align-items: center; }
.nodata .ic { font-size: 40px; color:#ccc; }
.nodata .tl { margin-top: 10px; color: #ccc; }

.member .m-right { max-width: 800px; margin:0 auto; padding:16px 8px; background-color: #fff; }
.member .m-right .cts { width:100%; }
.member .m-right .cts .add { margin:10px 0; }
.member .m-right .cts .tags { float:left; box-shadow: 0 3px 3px #eaedef; overflow:hidden; width:120px; height:48px; border-radius:10px; border:1px solid #ebebeb;text-align:center; margin:20px 20px 0 0; }
.member .m-right .cts .tags h2 { font-size:18px; color:#333; line-height:28px; font-family:"PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif; }
.member .m-right .cts .tags p { font-size:12px; color:#777; line-height:20px;background:#f8fafc; }
.member .m-right .cts .tags p a { color:#fff !important; display:inline-block; text-align: center; width:118px;line-break: 48px; }
.member .m-right .cts .tb { margin:20px 0; width:98%; }
.member .m-right .cts .tb .tbr { margin-bottom:10px; }
.member .m-right .cts .tb .tbh { float:left; width:20%; line-height:40px; background:#f3f5f7; text-align:center; color:#333; }
.member .m-right .cts .tb .tbd { float:left; width:80%; }
.member .m-right .cts .tb .tbd .radio { margin-left: 10px; display: flex; align-items: center; height: 40px; }
.member .m-right .cts .tb .tbd .radio .lb { display:flex; margin:0 16px 0 0; text-align:center; height:40px; align-items: center; color:#333; }
.member .m-right .cts .tb .tbd .radio .lb input { margin-right:2px; }
.member .m-right .cts .tb .tbd input.txt { width:100%; display:inline-block; margin-left:10px; line-height:40px; border: 0;  color:#333; outline:none; padding:0 10px; background-color: #fbfbfb; }
.member .m-right .cts .tb .tbd input::-webkit-input-placeholder { color:#ccc; }
.member .m-right .cts .tb .tbd .txtarea { border:0; font-size:13px; line-height:18px; color:#333; width:100%;margin-left:10px; background-color: #fbfbfb; height:120px; outline:none; padding:10px; }
.member .m-right .cts .tb .tbd .txtarea::-webkit-input-placeholder { color:#ccc; }
.member .m-right .cts .tb .tbd .category { height: 40px; margin-left:10px; width: 200px; outline: none; border-radius: 2px; }
.member .m-right .cts .shr { margin:20px 0; width:98%;border-collapse:collapse; }
.member .m-right .cts .shr tr th { background:#f3f5f7; line-height:40px; color:#1c1f21; font-size:13px; }
.member .m-right .cts .shr tr td { height:40px; text-align:center; color:#1c1f21; border-bottom:1px solid #ebebeb; font-size:13px; }
.member .m-right .cts .shr tr td.title { text-align:left; width:400px;color:#E8503D; }
.member .m-right .cts .shr tr td a { color:#E8503D; }
.member .m-right .cts .tb .tbb { display: flex; flex-direction: column; }
.member .m-right .cts .tb .tbb .top-bar { margin-top: 40px; padding: 16px 0; }
.member .m-right .cts .tb .tbb table { border: 1px solid #dcdee2; width: 100%; border-collapse: collapse; }
.member .m-right .cts .tb .tbb table th { background-color: #f8f8f9; padding: 8px 0; font-size: 12px; }
.member .m-right .cts .tb .tbb table td { padding: 10px 6px; font-size: 12px; border-bottom: 1px solid #dcdee2; }



.btn-save { background-color: #E8503D; border: none; width: 100%; color:#fff; height: 40px; margin-top:20px; border-radius: 20px; }

.souImages { display: flex; flex-direction: row; padding-left:10px; flex-wrap: wrap; }
.souImages .item { display: flex; align-items: center; width: 60px;height: 60px; border: 1px solid #ebebeb; margin-right: 10px; overflow: hidden; margin-bottom: 10px; object-fit: cover; border-radius: 4px; }
.souImages .item img { width:100%;height:100%; cursor: pointer; object-fit: cover; }
.souImages .upbtn { border:none; font-size: 26px; cursor: pointer; text-align: center; line-height: 70px; }
.souImages .empty { width: 60px;height:60px;line-height: 60px;font-size:22px; }
.souImages .item .vis { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.souImages .item .vis .ii { font-size: 40px; }
.souImages .item .vis .sts { font-size: 11px; }

.footer { position: fixed; bottom:0;  width: 100%; z-index: 10; }
.footer .warp { max-width:800px; overflow: hidden; margin:0 auto; display: flex; justify-content: space-between; align-items: center;  height:60px; background:#25262B; }
.footer .warp .items { cursor: pointer; display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; color: #C1C2C5; }
.footer .warp .items .icon { font-size: 24px; margin-top:2px; line-height: normal; }
.footer .warp .items .title { font-size: 11px; margin-top: 2px; }
.footer .warp .items.cur .icon { color: #E8503D !important; }

.bbk { display: flex; height: 100vh; background-color: #fff; overflow: hidden; }
.bbk .top { position: fixed; top:0; z-index: 100; width: 100%; height: 54px; background-color: #25262B; }
.bbk .top .navgation { width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: #25262B; height: 60px; color: #fff; }
.bbk .top .navgation .ix { flex: 1; }
.bbk .top .navgation .ix.nav-left { padding-left: 12px; font-size: 16px; cursor: pointer; }
.bbk .top .navgation .ix.middle { display: flex; justify-content: center; align-items: center; flex: 2 !important; text-align: center; font-size: 16px; font-weight: bold; }
.bbk .top .navgation .ix.middle .logo { width:100%; height: 48px; margin-right: 4px; border-radius: 4px; }
.bbk .top .navgation .ix.middle .al { display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; }
.bbk .top .navgation .ix.nav-right { text-align: right; padding-right: 12px; font-size: 16px; cursor: pointer; }

.bbk .left { display: none; position: sticky; top:0; width: 200px; background-color: #1D2636; padding: 12px; height: 100vh; overflow-y: scroll; }
.bbk .left::-webkit-scrollbar { display: none; }

.bbk .left .slot { display: flex; justify-content: flex-start; flex-direction: column; width: 100%; color:#fff; }
.bbk .left .slot .s-logo { display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid #2C2E33; font-size: 18px; font-weight: bold; }
.bbk .left .slot .s-logo .tl { display: inline-block; color:#fff; width:80%; height: 100%; }
.bbk .left .slot .s-logo .tl .logo { width: 100%; height: 100%; margin-right: 4px; object-fit: cover; }

.bbk .left .slot .s-search { margin-top:10px; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.bbk .left .slot .s-search .bar { flex: 1; outline: none; background-color: #ebebeb; padding-left: 10px; font-size: 14px; height: 36px; border-radius: 18px; border:none; }
.bbk .left .slot .s-search .sec { cursor: pointer; color: #999; position: absolute; right: 18px; top: 9px; font-size: 15px; z-index: 1; }
.bbk .left .slot .s-menus { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top:16px; }
.bbk .left .slot .s-menus .item { flex: 1; display: flex; min-height: 24px; padding: 6px 0 6px 16px; align-items: center; }
.bbk .left .slot .s-menus .item .ax { display: inline-block; width: 100%; height: 100%; justify-content: center; padding-left: 4px; font-size: 15px; color: #999; }
.bbk .left .slot .s-menus .item.cur {  font-size: 15px; }
.bbk .left .slot .s-menus .item:hover { background-color: #343A41; }

.bbk .right { display: none; position: sticky; top:0;  width: 180px; padding: 12px; background-color: #f6f6f6; }
.bbk .right .ship { display: flex; justify-content: flex-start; flex-direction: column; width: 100%; height: 100vh; overflow-y: auto; color:#fff; }
.bbk .right .ship .userbar { display: flex; flex-direction: column; align-items: center; border-bottom:1px solid #ebebeb; padding-bottom: 10px; }
.bbk .right .ship .userbar .btnlogin { padding: 6px 20px; border-radius: 4px; cursor: pointer; }
.bbk .right .ship .userbar .profile { display: flex; flex-direction: column; width: 100%; align-items: center; padding-bottom: 10px; }
.bbk .right .ship .userbar .profile .cov { width: 55px; height: 55px; border-radius: 50%; background-color: #ddd; }
.bbk .right .ship .userbar .profile .nam { cursor: pointer; font-size: 15px; color:#1A1B1E; margin-top:6px;  }
.bbk .right .ship .userbar .profile .gold { padding: 2px 10px; border-radius: 12px; margin-top:4px; font-size: 13px; }
.bbk .right .ship .userbar .control { display: flex; flex-direction: column; padding: 10px 0; }
.bbk .right .ship .control .item { display: flex; color: #515a6e; align-items: center; cursor: pointer;  position: relative; width: 100%; font-size: 14px; padding: 10px 0; }
.bbk .right .ship .control .item .arrow { position: absolute; top: 12px; right: 0px; color: #999 !important; }
.bbk .right .ship .control .item::before { margin-right: 4px; }
.bbk .right .ship .control .item:last-child { border-bottom: none; }
.bbk .right .ship .control .item:hover,.bbk .right .ship .control .item:active { font-size: 15px; }
.bbk .right .ship .control .item > a { color: inherit; font-weight: bold; color:#FF9EB5; }
.bbk .right .ship .control .like { margin-top: 10px; display: flex; color: #515a6e; align-items: center; cursor: pointer;  position: relative; width: 100%; font-size: 14px; padding: 10px 0; }
.bbk .right .ship .control .slide-fade-enter-active { transition: all 0.2s ease-out; }
.bbk .right .ship .control .slide-fade-leave-active { transition: all 0.2s ease; }
.bbk .right .ship .control .slide-fade-enter-from, .bbk .right .ship .control .slide-fade-leave-to { transform: translateY(-10px); opacity: 0;}

.sourcetitle { color:#e54d42; font-weight: bold; width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sourcewarp { max-width: 800px; margin: 0 auto;}

.bbk .center { position: relative; flex:1; height: 100vh; overflow-y: auto; }
.bbk .center .by { padding: 16px; margin-top: 60px; }
.bbk .center .by .wrp { display: flex; flex-direction: column; margin-bottom: 30px; }
.bbk .center .by .wrp .hd { display: flex; margin-bottom: 14px; justify-content: space-between; align-items: center; width: 100%; }
.bbk .center .by .wrp .hd .dd { display: flex; align-items: center; font-size: 1.4rem; color:#000; }
.bbk .center .by .wrp .hd .bar { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.bbk .center .by .wrp .hd .ar { flex: 1; }
.bbk .center .by .wrp .hd .sr { flex: 1; display: flex; align-items: center; justify-content: flex-end; } 
.bbk .center .by .wrp .hd .sr .put { width: 180px; margin-right: 10px; }

.bbk .center .by .wrp .xh { display: flex; flex-direction: column; margin-bottom: 14px; width: 100%; }
.bbk .center .by .wrp .xh .tle { margin-bottom: 20px; font-size: 20px; color:#000; }
.bbk .center .by .wrp .xh .acn { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.bbk .center .by .wrp .xh .ar { flex: 1; }
.bbk .center .by .wrp .xh .sr { flex: 1; display: flex; align-items: center; justify-content: flex-end; } 
.bbk .center .by .wrp .xh .sr .put { width: 180px; margin-right: 10px; }

.bbk .center .by .wrp .child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.bbk .center .by .wrp .child .item { display: flex; flex-direction: column; overflow: hidden; border:1px solid #ebebeb; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.bbk .center .by .wrp .child .item .cover { position: relative; display: flex; overflow: hidden; width: 100%; height: 200px; cursor: pointer; }
.bbk .center .by .wrp .child .item .cover .ig { background-color: #ebebeb; overflow: hidden; aspect-ratio: auto 800 / 535; flex: 1; object-fit: cover; width: 100%; height: 100%;  background-size: cover; transition: transform .4s ease; }
.bbk .center .by .wrp .child .item .cover .ig:hover { transform: scale(1.05) rotate(.02deg); }
.bbk .center .by .wrp .child .item .cover .hv { width: 100%; max-height: 200px; }
.bbk .center .by .wrp .child .item .cover .inv { position:absolute; top:0; left:0; background-color: #e54d42; z-index: 1; font-size: 14px; padding: 6px 12px; color:#fff; border-bottom-right-radius: 8px; }
.bbk .center .by .wrp .child .item .cover .playicon { z-index: 1; pointer-events: none; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size: 1.5rem; background-color: rgba(0,0,0,.5); border-radius: 50%; padding: .5rem; }

.bbk .center .by .wrp .child .item .info { display: flex; flex-direction: column; align-content: center; width: 100%; padding: 10px 0; }
.bbk .center .by .wrp .child .item .info .own { display: flex; flex-direction: column; justify-content: space-between; padding:0 10px; margin-top: 6px; }
.bbk .center .by .wrp .child .item .info .tit { color: #333; padding: 0 10px; font-size: 15px; font-weight: bold; line-height: 20px; height: 40px; overflow: hidden; text-overflow: ellipsis; }
.bbk .center .by .wrp .child .item .info .tit .hv { color:#000; }
.bbk .center .by .wrp .child .item .info .tit .hv em { color: #f73131; }
.bbk .center .by .wrp .child .item .info .tit .hv:hover { color:#DB4245; }
.bbk .center .by .wrp .child .item .info .tit.story { height: 20px; }
.bbk .center .by .wrp .child .item .info .tit.story .sv { color: #DB4245; }
.bbk .center .by .wrp .child .item .info .tit.story .sv:hover { text-decoration: underline; }

.bbk .center .by .wrp .child .item .info .vdo { color: #333; padding: 0 10px; font-size: 15px; font-weight: bold; line-height: 20px; height: 40px; overflow: hidden; }
.bbk .center .by .wrp .child .item .info .vdo .dv { color:#000; }
.bbk .center .by .wrp .child .item .info .vdo .dv:hover { color:#DB4245; }
.bbk .center .by .wrp .child .item .info .vdo em { color: #DB4245; }

.bbk .center .by .wrp .child .item .info .own .cv { display: flex; width: 100%; justify-content: space-between; align-items: center;}
.bbk .center .by .wrp .child .item .info .own .cv .av { width: 18px; height: 18px; background-color: #ebebeb; border-radius: 50%; }
.bbk .center .by .wrp .child .item .info .own .cv .nm { margin-left: 4px; }
.bbk .center .by .wrp .child .item .info .own .time { font-size: 12px; }
.bbk .center .by .wrp .child .item .info .own .like { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.bbk .center .by .wrp .vp { display: flex; flex-direction: column; }
.bbk .center .by .wrp .back { cursor: pointer; z-index: 999; width: 32px; text-align: center; font-size: 26px; color: #000; }
.bbk .center .by .wrp .vp .ta { background-color: #fff; padding: 14px 0; display: flex;  align-items: center; }
.bbk .center .by .wrp .vp .ta .cls { font-size: 20px; font-weight: bold; color:#000; }

.bbk .center .by .wrp .infom { display: flex; flex-direction: column; width: 100%; max-width: 100%; }
.bbk .center .by .wrp .infom .title { display: flex; border-bottom:1px solid #dbdbdb; width: 100%; max-width: 100%; overflow: hidden; white-space: normal; word-break: break-all; align-items: center; padding: 10px 0; font-size: 18px; color:#000;  }
.bbk .center .by .wrp .infom .title .invalid { font-size: 18px; color:red; }

.bbk .center .by .wrp .desc { padding:0; display: flex; margin-top: 20px; }
.bbk .center .by .wrp .desc .dx { display: flex; align-items: center; margin-right: 16px; color:#999 }
.bbk .center .by .wrp .desc .dx::before { padding-right: 2px; }

.bbk .center .by .wrp .context { display: flex; flex-direction: column; padding: 10px 0; }
.bbk .center .by .wrp .context .wx { display: flex; justify-content: center; width: 100%; margin-top: 20px; }
.bbk .center .by .wrp .context .wx .is { font-size: 15px; text-align: left; width:100%; max-width: 640px; margin:0 auto; border:1px solid #e9e9e9; background-color: #f7f7f7; padding: 16px; border-radius: 8px; }
.bbk .center .by .wrp .context .images { display: flex; flex-direction: column; width: 100%; max-width: 900px; align-items: center; margin: 40px auto; }
.bbk .center .by .wrp .context .images img { border-radius: 8px; cursor: pointer; width: 100%; height: 100%; margin-bottom: 20px; background-color: #f8f8f8; }
.bbk .center .by .wrp .context .buys { display: flex; justify-content: center; width: 100%; margin-top: 20px;  }
.bbk .center .by .wrp .context .buys .us { border:1px solid #eee; border-radius: 6px; padding: 8px; box-shadow: 2px 4px 4px #ebebeb; }
.bbk .center .by .wrp .context .buys .us .tbe { color:#515a6e; width:100%; min-width: 320px; }
.bbk .center .by .wrp .context .buys .us .tbe th { font-weight: bold; background-color: #f8f8f8; width: 100px; padding: 12px 0px; border-bottom: 1px solid #e8eaec; }
.bbk .center .by .wrp .context .buys .us .tbe td { padding-left: 16px; border-bottom: 1px solid #e8eaec; }
.bbk .center .by .wrp .context .option-bar { display: flex; justify-content: center; align-items: center; margin-top: 20px ; }
.bbk .center .by .wrp .context .option-bar .item { width:50px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; margin:0 10px }
.bbk .center .by .wrp .context .option-bar .item .icc { font-size: 28px; padding: 4px; border-radius: 50%; }
.bbk .center .by .wrp .context .option-bar .item .txx { font-size: 12px; margin-top:2px; color:#666; }

.bbk .center .by .wrp .context .chapter { display: grid; align-items: center; overflow: hidden; flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 1px; }
.bbk .center .by .wrp .context .chapter .itx { cursor: pointer; color:#333; border-radius: 4px; border:1px solid #ebebeb; margin-right: 10px; margin-bottom: 10px; padding: 4px 12px; }
.bbk .center .by .wrp .context .chapter .itx a { color: inherit; display: flex; justify-content: center; }
.bbk .center .by .wrp .context .chapter .itx.cur { background-color: #DB4245; color:#fff; }
.bbk .center .by .wrp .context .text-data { max-width: 800px; word-break: break-all; margin: 20px auto; font-size: 18px; text-underline-offset: .25em; line-height: 1.8; color: rgba(0,0,0,.9) }
.bbk .center .by .wrp .context .text-data p { word-break: break-all; font-size: 18px; text-underline-offset: .25em; line-height: 1.8; color: rgba(0,0,0,.9); margin-top: .8em; }

.story-bg {background-color: #F2EEE5 !important; }

.ft { position: absolute; left:0; bottom: 0; right: 0; padding: 12px; color:#515a6e; background-color: #fff; border-top: 1px solid #ebebeb; }
.ft .wxp { padding: 8px 0; }
.ft .wxp .xw { color:#515a6e; font-size: 12px; }
.ft .wxp .xw:hover { text-decoration: underline; }
.ft .wxp .sl { color:#ebebeb; margin: 0 2px; }
.ft .pwd { font-size: 12px; color:#bbb; }


.cry { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.cry .item { border-radius: 4px; cursor: pointer; overflow: hidden; }
.cry .item:last-child { margin-right: 0; }
.cry .item a { display: inline-block; color:#fff; background-color: #343a40; padding: 6px 4px; width: 100%; font-size: .9rem; text-align: center; }
.cry .item:hover a { background-color: #DB4245; color:#fff; }
.cry .item.cur a { background-color: #DB4245; color:#fff; }

.comment { display: flex; flex-direction: column; width: 100%; margin: 20px 0 40px 0; }
.comment .tpx { font-size: 20px; color:#000; }
.comment .item { display: flex; flex-direction: column; background-color: inherit; margin: 12px 0; }
.comment .item .msgx { margin: 20px 0; }
.comment .item .warp { display: flex; box-shadow: 0 4px 8px 0 rgba(7,17,27,.1); padding: 16px; background-color: #fff; border-radius: 12px; }
.comment .item .warp .avt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;  min-width: 100px; }
.comment .item .warp .avt .img { width: 42px; height: 42px; border-radius: 50%; background-color: #ebebeb; }
.comment .item .warp .avt .nk { margin-top:10px; }
.comment .item .warp .ctx { width: 100%; display: flex; flex-direction: column;  } 
.comment .item .warp .ctx .tp { display: flex; align-items: center;  }
.comment .item .warp .ctx .tp .time { color:#93999f; font-size: 12px; }
.comment .item .warp .ctx .msg { padding-top: 8px; min-height: 44px; }
.comment .item .warp .ctx .she { display: flex; align-items: center; }
.comment .item .warp .ctx .good { cursor: pointer; background-color: rgba(84, 92, 99, 0.1); color: #93999f; padding: 5px 16px; font-size: 14px; line-height: 1.42857143; border-radius: 18px; }
.comment .item .warp .ctx .good .num { padding-left:4px; }

.page { display: flex; justify-content: center; }

.xmu { display: flex; flex-direction: column; margin-top:20px; }
.xmu .item { display: flex; flex-direction: column; }
.xmu .item .parent { display: flex; align-items: center; color:#666; }
.xmu .item .parent:hover { background-color: #343A41; }
.xmu .item .parent .hf { display: flex; align-items: center; padding: 6px 0;  }
.xmu .item .parent .hf a { display: inline-block; font-weight: bold; width: 130px; color:inherit;  font-size: 15px; padding-left: 4px; }
.xmu .item .child { width: 100%; display: flex; flex-direction: column; justify-content: center; }
.xmu .item .child .hf { padding: 5px 0; padding-left: 16px; }
.xmu .item .child .hf:hover { background-color: #343A41; }
.xmu .item .child .hf a { color:#999; font-size: 15px; padding-left: 4px; }

.bmu { display: flex; flex-direction: column; margin-top:20px; }
.bmu .item { display: flex; flex-direction: column; }
.bmu .item .parent { display: flex; align-items: center; color:#333;}
.bmu .item .parent .hf { display: flex; align-items: center; padding: 6px 0; font-weight: bold;  }
.bmu .item .parent .hf a { display: inline-block; font-weight: bold; width: 130px; color:inherit;  font-size: 15px; padding-left: 4px; }
.bmu .item .child { width: 100%; display: flex; flex-direction: column; justify-content: center; }
.bmu .item .child .hf { padding: 5px 0; padding-left: 16px; }
.bmu .item .child .hf:hover { background-color: #fafafa; }
.bmu .item .child .hf:active { background-color: #fafafa; }
.bmu .item .child .hf a { color:#666; font-size: 1.1rem; padding-left: 4px; }

.chigua-container {
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

.chigua-container .card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
}
.chigua-container .card > a {
    color: #333;
}
.chigua-container .title { 
  font-size: 18px; margin-bottom: 8px; 
}
.chigua-container .title > a {
  color: #333;
}
.chigua-container .title > a:hover {
  color: #e54d42;
}

.chigua-container .title > a em {
  color: #e54d42;
}

.chigua-container .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888;
}
.chigua-container .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 28px;
}
.chigua-container .images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.chigua-container .images img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  background-color: #ebebeb;
}
.chigua-container .videos {
    width: 100%;
    height: 380px;
    margin-top: 20px;
    background-color: #ebebeb;
    border-radius: 12px;
    overflow: hidden;
}

.chigua-tags {
  max-width: 800px;
  width: 100%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chigua-tags .tag {
  background-color: #f0f0f0;
  color: #333;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.chigua-tags .tag:hover {
  background-color: #e54d42;
  color: #fff;
}



.source-tags {
  max-width: 650px;
  width: 100%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.source-tags .tag {
  background-color: #f0f0f0;
  color: #333;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}

.source-tags .tag:hover {
  background-color: #e54d42;
  color: #fff;
}


@media (max-width: 768px) {
  .chigua-container .images img { height: 110px; }
  .chigua-container .videos { height: 230px; }
}


.status-grid {
    margin: 1.2rem 0;
    width: 100%;
    height: 26rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr; 
    gap: 1rem; 
    overflow: hidden;
}
.status-grid > div:first-child:nth-last-child(1) {
  grid-column: 1 / -1; /* 横跨所有列 */
  grid-row: 1 / -1;    /* 如需占满高度可增加这一行 */
}

.status-grid > div:nth-child(n+5) {
  display: none;
}


.status-grid .gdm {
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.flex-c {
    flex-direction: column !important;
}

.more-v {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
    background-color: #1D2636;
}

.more-v .xsm {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.status-grid > .gdm .imgs {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-grid > .gdm .shadow { 
    cursor: pointer; 
    color:#fff; 
    font-size: 3rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    z-index: 11; top:0;
    left:0;
    right: 0;
    bottom: 0; 
    background-color: rgba(0,0,0,.3); 
}

.status-grid > .master { display: flex; flex: 1 1 auto; height: 330px; width: 100%; background-color: rgba(0, 0, 0, .1); border-radius: 10px;}
.status-grid > .master .imeg { cursor: pointer; width: 100%; height: auto; display: block; border-radius: 10px; object-fit: cover; }

.blur-mask {
    filter: blur(.5rem);
}

@media (min-width: 500px) {
    .short { padding-top: 60px; }
    .member .m-right { margin-top: 60px; }
}
@media (min-width: 768px) {
    .bbk .center .by .wrp .child { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
    .bbk .center .by .wrp .context .buys .us .tbe { min-width: 640px; }
    .short { padding-top: 60px; }
    .member .m-right { margin-top: 60px; }
}
@media (min-width: 1024px) {
    .bbk .left,.bbk .right { display: inline-flex; }
    .bbk .center .by {  margin-top: 0; }
    .bbk .center .by .wrp .child { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .5s; }
    .bbk .top { display: none; }
    .play .wp,.source .wp { margin-top: 0; }
    .bbk .center .by .wrp .context .buys .us .tbe { min-width: 800px; }
    .ava { padding-top: 0 !important; }
    .member .m-right { margin-top: 0; }
    .mobile-warp { margin-top:0; }
    .bbk .center .by .wrp .context .wx .is { min-width: 800px; }
    .bbk .center .by .wrp .context .images { max-width: 900px; }
}
@media (min-width: 1536px) {
    .bbk .center .by .wrp .child { 
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .play .wp,.source .wp { margin-top: 0; }
    .bbk .center .by .wrp .context .buys .us .tbe { min-width: 840px; }
}

@media (max-width: 768px) {
    .bbk .center .by .wrp .child .item .cover { height: 160px; }
    .bbk .center .by .wrp .child .item .cover .hv { max-height: 160px; }
    .play .wp .player-div { width: 100%; height: 375px; }
}