今天我准备吧B站的充电按钮移植到本博客，开始～

上代码：

HTML

  1. <html>
  2. 	<head>
  3. 		<link href="./space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css"
  4. 			rel="stylesheet">
  5. 		<link rel="stylesheet" type="text/css" href="./space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css">
  6. 	</head>
  7. 	<body>
  8. 		<div id="app" class="owner">
  9. 			<div class="s-space">
  10. 				<div>
  11. 					<div id="page-index" class="wrapper clearfix">
  12. 						<div class="col-2">
  13. 							<div class="section elec" style="">
  14. 								<div class="elec-action">
  15. 									<div class="elec-trigger"><span class="elec-trigger-icon icon"></span>为TA充电</div>
  16. 									<div class="elec-map">
  17. 										<div class="elec-status">共
  18. 											<span class="elec-count">0</span>人
  19. 										</div>
  20. 										<div class="elec-status-bg"></div>
  21. 										<div class="elec-status-bg-grey"></div>
  22. 									</div>
  23. 									<div id="elec-hover-bg-preloader"></div>
  24. 								</div>
  25. 								<!---->
  26. 							</div>
  27. 						</div>
  28. 					</div>
  29. 				</div>
  30. 			</div>
  31. 			<!---->
  32. 		</div>
  33. 	</body>
  34. </html>

CSS(两个)

  1. .live {
  2.     display: block;
  3.     width: 220px;
  4. }
  6. .live:hover .live-on-hover {
  7.     opacity: 1;
  8. }
  10. .live-col {
  11.     display: -ms-flexbox;
  12.     display: flex;
  13.     width: 100%;
  14. }
  16. .live-col .live-text {
  17.     font-size: 14px;
  18.     margin-left: 20px;
  19. }
  21. .live-col .live-text-view {
  22.     margin-top: 12px;
  23. }
  25. .live-on {
  26.     position: relative;
  27.     width: 220px;
  28.     height: 138px;
  29. }
  31. .live-on-img {
  32.     width: 100%;
  33.     height: 100%;
  34.     border-radius: 4px;
  35.     display: block;
  36. }
  38. .live-on-flag {
  39.     transition: opacity .2s ease;
  40.     position: absolute;
  41.     top: 6px;
  42.     right: 6px;
  43.     width: 64px;
  44.     height: 20px;
  45.     line-height: 20px;
  46.     background-color: #f69;
  47.     border-radius: 2px;
  48.     color: #fff;
  49.     font-size: 12px;
  50. }
  52. .live-on-flag .living-icon {
  53.     width: 10px;
  54.     height: 10px;
  55.     display: inline-block;
  56.     margin: 0 4px 0 8px;
  57. }
  59. .live-on-flag .living-icon-col {
  60.     width: 2px;
  61.     margin: 0 1px;
  62.     display: inline-block;
  63.     background-color: #fff;
  64.     height: 100%;
  65.     border-radius: 2px;
  66.     animation: living-icon-ani .6s linear infinite;
  67.     transform-origin: bottom;
  68. }
  70. .live-on-flag .living-icon-col:last-child {
  71.     animation-delay: .2s;
  72.     margin-right: 0;
  73. }
  75. .live-on-flag .living-icon-col:first-child {
  76.     animation-delay: -.2s;
  77.     margin-left: 0;
  78. }
  80. .live-on-hover {
  81.     background: rgba(0,0,0,.4);
  82.     border-radius: 4px;
  83.     transition: opacity .2s ease;
  84.     opacity: 0;
  85.     position: absolute;
  86.     top: 0;
  87.     left: 0;
  88.     right: 0;
  89.     bottom: 0;
  90. }
  92. .live-on-hover-icon {
  93.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
  94.     background-position: -1096px -1094px;
  95.     width: 48px;
  96.     height: 48px;
  97.     margin: 45px auto;
  98. }
  100. .live-text {
  101.     color: #222;
  102.     margin-top: 6px;
  103. }
  105. .live-text-view {
  106.     text-indent: 21px;
  107. }
  109. .live-text-view,.live-text-watched_show {
  110.     color: #99a2aa;
  111.     float: left;
  112.     line-height: 14px;
  113.     margin-top: 5px;
  114. }
  116. .live-text-title {
  117.     width: 100%;
  118.     overflow: hidden;
  119.     text-overflow: ellipsis;
  120.     white-space: nowrap;
  121. }
  123. .live-text-title:hover {
  124.     color: #00a1d6;
  125. }
  127. @keyframes living-icon-ani {
  128.     0% {
  129.         transform: scaleY(.5);
  130.     }
  132.     50% {
  133.         transform: scaleY(1);
  134.     }
  136.     to {
  137.         transform: scaleY(.5);
  138.     }
  139. }
  141. @media (min-width:1420px) {
  142.     .live {
  143.         width: 280px;
  144.     }
  146.     .live-col {
  147.         width: 100%;
  148.     }
  150.     .live-on {
  151.         width: 280px;
  152.         height: 175px;
  153.     }
  155.     .live-on-hover-icon {
  156.         margin: 72px auto;
  157.     }
  158. }
  160. .i-pin-v {
  161.     padding-bottom: 20px;
  162. }
  164. .i-pin-v.empty .section-title,.i-pin-v.loading .section-title {
  165.     display: block;
  166. }
  168. .i-pin-v .section-title {
  169.     padding-bottom: 10px;
  170. }
  172. .i-pin-v .section-title[role="3"] .pin-v-icon {
  173.     background-position: -1298px -530px;
  174. }
  176. .i-pin-v .be-tab {
  177.     border-bottom: 1px solid #eee;
  178.     margin-bottom: 15px;
  179.     height: 25px;
  180. }
  182. .i-pin-v .be-tab-item {
  183.     padding-bottom: 5px;
  184.     margin-right: 30px;
  185.     font-size: 12px;
  186. }
  188. .i-pin-c {
  189.     box-shadow: 0 0 0 1px #e5e9ef;
  190.     border-radius: 4px;
  191.     float: left;
  192.     overflow: hidden;
  193.     position: relative;
  194. }
  196. .i-pin-c,.i-pin-c:hover .i-watchlater {
  197.     display: block;
  198. }
  200. .i-pin-c:hover .length {
  201.     display: none;
  202. }
  204. .i-pin-part.loading {
  205.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif) 50% no-repeat;
  206.     height: 200px;
  207. }
  209. .i-pin-img,.i-pin-part:hover .i-pin-info .btn-container {
  210.     display: block;
  211. }
  213. .i-pin-img {
  214.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);
  215.     background-size: img;
  216.     border-radius: 4px;
  217.     width: 280px;
  218.     height: 175px;
  219. }
  221. .i-pin-duration {
  222.     background: #111;
  223.     background: rgba(0,0,0,.5);
  224.     border-radius: 5px 0 0 0;
  225.     color: #fff;
  226.     line-height: 20px;
  227.     transition: top .2s ease;
  228.     padding: 0 6px;
  229.     position: absolute;
  230.     right: 0;
  231.     bottom: 0;
  232. }
  234. .i-pin-info {
  235.     position: relative;
  236.     height: 175px;
  237.     margin-left: 300px;
  238. }
  240. .i-pin-info .btn-container {
  241.     position: absolute;
  242.     display: none;
  243.     bottom: 0;
  244. }
  246. .i-pin-title {
  247.     display: block;
  248.     font-size: 14px;
  249.     line-height: 18px;
  250.     margin-bottom: 15px;
  251.     white-space: nowrap;
  252.     width: 100%;
  253.     overflow: hidden;
  254.     text-overflow: ellipsis;
  255. }
  257. .i-pin-meta {
  258.     color: #6d757a;
  259.     margin-bottom: 10px;
  260. }
  262. .i-pin-meta .icon {
  263.     width: 12px;
  264.     height: 12px;
  265.     vertical-align: middle;
  266.     margin-right: 3px;
  267.     position: relative;
  268.     top: -2px;
  269. }
  271. .i-pin-data {
  272.     display: inline-block;
  273.     margin-right: 20px;
  274. }
  276. .i-pin-play-icon {
  277.     background-position: -1306px -346px;
  278. }
  280. .i-pin-danmu-icon {
  281.     background-position: -1306px -410px;
  282. }
  284. .i-pin-time-icon {
  285.     background-position: -280px -474px;
  286. }
  288. .i-pin-desc {
  289.     color: #99a2aa;
  290.     margin-bottom: 10px;
  291.     max-height: 40px;
  292. }
  294. .i-pin-desc,.i-pin-reason {
  295.     line-height: 20px;
  296.     overflow: hidden;
  297. }
  299. .i-pin-reason {
  300.     color: #f25d8e;
  301.     height: 20px;
  302.     margin-bottom: 14px;
  303.     max-width: 400px;
  304.     text-overflow: ellipsis;
  305.     white-space: nowrap;
  306. }
  308. .i-pin-reason.hidden {
  309.     visibility: hidden;
  310. }
  312. .i-pin-action {
  313.     display: none;
  314. }
  316. #i-pin.empty .i-pin-empty,#i-pin.has-content .i-pin-has-content {
  317.     display: block;
  318. }
  320. .i-pin-has-content.disabled .disabled-img {
  321.     display: block;
  322.     line-height: 175px;
  323. }
  325. .i-pin-has-content.disabled:hover .i-watchlater {
  326.     display: none;
  327. }
  329. .i-pin-has-content:hover .i-pin-action {
  330.     display: block;
  331. }
  333. .i-pin-empty {
  334.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-33.png) 250px bottom no-repeat;
  335. }
  337. .i-pin-empty-set {
  338.     text-align: center;
  339.     width: 215px;
  340.     height: 138px;
  341. }
  343. .i-pin-empty-set:hover .i-pin-empty-set-icon {
  344.     background-position: -1288px -72px;
  345. }
  347. .i-pin-empty-set:hover .i-mp-count {
  348.     color: #00a1d6;
  349. }
  351. .i-mp-empty {
  352.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-22.png) 260px bottom no-repeat;
  353. }
  355. #i-masterpiece {
  356.     margin-left: -9px;
  357. }
  359. #i-masterpiece[type=empty] .i-mp-empty,#i-masterpiece[type=multi] .i-mp-multi,#i-masterpiece[type=single] .i-mp-single {
  360.     display: block;
  361. }
  363. #i-masterpiece .content {
  364.     width: 900px;
  365. }
  367. #i-masterpiece .small-item {
  368.     width: 220px;
  369.     height: 172px;
  370.     overflow: hidden;
  371.     padding-top: 0;
  372. }
  374. #i-masterpiece .small-item:hover .title {
  375.     height: 38px;
  376. }
  378. #i-masterpiece .small-item:hover .length {
  379.     bottom: -20px;
  380. }
  382. #i-masterpiece .small-item:hover .reason {
  383.     bottom: 0;
  384. }
  386. #i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
  387.     width: 220px;
  388.     height: 138px;
  389. }
  391. #i-masterpiece .small-item .disabled-img {
  392.     line-height: 135px;
  393. }
  395. #i-masterpiece .small-item .title {
  396.     transition: height .2s ease;
  397.     height: 19px;
  398.     white-space: normal;
  399. }
  401. #i-masterpiece .small-item .length {
  402.     transition: bottom .2s ease;
  403. }
  405. #i-masterpiece .small-item .reason {
  406.     background: rgba(0,0,0,.4);
  407.     color: #fff;
  408.     transition: bottom .2s ease;
  409.     position: absolute;
  410.     left: 0;
  411.     bottom: -80px;
  412.     z-index: 2;
  413. }
  415. #i-masterpiece .small-item .reason-inner {
  416.     line-height: 28px;
  417.     padding: 0 10px;
  418.     width: 200px;
  419.     overflow: hidden;
  420.     text-overflow: ellipsis;
  421.     white-space: nowrap;
  422. }
  424. #i-masterpiece .i-pin-empty-set {
  425.     float: left;
  426.     margin-left: 9px;
  427. }
  429. .i-mp-single {
  430.     margin-left: 9px;
  431. }
  433. .i-mp-multi {
  434.     width: 720px;
  435.     height: 182px;
  436.     overflow: hidden;
  437.     text-overflow: ellipsis;
  438.     white-space: nowrap;
  439. }
  441. .i-mp-action {
  442.     position: absolute;
  443.     display: none;
  444.     top: 8px;
  445.     right: 18px;
  446.     z-index: 2;
  447. }
  449. .i-mp-action:hover .i-mp-action-icon {
  450.     border-radius: 4px 4px 0 0;
  451.     border-bottom: none;
  452. }
  454. .i-mp-action:hover .i-mp-action-menu {
  455.     display: block;
  456. }
  458. .i-mp-action-icon {
  459.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png) #fff -1110px -279px no-repeat;
  460.     border: 1px solid #99a2aa;
  461.     border-radius: 4px;
  462.     cursor: pointer;
  463.     width: 20px;
  464.     height: 20px;
  465.     margin: 0 0 0 auto;
  466.     position: relative;
  467. }
  469. .i-mp-action-menu {
  470.     display: none;
  471.     background: #fff;
  472.     border: 1px solid #99a2aa;
  473.     border-radius: 4px 0 4px 4px;
  474.     overflow: hidden;
  475.     margin-top: -1px;
  476. }
  478. .i-mp-action-item {
  479.     cursor: pointer;
  480.     line-height: 30px;
  481.     padding: 0 10px;
  482. }
  484. .i-mp-action-item:hover {
  485.     background: #e5e9ef;
  486. }
  488. .i-mp-count {
  489.     color: #99a2aa;
  490.     position: absolute;
  491.     bottom: 8px;
  492.     right: 10px;
  493. }
  495. .small-item:hover .i-mp-action {
  496.     display: block;
  497. }
  499. .img .isPay {
  500.     position: absolute;
  501.     top: 4px;
  502.     right: 4px;
  503.     background: #ffa726;
  504.     border-radius: 2px;
  505.     font-size: 6px;
  506.     color: #fff;
  507. }
  509. @media (min-width:1420px) {
  510.     .i-pin-empty {
  511.         background-position: 310px bottom;
  512.     }
  514.     .i-mp-empty {
  515.         background-position: 320px bottom;
  516.     }
  518.     .i-pin-empty-set {
  519.         width: 280px;
  520.         height: 175px;
  521.     }
  523.     .i-pin-empty-set-icon {
  524.         margin: 48px auto 22px;
  525.     }
  527.     .i-mp-multi {
  528.         height: 220px;
  529.     }
  531.     #i-masterpiece .small-item {
  532.         width: 280px;
  533.         height: 210px;
  534.     }
  536.     #i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
  537.         width: 280px;
  538.         height: 175px;
  539.     }
  541.     #i-masterpiece .small-item .disabled-img {
  542.         line-height: 175px;
  543.     }
  545.     #i-masterpiece .small-item .reason-inner {
  546.         width: 260px;
  547.     }
  548. }
  550. .tabs {
  551.     position: relative;
  552. }
  554. .tabs-info {
  555.     position: absolute;
  556.     right: 0;
  557.     bottom: 0;
  558.     color: #99a2aa;
  559.     display: -ms-flexbox;
  560.     display: flex;
  561.     -ms-flex-align: baseline;
  562.     align-items: baseline;
  563. }
  565. .tabs-info .icon-info_help_circle_line_24 {
  566.     font-size: 12px;
  567.     margin-right: 3px;
  568. }
  570. #page-index .video.empty .be-tab {
  571.     display: none;
  572. }
  574. #page-index .video.full-rows .content {
  575.     max-height: 935px;
  576. }
  578. #page-index .video .content {
  579.     max-height: 380px;
  580.     overflow: hidden;
  581. }
  583. #page-index .video .content .small-item:nth-child(4n+1) {
  584.     padding-left: 0;
  585. }
  587. #page-index .video .content .small-item:nth-child(4n+4) {
  588.     padding-right: 0;
  589. }
  591. #page-index .video .be-tab {
  592.     display: inline-block;
  593.     line-height: 18px;
  594.     vertical-align: middle;
  595.     margin-left: 10px;
  596. }
  598. #page-index .video .be-tab-item {
  599.     padding: 0 0 3px;
  600.     margin-right: 15px;
  601.     font-size: 12px;
  602. }
  604. @media (min-width:1420px) {
  605.     #page-index .video .content .small-item:nth-child(4n+1) {
  606.         padding-left: 10px;
  607.     }
  609.     #page-index .video .content .small-item:nth-child(4n+4) {
  610.         padding-right: 10px;
  611.     }
  613.     #page-index .video .content .small-item:nth-child(5n+5) {
  614.         padding-right: 0;
  615.     }
  617.     #page-index .video .content .small-item:nth-child(5n+1) {
  618.         padding-left: 0;
  619.     }
  621.     #page-index .video .content .small-item:nth-child(13),#page-index .video .content .small-item:nth-child(14),#page-index .video .content .small-item:nth-child(15) {
  622.         display: block;
  623.     }
  624. }
  626. .isPay {
  627.     position: absolute;
  628.     top: 4px;
  629.     right: 4px;
  630.     padding: 0 4px;
  631.     background: #ffa726;
  632.     border-radius: 2px;
  633.     font-size: 10px;
  634.     color: #fff;
  635. }
  637. .section-title .play-all-channel {
  638.     position: absolute;
  639.     right: 63px;
  640.     top: 6px;
  641.     width: 78px;
  642.     height: 22px;
  643.     line-height: 22px;
  644.     display: -ms-flexbox;
  645.     display: flex;
  646.     -ms-flex-align: center;
  647.     align-items: center;
  648.     cursor: pointer;
  649.     display: inline-block;
  650.     border: 1px solid #b8c0cc;
  651.     border-radius: 4px;
  652.     color: #6d757a;
  653.     font-size: 12px;
  654.     transition: .3s ease;
  655. }
  657. .section-title .play-all-channel .video-commonplayer_play {
  658.     transition: .3s ease;
  659.     margin: 0 4px;
  660.     color: #99a2aa;
  661. }
  663. .section-title .play-all-channel>span {
  664.     vertical-align: top;
  665. }
  667. .section-title .play-all-channel:hover {
  668.     color: #00a1d6;
  669.     border-color: #00a1d6;
  670. }
  672. .section-title .play-all-channel:hover .video-commonplayer_play {
  673.     color: #00a1d6;
  674. }
  676. #page-index .channel.guest .section-title {
  677.     display: none;
  678. }
  680. #page-index .channel.guest .channel-item .channel-title .channel-name {
  681.     font-size: 20px;
  682.     color: #000;
  683. }
  685. #page-index .channel .empty-state {
  686.     padding-bottom: 30px;
  687.     margin-top: 7px;
  688.     text-align: center;
  689. }
  691. #page-index .channel .empty-state p {
  692.     line-height: 14px;
  693.     font-size: 12px;
  694.     color: #6d757a;
  695. }
  697. #page-index .channel .empty-state .btn-container {
  698.     margin-top: 12px;
  699. }
  701. #page-index .channel .section-title .t {
  702.     vertical-align: middle;
  703. }
  705. #page-index .channel .section-title .create {
  706.     width: 64px;
  707.     padding: 0 7px 0 28px;
  708.     margin-left: 10px;
  709.     box-sizing: border-box;
  710.     background-position: -1296px -917px;
  711.     vertical-align: middle;
  712.     cursor: pointer;
  713. }
  715. #page-index .channel .section-title .create:hover {
  716.     background-position: -1360px -917px;
  717. }
  719. #page-index .channel .content {
  720.     width: 700px;
  721.     max-height: none;
  722.     overflow: hidden;
  723. }
  725. #page-index .channel .channel-item {
  726.     margin-bottom: 20px;
  727.     padding-bottom: 4px;
  728.     border-bottom: 1px solid #e5e9ef;
  729. }
  731. #page-index .channel .channel-item:last-of-type {
  732.     padding-bottom: 0;
  733.     margin-bottom: 0;
  734.     border-bottom: none;
  735. }
  737. #page-index .channel .channel-item:hover .edit {
  738.     display: inline-block;
  739. }
  741. #page-index .channel .channel-item.empty-channel {
  742.     margin-top: 25px;
  743.     padding-bottom: 25px;
  744. }
  746. #page-index .channel .channel-item.vertical .small-item {
  747.     width: 100%;
  748.     box-sizing: border-box;
  749. }
  751. #page-index .channel .channel-item.vertical .small-item .img {
  752.     float: left;
  753. }
  755. #page-index .channel .channel-item.vertical .small-item .title {
  756.     height: 20px;
  757.     margin: 0 0 0 170px;
  758.     text-overflow: ellipsis;
  759.     white-space: nowrap;
  760. }
  762. #page-index .channel .channel-item.vertical .small-item .meta {
  763.     margin: 8px 0 0 170px;
  764. }
  766. #page-index .channel .channel-item.vertical .small-item .meta span {
  767.     width: auto;
  768.     margin-right: 30px;
  769. }
  771. #page-index .channel .channel-item.vertical .small-item .meta span:last-child {
  772.     margin-right: 0;
  773. }
  775. #page-index .channel .channel-item.vertical .small-item .video-desc {
  776.     display: block;
  777.     margin: 6px 0 0 170px;
  778.     white-space: normal;
  779. }
  781. #page-index .channel .channel-item .small-item {
  782.     float: none;
  783.     display: inline-block;
  784.     font-size: 12px;
  785. }
  787. #page-index .channel .channel-item .small-item:first-child {
  788.     padding-left: 0;
  789. }
  791. #page-index .channel .channel-item .small-item:last-child {
  792.     padding-right: 0;
  793. }
  795. #page-index .channel .channel-item .small-item .title {
  796.     white-space: normal;
  797. }
  799. #page-index .channel .channel-item .small-item .video-desc {
  800.     display: none;
  801.     height: 36px;
  802.     line-height: 18px;
  803.     color: #99a2aa;
  804.     overflow: hidden;
  805. }
  807. #page-index .channel .channel-item .channel-title {
  808.     position: relative;
  809.     height: 24px;
  810.     line-height: 24px;
  811.     font-size: 0;
  812. }
  814. #page-index .channel .channel-item .c-empty-hint-host {
  815.     position: absolute;
  816.     top: 0;
  817.     left: 300px;
  818.     font-size: 12px;
  819.     color: #99a2aa;
  820.     text-align: center;
  821. }
  823. #page-index .channel .channel-item .c-empty-hint-host a {
  824.     margin-left: 10px;
  825.     color: #00a1d6;
  826. }
  828. #page-index .channel .channel-item .c-empty-hint-host a:hover {
  829.     color: #00b5e5;
  830. }
  832. #page-index .channel .channel-item .channel-name {
  833.     display: inline-block;
  834.     font-size: 16px;
  835.     color: #6d757a;
  836.     vertical-align: middle;
  837. }
  839. #page-index .channel .channel-item .channel-name:hover {
  840.     color: #00a1d6;
  841. }
  843. #page-index .channel .channel-item .channel-video {
  844.     white-space: nowrap;
  845.     overflow: hidden;
  846.     font-size: 0;
  847. }
  849. #page-index .channel .channel-item .count {
  850.     top: 0;
  851.     vertical-align: middle;
  852. }
  854. #page-index .channel .channel-item .edit {
  855.     display: none;
  856.     width: 56px;
  857.     padding: 0 7px 0 23px;
  858.     background-position: -1299px -852px;
  859.     box-sizing: border-box;
  860. }
  862. #page-index .channel .channel-item .edit:hover {
  863.     background-position: -1363px -852px;
  864. }
  866. #page-index .channel .section-right-options {
  867.     float: right;
  868.     height: 24px;
  869.     display: -ms-flexbox;
  870.     display: flex;
  871. }
  873. #page-index .channel .section-right-options .play-all-channel {
  874.     width: 78px;
  875.     height: 22px;
  876.     line-height: 22px;
  877.     display: -ms-flexbox;
  878.     display: flex;
  879.     -ms-flex-align: center;
  880.     align-items: center;
  881.     cursor: pointer;
  882.     margin-right: 10px;
  883.     display: inline-block;
  884.     border: 1px solid #b8c0cc;
  885.     border-radius: 4px;
  886.     color: #6d757a;
  887.     font-size: 12px;
  888.     transition: .3s ease;
  889. }
  891. #page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
  892.     transition: .3s ease;
  893.     margin: 0 4px;
  894.     color: #99a2aa;
  895. }
  897. #page-index .channel .section-right-options .play-all-channel>span {
  898.     vertical-align: top;
  899. }
  901. #page-index .channel .section-right-options .play-all-channel:hover {
  902.     color: #00a1d6;
  903.     border-color: #00a1d6;
  904. }
  906. #page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
  907.     color: #00a1d6;
  908. }
  910. #page-index .channel .section-right-options .more {
  911.     position: static;
  912.     top: auto;
  913.     right: auto;
  914. }
  916. @media (min-width:1420px) {
  917.     #page-index .channel .channel-item .c-empty-hint-host {
  918.         left: 400px;
  919.     }
  920. }
  922. #page-index .channel.guest .section-title {
  923.     display: none;
  924. }
  926. #page-index .channel.guest .channel-item .channel-title .channel-name {
  927.     font-size: 20px;
  928.     color: #000;
  929.     max-width: 500px;
  930.     overflow: hidden;
  931.     white-space: nowrap;
  932.     text-overflow: ellipsis;
  933.     cursor: pointer;
  934. }
  936. #page-index .channel .empty-state {
  937.     padding-bottom: 30px;
  938.     margin-top: 7px;
  939.     text-align: center;
  940. }
  942. #page-index .channel .empty-state p {
  943.     line-height: 14px;
  944.     font-size: 12px;
  945.     color: #6d757a;
  946. }
  948. #page-index .channel .empty-state .btn-container {
  949.     margin-top: 12px;
  950. }
  952. #page-index .channel .section-title .t {
  953.     vertical-align: middle;
  954. }
  956. #page-index .channel .section-title .create {
  957.     width: 64px;
  958.     padding: 0 7px 0 28px;
  959.     margin-left: 10px;
  960.     box-sizing: border-box;
  961.     background-position: -1296px -917px;
  962.     vertical-align: middle;
  963.     cursor: pointer;
  964. }
  966. #page-index .channel .section-title .create:hover {
  967.     background-position: -1360px -917px;
  968. }
  970. #page-index .channel .content {
  971.     width: 700px;
  972.     max-height: none;
  973.     overflow: hidden;
  974. }
  976. #page-index .channel .channel-item {
  977.     margin-bottom: 20px;
  978.     padding-bottom: 4px;
  979.     border-bottom: 1px solid #e5e9ef;
  980. }
  982. #page-index .channel .channel-item:last-of-type {
  983.     padding-bottom: 0;
  984.     margin-bottom: 0;
  985.     border-bottom: none;
  986. }
  988. #page-index .channel .channel-item:hover .edit {
  989.     display: inline-block;
  990. }
  992. #page-index .channel .channel-item.empty-channel {
  993.     margin-top: 25px;
  994.     padding-bottom: 25px;
  995. }
  997. #page-index .channel .channel-item.vertical .small-item {
  998.     width: 100%;
  999.     box-sizing: border-box;
  1000. }
  1002. #page-index .channel .channel-item.vertical .small-item .img {
  1003.     float: left;
  1004. }
  1006. #page-index .channel .channel-item.vertical .small-item .title {
  1007.     height: 20px;
  1008.     margin: 0 0 0 170px;
  1009.     text-overflow: ellipsis;
  1010.     white-space: nowrap;
  1011. }
  1013. #page-index .channel .channel-item.vertical .small-item .meta {
  1014.     margin: 8px 0 0 170px;
  1015. }
  1017. #page-index .channel .channel-item.vertical .small-item .meta span {
  1018.     width: auto;
  1019.     margin-right: 30px;
  1020. }
  1022. #page-index .channel .channel-item.vertical .small-item .meta span:last-child {
  1023.     margin-right: 0;
  1024. }
  1026. #page-index .channel .channel-item.vertical .small-item .video-desc {
  1027.     display: block;
  1028.     margin: 6px 0 0 170px;
  1029.     white-space: normal;
  1030. }
  1032. #page-index .channel .channel-item .small-item {
  1033.     float: none;
  1034.     display: inline-block;
  1035.     font-size: 12px;
  1036. }
  1038. #page-index .channel .channel-item .small-item:first-child {
  1039.     padding-left: 0;
  1040. }
  1042. #page-index .channel .channel-item .small-item:last-child {
  1043.     padding-right: 0;
  1044. }
  1046. #page-index .channel .channel-item .small-item .title {
  1047.     white-space: normal;
  1048. }
  1050. #page-index .channel .channel-item .small-item .video-desc {
  1051.     display: none;
  1052.     height: 36px;
  1053.     line-height: 18px;
  1054.     color: #99a2aa;
  1055.     overflow: hidden;
  1056. }
  1058. #page-index .channel .channel-item .channel-title {
  1059.     position: relative;
  1060.     height: 24px;
  1061.     line-height: 24px;
  1062.     font-size: 0;
  1063. }
  1065. #page-index .channel .channel-item .c-empty-hint-host {
  1066.     position: absolute;
  1067.     top: 0;
  1068.     left: 300px;
  1069.     font-size: 12px;
  1070.     color: #99a2aa;
  1071.     text-align: center;
  1072. }
  1074. #page-index .channel .channel-item .c-empty-hint-host a {
  1075.     margin-left: 10px;
  1076.     color: #00a1d6;
  1077. }
  1079. #page-index .channel .channel-item .c-empty-hint-host a:hover {
  1080.     color: #00b5e5;
  1081. }
  1083. #page-index .channel .channel-item .channel-name {
  1084.     display: inline-block;
  1085.     font-size: 16px;
  1086.     color: #6d757a;
  1087.     vertical-align: middle;
  1088.     cursor: pointer;
  1089. }
  1091. #page-index .channel .channel-item .channel-name:hover {
  1092.     color: #00a1d6;
  1093. }
  1095. #page-index .channel .channel-item .channel-video {
  1096.     white-space: nowrap;
  1097.     overflow: hidden;
  1098.     font-size: 0;
  1099. }
  1101. #page-index .channel .channel-item .count {
  1102.     top: 0;
  1103.     vertical-align: middle;
  1104. }
  1106. #page-index .channel .channel-item .edit {
  1107.     display: none;
  1108.     width: 56px;
  1109.     padding: 0 7px 0 23px;
  1110.     background-position: -1299px -852px;
  1111.     box-sizing: border-box;
  1112. }
  1114. #page-index .channel .channel-item .edit:hover {
  1115.     background-position: -1363px -852px;
  1116. }
  1118. #page-index .channel .section-right-options {
  1119.     float: right;
  1120.     height: 24px;
  1121.     display: -ms-flexbox;
  1122.     display: flex;
  1123. }
  1125. #page-index .channel .section-right-options .play-all-channel {
  1126.     width: 78px;
  1127.     height: 22px;
  1128.     line-height: 22px;
  1129.     display: -ms-flexbox;
  1130.     display: flex;
  1131.     -ms-flex-align: center;
  1132.     align-items: center;
  1133.     cursor: pointer;
  1134.     margin-right: 10px;
  1135.     display: inline-block;
  1136.     border: 1px solid #b8c0cc;
  1137.     border-radius: 4px;
  1138.     color: #6d757a;
  1139.     font-size: 12px;
  1140.     transition: .3s ease;
  1141. }
  1143. #page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
  1144.     transition: .3s ease;
  1145.     margin: 0 4px;
  1146.     color: #99a2aa;
  1147. }
  1149. #page-index .channel .section-right-options .play-all-channel>span {
  1150.     vertical-align: top;
  1151. }
  1153. #page-index .channel .section-right-options .play-all-channel:hover {
  1154.     color: #00a1d6;
  1155.     border-color: #00a1d6;
  1156. }
  1158. #page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
  1159.     color: #00a1d6;
  1160. }
  1162. #page-index .channel .section-right-options .more {
  1163.     position: static;
  1164.     top: auto;
  1165.     right: auto;
  1166.     cursor: pointer;
  1167. }
  1169. @media (min-width:1420px) {
  1170.     #page-index .channel .channel-item .c-empty-hint-host {
  1171.         left: 400px;
  1172.     }
  1173. }
  1175. #page-index .bangumi .content .large-item:nth-child(2n) {
  1176.     margin-right: 0;
  1177. }
  1179. #page-index .bangumi .content .title {
  1180.     font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
  1181. }
  1183. @media (min-width:1420px) {
  1184.     #page-index .bangumi .large-item {
  1185.         width: 430px;
  1186.     }
  1187. }
  1189. @media (min-width:1420px) {
  1190.     #page-index .article-content {
  1191.         width: 743px;
  1192.     }
  1194.     #page-index .article-noimg {
  1195.         width: 100%;
  1196.     }
  1197. }
  1199. #page-index .coin .small-item:nth-child(9),#page-index .coin .small-item:nth-child(10) {
  1200.     display: none;
  1201. }
  1203. #page-index .coin .small-item .title {
  1204.     margin-top: 4px;
  1205.     height: 40px;
  1206. }
  1208. #page-index .coin.loading .content {
  1209.     margin-left: 0;
  1210. }
  1212. #page-index .coin .content {
  1213.     width: 760px;
  1214.     max-height: 380px;
  1215.     margin: -10px 0 0 -10px;
  1216.     overflow: hidden;
  1217. }
  1219. #page-index .coin .isPay {
  1220.     position: absolute;
  1221.     top: 4px;
  1222.     right: 4px;
  1223.     padding: 1px 4px;
  1224.     background: #ffa726;
  1225.     border-radius: 2px;
  1226.     font-size: 10px;
  1227.     color: #fff;
  1228. }
  1230. #page-index .coin .ogv {
  1231.     margin-top: 4px;
  1232.     height: 40px;
  1233. }
  1235. #page-index .coin .ogv-title {
  1236.     overflow: hidden;
  1237.     font-size: 12px;
  1238.     line-height: 20px;
  1239.     height: 20px;
  1240.     word-break: break-all;
  1241. }
  1243. #page-index .coin .ogv-title-sub {
  1244.     color: #9499a0;
  1245.     line-height: 17px;
  1246.     height: 17px;
  1247. }
  1249. #page-index .tags.empty,#page-index .tags.loading {
  1250.     display: none;
  1251. }
  1253. #page-index .subs .detail {
  1254.     float: left;
  1255.     max-width: 120px;
  1256.     line-height: 40px;
  1257.     margin-left: 15px;
  1258. }
  1260. #page-index .subs .img img {
  1261.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/tag-default-img.png);
  1262. }
  1264. #page-index .fav-item {
  1265.     position: relative;
  1266.     float: left;
  1267.     margin: 0 20px 28px 0;
  1268. }
  1270. #page-index .fav-item:nth-child(9),#page-index .fav-item:nth-child(10) {
  1271.     display: none;
  1272. }
  1274. #page-index .fav-item:nth-child(4),#page-index .fav-item:nth-child(8) {
  1275.     margin-right: 0;
  1276. }
  1278. #page-index .fav-item[data-count="0"] .fav-img-placeholder {
  1279.     border-radius: 2px;
  1280.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAADpUlEQVR4Ae3dNXRkZRjH4RtrcHd37XB3d3d3p6Xbigp3p94KlwqXDqcLTQxZ3waL/O/iDskMM9+d5z3naSLv2C+efKnGvlh8dIzHdAvBeBxdiYs2Gq/aeQEgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2DQusBYErfH7rHKj3aPO2LJXHYLjOdjw+ovpn5ePD+b3QLjoRio/mHql4mH/stugXF/9R+nfp1/s1tgvBwDswhsIF7+u90CYzTWrGY59evG6J/tFhhTcVg1x6l3xNTv9wuMB6oWTb3r17sFxoJYu4WBrR0LQmArcE3V4snO60JgYwzHYBsCG4xhgXFB1aapdwust30cg20MbDA+EVjzfR/vx/1xVRwQG1T/09SXFQfEVXF/vB/fC6xsY3FvHBGrVl029XWKI+LeGBNYGabi2Tgw+qtCpr6ucVA8G1MC605vx65V4VPfhnhHYN1jKubFYNWQqW9LzIspgXXeLVVDp75tAuust6KvwYH1xbsC65zTq4ZPbuMZAuucDXsgsA0F1jkr90Bgqwisc7bugcC2EVjnXNADgV0osM55ugcCe1pgnTMZ2zT8w+OkwDprfoMDm+8brd3h8AbGdbifRXaP8VinQXGtHeMC6y7Px0AD4hqI5/02RXe6tQGB3e73wbrb1QXHdbXfaO1+k3FBgXFdEN8LrAzfx/kFxXV+WXEJrDYZVxYQ15Ux6Y8+yrSggMAW+LO1cr1aQGCvCqxc9xUQ2H0CK9fNBQR2s8DKdWIBgZ0osHLtXkBguwusXFsWENhWAivXGgUEtqbAyrV6AYGtLrByrV1AYGsJrFybFxDY5gIr1x4FBLaHwMp1QQGBnS+wcj1WQGCPCaxcC2OohcdcnhlnRX+Ldg7FQoGV7ZoWhHVKfPCrnR/EKXMNrb5uTpku34LYZhYP/mpxVXz6N7s/jatitVn+1fZCgTXDcOz0L08U3CcejeX/Yf/yeDT2jr5/cTk7xWfOyW+Wb+LJOC52iLVj49gzLo0nYqxF5/M/EZfFXrFprB07xnHxZHzTW//pAwSGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIbb9NymKgDOyYmWrwYRuOYGRQSx031+RTwAAAAAElFTkSuQmCC);
  1281.     width: 152px;
  1282.     height: 152px;
  1283. }
  1285. #page-index .fav-item[data-count="1"] .fav-img-0 {
  1286.     border-radius: 2px;
  1287.     height: 152px;
  1288. }
  1290. #page-index .fav-item[data-count="2"] .fav-img-1 {
  1291.     border-radius: 0 0 2px 2px;
  1292.     width: 152px;
  1293. }
  1295. #page-index .fav-item[data-public="1"],#page-index .fav-item[data-public="3"] {
  1296.     display: none;
  1297. }
  1299. #page-index .fav-item .state {
  1300.     color: #99a2aa;
  1301.     float: right;
  1302.     line-height: 24px;
  1303. }
  1305. #page-index .fav-item .name {
  1306.     display: block;
  1307.     font-size: 18px;
  1308.     font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
  1309.     line-height: 24px;
  1310.     width: 7em;
  1311.     overflow: hidden;
  1312.     text-overflow: ellipsis;
  1313.     white-space: nowrap;
  1314. }
  1316. #page-index .fav-item .delete,#page-index .fav-item .edit {
  1317.     color: #00a1d6;
  1318.     cursor: pointer;
  1319.     display: inline-block;
  1320.     transition: none;
  1321.     text-indent: 1.2em;
  1322. }
  1324. #page-index .fav-item .edit {
  1325.     background-position: -540px -465px;
  1326. }
  1328. #page-index .fav-item .delete {
  1329.     background-position: -540px -404px;
  1330.     float: right;
  1331. }
  1333. #page-index .fav-imgs {
  1334.     border: 1px solid #ccd0d7;
  1335.     border-radius: 4px;
  1336.     display: block;
  1337.     width: 152px;
  1338.     height: 152px;
  1339.     margin-bottom: 11px;
  1340.     overflow: hidden;
  1341.     position: relative;
  1342. }
  1344. #page-index .fav-imgs.empty {
  1345.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/playlistbg.png) no-repeat;
  1346.     background-size: img;
  1347.     background-position: 50%;
  1348. }
  1350. #page-index .fav-imgs img {
  1351.     width: 100%;
  1352.     height: 152px;
  1353.     object-fit: img;
  1354.     object-position: 50%;
  1355. }
  1357. #page-index .fav-img {
  1358.     width: 100%;
  1359.     height: 100%;
  1360.     background-size: img;
  1361.     background-position: 50%;
  1362.     display: block;
  1363.     float: left;
  1364. }
  1366. #page-index .fav-img-0 {
  1367.     border-radius: 2px 2px 0 0;
  1368.     width: 152px;
  1369.     height: 74px;
  1370.     margin-bottom: 4px;
  1371. }
  1373. #page-index .fav-img-1 {
  1374.     border-radius: 0 0 0 2px;
  1375.     width: 74px;
  1376.     height: 74px;
  1377.     margin-right: 4px;
  1378. }
  1380. #page-index .fav-img-2 {
  1381.     border-radius: 0 0 2px 0;
  1382.     width: 74px;
  1383.     height: 74px;
  1384. }
  1386. #page-index .fav-count {
  1387.     position: absolute;
  1388.     top: 10px;
  1389.     right: 10px;
  1390.     min-width: 12px;
  1391.     padding: 0 9px;
  1392.     line-height: 18px;
  1393.     text-align: center;
  1394.     font-family: Arial;
  1395.     color: #fff;
  1396.     overflow: hidden;
  1397.     text-overflow: ellipsis;
  1398.     white-space: nowrap;
  1399.     background: rgba(0,0,0,.5);
  1400.     border-radius: 9px;
  1401. }
  1403. #page-index .fav-action {
  1404.     visibility: hidden;
  1405.     margin-top: 7px;
  1406. }
  1408. @media (min-width:1420px) {
  1409.     #page-index .fav .fav-item:nth-child(4),#page-index .fav .fav-item:nth-child(8) {
  1410.         margin-right: 20px;
  1411.     }
  1413.     #page-index .fav .fav-item:nth-child(5),#page-index .fav .fav-item:nth-child(10) {
  1414.         margin-right: 0;
  1415.     }
  1417.     #page-index .fav .fav-item:nth-child(9),#page-index .fav .fav-item:nth-child(10) {
  1418.         display: block;
  1419.     }
  1420. }
  1422. #page-index .album .content {
  1423.     max-height: 400px;
  1424.     overflow: hidden;
  1425. }
  1427. #page-index .album .content .album-wrapper {
  1428.     margin-left: -20px;
  1429. }
  1431. #page-index .album .content .album-wrapper .album-item {
  1432.     width: 160px;
  1433.     height: auto;
  1434.     display: inline-block;
  1435.     margin-bottom: 20px;
  1436.     margin-left: 20px;
  1437. }
  1439. #page-index .album .content .album-wrapper .album-item .album-top {
  1440.     display: block;
  1441.     width: 100%;
  1442.     height: 120px;
  1443.     position: relative;
  1444.     background: #d8d8d8;
  1445.     cursor: pointer;
  1446. }
  1448. #page-index .album .content .album-wrapper .album-item .album-top .album-img {
  1449.     width: 100%;
  1450.     height: 100%;
  1451.     border-radius: 4px;
  1452.     background-size: img;
  1453.     background-repeat: no-repeat;
  1454. }
  1456. #page-index .album .content .album-wrapper .album-item .album-top .album-count {
  1457.     width: 40px;
  1458.     height: 20px;
  1459.     background: rgba(36,33,46,.3);
  1460.     border-radius: 4px;
  1461.     position: absolute;
  1462.     bottom: 8px;
  1463.     right: 8px;
  1464.     text-align: center;
  1465.     line-height: 20px;
  1466.     font-size: 12px;
  1467.     color: #fff;
  1468. }
  1470. #page-index .album .content .album-wrapper .album-item .album-title {
  1471.     display: block;
  1472.     width: 160px;
  1473.     height: 40px;
  1474.     font-size: 12px;
  1475.     color: #222;
  1476.     cursor: pointer;
  1477.     overflow: hidden;
  1478.     position: relative;
  1479.     top: 5px;
  1480. }
  1482. #page-index .album .content .album-wrapper .album-item .album-title:hover {
  1483.     color: #00a1d6;
  1484. }
  1486. #page-index .album .content .album-wrapper .meta-col {
  1487.     margin-top: 10px;
  1488. }
  1490. #page-index .album .content .album-wrapper .meta-col span {
  1491.     margin-right: 45px;
  1492. }
  1494. .i-m-r1 {
  1495.     text-align: center;
  1496.     padding: 0 10px 13px;
  1497. }
  1499. .i-m-icon {
  1500.     background-position: -1104px -333px;
  1501.     width: 33px;
  1502.     height: 40px;
  1503.     margin-right: 10px;
  1504.     vertical-align: middle;
  1505. }
  1507. .i-m-title {
  1508.     display: inline-block;
  1509. }
  1511. .i-m-title .icon-i-title {
  1512.     display: block;
  1513.     width: 120px;
  1514.     height: 34px;
  1515.     background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_createCenters.png) no-repeat;
  1516.     background-size: 100% 100%;
  1517.     float: left;
  1518. }
  1520. .icon-m-ra {
  1521.     display: block;
  1522.     width: 28px;
  1523.     height: 28px;
  1524.     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAY5JREFUaAXtmb9KA0EQh2eSWGjjE1gbQYgS7UVbn8UXCFoo+gK+im1EaxM0xCIBK4sUthYi5lh3SXGkCCwyszPgb4v7wy1z8327x83tEaHBAAzAAAzAAAzAAAzAAAzAgAsDIYTGePy25SKZmERDMpHBbLYxHE3739XP++Blci4Z+6+xRAHp4/OMKBwtkgmXHiBFAZst6hPxV23bHlIUcH93+4mZTj1Bcm1b7mg4mhyHQHdxuq7XUfniYK99VZ+XOVIBTKl7gVQD9AKpCugBUh3QGrIIoCVkMUAryKKAFpDFAVdBxgKh1+3s3KTrkk20kslNrNtp3xPz0ks/Fga9+CXSzI2R288EMBUBFMLS10YcwWtmrnITz+3Xyu0o1W9VhRNHVXx6ppyLPoOr4DRr1GKAFnDFRtAKrgigJZw6oDWcKqAHODVAL3AqgJ7gxAGfX6eH1Tw8eliLSXCpiZZq1ZxOPMGJA67x5m0sjh5S4Lg3WUVb3Ftx6+3fhCIqQsMADMAADMAADMAADMDA/zbwC+qC2/i4tVKPAAAAAElFTkSuQmCC) no-repeat;
  1525.     background-size: 100% 100%;
  1526.     float: right;
  1527.     position: relative;
  1528.     top: 6px;
  1529. }
  1531. .i-m-r2 {
  1532.     border: 1px solid #e5e9ef;
  1533.     border-radius: 4px;
  1534.     padding: 7px 0;
  1535. }
  1537. .i-m-btn {
  1538.     color: #6d757a;
  1539.     float: left;
  1540.     text-align: center;
  1541.     width: 152px;
  1542.     line-height: 20px;
  1543. }
  1545. .i-m-text,.i-m-u-icon {
  1546.     vertical-align: middle;
  1547. }
  1549. .i-m-u-icon {
  1550.     background-position: -1111px -151px;
  1551.     width: 18px;
  1552.     height: 18px;
  1553.     margin-right: 6px;
  1554. }
  1556. .i-m-upload {
  1557.     border-right: 1px solid #e5e9ef;
  1558. }
  1560. .i-m-upload:hover .i-m-u-icon {
  1561.     background-position: -1175px -151px;
  1562. }
  1564. .i-m-v-icon {
  1565.     background-position: -1111px -215px;
  1566.     width: 18px;
  1567.     height: 19px;
  1568.     margin-right: 6px;
  1569.     vertical-align: middle;
  1570. }
  1572. .i-m-v:hover .i-m-v-icon {
  1573.     background-position: -1175px -215px;
  1574. }
  1576. .elec.loading {
  1577.     display: none;
  1578. }
  1580. .elec:hover .elec-status {
  1581.     background-image: url(./charging_focus.gif);
  1582. }
  1584. .elec .elec-trigger {
  1585.     background: #f25d8e;
  1586.     border-radius: 4px;
  1587.     box-shadow: 0 4px 4px rgba(255,112,159,.3);
  1588.     color: #fff;
  1589.     cursor: pointer;
  1590.     display: inline-block;
  1591.     font-size: 18px;
  1592.     line-height: 50px;
  1593.     padding: 0 24px;
  1594. }
  1596. .elec .elec-trigger:hover {
  1597.     background: #ff709f;
  1598. }
  1600. .elec .elec-trigger:hover+.elec-map .elec-status {
  1601.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
  1602. }
  1604. .elec .elec-trigger:hover+.elec-map .elec-status-bg {
  1605.     width: 156px;
  1606. }
  1608. .elec .elec-trigger-icon {
  1609.     background-position: -278px -918px;
  1610.     width: 20px;
  1611.     height: 24px;
  1612.     vertical-align: middle;
  1613.     margin-right: 12px;
  1614. }
  1616. .elec #elec-hover-bg-preloader {
  1617.     background-image: url(./charging_focus.gif);
  1618.     display: none;
  1619. }
  1621. .elec .elec-status {
  1622.     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
  1623.     color: #99a2aa;
  1624.     font-weight: 700;
  1625.     margin-left: 172px;
  1626.     width: 96px;
  1627.     padding: 0 30px;
  1628.     height: 74px;
  1629.     line-height: 74px;
  1630.     text-align: right;
  1631.     position: absolute;
  1632.     top: 8px;
  1633.     right: 0;
  1634.     z-index: 2;
  1635. }
  1637. .elec .elec-status-bg {
  1638.     background-image: url(./charging_hover.gif);
  1639.     width: 0;
  1640.     height: 74px;
  1641.     position: absolute;
  1642.     top: 8px;
  1643.     left: 192px;
  1644.     transition: width .4s ease;
  1645.     z-index: 1;
  1646. }
  1648. .elec .elec-status-bg-grey {
  1649.     background: #e5e9ef;
  1650.     width: 156px;
  1651.     height: 74px;
  1652.     position: absolute;
  1653.     top: 8px;
  1654.     right: 0;
  1655.     z-index: 0;
  1656. }
  1658. .elec .elec-count {
  1659.     color: #6d757a;
  1660.     font-weight: 700;
  1661. }
  1663. .elec .elec-list {
  1664.     height: 47px;
  1665.     margin: 20px 0 6px;
  1666.     overflow: hidden;
  1667. }
  1669. .elec .elec-hito {
  1670.     cursor: pointer;
  1671.     display: block;
  1672.     float: left;
  1673.     margin-left: -20px;
  1674.     position: relative;
  1675. }
  1677. .elec .elec-hito:first-child,.elec .elec-hito:nth-child(2),.elec .elec-hito:nth-child(3) {
  1678.     margin: 0 8px 0 0;
  1679. }
  1681. .elec .elec-hito:nth-child(4) {
  1682.     z-index: 7;
  1683.     margin-left: 0;
  1684. }
  1686. .elec .elec-hito:nth-child(5) {
  1687.     z-index: 6;
  1688. }
  1690. .elec .elec-hito:nth-child(6) {
  1691.     z-index: 5;
  1692. }
  1694. .elec .elec-hito:nth-child(7) {
  1695.     z-index: 4;
  1696. }
  1698. .elec .elec-hito:nth-child(8) {
  1699.     z-index: 3;
  1700. }
  1702. .elec .elec-hito:nth-child(9) {
  1703.     z-index: 2;
  1704. }
  1706. .elec .elec-avatar {
  1707.     border: 2px solid #fff;
  1708.     border-radius: 38px;
  1709.     width: 38px;
  1710.     height: 38px;
  1711. }
  1713. .elec .elec-monthly-count {
  1714.     color: #99a2aa;
  1715.     line-height: 1;
  1716. }
  1718. .elec .elec-monthly-c {
  1719.     color: #6d757a;
  1720. }
  1722. .elec .elec-setting {
  1723.     color: #6d757a;
  1724.     float: right;
  1725. }
  1727. #page-index .i-ann.empty {
  1728.     display: none;
  1729. }
  1731. #page-index .i-ann-content {
  1732.     position: relative;
  1733.     max-height: 184px;
  1734.     overflow: auto;
  1735.     white-space: pre-line;
  1736.     word-break: break-all;
  1737. }
  1739. #page-index #i-ann-content {
  1740.     color: #6d757a;
  1741.     line-height: 20px;
  1742. }
  1744. #page-index #i-ann-content textarea {
  1745.     width: 306px;
  1746.     height: 172px;
  1747.     color: #6d757a;
  1748.     font-size: 12px;
  1749.     font-family: Microsoft Yahei;
  1750.     line-height: 20px;
  1751.     padding: 10px;
  1752.     margin: -10px 0 0 -11px;
  1753.     border: 1px solid transparent;
  1754.     border-radius: 4px;
  1755.     box-sizing: content-box;
  1756. }
  1758. #page-index #i-ann-content textarea:focus,#page-index #i-ann-content textarea:hover {
  1759.     border-color: #00a1d6;
  1760. }
  1762. .game {
  1763.     padding-bottom: 0;
  1764. }
  1766. .game.empty,.game.loading {
  1767.     display: none;
  1768. }
  1770. .game .content {
  1771.     overflow: hidden;
  1772. }
  1774. .i-live {
  1775.     padding: 15px 19px;
  1776. }
  1778. .i-live.hidden {
  1779.     display: none;
  1780. }
  1782. .i-live.online .section-title {
  1783.     border-bottom: none;
  1784. }
  1786. .i-live:hover .i-live-flag {
  1787.     opacity: 0;
  1788. }
  1790. .i-live:hover .i-live-hover {
  1791.     opacity: 1;
  1792. }
  1794. .i-live:hover .i-live-title {
  1795.     color: #00a1d6;
  1796. }
  1798. .i-live.carousel-on .i-live-flag {
  1799.     background-position: -1183px -470px;
  1800. }
  1802. .i-live .section-title {
  1803.     margin-bottom: 30px;
  1804. }
  1806. .i-live .i-live-fo {
  1807.     position: absolute;
  1808.     top: 9px;
  1809.     right: 20px;
  1810. }
  1812. .i-live .i-live-fo-btn,.i-live .i-live-unfo-btn {
  1813.     border: 1px solid;
  1814.     border-radius: 4px 0 0 4px;
  1815.     color: #fff;
  1816.     cursor: pointer;
  1817.     float: left;
  1818.     line-height: 24px;
  1819.     text-align: center;
  1820.     width: 80px;
  1821. }
  1823. .i-live .i-live-fo-btn {
  1824.     color: #f25d8e;
  1825. }
  1827. .i-live .i-live-fo-btn:hover {
  1828.     color: #ff85ad;
  1829. }
  1831. .i-live .i-live-unfo-btn {
  1832.     border-color: #dae0e9;
  1833.     color: #6d757a;
  1834. }
  1836. .i-live .i-live-fo-count {
  1837.     border: 1px solid #dae0e9;
  1838.     border-left-width: 0;
  1839.     border-radius: 0 4px 4px 0;
  1840.     color: #99a2aa;
  1841.     float: left;
  1842.     line-height: 24px;
  1843.     text-align: center;
  1844.     min-width: 50px;
  1845. }
  1847. .i-live .i-live-on {
  1848.     margin-top: -10px;
  1849.     position: relative;
  1850. }
  1852. .i-live .i-live-link {
  1853.     display: block;
  1854. }
  1856. .i-live .i-live-flag {
  1857.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
  1858.     background-position: -1090px -470px;
  1859.     transition: opacity .2s ease;
  1860.     position: absolute;
  1861.     top: 6px;
  1862.     right: 6px;
  1863.     width: 61px;
  1864.     height: 20px;
  1865. }
  1867. .i-live .i-live-img {
  1868.     border-radius: 4px;
  1869.     display: block;
  1870.     width: 100%;
  1871.     height: 173px;
  1872. }
  1874. .i-live .i-live-title {
  1875.     width: 220px;
  1876.     overflow: hidden;
  1877.     text-overflow: ellipsis;
  1878.     white-space: nowrap;
  1879. }
  1881. .i-live .i-live-hover {
  1882.     background: rgba(0,0,0,.4);
  1883.     border-radius: 4px;
  1884.     transition: opacity .2s ease;
  1885.     width: 100%;
  1886.     height: 173px;
  1887.     opacity: 0;
  1888.     position: absolute;
  1889.     top: 0;
  1890.     left: 0;
  1891. }
  1893. .i-live .i-live-hover-icon {
  1894.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
  1895.     background-position: -1096px -1094px;
  1896.     width: 48px;
  1897.     height: 48px;
  1898.     margin: 72px auto;
  1899. }
  1901. .i-live .i-live-text {
  1902.     color: #222;
  1903.     margin-top: 10px;
  1904. }
  1906. .i-live .i-live-m {
  1907.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
  1908.     background-position: -1112px -855px;
  1909.     color: #99a2aa;
  1910.     float: right;
  1911.     text-indent: 21px;
  1912. }
  1914. .i-live .i-live-off {
  1915.     margin: 30px 0 15px;
  1916.     text-align: center;
  1917. }
  1919. .i-live .i-live-off-guest {
  1920.     color: #99a2aa;
  1921. }
  1923. .i-live .i-live-off-guest p {
  1924.     line-height: 16px;
  1925. }
  1927. .i-live .i-live-off-guest a {
  1928.     display: block;
  1929.     line-height: 16px;
  1930.     margin-top: 6px;
  1931.     color: #00a1d6;
  1932. }
  1934. .i-live .i-live-off-guest a .i-live-arrow {
  1935.     background-position: -477px -410px;
  1936. }
  1938. .i-live .i-live-off-host:hover .i-live-icon {
  1939.     background-position: -536px -601px;
  1940. }
  1942. .i-live .i-live-off-host:hover .r-arrow {
  1943.     background-position: -477px -410px;
  1944. }
  1946. .i-live .i-live-icon {
  1947.     background-position: -600px -533px;
  1948.     width: 16px;
  1949.     height: 16px;
  1950.     margin-right: 3px;
  1951. }
  1953. .i-live .i-live-host-text,.i-live .i-live-icon {
  1954.     vertical-align: middle;
  1955. }
  1957. .i-live .i-live-arrow {
  1958.     margin-left: 8px;
  1959. }
  1961. .section.shop .shop-link {
  1962.     position: absolute;
  1963.     top: 0;
  1964.     right: 0;
  1965.     line-height: 46px;
  1966.     padding: 0 20px;
  1967.     color: #99a2aa;
  1968.     font-size: 12px;
  1969.     font-weight: 400;
  1970. }
  1972. .section.shop .shop-link:hover {
  1973.     color: #00a1d6;
  1974. }
  1976. .section.shop .detail .item {
  1977.     float: left;
  1978.     width: 50%;
  1979. }
  1981. .section.shop .detail .item span {
  1982.     display: block;
  1983.     margin: 0 auto;
  1984.     text-align: center;
  1985. }
  1987. .section.shop .detail .item .title {
  1988.     color: #6d757a;
  1989.     font-size: 12px;
  1990. }
  1992. .section.shop .detail .item .number {
  1993.     color: #222;
  1994.     font-size: 14px;
  1995. }
  1997. #page-index .col-1 {
  1998.     background: #fff;
  1999.     border: 1px solid #eee;
  2000.     border-radius: 4px;
  2001.     float: left;
  2002.     padding: 15px 20px;
  2003.     width: 700px;
  2004. }
  2006. #page-index .col-1.shielding:after {
  2007.     content: "\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9\FF0C\8BF7\5C06\8BE5\7528\6237\79FB\9664\9ED1\540D\5355";
  2008.     background-color: #fff;
  2009. }
  2011. #page-index .col-1.be-shielding:after,#page-index .col-1.shielding:after {
  2012.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
  2013.     background-position: 50%;
  2014.     background-repeat: no-repeat;
  2015.     border-radius: 4px;
  2016.     color: #6d757a;
  2017.     display: block;
  2018.     font-size: 14px;
  2019.     height: 450px;
  2020.     overflow: hidden;
  2021.     line-height: 640px;
  2022.     text-align: center;
  2023. }
  2025. #page-index .col-1.be-shielding:after {
  2026.     content: "\7531\4E8E\5BF9\65B9\9690\79C1\8BBE\7F6E\FF0C\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9";
  2027. }
  2029. #page-index .col-1.absEmpty:after {
  2030.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
  2031.     background-position: 50%;
  2032.     background-repeat: no-repeat;
  2033.     border-radius: 4px;
  2034.     color: #6d757a;
  2035.     content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5C55\793A\7684\5185\5BB9\54E6~";
  2036.     display: block;
  2037.     font-size: 14px;
  2038.     height: 450px;
  2039.     overflow: hidden;
  2040.     line-height: 640px;
  2041.     text-align: center;
  2042. }
  2044. #page-index .col-1 .section.empty:after {
  2045.     position: absolute;
  2046.     left: 300px;
  2047.     top: 9px;
  2048.     color: #999;
  2049. }
  2051. #page-index .col-1 .section.empty:last-child {
  2052.     padding-bottom: 0;
  2053.     margin-bottom: 0;
  2054. }
  2056. #page-index .col-1 .section.private {
  2057.     display: none;
  2058. }
  2060. #page-index .col-1 .section .more {
  2061.     background-position: -310px -405px;
  2062. }
  2064. #page-index .col-1 .section .more:hover {
  2065.     background-position: -438px -405px;
  2066. }
  2068. #page-index .col-2 {
  2069.     float: right;
  2070.     width: 350px;
  2071. }
  2073. #page-index .col-2 .section {
  2074.     background: #fff;
  2075.     border: 1px solid #eee;
  2076.     border-radius: 4px;
  2077.     padding: 15px 20px 18px;
  2078.     margin-bottom: 10px;
  2079. }
  2081. #page-index .col-2 .section .user-auth .auth-icon {
  2082.     -ms-flex-negative: 0;
  2083.     flex-shrink: 0;
  2084.     width: 18px;
  2085.     height: 18px;
  2086.     background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
  2087.     background-repeat: no-repeat;
  2088.     margin-right: 6px;
  2089. }
  2091. #page-index .col-2 .section .user-auth .auth-icon.personal-auth {
  2092.     background-position: -39px -54px;
  2093. }
  2095. #page-index .col-2 .section .user-auth .auth-icon.organization-auth {
  2096.     background-position: -5px -54px;
  2097. }
  2099. #page-index .col-2 .section .user-auth .auth-description {
  2100.     line-height: 18px;
  2101.     display: -ms-flexbox;
  2102.     display: flex;
  2103.     font-size: 14px;
  2104.     color: #222;
  2105. }
  2107. #page-index .col-2 .section .user-auth .profession-description {
  2108.     display: inline-block;
  2109.     margin-top: 12px;
  2110.     line-height: 20px;
  2111.     font-size: 14px;
  2112.     color: #222;
  2113. }
  2115. #page-index .col-2 .section .user-auth .profession-description__icon {
  2116.     width: 20px;
  2117.     height: 20px;
  2118.     display: inline-block;
  2119.     vertical-align: sub;
  2120.     margin-left: 3px;
  2121. }
  2123. #page-index .col-2 .section .user-auth.no-auth {
  2124.     margin: -15px -20px -18px;
  2125. }
  2127. #page-index .col-2 .section .user-auth.no-auth .no-auth-title {
  2128.     display: inline-block;
  2129.     position: relative;
  2130.     top: 16px;
  2131.     left: 20px;
  2132. }
  2134. #page-index .col-2 .section .user-auth.no-auth .no-auth-title .goto-auth {
  2135.     cursor: pointer;
  2136.     font-size: 18px;
  2137.     color: #222;
  2138.     display: block;
  2139.     margin-bottom: 4px;
  2140. }
  2142. #page-index .col-2 .section .user-auth.no-auth .no-auth-title span {
  2143.     font-size: 12px;
  2144.     color: #99a2aa;
  2145. }
  2147. #page-index .col-2 .section .user-auth.no-auth .icon-auth {
  2148.     width: 99px;
  2149.     height: 70px;
  2150.     display: inline-block;
  2151.     vertical-align: middle;
  2152. }
  2154. #page-index .col-2 .section .auth-detail {
  2155.     font-size: 12px;
  2156.     color: #6d757a;
  2157.     margin-top: 12px;
  2158.     padding-left: 6px;
  2159. }
  2161. #page-index .col-2 .section .blueV-brand {
  2162.     border-top: 1px solid #eee;
  2163.     margin-top: 16px;
  2164.     padding-top: 14px;
  2165. }
  2167. #page-index .col-2 .section .blueV-brand .blueV-link {
  2168.     display: -ms-flexbox;
  2169.     display: flex;
  2170.     -ms-flex-pack: justify;
  2171.     justify-content: space-between;
  2172.     -ms-flex-align: center;
  2173.     align-items: center;
  2174. }
  2176. #page-index .col-2 .section .blueV-brand .blueV-link .left-txt {
  2177.     color: #18191c;
  2178.     font-weight: 700;
  2179. }
  2181. #page-index .col-2 .section .blueV-brand .blueV-link .right-txt {
  2182.     display: -ms-flexbox;
  2183.     display: flex;
  2184.     -ms-flex-align: center;
  2185.     align-items: center;
  2186.     color: #9499a0;
  2187. }
  2189. #page-index .col-2 .section .blueV-brand .blueV-link .right-txt>svg {
  2190.     margin-left: 6px;
  2191.     width: 7px;
  2192.     height: 12px;
  2193. }
  2195. #page-index .col-2 .section .private-hint .icon {
  2196.     width: 21px;
  2197.     margin: 0;
  2198.     background-position: -214px -724px;
  2199. }
  2201. #page-index .col-2 .section.empty:after {
  2202.     color: #aaa;
  2203.     display: block;
  2204.     line-height: 80px;
  2205.     text-align: center;
  2206. }
  2208. #page-index .col-2 .section:last-child {
  2209.     border-bottom: 1px solid #eee;
  2210. }
  2212. #page-index .col-2 .section.user.private .content {
  2213.     display: block;
  2214. }
  2216. #page-index .col-2 .section.user.private .friend-data {
  2217.     padding: 14px 0;
  2218. }
  2220. #page-index .col-2 .section.user.private .section-title {
  2221.     display: block;
  2222.     margin-bottom: 0;
  2223. }
  2225. #page-index .col-2 .section.user.private .section-title .private-hint {
  2226.     display: block;
  2227.     line-height: 46px;
  2228. }
  2230. #page-index .col-2 .section.elec,#page-index .col-2 .section.i-m {
  2231.     padding-top: 15px;
  2232. }
  2234. #page-index .col-2 .section-title {
  2235.     border-bottom: 1px solid #e5e9ef;
  2236.     font-size: 14px;
  2237.     font-weight: 700;
  2238.     padding: 0;
  2239.     margin: -15px 0 10px;
  2240.     height: 45px;
  2241.     line-height: 45px;
  2242. }
  2244. #page-index .col-2 .section-title a {
  2245.     font-weight: 700;
  2246.     margin-right: 5px;
  2247. }
  2249. #page-index .col-2 .section-title .quantity {
  2250.     font-weight: 700;
  2251. }
  2253. #page-index .col-2 .section-title .more {
  2254.     background-position: -310px -407px;
  2255.     font-weight: 400;
  2256.     border: none;
  2257.     top: 0;
  2258.     line-height: 16px;
  2259.     padding-right: 12px;
  2260.     margin-right: 0;
  2261. }
  2263. #page-index .col-2 .section-title .more:hover {
  2264.     background-position: -438px -407px;
  2265. }
  2267. #page-index .col-2 .mini-item {
  2268.     width: 100%;
  2269. }
  2271. #page-index .col-2 .mini-item .detail a {
  2272.     display: block;
  2273.     line-height: 40px;
  2274. }
  2276. @media (min-width:1420px) {
  2277.     #page-index .col-1 {
  2278.         width: 880px;
  2279.     }
  2281.     #page-index .col-1 .section.empty:after,#page-index .col-1 .section .sec-empty-hint {
  2282.         left: 400px;
  2283.     }
  2285.     #page-index .col-1 .channel .content {
  2286.         width: 880px;
  2287.     }
  2289.     #page-index .col-1 .coin .content {
  2290.         width: 900px;
  2291.     }
  2293.     #page-index .col-1 .coin .small-item:nth-child(8),#page-index .col-1 .coin .small-item:nth-child(9),#page-index .col-1 .coin .small-item:nth-child(10) {
  2294.         display: block;
  2295.     }
  2296. }
  2298. /*# sourceMappingURL=space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/
#space-theme {

    transition: bottom .4s ease;

    position: fixed;

    left: 0;

    bottom: -600px;

    width: 100%;

    z-index: 1000;

    background: rgba(0,0,0,.8);

    color: #fff;

}

#space-theme.theme-show {

    bottom: 0;

}

#space-theme .theme-buy-layer {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1001;

    background-color: rgba(0,0,0,.7);

}

#space-theme .theme-buy-layer #theme-buy-layer-wrapper {

    background: #fff;

    border-radius: 4px;

    position: fixed;

    left: 50%;

    transition: opaicty .2s ease;

    top: 50%;

    width: 370px;

    margin: -200px 0 0 -185px;

    z-index: 1011;

}

#space-theme .theme-tab {

    cursor: pointer;

    display: block;

    float: left;

    font-size: 18px;

    margin-right: 10px;

    line-height: 52px;

    width: 130px;

    text-align: center;

}

#space-theme .theme-tab.active {

    background-color: #111;

}

#space-theme .theme-ann {

    color: #ff98ba;

    float: left;

    line-height: 32px;

    margin-right: 33px;

}

#space-theme .theme-ann-icon {

    background-position: -1307px -154px;

    width: 10px;

    height: 12px;

    margin-right: 10px;

    position: relative;

    top: 1px;

}

#space-theme .theme-close {

    background-position: -527px -271px;

    cursor: pointer;

    width: 32px;

    height: 32px;

    margin-right: -10px;

}

#space-theme .theme-close:hover {

    background-position: -591px -271px;

}

#space-theme .theme-topright {

    float: right;

    margin-top: 10px;

}

#space-theme .theme-topright .theme-buy-vip {

    line-height: 30px;

    width: 90px;

    margin-left: 15px;

}

#space-theme .theme-btn {

    line-height: 30px;

    width: 88px;

}

#space-theme .theme-btn.primary {

    background: #f25d8e;

    border: 1px solid #f25d8e;

}

#space-theme .theme-btn.primary:hover {

    background-color: #ff85ad;

    border-color: #ff85ad;

}

#space-theme .theme-btn.primary.disabled {

    border-color: #aaa;

}

#space-theme .theme-panel {

    background: #111;

    padding: 25px 0 15px;

    position: relative;

}

#space-theme .theme-panel[tab-id="1"] .theme-list {

    padding-left: 45px;

}

#space-theme .theme-list {

    position: relative;

    height: 280px;

    overflow: hidden;

}

#space-theme .theme-list[name=toutu] {

    padding-left: 45px;

}

#space-theme .theme-list-inner {

    padding-bottom: 40px;

}

#space-theme .theme-item-outer {

    float: left;

    width: 220px;

    height: 240px;

    position: relative;

}

#space-theme .theme-item-outer:hover {

    z-index: 1;

}

#space-theme .theme-item {

    background-position: center 15px;

    background-repeat: no-repeat;

    border-radius: 8px;

    cursor: pointer;

    text-align: center;

    width: 180px;

    padding: 182px 20px 10px;

    position: absolute;

    top: 0;

    left: 0;

}

#space-theme .theme-item:hover {

    background-color: #4c4c4c;

}

#space-theme .theme-item:hover .theme-action,#space-theme .theme-item:hover .theme-price {

    display: block;

}

#space-theme .theme-item.active {

    background-color: #4c4c4c;

    box-shadow: inset 0 0 0 3px hsla(0,0%,100%,.4);

}

#space-theme .theme-item.active .theme-item-active-icon {

    display: block;

}

#space-theme .theme-item-active-icon {

    background-position: -650px -653px;

    display: none;

    width: 37px;

    height: 37px;

    position: absolute;

    top: 0;

    right: 0;

}

#space-theme .theme-name {

    font-size: 14px;

    line-height: 20px;

    text-align: center;

    max-width: 10em;

    margin: 0 auto;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

#space-theme .theme-price {

    color: #ccd0d7;

    display: none;

    margin: 5px 0 -1px;

}

#space-theme .theme-action {

    display: none;

    padding: 10px 0 5px;

}

#space-theme .theme-btn {

    border-radius: 4px;

    color: #fff;

    display: inline-block;

    width: 60px;

    line-height: 24px;

    margin: 0 3px;

}

#space-theme .theme-btn.use {

    background: #00a1d6;

}

#space-theme .theme-btn.use:hover {

    background: #00b5e5;

}

#space-theme .theme-btn.buy {

    background: #f25d8e;

    width: 72px;

}

#space-theme .theme-btn.buy:hover {

    background: #ff85ad;

}

#space-theme .theme-btn.renew {

    border: 1px solid;

    line-height: 22px;

    width: 58px;

}

#space-theme .theme-btn.renew:hover {

    background: #ff85ad;

    border-color: #ff85ad;

}

#space-theme .toutu-item {

    border: 3px solid #555;

    border-radius: 12px;

    cursor: pointer;

    float: left;

    width: 310px;

    height: 96px;

    position: relative;

    margin: 0 25px 20px 0;

    background-size: img;

    background-position: 50%;

}

#space-theme .toutu-item.active,#space-theme .toutu-item.for-sale.active {

    border-color: #fff;

    z-index: 2;

}

#space-theme .toutu-item.active .selected-icon,#space-theme .toutu-item.for-sale.active .selected-icon {

    display: block;

}

#space-theme .toutu-item.active .toutu-detail,#space-theme .toutu-item.for-sale.active .toutu-detail {

    border-color: #fff;

}

#space-theme .toutu-item:hover {

    z-index: 3;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

}

#space-theme .toutu-item:hover .toutu-detail {

    left: -3px;

    opacity: 1;

}

#space-theme .toutu-item.upload-toutu {

    position: relative;

    width: 316px;

    height: 102px;

    color: #99a2aa;

    border: none;

    background-image: url(s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-normal.png);

    background-repeat: no-repeat;

    transition: background-image .2s ease,color .2s ease;

}

#space-theme .toutu-item.upload-toutu:hover {

    color: #fff;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-hover.png);

}

#space-theme .toutu-item.upload-toutu:hover .upload-icon {

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABoklEQVR42mNgAIL///+rAvFaIP74f+DBR6hbVBnwAaACdSB+/3/wAZCb1PE5fC1U4TYglmQYYAByA9QtILAWn0JY8hhwR6M5HgQ+41MEBgyDDBB014hyOFB5GRA/h+IyIvW0AvEXIL4KxMF0dzhQqQeWEsCDgJ4sNPX/gDiU3g4vxOLwAjzqJXDUD+/xFQi0cLgGEH9DcsB3kBge9XPwlNXz6J3GLYF4IRDPBbEJVG6/8Tj8LxDr0Cb3opatiiSavYKIGnItTRwOlGID4unQ0AGBJUDMTIS5xtBMSAiA1Bhg0X8EiA+T5XCoo3dgsaycCIfvJ6FdsomqaRwoPAmHRT+AWBePmYkkNqhAoW5CFYcDhdwJRPV1IObHok8FiD+Q0RrcQrHDgVwOIL5HhGXngFgOSR+oXX+HSIduo3o5DuTWkBBSoDJ9NRCvgyYhYoEkVWtOIFOEHj0hJPsOk6H9MDaHt9Gje0Ohw49gc/iH//QBVE8qJ+jk8K2gBhglDh90XTdiHb6WmBAYjA7XGEzDEyQ1/qDNT1DIfxpEDj8CLj1wAAAxW+fPWMftvgAAAABJRU5ErkJggg==);

}

#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips2 {

    display: block;

}

#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips1 {

    display: none;

}

#space-theme .toutu-item.upload-toutu .upload-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

#space-theme .toutu-item.upload-toutu .upload-icon {

    width: 46px;

    height: 26px;

    margin: 0 auto;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABqUlEQVR42mNgAIKZi1apAvFaIP4IxP8HGH+EukWVAR8AKlAH4veDwMHoGOQmdXwOXwtVuA2IJRkGGIDcAHULyE1r8SmEJY8BdzSa40Fu+oxPEThqGAYZIOiuEeVwoPoyIH4OxWVE6mkF4i9AfBWIg+nucKBaDywlgAcBPVlo6v8BcSi9HV6IxeEFeNRL4Kgf3uMrEGjhcA0g/obkgO8gMTzq5+Apq+fRO41bAvFCIJ4LYhOo3H7jcfhfINahTe5FLVsVSTR7BRE15FqaOBwoxwbE06GhA1K7BIiZiTDXGJoJCTkcpMYAi/4jQHyYLIdDHb0Di2XlRDh8Pwntkk1UTeNA8Uk4LPoBxLp4zEwksUEFCnUTqjgcKOZOIKqvAzE/Fn0qQPyBjNbgFoodDuRzAPE9Iiw7B8RySPpA7fo7RDp0G9XLcSC/hoSQApXpq4F4HTQJEatPkqo1J5AtQo+eEJJ9h8nQfxibw9vo0cOh0OFHsDn8A526ZlRPKifo5PCtoAYYJQ4fdF03Yh2+lpgQGIwO1xhMwxMkNf6gzU9QyH8aRA4/Ai49cAAAVzZmwRFfokoAAAAASUVORK5CYII=);

    background-repeat: no-repeat;

    transition: background-image .2s ease;

}

#space-theme .toutu-item.upload-toutu .upload-tips {

    line-height: 20px;

    margin-top: 5px;

    text-align: center;

    font-size: 12px;

    white-space: nowrap;

}

#space-theme .toutu-item.upload-toutu .upload-tips.u-tips2 {

    display: none;

}

#space-theme .toutu-item.upload-toutu .upload-input {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}

#space-theme .toutu-item .vip-icon {

    position: absolute;

    top: -3px;

    right: -3px;

    width: 57px;

    height: 57px;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/vip-tag.png);

    background-repeat: no-repeat;

}

#space-theme .toutu-item .selected-icon {

    display: none;

    background-image: url(./icons.png);

    background-position: -642px -650px;

    content: "";

    position: absolute;

    width: 45px;

    height: 45px;

    top: -3px;

    right: 0;

}

#space-theme .theme-list-inner .noviptag:after {

    display: none;

}

#space-theme .edit-container {

    width: 1100px;

    height: 280px;

    margin: 0 auto;

    overflow: hidden;

}

#space-theme .edit-container .crop-container .preview-container {

    position: relative;

    height: 172px;

    background-color: #222;

    border-radius: 10px;

    overflow: hidden;

}

#space-theme .edit-container .crop-container .preview-container.selecting {

    background-color: #111;

}

#space-theme .edit-container .crop-container .preview-container .jcrop-holder {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    max-width: 1100px;

    max-height: 172px;

}

#space-theme .edit-container .crop-container .crop-target {

    max-width: 1100px;

    max-height: 172px;

}

#space-theme .edit-container .crop-container .option-pane {

    margin-top: 10px;

    height: 16px;

}

#space-theme .edit-container .crop-container .option-pane .rechoose {

    display: inline-block;

    height: 16px;

    line-height: 16px;

    padding-left: 20px;

    font-size: 12px;

    color: #fff;

    cursor: pointer;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAxklEQVR42o3RzQoBURTA8SsZxBuMZ/GxsLCyV16AsJOF4oWshi02mgVFZOcRJMVK6vqfOrekzMypX82ce87M6R5jNKy1WXSwwQ0PhOjDM99BooQjFqgjjyJqCLCH74oz2GJk/gRnYxxkCnlJo2UigvOJjtozcaHFVscKJdGOaahirU0vSbzRSPAnaZzJw1m7V6gkmVHu+apN04i6JlJuYRcsI4qHOMmNuoSvtxDosgrIoYw5drLc3694GOgSn7jr3Xdlua7uAzN0CaobG2d1AAAAAElFTkSuQmCC);

    background-repeat: no-repeat;

    background-position: 2px 2px;

    transition: background-image .2s ease,color .2s ease;

}

#space-theme .edit-container .crop-container .option-pane .rechoose:hover {

    color: #00a1d6;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAyUlEQVR42o3RzwoBcRDA8Z9kEW+wnsWfg4OTu/IChJscFK+yD+C0XHHRHigie/IIkuIkxff3M3ug7O7UZ9ummd1pRqkgHD+NFla44AYPXVjqKxy/gD1mqCKLPCpwsYUdFKewxkD9C8cfYmem4JFEQ4WF449k1I6KjE/xS8bydKIZ0VDGUpoeOvFELcafdONEvxyle4FSnBn1ns/SNA6pqyMRHOyEeUhxHwezUUnYsgVXjpVDBkVMsTHH/fmKhZ4c8Y6r7L5tjivxBoCZldPnr4+cAAAAAElFTkSuQmCC);

}

#space-theme .edit-container .crop-container .option-pane .upload-size {

    margin-left: 10px;

    color: #99a2aa;

    font-size: 12px;

}

#space-theme .edit-container .uploading-container {

    margin-bottom: 30px;

}

#space-theme .edit-container .uploading-container .uploading {

    position: relative;

    height: 170px;

    margin: 15px auto 0;

    background-color: #1f1f1f;

    border-radius: 10px;

}

#space-theme .edit-container .uploading-container .upload-content {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 46px;

    height: 60px;

    margin: -30px 0 0 -23px;

}

#space-theme .edit-container .uploading-container .loading-icon {

    text-align: center;

}

#space-theme .edit-container .uploading-container .loading-icon.loading img {

    animation: loadingRotate 1s linear infinite;

}

#space-theme .edit-container .uploading-container .loading-text {

    margin-top: 10px;

    font-size: 12px;

    color: #6d757a;

    text-align: center;

}

#space-theme .edit-container .upload-action {

    margin-top: 5px;

    text-align: center;

}

#space-theme .edit-container .upload-action .btn {

    width: 90px;

    height: 30px;

    line-height: 30px;

    margin-right: 20px;

    color: #fff;

    border-radius: 4px;

}

#space-theme .edit-container .upload-action .btn:last-of-type {

    margin-right: 0;

}

#space-theme .edit-container .upload-action .btn.confirm-action.uploading-state {

    color: #666;

    border-color: #1f1f1f;

    background-color: #1f1f1f;

}

#space-theme .edit-container .upload-action .btn.cancel-action {

    color: #fff;

    border-color: #fff;

}

#space-theme .edit-container .upload-action .btn.cancel-action:hover {

    color: #00a1d6;

    background: none;

    border-color: #00a1d6;

}

@keyframes loadingRotate {

    0% {

        transform: rotate(0);

    }

    50% {

        transform: rotate(180deg);

    }

    to {

        transform: rotate(1turn);

    }

}

#space-theme .popup-register-vip {

    position: fixed;

    display: none;

    left: 0;

    top: 0;

    z-index: 1987;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: rgba(0,0,0,.7);

}

#space-theme .popup-register-vip .popup-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    z-index: 1988;

    width: 350px;

    height: 310px;

    background-color: #fff;

    box-shadow: 0 3px 26px rgba(0,0,0,.9);

    border-radius: 4px;

}

#space-theme .popup-register-vip .popup-title {

    line-height: 20px;

    margin-top: 40px;

    font-size: 14px;

    color: #666;

    text-align: center;

}

#space-theme .popup-register-vip .popup-title span {

    color: #fd2828;

}

#space-theme .popup-register-vip .popup-content {

    margin-top: 10px;

    text-align: center;

}

#space-theme .popup-register-vip .popup-btn {

    margin-top: 30px;

    text-align: center;

}

#space-theme .popup-register-vip .popup-btn span {

    display: inline-block;

    width: 120px;

    height: 36px;

    line-height: 36px;

    font-size: 12px;

    color: #fff;

    background-color: #ff5b5b;

    border-style: none;

    border-radius: 5px;

    text-align: center;

    transition: all .2s ease;

}

#space-theme .popup-register-vip .popup-btn span:hover {

    background-color: #ff7575;

}

#space-theme .popup-register-vip .popup-close-btn {

    position: absolute;

    top: 0;

    right: 0;

    width: 40px;

    height: 40px;

    cursor: pointer;

    background-image: url(./icons.png);

    background-repeat: no-repeat;

    background-position: -522px -267px;

}

#space-theme .toutu-detail {

    background-repeat: no-repeat;

    border: 3px solid #555;

    border-radius: 12px;

    opacity: 0;

    transition: opacity .2s ease;

    overflow: hidden;

    position: absolute;

    top: -3px;

    left: -9999px;

    width: 100%;

}

#space-theme .toutu-meta {

    background: #333;

    line-height: 1em;

    margin-top: 93px;

    padding: 10px;

    position: relative;

}

#space-theme .toutu-title {

    color: #fff;

    margin-bottom: 10px;

}

#space-theme .toutu-price {

    color: #ccd0d7;

}

#space-theme .toutu-action {

    position: absolute;

    bottom: 10px;

    right: 10px;

}

#space-theme .toutu-btn {

    border-radius: 4px;

    display: inline-block;

    text-align: center;

    line-height: 24px;

    margin-left: 7px;

    width: 54px;

}

#space-theme .toutu-btn.vip {

    background: #f66;

    width: 90px;

}

#space-theme .toutu-btn.vip:hover {

    background: #f88;

}

#space-theme .toutu-btn.buy {

    border: 1px solid;

    width: 52px;

    line-height: 22px;

}

#space-theme .toutu-btn.buy:hover {

    color: #ff85ad;

}

#space-theme .toutu-btn.use {

    background: #00a1d6;

}

#space-theme .toutu-btn.use:hover {

    background: #00b5e5;

}

#space-theme .theme-buy-layer.active {

    opacity: 1;

    left: 50%;

}

#space-theme .theme-buy-close {

    position: absolute;

    top: 5px;

    right: 5px;

    z-index: 9;

    width: 30px;

    height: 30px;

    background-image: url(./icons.png);

    cursor: pointer;

    background-position: -336px -593px;

}

#space-theme .theme-buy-close:hover {

    background-position: -400px -593px;

}

#space-theme .theme-buy-header {

    background: #e5e9ef;

    border-radius: 4px 4px 0 0;

    position: relative;

}

#space-theme .theme-buy-preview {

    border-radius: 4px;

    display: block;

    width: 128px;

    height: 128px;

    margin: 0 auto 20px;

    top: -60px;

    position: relative;

}

#space-theme .theme-buy-name {

    color: #111;

    font-size: 24px;

    line-height: 1em;

    margin: -60px auto 0;

    padding-bottom: 20px;

    text-align: center;

    max-width: 10em;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

#space-theme .theme-buy-current-expire-time {

    color: #6d757a;

    line-height: 1em;

    text-align: center;

    margin-top: -5px;

    padding-bottom: 15px;

}

#space-theme .theme-buy-body {

    padding: 0 36px;

}

#space-theme .theme-buy-a {

    color: #99a2aa;

    font-size: 14px;

    line-height: 1em;

    margin: 25px 0 10px;

}

#space-theme .theme-buy-list {

    margin-bottom: 25px;

    width: 330px;

}

#space-theme .theme-buy-item {

    border: 1px solid #ccd0d7;

    border-radius: 4px;

    color: #222;

    cursor: pointer;

    font-size: 14px;

    float: left;

    width: 65px;

    margin-right: 10px;

    line-height: 38px;

    text-align: center;

}

#space-theme .theme-buy-item:hover {

    border-color: #00a1d6;

    color: #00a1d6;

}

#space-theme .theme-buy-item.active {

    border-color: #00a1d6;

    box-shadow: 0 0 0 1px #00a1d6;

    color: #00a1d6;

}

#space-theme .theme-buy-item.active .theme-buy-custom-length {

    color: #00a1d6;

}

#space-theme .theme-buy-item.custom {

    color: #99a2aa;

}

#space-theme .theme-buy-price {

    border-bottom: 1px solid #e5e9ef;

    color: #6d757a;

    font-size: 14px;

    line-height: 1em;

    text-align: center;

    padding-bottom: 10px;

    margin-bottom: 25px;

}

#space-theme .theme-buy-price var {

    color: #00a1d6;

    font-size: 18px;

    font-weight: 700;

}

#space-theme .theme-buy-footer {

    padding: 200px 0 30px;

    text-align: center;

}

#space-theme .theme-buy-layer-btn {

    border: 1px solid #ccd0d7;

    width: 120px;

    line-height: 34px;

    vertical-align: middle;

    margin: 0 5px;

}

#space-theme .theme-buy-vip {

    background: #f66;

    border-color: #f66;

    color: #fff;

}

#space-theme .theme-buy-vip:hover {

    background: #f88;

    border-color: #f88;

    color: #fff;

}

#space-theme .theme-buy-submit-btn {

    display: inline-block;

    border-radius: 3px;

    transition: all .1s ease;

    text-align: center;

    border-color: #00a1d6;

    color: #00a1d6;

}

#space-theme .theme-buy-submit-btn:hover {

    border-color: #00b5e5;

    color: #00b5e5;

}

#space-theme .hideit {

    display: block;

}

#space-theme input.theme-buy-custom-length {

    background: transparent;

    box-shadow: none;

    border: none;

    color: #99a2aa;

    cursor: pointer;

    font-size: 14px;

    line-height: 38px;

    height: 38px;

    transition: none;

    padding: 0 12px;

    width: 40px;

    text-align: center;

}

#space-theme input.theme-buy-custom-length:focus {

    border: none;

}

#space-theme #theme-buy-select-length .theme-buy-footer {

    padding-top: 0;

}

#space-theme #theme-buy-success {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-success.png);

    background-repeat: no-repeat;

    background-position: center 140px;

}

#space-theme #theme-buy-success .theme-buy-body {

    padding: 40px 55px 0;

}

#space-theme #theme-buy-fail {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-processing.png);

    background-repeat: no-repeat;

    background-position: center 160px;

}

#space-theme #theme-buy-fail .theme-buy-body {

    padding: 40px 40px 0;

}

#space-theme .theme-buy-success-icon {

    display: block;

    float: left;

    width: 50px;

    height: 50px;

    background-image: url(./icons.png);

    background-position: -646px -1037px;

}

#space-theme #theme-buy-success-g {

    position: absolute;

    left: 105px;

    top: 135px;

    width: 160px;

    height: 180px;

}

#space-theme .theme-buy-fail-icon {

    display: block;

    float: left;

    width: 50px;

    height: 50px;

    margin-left: -10px;

    background-image: url./icons.png);

    background-position: -646px -909px;

}

#space-theme #theme-buy-fail .theme-buy-result-info,#space-theme #theme-buy-fail .theme-buy-result-title {

    margin-left: 60px;

}

#space-theme .theme-buy-result-title {

    color: #222;

    font-size: 22px;

    line-height: 1em;

    margin: 0 0 15px 70px;

}

#space-theme .theme-buy-result-info {

    color: #99a2aa;

    font-size: 14px;

    margin-left: 70px;

    margin-bottom: 10px;

    line-height: 1em;

    white-space: nowrap;

}

#space-theme .theme-buy-g-name {

    color: #00a1d6;

    display: inline-block;

    max-width: 8em;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    vertical-align: bottom;

}

#space-theme .theme-buy-rmb-hint {

    color: #222;

    font-size: 22px;

    line-height: 24px;

    margin-bottom: 15px;

}

#space-theme .theme-buy-rmb-secondary {

    color: #99a2aa;

    font-size: 14px;

}

@media (min-width:1420px) {

    #space-theme .theme-panel .theme-list[name=toutu] {

        padding-left: 0;

    }

    #space-theme .toutu-item {

        width: 290px;

        height: 90px;

        margin-right: 20px;

    }

    #space-theme .toutu-item.upload-toutu {

        width: 296px;

        height: 96px;

        background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-normal.png);

    }

    #space-theme .toutu-item.upload-toutu:hover {

        background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-hover.png);

    }

    #space-theme .theme-ann {

        margin-right: 13px;

    }

    #space-theme .theme-item {

        margin-right: 36px;

    }

}

.h-notice[data-v-12a8e8b3] {

    height: 42px;

    padding: 0 16px;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-align: center;

    align-items: center;

}

.h-notice a[data-v-12a8e8b3] {

    display: inline-block;

    height: 100%;

    max-width: 1226px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    letter-spacing: 0;

    line-height: 42px;

    cursor: auto;

}

.h-notice a.linkType[data-v-12a8e8b3] {

    cursor: pointer;

}

.h-notice .icon-notice[data-v-12a8e8b3] {

    width: 14px;

    height: 14px;

    margin-right: 8px;

}

.medal-box {

    position: relative;

    vertical-align: middle;

    margin-left: 3px;

    height: 16px;

    line-height: 10px;

    display: -ms-inline-flexbox;

    display: inline-flex;

    font-size: 8px;

    color: #f25d8e;

    border-radius: 1px;

}

.medal-box .medal-flag {

    position: absolute;

    transform: translate(-50%,-1px);

    width: 18px;

    height: 18px;

}

.medal-box .medal-level,.medal-box .medal-true-love {

    border: .5px solid #f25d8e;

    text-align: center;

    box-sizing: content-box;

}

.medal-box .medal-level .tiny,.medal-box .medal-true-love .tiny {

    transform: scale(.5);

    width: 200%;

    height: 200%;

    font-weight: 400;

    transform-origin: left 30%;

    font-size: 20px;

}

.medal-box .medal-true-love {

    border-right-width: 0;

    border-bottom-left-radius: 1px;

    border-top-left-radius: 1px;

    padding-left: 2px;

    padding-right: 2px;

    white-space: nowrap;

}

.medal-box .medal-level {

    border-left: .5px solid #f25d8e;

    border-bottom-left-radius: 0;

    border-top-left-radius: 0;

    border-bottom-right-radius: 1px;

    border-top-right-radius: 1px;

    width: 18px;

    background: #fff;

}

.h {

    position: relative;

    z-index: 10;

}

.h .h-forbid {

    height: 42px;

    margin-bottom: 10px;

    background-color: #e5e9ef;

    border-radius: 4px;

}

.h .h-forbid .f-wrap {

    width: 203px;

    margin: 0 auto;

}

.h .h-forbid .f-wrap .f-icon {

    background-image: url(/./icons.png);

    background-position: -664px -458px;

    display: inline-block;

    width: 80px;

    height: 42px;

    margin-right: 20px;

}

.h .h-forbid .f-wrap .f-txt {

    font-size: 14px;

    color: #222;

    line-height: 42px;

    display: inline-block;

    vertical-align: top;

}

.h .h-inner {

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAEElEQVR4AWP48vU7MqKUDwA7qkfh9iF73wAAAABJRU5ErkJggg==);

    background-position: 50%;

    background-size: img;

    transition: background-image .2s ease,background-size 1s ease;

    padding-top: 116px;

    position: relative;

}

.h .avatar-icon {

    display: block;

    position: absolute;

    right: 0;

    top: 44px;

    width: 20px;

    height: 20px;

    z-index: 9;

}

.h .h-user {

    position: relative;

    z-index: 1;

}

.h .gender {

    display: none;

    width: 21px;

    height: 18px;

    margin-right: 5px;

    vertical-align: middle;

    background-position: -212px -922px;

}

.h .gender.male {

    display: inline-block;

    background-position: -212px -472px;

}

.h .gender.female {

    display: inline-block;

    background-position: -211px -404px;

}

.h .m-level {

    display: inline-block;

    width: 25px;

    height: 14px;

    margin-right: 5px;

}

.h .m-level.senior {

    width: 35px;

    height: 14px;

}

.h .m-level svg {

    width: 100%;

    height: 100%;

}

.h .h-gradient {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 84px;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAABdCAMAAADNEjtLAAABEVBMVEUDAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAACnjvHuAAAAW3RSTlMBAgMEBQYHCAkKCwwNDxAREhQVFhgZGxweHyEiJCUnKSosLS8xMjQ2ODk7PT5AQkNFR0hKTE5PUVNUVldZW1xeX2FiZGVnaGprbG5vcHFzdHV2d3h5ent8fX5/XoZ4lgAAAPVJREFUeAHt1AERADAQAiDdrX/mDyKEIAAAjGkDsOk3AAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECAgQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBAQIIEAAAQIseAEYdZ9sAcJDX4ICAAAAAElFTkSuQmCC);

    background-repeat: repeat-x;

}

.h .h-fans-icon {

    position: relative;

    display: inline-block;

    vertical-align: middle;

    text-align: center;

}

.h .h-fans-icon:hover .fans-hover-tip {

    display: block;

}

.h .h-fans-icon .fans-hover-tip {

    position: absolute;

    display: none;

    top: -29px;

    left: 5px;

    width: 138px;

    padding: 0 12px;

    font-size: 12px;

    color: #ff85ad;

    background: #fff;

    border: 1px solid #ff85ad;

    border-radius: 4px;

    box-sizing: border-box;

}

.h .h-fans-icon .fans-hover-tip:after {

    content: "";

    position: absolute;

    bottom: -5px;

    left: 5px;

    width: 7px;

    height: 7px;

    border: 1px solid #ff85ad;

    border-top: none;

    border-left: none;

    transform: rotate(45deg);

    background-color: #fff;

}

.h .h-fans-icon .fans-hover-tip .tip-inner {

    font-size: 12px;

    color: #505050;

    line-height: 12px;

}

.h .h-fans-icon .h-fans-text {

    display: block;

    width: 20px;

    height: 16px;

    line-height: 14px;

    font-size: 12px;

    color: #ff85ad;

    background: #fff;

    border: 1px solid #ff85ad;

    border-radius: 4px;

    box-sizing: border-box;

}

.h .avatar-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;

    background: rgba(0,0,0,.6);

    font-size: 12px;

    color: #fff;

    line-height: 60px;

    text-align: center;

    opacity: 0;

    border-radius: 50%;

    transition: opacity .2s;

}

.h .bili-avatar-icon,.h .bili-avatar-nft-icon {

    z-index: 1;

}

.h .nft-avatar-img {

    width: 68px;

    height: 68px;

    line-height: 68px;

}

.h .bili-avatar-img {

    border: 2px solid hsla(0,0%,100%,.4);

}

.h .avatar-container:hover .avatar-img {

    opacity: 1;

}

.h .avatar-container {

    position: relative;

}

.h .h-info {

    margin-left: 20px;

    padding-bottom: 16px;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

}

.h .h-basic {

    color: #fff;

    font-size: 0;

    margin-left: 22px;

}

.h .h-basic .h-basic-spacing {

    margin-top: 6px;

}

.h .h-basic .h-basic-spacing.is-honor {

    margin: 3px 0;

}

.h .h-basic .honor {

    overflow: hidden;

    width: 735px;

    height: 16px;

}

.h .h-basic .honor .honor-item {

    float: left;

    font-size: 12px;

    color: #fff;

    line-height: 14px;

    font-weight: 400;

    padding: 1px 5px;

    background: hsla(0,0%,100%,.2);

    box-shadow: inset 0 0 0 0 hsla(0,0%,100%,.5);

    border-radius: 4px;

    margin-right: 10px;

    cursor: default;

}

.h .h-basic .honor .cursor {

    cursor: pointer;

}

.h #h-name {

    display: inline-block;

    margin-right: 5px;

    font-weight: 700;

    line-height: 18px;

    font-size: 18px;

    vertical-align: middle;

}

.h #h-ceritification {

    background-position: -217px -792px;

    display: none;

    width: 11px;

    height: 18px;

    margin: 0 1px 0 6px;

    vertical-align: middle;

}

.h .h-sign {

    background: transparent;

    border-radius: 4px;

    border: none;

    box-shadow: none;

    color: hsla(0,0%,100%,.8);

    font-size: 12px;

    font-family: Microsoft Yahei;

    line-height: 26px;

    height: 26px;

    margin-left: -5px;

    padding: 0 5px;

    position: relative;

    top: -1px;

    width: 730px;

    font-weight: 400;

}

.h .h-f-btn {

    background: rgba(0,0,0,.45);

    box-shadow: 0 0 0 2px hsla(0,0%,100%,.3);

    border-radius: 4px;

    color: #fff;

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    float: left;

    text-align: center;

    margin: 0 20px 17px 0;

    width: 76px;

    line-height: 30px;

}

.h .h-f-btn:hover {

    background: rgba(0,0,0,.5);

}

.h .h-f-btn .icon-arrow {

    margin-left: 4px;

    background-position: -1369px -214px;

}

.h .h-f-btn.special {

    width: 100px;

}

.h .h-f-btn .video-commonmenu {

    vertical-align: middle;

    margin-right: 2px;

}

.h .h-follow {

    background: #f25d8e;

    box-shadow: 0 0 0 2px #fff;

    color: #fff;

}

.h .h-follow:hover {

    background: #ff85ad;

}

.h .h-message:hover {

    color: #fff;

}

.h .h-vipType {

    display: inline-block;

    height: 16px;

    line-height: 16px;

    border-radius: 4px;

    font-size: 12px;

    color: #fff;

    padding: 0 5px;

    background-color: #f45a8d;

    vertical-align: middle;

    margin-right: 5px;

    cursor: pointer;

}

.h .h-vipType.disable {

    background-color: #ccd0d7;

    color: #99a2aa;

}

.h .h-guest-hint {

    background: rgba(0,161,214,.9);

    color: #fff;

    font-size: 12px;

    line-height: 40px;

    text-align: center;

    position: absolute;

    z-index: 1;

    top: 0;

    left: 0;

    width: 100%;

}

.h .h-version {

    position: absolute;

    top: 15px;

    right: 57px;

}

.h .h-v-btn {

    background: rgba(0,0,0,.45);

    border-radius: 4px;

    color: #fff;

    cursor: pointer;

    font-size: 12px;

    line-height: 30px;

    transition: all .1s ease;

    padding: 0 10px;

}

.h .h-v-btn:hover {

    background: rgba(0,0,0,.5);

}

.h .h-v-icon {

    background-position: -1111px -407px;

    width: 14px;

    height: 14px;

}

.h .h-role-icon {

    margin-left: 5px;

}

.h .h-action {

    position: absolute;

    bottom: 0;

    right: 0;

    z-index: 1;

}

.h body[role="2"] .h-follow {

    display: none;

}

.h .h-v-host,.h body[role="2"] .h-unfollow {

    display: inline-block;

}

.h .h-v-host {

    background: #fff;

    border-radius: 4px;

    color: #222;

    cursor: pointer;

    line-height: 20px;

    margin-left: 22px;

    width: 56px;

    transition: background .2s ease;

}

.h .h-v-host:hover {

    color: #00a1d6;

}

.h #h-sign {

    background: transparent;

    border-radius: 4px;

    border: none;

    box-shadow: none;

    color: hsla(0,0%,100%,.8);

    font-size: 12px;

    font-family: Microsoft Yahei;

    line-height: 26px;

    height: 26px;

    margin-left: -5px;

    padding: 0 5px;

    position: relative;

    top: -1px;

    width: 730px;

}

.h #h-sign:hover {

    background: hsla(0,0%,100%,.2);

    box-shadow: 0 0 0 1px hsla(0,0%,100%,.5);

}

.h #h-sign:focus {

    background: #fff;

    box-shadow: inset 0 2px 4px rgba(35,54,86,.3);

    color: #6d757a;

}

.h #h-sign::-webkit-input-placeholder {

    color: #d6dee4;

}

.h #h-sign:-moz-placeholder,.h #h-sign::-moz-placeholder {

    color: #d6dee4;

}

.h #h-sign:-ms-input-placeholder {

    color: #d6dee4;

}

.h .space-theme-trigger {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-trigger-new.png);

    background-position: 0 0;

    border-radius: 0 4px 0 0;

    cursor: pointer;

    width: 58px;

    height: 49px;

    transition: opacity .2s ease;

    position: absolute;

    top: 0;

    right: 0;

}

.h .space-theme-trigger .btn {

    color: #fff;

}

.h .h:hover .space-theme-trigger {

    opacity: 1;

}

.h .h-add-to-black {

    float: left;

    height: 30px;

}

.h .h-add-to-black .be-dropdown-trigger {

    width: 30px;

    height: 30px;

}

.h .h-add-to-black .icon-ic_more {

    color: #fff;

    font-size: 30px;

    line-height: 30px;

}

.h .modal-wrapper .modal-body {

    padding: 30px 40px!important;

}

.h .space-report-popup .modal-wrapper {

    width: 548px;

}

.h .space-report-popup .modal-wrapper .modal-header .icon-ic_close {

    right: 28px;

}

.h .space-report-popup .modal-wrapper .modal-header .modal-title {

    font-weight: 500;

    font-size: 18px;

}

.h .space-report-popup .modal-wrapper .modal-body {

    border-bottom: 1px solid #e3e5e7;

    padding-top: 20px!important;

    padding-bottom: 20px!important;

    padding-left: 24px!important;

}

.h .space-report-popup .modal-wrapper .modal-footer {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: end;

    justify-content: flex-end;

    padding: 12px 0;

}

.h .space-report-popup .modal-wrapper .modal-footer .btn {

    margin-right: 8px;

}

.h .space-report-popup .modal-wrapper .modal-footer .btn.primary {

    -ms-flex-order: 1;

    order: 1;

    margin-right: 24px;

}

.h .report-popup-tip {

    line-height: 18px;

    font-size: 16px;

    color: #18191c;

    text-align: left;

}

.h .report-popup-list {

    margin-top: 18px;

    font-size: 0;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

}

.h .report-popup-item {

    float: left;

    width: 90px;

    line-height: 20px;

    margin-bottom: 15px;

    cursor: pointer;

    text-align: left;

    white-space: nowrap;

}

.h .report-popup-item.checked .report-popup-item-checkbox {

    background: #00a1d6;

    border-color: #00a1d6;

}

.h .report-popup-item.checked .report-popup-item-checkbox:before {

    content: "";

    display: block;

    position: absolute;

    top: 6px;

    left: 3px;

    width: 0;

    height: 5px;

    border-left: 2px solid #fff;

    transform: rotate(-45deg);

}

.h .report-popup-item.checked .report-popup-item-checkbox:after {

    content: "";

    display: block;

    position: absolute;

    top: 2px;

    left: 9px;

    width: 0;

    height: 11px;

    border-left: 2px solid #fff;

    transform: rotate(45deg);

}

.h .report-popup-item-checkbox {

    position: relative;

    display: inline-block;

    width: 14px;

    height: 14px;

    vertical-align: middle;

    border: 1px solid #bec3cc;

    border-radius: 2px;

}

.h .report-popup-item-text {

    display: inline-block;

    margin-left: 10px;

    font-size: 14px;

    color: #222;

    vertical-align: middle;

}

.h .space-fans-medal {

    display: inline-block;

    vertical-align: middle;

    margin-left: 5px;

}

.h .space-fans-medal .normal-medal {

    height: 16px;

    display: -ms-flexbox;

    display: flex;

    cursor: pointer;

}

.h .space-fans-medal .normal-medal .normal-left {

    width: 16px;

    height: 100%;

    background: #e5e9ef;

    border: 1px dashed #99a2aa;

    box-sizing: border-box;

    border-radius: 1px;

    position: relative;

}

.h .space-fans-medal .normal-medal .normal-left i {

    display: block;

    background: #99a2aa;

    border-radius: 1px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

.h .space-fans-medal .normal-medal .normal-left i:first-child {

    width: 8px;

    height: 1px;

}

.h .space-fans-medal .normal-medal .normal-left i:last-child {

    width: 1px;

    height: 8px;

}

.h .space-fans-medal .normal-medal .normal-right {

    width: 48px;

    height: 100%;

    position: relative;

    background: #000;

    opacity: .7;

    border-radius: 1px;

}

.h .space-fans-medal .normal-medal .normal-right p {

    width: 200%;

    height: 200%;

    font-size: 20px;

    transform: scale(.5);

    transform-origin: top left;

    line-height: 32px;

    color: #fff;

    position: absolute;

    top: 0;

    left: 0;

    text-align: center;

}

.h .space-fans-medal .fans-medal {

    display: -ms-flexbox;

    display: flex;

    cursor: pointer;

}

.van-dialog.fans-medal-dialog {

    border-radius: 10px;

}

.van-dialog.fans-medal-dialog i {

    position: absolute;

    text-decoration: none;

    top: 13px;

    right: 12px;

    width: 20px;

    height: 20px;

    line-height: 20px;

    cursor: pointer;

    font-size: 16px;

    text-align: center;

}

.van-dialog.fans-medal-dialog .van-dialog__header .van-dialog__title {

    color: #00a1d6;

}

.van-dialog.fans-medal-dialog .van-dialog__body {

    padding: 0;

}

.space-user-avatar {

    width: 60px;

    min-width: 60px;

}

.space-user-avatar .avatar-wrap {

    position: relative;

    width: 100%;

    height: 60px;

}

.space-user-avatar .avatar-wrap.live-ani .a-cycle {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    width: 60px;

    height: 60px;

    border: 1px solid #f69;

    border-radius: 50%;

    z-index: 1;

    opacity: 0;

    animation: scaleUpCircle 1.5s linear;

    animation-iteration-count: infinite;

}

@keyframes scaleUpCircle {

    0% {

        transform: translate(-50%,-50%) scale(1);

        opacity: 1;

    }

    to {

        transform: translate(-50%,-50%) scale(1.5);

        opacity: 0;

    }

}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-1 {

    animation-delay: 0;

}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-2 {

    animation-delay: .5s;

}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-3 {

    animation-delay: 1s;

}

.space-user-avatar .live-tab {

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translate(-50%,50%);

    height: 15px;

    white-space: nowrap;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: center;

    justify-content: center;

    background: #f69;

    color: #fff;

    border-radius: 8px;

    border: 1.5px solid #fff;

    padding: 2px 3px;

    font-size: 12px;

    z-index: 2;

}

.space-user-avatar .live-tab .live-gif {

    width: 15px;

    margin-right: 5px;

}

.n {

    margin-bottom: 10px;

}

.n .n-tab-links .iconfont {

    display: inline-block;

    width: 20px;

    font-size: 20px;

    margin-right: 4px;

    vertical-align: middle;

}

.n .n-tab-links .icon-ic_home {

    color: #00c091;

}

.n .n-tab-links .icon-ic_following {

    color: #fb7299;

}

.n .n-tab-links .icon-ic_video {

    color: #02b5da;

}

.n .n-tab-links .icon-ic_article {

    color: #3bd3d3;

}

.n .n-tab-links .icon-ic_playlist {

    color: #9d8ce5;

}

.n .n-tab-links .icon-ic_channel {

    color: #23c9ed;

}

.n .n-tab-links .icon-ic_collect {

    color: #f3a034;

}

.n .n-tab-links .icon-ic_sub {

    color: #ff5d47;

}

.n .n-tab-links .icon-ic_setting {

    color: #23c9ed;

}

.n .n-tab-links .icon-ic_class1 {

    color: #0ba395;

}

.n .new-channel-tip {

    position: absolute;

    top: -23px;

    left: 180px;

    bottom: 15px;

    height: 32px;

    background: #fb7299;

    border-radius: 4px;

    z-index: 11;

    padding: 0 10px 0 16px;

    box-sizing: border-box;

}

.n .new-channel-tip .little_tv {

    position: absolute;

    top: -9px;

    left: -18px;

    display: inline-block;

    width: 37px;

    height: 43px;

    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/little_tv_pop.png);

    background-size: img;

}

.n .new-channel-tip .tip-text {

    display: inline-block;

    color: #fff;

    font-size: 13px;

    line-height: 32px;

    text-align: center;

    font-family: PingFang SC;

    font-weight: 400;

}

.n .new-channel-tip .tip_close {

    color: #fff;

    font-size: 10px;

    line-height: 10px;

    font-weight: 600;

    cursor: pointer;

    display: inline-block;

    vertical-align: baseline;

    width: 10px;

    margin-left: 6px;

}

.n .new-channel-tip:after {

    content: "";

    display: block;

    position: absolute;

    top: 32px;

    left: 75px;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 6px solid #fb7299;

}

.n .n-inner {

    height: 66px;

    background: #fff;

    box-shadow: 0 0 0 1px #eee;

    border-radius: 0 0 4px 4px;

    padding: 0 20px;

    font-size: 0;

}

.n .n-cursor {

    background: #00a1d6;

    width: 0;

    height: 3px;

    transition: all .2s ease;

    position: absolute;

    bottom: -1px;

    left: 0;

}

.n .n-btn {

    display: inline-block;

    font-size: 0;

    line-height: 66px;

    margin-right: 16px;

    position: relative;

}

.n .n-btn.active {

    color: #00a1d6;

}

.n .n-tab-links {

    display: inline-block;

    font-size: 0;

    vertical-align: middle;

}

.n .n-text {

    font-size: 13px;

}

.n .n-num,.n .n-text {

    vertical-align: middle;

}

.n .n-num {

    margin-left: 2px;

    font-size: 12px;

    color: #99a2aa;

    font-family: Arial;

}

.n .n-statistics {

    float: right;

    height: 66px;

}

.n .n-data {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    -ms-flex-pack: center;

    justify-content: center;

    float: left;

    width: 58px;

    height: 66px;

    padding: 10px 0;

    text-align: center;

    box-sizing: border-box;

}

.n .n-data.router-link-active .n-data-k,.n .n-data.router-link-active .n-data-v {

    color: #00a1d6;

}

.n .n-data .n-data-k {

    line-height: 14px;

    font-size: 12px;

    color: #99a2aa;

}

.n .n-data .n-data-v {

    line-height: 16px;

    margin-top: 5px;

    color: #222;

    font-size: 12px;

}

.n .n-fs:hover p,.n .n-gz:hover p {

    color: #00a1d6!important;

}

@media (min-width:1420px) {

    .n .n-btn {

        margin-right: 31px;

    }

    .n .new-channel-tip {

        left: 230px;

    }

}

.n-fix {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 111;

    transform: translateY(-70px);

    transition: transform .3s ease;

}

.n-fix .n-inner {

    padding-left: 20px;

    border-radius: 0;

}

.n-fix.fixed {

    transform: translateY(0);

}

.n-fix .n-avatar {

    display: inline-block;

    width: 24px;

    height: 24px;

    margin-right: 5px;

    vertical-align: middle;

    border-radius: 50%;

    overflow: hidden;

}

.n-fix .n-avatar img {

    display: block;

    width: 24px;

}

.n-fix .n-text {

    max-width: 90px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

@media (min-width:1420px) {

    .n-fix .n-btn {

        margin-right: 31px;

    }

}

.to-top {

    position: fixed;

    display: none;

    bottom: 100px;

    right: 20px;

    transform: translateY(0);

    width: 62px;

    height: 85px;

    margin-left: 602px;

    cursor: pointer;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/space-to-top.png);

    background-position: -40px -44px;

}

.to-top.transition {

    transition: transform .3s ease-in;

}

.to-top.fly {

    transform: translateY(-1000px);

}

@media (min-width:1420px) {

    .to-top {

        margin-left: 712px;

    }

}

.fav-share {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: rgba(0,0,0,.65);

    z-index: 2001;

}

.fav-share .share-iframe {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    box-sizing: border-box;

    margin-bottom: 50px;

}

#page-404[data-v-12b2bced] {

    width: 980px;

    min-height: 1200px;

    margin: 30px auto;

    background: #fff;

    border-radius: 10px;

}

#page-404 .p404[data-v-12b2bced] {

    margin: 0 auto;

    width: 200px;

    padding-top: 30px;

    text-align: center;

}

#page-404 .p404 .error[data-v-12b2bced] {

    margin: 0 auto;

    color: #666;

}

#page-404 .p404 .code[data-v-12b2bced] {

    width: 100px;

    margin-top: 30px;

}

#page-404 .p404 .message[data-v-12b2bced] {

    width: 150px;

}

#page-404 .back-btn[data-v-12b2bced] {

    display: block;

    line-height: 40px;

    text-align: center;

    background: #00a1d6;

    color: #fff;

    border-radius: 4px;

    font-size: 16px;

    cursor: pointer;

    padding: 0 20px;

    width: 80px;

    margin: 20px auto 0;

}

.fade-enter-active,.fade-leave-active {

    transition: opacity .3s;

}

.fade-enter,.fade-leave-to {

    opacity: 0;

}

.zoom-enter-active,.zoom-leave-active {

    transition: transform .3s,opacity .3s;

}

.zoom-enter,.zoom-leave-to {

    transform: scaleY(0);

    opacity: 0;

}

.flip-list-move {

    transition: transform 1s;

}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {

    margin: 0;

    padding: 0;

    border: 0;

    vertical-align: baseline;

    word-break: break-word;

}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

    display: block;

}

em,i {

    font-style: normal;

}

ol,ul {

    list-style: none;

}

b {

    font-weight: 700;

}

blockquote,q {

    quotes: none;

}

blockquote:after,blockquote:before,q:after,q:before {

    content: "";

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

html {

    background: #f4f5f7;

}

body,html {

    height: 100%;

}

body {

    color: #222;

    font-size: 12px;

    line-height: 1.7em;

    margin: 0;

    overflow-y: scroll;

}

body,input,textarea {

    font-family: Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;

}

input,textarea {

    outline: none;

}

a {

    color: inherit;

    text-decoration: none;

    transition: color .2s ease,background-color .2s ease;

}

a[href="javascript: 0"] {

    cursor: default;

}

a:hover {

    color: #00a1d6;

}

.flex-c-s {

    -ms-flex-pack: justify;

    justify-content: space-between;

}

.flex-c-l,.flex-c-s {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

}

.flex-c-l {

    -ms-flex-pack: start;

    justify-content: flex-start;

}

.wrapper {

    width: 1101px;

    margin: 0 auto;

    position: relative;

}

#browser-version-tip {

    position: absolute;

    top: 42px;

    left: 0;

    z-index: 100;

    width: 100%;

    height: 40px;

    line-height: 40px;

    background-color: #e40c0c;

    text-align: center;

    font-size: 14px;

    color: #fff;

}

#browser-version-tip a {

    margin: 0 2px;

    text-decoration: underline;

    color: #07f;

}

#browser-version-tip #close-browser-tip {

    position: absolute;

    right: 0;

    top: 10px;

    margin-left: 15px;

    width: 20px;

    height: 20px;

    background-position: -1368px -278px;

    vertical-align: middle;

}

#browser-version-tip #close-browser-tip,.icon {

    display: inline-block;

    background-image: url(./icons.png);

}

.s-body {

    padding-bottom: 30px;

}

.s-body.loading {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);

    background-position: 50%;

    background-repeat: no-repeat;

    height: 200px;

}

.z_top .z_header {

    width: 1100px;

}

.clearfix:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

* html .clearfix {

    height: 1%;

}

.space_input {

    line-height: 28px;

    height: 28px;

    padding: 0 10px;

    transition: all .3s ease;

    vertical-align: top;

    border: 1px solid #ccd0d7;

    border-radius: 0;

}

.space_input:focus {

    border-color: #00a1d6;

}

input[type=number] {

    -moz-appearance: textfield;

}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

::-webkit-input-placeholder {

    color: #99a2aa;

}

::-moz-placeholder {

    color: #99a2aa;

}

:-ms-input-placeholder {

    color: #99a2aa;

}

:-moz-placeholder {

    color: #99a2aa;

}

input::-ms-clear {

    display: none;

}

.clearfix {

    display: block;

}

.col-full {

    background: #fff;

    box-shadow: 0 0 0 1px #eee;

    border-radius: 4px;

    padding: 20px;

}

.col-full .section.empty,.col-full .section.private {

    width: 100%!important;

}

.col-full .section.empty:after,.col-full .section.private:after {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);

    background-position: 50%;

    background-repeat: no-repeat;

    border-radius: 4px;

    color: #6d757a;

    content: "\6570\636E\4E3A\7A7A";

    display: block;

    font-size: 14px;

    height: 450px;

    overflow: hidden;

    line-height: 640px;

    text-align: center;

}

.section {

    border-bottom: 1px solid #eee;

    margin-bottom: 17px;

    position: relative;

}

.section.empty .content,.section.empty .count,.section.empty .more,.section.empty .style,.section.loading .quantity,.section.loading .style {

    display: none;

}

.section.loading .content {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);

    background-position: 50%;

    background-repeat: no-repeat;

    text-indent: -9999px;

    height: 270px;

}

.section.loading .content * {

    display: none;

}

.section.empty .content,.section.loading .content,.section.private .content {

    width: 100%;

}

.section .count {

    background: #f6fafb;

    border: 1px solid #ddd;

    border-radius: 3px;

    color: #777;

    display: inline-block;

    font-size: 12px;

    line-height: 18px;

    height: 18px;

    margin-left: 11px;

    padding: 0 5px;

    position: relative;

    vertical-align: middle;

}

.section .count:before {

    background-position: -215px -340px;

    content: "";

    display: block;

    left: -7px;

    top: -3px;

    height: 22px;

    width: 10px;

}

.section .count:before,.section .more {

    background-image: url(./icons.png);

    position: absolute;

}

.section .more {

    background-position: -310px -405px;

    border: 1px solid #b8c0cc;

    border-radius: 4px;

    color: #6d757a;

    font-size: 12px;

    line-height: 22px;

    transition: border .2s ease;

    padding: 0 19px 0 10px;

    top: 6px;

    right: 0;

}

.section .more:hover {

    background-position: -438px -405px;

    border-color: #00a1d6;

    color: #00a1d6;

}

.section .operation {

    display: inline-block;

    background-image: url(./icons.png);

    border: 1px solid #b8c0cc;

    border-radius: 4px;

    color: #6d757a;

    font-size: 12px;

    line-height: 22px;

    transition: border .2s ease;

    padding: 0 19px 0 10px;

}

.section .operation:hover {

    border-color: #00a1d6;

    color: #00a1d6;

}

.section:last-child {

    border-bottom: none;

    margin-bottom: 0;

}

.section.empty.video:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\89C6\9891\54E6~~";

}

.section.empty.video.host:after {

    display: none;

}

.section.empty.audio:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\53D1\5E03\8FC7\97F3\9891\54E6~~";

}

.section.empty.bangumi:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\8BA2\9605\8FC7\756A\5267~~";

}

.section.empty.subs:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\8FC7\6807\7B7E~~";

}

.section.empty.article:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\4E13\680F\54E6~~";

}

.section.empty.coin:after {

    content: "\7A7A\95F4\4E3B\4EBA\6700\8FD1\4E00\4E2A\6708\6CA1\6709\6295\8FC7\786C\5E01~~";

}

.section.empty.follow:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";

}

.section.empty.fans:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\7C89\4E1D\54E6~~";

}

.section.empty.fans[page=follow]:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";

}

.section.empty.fans[page=knight]:after {

    content: "\76EE\524D\4E3A\6B62\8FD8\6CA1\6709\4EFB\547D\4F60\7684\9A91\58EB\54E6~~";

}

.section.empty.qz:after {

    content: "\7A7A\95F4\4E3B\4EBA\6CA1\6709\52A0\5165\4EFB\4F55\5708\5B50~~";

}

.section.empty.fav:after {

    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6536\85CF\89C6\9891~~";

}

.section.empty.album:after {

    content: "\8FD8\6CA1\6709\4E0A\4F20\76F8\7C3F\54E6~";

}

.section-title {

    color: #000;

    font-size: 20px;

    font-weight: 400;

    line-height: 33px;

    padding: 0 0 15px;

    position: relative;

}

.section-title .t {

    display: inline-block;

    vertical-align: middle;

}

.section-title .icon {

    width: 33px;

    height: 33px;

    vertical-align: middle;

    margin-right: 10px;

}

.sec-empty-hint {

    color: #99a2aa;

    font-size: 12px;

    position: absolute;

    top: 0;

    left: 300px;

}

.sec-empty-hint a {

    color: #00a1d6;

    margin-left: 10px;

}

.sec-empty-hint a:hover {

    color: #f25d8e;

}

.mini-item {

    display: block;

    float: left;

    margin-bottom: 25px;

    width: 25%;

}

.mini-item .img {

    display: block;

    float: left;

    width: 40px;

    height: 40px;

}

.mini-item .img img {

    border-radius: 4px;

    box-shadow: 0 0 0 1px #e5e9ef;

    display: block;

    width: 40px;

    height: 40px;

}

.mini-item .detail {

    font-size: 14px;

    margin-left: 50px;

    max-width: 70%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.small-item {

    display: block;

    float: left;

    width: 160px;

    position: relative;

    margin: 0 0 3px;

    padding: 10px;

}

.small-item.disabled .title {

    color: #222;

}

.small-item.disabled .img img {

    -webkit-filter: blur(2px);

}

.small-item.disabled .disabled-img {

    display: block;

}

.small-item.disabled .img:hover .i-watchlater {

    display: none;

}

.small-item.new .new-icon {

    position: absolute;

    top: 4px;

    right: 4px;

    display: inline-block;

    padding: 0 4px;

    font-size: 10px;

    color: #fff;

    text-align: center;

    line-height: 14px;

    border-radius: 2px;

    margin-left: 4px;

    background-color: #42a0c4;

}

.small-item.new .isPay {

    right: 48px;

}

.small-item.watched .title {

    color: #999;

}

.small-item .img {

    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;

    background-size: img;

    border-radius: 4px;

    display: block;

    width: 160px;

    height: 100px;

    overflow: hidden;

    position: relative;

}

.small-item .img:hover .i-watchlater {

    display: block;

}

.small-item .img:hover .length {

    display: none;

}

.small-item img {

    border-radius: 4px;

    display: block;

    width: 160px;

    height: 100px;

}

.small-item .title {

    display: block;

    line-height: 20px;

    height: 38px;

    margin-top: 6px;

    overflow: hidden;

}

.small-item .length {

    background: #111;

    background: rgba(0,0,0,.5);

    border-radius: 5px 0 0 0;

    color: #fff;

    line-height: 20px;

    transition: top .2s ease;

    padding: 0 6px;

    position: absolute;

    right: 0;

    bottom: 0;

}

.small-item .meta {

    color: #999;

    white-space: nowrap;

    font-size: 0;

    margin-top: 6px;

    height: 14px;

    line-height: 14px;

}

.small-item .meta .iconfont {

    font-size: 14px;

}

.small-item .meta.pubdate {

    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;

}

.small-item .meta>span {

    display: inline-block;

    white-space: nowrap;

    height: 14px;

    line-height: 14px;

    font-size: 12px;

    overflow: hidden;

}

.small-item .meta>span:first-child {

    width: 72px;

}

.small-item .meta>span .icon {

    width: 16px;

    height: 14px;

    vertical-align: sub;

}

.small-item .play .icon {

    background-position: -280px -25px;

}

.small-item .comments .icon {

    background-position: -280px -154px;

}

.small-item .time .icon {

    background-position: -280px -474px;

}

.small-item .view .icon {

    background-position: -1112px -858px;

}

.small-item .comment .icon {

    background-position: -277px -283px;

}

.small-item .pin,.small-item .unpin {

    cursor: pointer;

    float: right;

    display: none;

}

.small-item .pin:hover,.small-item .unpin:hover {

    text-decoration: underline;

}

.small-item .pin {

    color: #00a1d6;

}

.small-item .unpin {

    color: #e40c0c;

}

.small-item:hover .pin {

    display: block;

}

.small-item.pinned:hover .pin {

    display: none;

}

.small-item.pinned:hover .unpin {

    display: block;

}

.large-item {

    display: block;

    float: left;

    width: 340px;

    margin: 0 20px 30px 0;

}

.large-item .img {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);

    background-position: 50%;

    background-size: img;

    display: block;

    float: left;

    width: 110px;

}

.large-item .img img {

    border-radius: 4px;

    box-shadow: 0 0 0 1px #e5e9ef;

    display: block;

    width: 110px;

    height: 144px;

}

.large-item .detail {

    margin-left: 130px;

    padding-right: 20px;

    max-height: 140px;

    overflow: hidden;

}

.large-item .title {

    display: block;

    font-size: 18px;

    max-height: 48px;

    line-height: 24px;

    margin: -3px 0 10px;

    color: #222;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

}

.large-item .title:hover {

    color: #00a1d6;

}

.large-item .end {

    background-position: -212px -22px;

    width: 20px;

    height: 20px;

    vertical-align: top;

    position: relative;

    top: 2px;

}

.large-item .desc {

    max-height: 60px;

    overflow: hidden;

}

.large-item .faved {

    background: #83b7db;

    border-radius: 4px;

    color: #fff;

    line-height: 20px;

    padding: 0 8px;

    margin-top: 4px;

}

.list-item {

    border-bottom: 1px solid #eee;

    display: block;

    padding: 20px 0;

    position: relative;

    line-height: 1;

}

.list-item:last-child {

    border-bottom: none;

}

.list-item.disabled .title {

    color: #ccd0d7;

}

.list-item.disabled .img img {

    -webkit-filter: blur(2px);

}

.list-item.disabled .disabled-img {

    display: block;

}

.list-item.disabled .img:hover .length {

    top: 100px;

}

.list-item.disabled .img:hover .i-watchlater {

    display: none;

}

.list-item.new .new-icon {

    position: absolute;

    top: 4px;

    right: 4px;

    display: inline-block;

    padding: 0 4px;

    font-size: 10px;

    color: #fff;

    text-align: center;

    line-height: 14px;

    border-radius: 2px;

    margin-left: 4px;

    background-color: #42a0c4;

}

.list-item.new .isPay {

    right: 48px;

}

.list-item.watched .title {

    color: #999;

}

.list-item:hover .title-row .pin {

    display: inline-block;

}

.list-item.pinned:hover .title-row .pin {

    display: none;

}

.list-item.pinned:hover .title-row .unpin {

    display: inline-block;

}

.list-item .img {

    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;

    background-size: img;

    border-radius: 4px;

    display: block;

    float: left;

    overflow: hidden;

    position: relative;

}

.list-item .img img {

    box-shadow: 0 0 0 1px #edf2f9;

    border-radius: 4px;

    display: block;

}

.list-item .img:hover .i-watchlater {

    display: block;

}

.list-item .c {

    margin-left: 180px;

}

.list-item .title-row .pin,.list-item .title-row .unpin {

    cursor: pointer;

    display: none;

    margin-left: 15px;

}

.list-item .title-row .pin {

    color: #00a1d6;

}

.list-item .title-row .unpin {

    color: #e40c0c;

}

.list-item .title {

    font-size: 18px;

    height: 20px;

    margin-bottom: 10px;

    display: inline-block;

    max-width: 680px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.list-item .desc {

    color: #777;

    line-height: 20px;

    overflow: hidden;

}

.list-item .meta {

    color: #aaa;

}

.list-item .meta>span {

    display: inline-block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.list-item .meta .icon {

    width: 12px;

    height: 13px;

    margin-right: 5px;

    position: relative;

    top: 2px;

    vertical-align: baseline;

}

.list-item .play .icon {

    background-position: -280px -25px;

}

.list-item .comments .icon {

    background-position: -280px -154px;

}

.list-item .up .icon {

    background-position: -280px -410px;

}

.list-item .time .icon {

    background-position: -280px -474px;

}

.bb-comment .list-item {

    border: 0;

    padding: 0;

    line-height: normal;

}

.img.disabled:hover .meta-mask {

    opacity: 0;

}

.img.disabled:hover .length {

    opacity: 1;

}

.img.disabled .length,.img.disabled .new-icon {

    display: none;

}

.img.disabled .disabled-img p {

    transition: margin .2s linear;

}

.img.disabled .disabled-img.animate p {

    margin-top: 10px;

}

.tabs {

    margin-bottom: 24px;

}

.tabs a {

    font-size: 16px;

    line-height: 24px;

}

.tabs a:after {

    color: #ddd;

    content: "|";

    margin: 0 15px;

}

.tabs a:last-child:after {

    display: none;

}

.tabs a.active {

    color: #00a1d6;

    font-size: 20px;

}

.tabs a.disabled,.tabs a.last-item:after {

    display: none;

}

.sub-tabs {

    margin-bottom: 20px;

    position: relative;

}

.sub-tabs span {

    font-family: MicrosoftYaHei;

    font-size: 20px;

    color: #222;

    line-height: 26px;

    margin-right: 20px;

}

.sub-tabs a {

    display: inline-block;

    font-size: 12px;

    line-height: 20px;

    vertical-align: top;

    margin-right: 24px;

    position: relative;

}

.sub-tabs a.active {

    color: #00a1d6;

    border-bottom: 1px solid #00a1d6;

}

.sub-tabs a.active:before {

    content: "";

    display: block;

    position: absolute;

    left: 50%;

    margin-left: -3px;

    bottom: 0;

    width: 0;

    height: 0;

    border-bottom: 3px solid #00a1d6;

    border-top: 0;

    border-left: 3px dashed transparent;

    border-right: 3px dashed transparent;

}

.sub-tabs a.disabled {

    display: none;

}

.sub-tabs .filter-content {

    font-size: 14px;

    color: #212121;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    position: absolute;

    top: 0;

    right: 0;

}

.sub-tabs .filter-content .cur-filter {

    font-size: 14px;

}

.sub-tabs .filter-content .cur-filter:hover {

    color: #00a1d6;

}

.sub-tabs .filter-content .cur-filter i {

    margin-left: 4px;

}

.private-hint {

    display: inline-block;

    color: #6d757a;

    cursor: default;

    font-size: 12px;

    vertical-align: middle;

}

.private-hint .icon {

    background-position: -203px -724px;

    margin: 0 0 0 15px;

}

.tag-list {

    padding: 10px 0;

}

.tag-list a {

    color: #6a7277;

    cursor: default;

    display: inline-block;

    line-height: 20px;

    margin: 0 10px 0 0;

    white-space: nowrap;

    padding: 0 15px 0 0;

}

.tag-list a:hover {

    color: inherit;

}

.tag-list .tag-icon {

    background-position: -280px -537px;

    width: 14px;

    height: 18px;

    vertical-align: middle;

    margin-right: 5px;

}

.not-allow {

    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/2233.png) 50% no-repeat;

    width: 340px;

    height: 280px;

}

.search-keyword-highlight {

    color: #f25d8e;

}

.r-arrow {

    background-position: -349px -410px;

    width: 6px;

    height: 11px;

}

.d-arrow,.r-arrow {

    background-image: url(./icons.png);

    display: inline-block;

    vertical-align: middle;

}

.d-arrow {

    background-position: -1307px -221px;

    width: 11px;

    height: 8px;

}

.d-arrow-dark {

    background-position: -1371px -221px;

}

#feedback {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 10;

}

#feedback:hover #fb-text {

    right: 18px;

    opacity: 1;

}

#feedback #fb-icon {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAADtElEQVR4AeyatZI1RwyF90HM8UJmxsihMTT7Lcycm52ZmdnLzMzMTJeZ5P4MPy+MpudS7ak6F2fUOtUtjRoqNnf9Nnm14WOGbxnWGs4aHhomDJN85jf+4xqu5Z4Km7Ag4hrD5w0ndw6C4g9GJRJLSCKZlnQmK9lsTnI5gXzmN/7jGq4V7uHe/2xcW0hB9xh+g0OhSFzS6Yxowb3YwBY2sZ1PQTcZfrR3GJJYIiW2gU1s0wZteS3oje39gETjSfEatEFbtOmFoCrD93yBiGQJhjyBtkybiHrfsNqWoPu39vwEsRQKtI0P+OJW0KNbewGykhQa+IAv+KQV9DAGkinEFAXw5X9RDzkVVEUX63vG657yCzHlRNB7eY0ZRUyRKE4r6A1fMCLFDl8wKvh6kqDbd/aDllKz9ykdX/H5OEGfx+JJKRXgKz4fJeheSo5SAz7j+5UE/RS3VJsd+IIyMbMsbT1j8mdTn/z8V6f8UtcttS0D0tY7xn9cIzaAz/h+qaBrqXTdYn1rTxraB+XHPztOxYa2Qe4Rl/i/Sr/+QkHPUr7rnw0p6eibwEkVuRcbWhjfEfTKhYKmtPOZuAnMutYBHHNFbGBLAyaNzIT/F3Q1XaadmDFscMgGGa7YdDHsbkDQ40yFNRidWsQRqxwanxcN/KEogp5G0NuaMicUjspPf3XaFmRsdmBbWw69jaBaTRE6PrN8pFNHpWR+P42o8ellTdGKoDoELRBUTtHUOeyVIGxrE8MCgoI5Re32a303jXvCX+u6xSFYIkPQAYJEg59ruzwTRGw6BX3CYqZaUG1Lv5Mh52gIUi5pBamHXPfglFeCsK0dcofapEAN5tmQW9vc0ycFbdqmVxs7hqyLofLAtj5tKx+swBcIm2mBveTwc22nHPpDAtw8WNWlD5hZWLMihjnTxta+ALelj7o4BUur267F/NXcJ/uHARtzohsU0wd7gv5o7JWpuVXRtX1ZQpjTTfBOIai5c0RGJhekpWsEpxlOxAfPF2k2v42ZKn1z58Ck2qOzq2KC9+qFgq6jy9wK+q2hRxZXtxRZyvoUXL9IQlairmMeE08kRQf7iyQlv4xVpguN5b8U/P9ifbRsFuv/5/vFvZ2SRMwHTvaHqktgw6umnLYkHz7bNL58Wz9ZyJjRb+sfwRqCsIAHLz7Ah7OjMafkzYYf5+Hw0se0VZrHyzLeHy/THACcutIBQOKAqIN8PuIA4LT3BwD14h43fMewznDO0GeYgnz+eyAxqNwUqFo5BioCAGO/K8G9s3HMAAAAAElFTkSuQmCC);

    display: block;

    width: 52px;

    height: 52px;

}

#feedback #fb-text {

    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/fb-dialog.png) no-repeat;

    width: 230px;

    height: 80px;

    transition: opacity .2s ease;

    opacity: 0;

    padding: 13px 21px 26px 19px;

    position: absolute;

    bottom: 10px;

    right: -9999px;

}

#feedback #fb-text a {

    color: #00a1d6;

    font-weight: 700;

}

#feedback #fb-text a:hover {

    color: #f25d8e;

}

.user-auth-subscript {

    position: absolute;

    display: none;

    z-index: 9;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);

    background-repeat: no-repeat;

}

.user-auth-subscript.avatar-s {

    right: -2px;

    top: 23px;

    width: 18px;

    height: 18px;

}

.user-auth-subscript.avatar-m {

    right: 0;

    top: 44px;

    width: 20px;

    height: 20px;

}

.user-auth-subscript.avatar-b {

    right: -2px;

    top: 42px;

    width: 20px;

    height: 20px;

}

.user-auth-subscript.avatar-x {

    right: 1px;

    bottom: 0;

    width: 18px;

    height: 18px;

}

.user-auth-subscript.personal-auth {

    display: block;

}

.user-auth-subscript.personal-auth.avatar-s {

    background-position: -39px -82px;

}

.user-auth-subscript.personal-auth.avatar-b,.user-auth-subscript.personal-auth.avatar-m {

    background-position: -38px -53px;

}

.user-auth-subscript.personal-auth.avatar-x {

    background-position: -73px -82px;

}

.user-auth-subscript.organization-auth {

    display: block;

}

.user-auth-subscript.organization-auth.avatar-s {

    background-position: -5px -82px;

}

.user-auth-subscript.organization-auth.avatar-b,.user-auth-subscript.organization-auth.avatar-m {

    background-position: -4px -53px;

}

.user-auth-subscript.organization-auth.avatar-x {

    background-position: -5px -82px;

}

.checkbox .checkbox-icon {

    border: 1px solid #ccd0d7;

    border-radius: 4px;

    display: inline-block;

    vertical-align: middle;

    width: 15px;

    height: 16px;

    margin-right: 5px;

    position: relative;

    top: -1px;

}

.checkbox:hover {

    cursor: pointer;

}

.checkbox:hover .checkbox-icon {

    border-color: #00a1d6;

}

.checkbox[checked] .checkbox-icon {

    background: url(./icons.png) -1305px -664px #00a1d6;

    border-color: #00a1d6;

}

#pin-wrapper {

    background: rgba(0,0,0,.5);

    position: fixed;

    z-index: 10001;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

}

#pin-wrapper.input #pin-layer {

    height: 576px;

}

#pin-wrapper.input .pin-layer-reason {

    height: 50px;

}

#pin-wrapper .m-loading {

    line-height: 24px;

    text-align: center;

}

#pin-wrapper .m-loading .icon {

    width: 24px;

    height: 24px;

    margin-right: 8px;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadingS.gif);

    background-repeat: no-repeat;

}

#pin-wrapper .m-loading .icon,#pin-wrapper .m-loading span {

    display: inline-block;

    vertical-align: middle;

}

#pin-wrapper .m-loading.active {

    display: block;

}

#pin-wrapper .m-loading.disabled .icon {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loading-fail.png);

    background-position: 6px;

}

#pin-wrapper #pin-layer {

    background: #fff;

    border-radius: 4px;

    width: 570px;

    height: 540px;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    transition: all .2s ease;

}

#pin-wrapper .pin-layer-header {

    height: 50px;

    line-height: 50px;

    padding: 0 25px;

    font-size: 0;

    border-bottom: 1px solid #e5e9ef;

    box-sizing: border-box;

}

#pin-wrapper .pin-layer-header .pin-layer-header-text {

    display: inline-block;

    font-size: 16px;

    vertical-align: bottom;

}

#pin-wrapper .pin-layer-header .pin-layer-header-hint {

    display: inline-block;

    font-size: 12px;

    margin-left: 20px;

    color: #6d757a;

    vertical-align: bottom;

}

#pin-wrapper .pin-layer-header .pin-layer-header-hint i {

    margin: 0 2px;

    font-weight: 700;

}

#pin-wrapper .pin-layer-header-counter {

    display: inline-block;

    margin-left: 10px;

    font-size: 12px;

    color: #222;

    vertical-align: middle;

}

#pin-wrapper .pin-layer-header-counter .count {

    font-weight: 700;

    color: #6d757a;

}

#pin-wrapper .pin-layer-close {

    position: absolute;

    top: 20px;

    right: 25px;

    background-position: -533px -279px;

    cursor: pointer;

    width: 20px;

    height: 14px;

}

#pin-wrapper .pin-layer-close:hover {

    background-position: -597px -279px;

}

#pin-wrapper .pin-layer-body {

    margin: 10px 25px 22px;

}

#pin-wrapper .pin-layer-tab {

    font-size: 14px;

}

#pin-wrapper .pin-layer-tab span {

    padding: 4px 0;

    margin-right: 18px;

}

#pin-wrapper .pin-layer-order {

    margin-top: 20px;

}

#pin-wrapper .pin-layer-order-tip {

    float: left;

    line-height: 20px;

    font-size: 12px;

    color: #222;

}

#pin-wrapper .pin-layer-order-dropdown {

    float: right;

    font-size: 14px;

}

#pin-wrapper .pin-layer-search {

    margin-top: 10px;

    position: relative;

}

#pin-wrapper .pin-layer-search-empty {

    position: absolute;

    display: none;

    top: 250px;

    width: 100%;

    padding-right: 22px;

    color: #99a2aa;

    text-align: center;

    box-sizing: border-box;

}

#pin-wrapper .pin-layer-search-result {

    font-size: 12px;

    color: #505050;

    margin-top: 4px;

    line-height: 20px;

}

#pin-wrapper .pin-layer-search-keyword {

    display: inline-block;

    max-width: 100px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #f25d8e;

    vertical-align: bottom;

}

#pin-wrapper #pin-layer-search {

    border: 1px solid #d6dce5;

    border-radius: 15px;

    box-shadow: none;

    width: 470px;

    line-height: 32px;

    padding: 0 40px 0 10px;

}

#pin-wrapper #pin-layer-search:focus {

    border-color: #00a1d6;

}

#pin-wrapper #pin-layer-search-btn {

    background-position: -1111px -87px;

    cursor: pointer;

    width: 18px;

    height: 18px;

    position: absolute;

    top: 6px;

    right: 10px;

}

#pin-wrapper #pin-layer-search-btn:hover {

    background-position: -1175px -87px;

}

#pin-wrapper #pin-layer-search-count {

    color: #f25d8e;

    font-weight: 700;

}

#pin-wrapper .pin-layer-video {

    position: relative;

    margin-top: 5px;

    height: 300px;

    width: 544px;

    overflow: hidden;

}

#pin-wrapper .pin-layer-video.empty {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);

    background-position: 147px;

    background-repeat: no-repeat;

}

#pin-wrapper .pin-layer-video.loading {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);

    background-repeat: no-repeat;

    background-position: 50%;

    text-indent: -9999px;

    height: 370px;

}

#pin-wrapper .pin-layer-video.loading .small-item {

    display: none;

}

#pin-wrapper .pin-layer-video.ready-to-search {

    background-image: none;

}

#pin-wrapper .pin-layer-footer {

    text-align: center;

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 30px;

}

#pin-wrapper .pin-layer-footer .btn {

    width: 90px;

    margin: 0 7px;

    line-height: 30px;

}

#pin-wrapper .pin-layer-vlist .small-item {

    float: none;

    width: auto;

    padding: 4px;

    margin-right: 20px;

    box-sizing: border-box;

    border: none;

    border-radius: 4px;

    margin-bottom: 2px;

    overflow: hidden;

    transition: all .2s ease;

}

#pin-wrapper .pin-layer-vlist .small-item:hover {

    cursor: pointer;

    background-color: #e5e9ef;

    box-shadow: none;

}

#pin-wrapper .pin-layer-vlist .small-item.selected {

    box-shadow: none;

    background-color: #00a1d6;

}

#pin-wrapper .pin-layer-vlist .small-item.selected .title {

    color: #fff;

}

#pin-wrapper .pin-layer-vlist .small-item.selected .meta {

    color: #b3e3f3;

}

#pin-wrapper .pin-layer-vlist .small-item.selected .play .icon {

    background-position: -411px -858px;

}

#pin-wrapper .pin-layer-vlist .small-item.selected .time .icon {

    background-position: -347px -858px;

}

#pin-wrapper .pin-layer-vlist .small-item.selected .checkbox {

    display: block;

}

#pin-wrapper .pin-layer-vlist .small-item.selected:hover .checkbox .icon {

    background-position: -1365px -1109px;

}

#pin-wrapper .pin-layer-vlist .small-item.added {

    display: none;

}

#pin-wrapper .pin-layer-vlist .small-item .title {

    height: 16px;

    line-height: 16px;

    margin: 0;

    color: #000;

    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: height .2s ease,margin .2s ease;

}

#pin-wrapper .pin-layer-vlist .small-item .img {

    position: relative;

    float: left;

    width: 80px;

    height: 50px;

    border-radius: 2px;

    overflow: hidden;

}

#pin-wrapper .pin-layer-vlist .small-item .img img {

    width: 100%;

    height: 100%;

}

#pin-wrapper .pin-layer-vlist .small-item .added-icon {

    position: absolute;

    display: none;

    right: 4px;

    top: 4px;

    line-height: 14px;

    padding: 2px 4px;

    font-size: 12px;

    color: #fff;

    border-radius: 4px;

    background-color: rgba(0,0,0,.8);

}

#pin-wrapper .pin-layer-vlist .small-item .detail {

    margin-left: 94px;

}

#pin-wrapper .pin-layer-vlist .small-item .meta {

    margin-top: 8px;

}

#pin-wrapper .pin-layer-vlist .small-item .meta .play {

    width: 65px;

}

#pin-wrapper .pin-layer-vlist .small-item .meta .time {

    width: 92px;

}

#pin-wrapper .pin-layer-vlist .small-item .checkbox {

    position: absolute;

    display: none;

    top: 18px;

    right: 10px;

    width: 22px;

    height: 22px;

    border-radius: 2px;

    background-color: #0087b4;

}

#pin-wrapper .pin-layer-vlist .small-item .checkbox .icon {

    display: block;

    width: 100%;

    height: 100%;

    background-position: -1301px -1109px;

}

#pin-wrapper .pin-layer-video-empty {

    color: #99a2aa;

    margin: 270px 0 0;

    padding-right: 22px;

    text-align: center;

}

#pin-wrapper .pin-layer-video-empty a {

    color: #00a1d6;

}

#pin-wrapper .pin-layer-reason {

    height: 0;

    overflow: hidden;

    transition: height .2s ease;

}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input input {

    background: #edf2f9;

    border: 1px solid #ccd0d7;

    border-radius: 4px;

    box-shadow: inset 0 2px 6px rgba(100,109,85,.22);

    line-height: 34px;

    height: 34px;

    margin: 10px 0;

}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input input:focus {

    border-color: #00a1d6;

}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input .letter-count {

    top: 6px;

}

.breadcrumb {

    line-height: 24px;

    font-size: 0;

    vertical-align: middle;

    position: relative;

}

.breadcrumb .item {

    display: inline-block;

    font-size: 18px;

    color: #6d757a;

    vertical-align: middle;

}

.breadcrumb .item:hover {

    color: #00a1d6;

}

.breadcrumb .item.cur {

    color: #222;

}

.breadcrumb .batch {

    font-size: 14px;

    color: #222;

    letter-spacing: 0;

    float: right;

    cursor: pointer;

}

.breadcrumb .arrow {

    background-position: -339px -405px;

}

.breadcrumb .arrow,.breadcrumb .l-arrow {

    display: inline-block;

    width: 26px;

    height: 20px;

    background-image: url(./icons.png);

    background-repeat: no-repeat;

    vertical-align: middle;

}

.breadcrumb .l-arrow {

    background-position: -148px -1174px;

}

.page-head {

    position: relative;

}

.page-head .v-filter-line {

    position: absolute;

    top: 0;

    right: 0;

}

.page-head .v-filter-line .item {

    float: left;

    margin-left: 16px;

}

.page-head .v-filter-line .order span {

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    margin-left: 20px;

    line-height: 28px;

    vertical-align: top;

}

.page-head .v-filter-line .order span.active {

    color: #00a1d6;

    cursor: default;

}

.page-head .v-filter-line .order span:hover {

    color: #00a1d6;

}

.page-head .v-filter-line .style .icon {

    cursor: pointer;

    display: block;

    float: left;

    width: 18px;

    height: 18px;

}

.page-head .v-filter-line .style .cube {

    background-position: -342px -151px;

    margin-right: 15px;

}

.page-head .v-filter-line .style .cube.active,.page-head .v-filter-line .style .cube:hover {

    background-position: -469px -151px;

}

.page-head .v-filter-line .style .list {

    background-position: -341px -217px;

}

.page-head .v-filter-line .style .list.active,.page-head .v-filter-line .style .list:hover {

    background-position: -468px -217px;

}

.g-search {

    position: relative;

    display: inline-block;

    width: 134px;

    height: 30px;

    vertical-align: middle;

}

.g-search:focus {

    border-color: #00a1d6;

}

.g-search input {

    position: absolute;

    height: 30px;

    width: 134px;

    padding: 0 29px 0 10px;

    line-height: 30px;

    color: #222;

    font-size: 12px;

    border: 1px solid #ccd0d7;

    border-radius: 15px;

    box-shadow: none;

    box-sizing: border-box;

}

.g-search .search-btn {

    position: absolute;

    right: 8px;

    top: 0;

    width: 18px;

    height: 30px;

    background-position: -1111px -81px;

    cursor: pointer;

}

.g-search .search-btn:hover {

    background-position: -1175px -81px;

}

.list-create {

    cursor: pointer;

    position: relative;

    background: #fff;

    border: 2px dashed #b8c0cc;

    border-radius: 4px;

    transition: border .2s ease;

    box-sizing: border-box;

}

.list-create .create-imgs-meta {

    position: absolute;

    top: 50%;

    width: 100%;

    transform: translateY(-50%);

}

.list-create .icon {

    display: block;

    width: 40px;

    height: 40px;

    margin: 0 auto;

    transition: background .2s ease;

    background-position: -716px -332px;

}

.list-create .text {

    line-height: 16px;

    margin-top: 8px;

    text-align: center;

    color: #666;

}

.list-create:hover {

    border-color: #00a1d6;

}

.list-create:hover .icon {

    background-position: -716px -396px;

}

.list-create:hover .text {

    color: #00a1d6;

}

.s-space .ps-container>.ps-scrollbar-y-rail {

    right: 0!important;

    width: 6px!important;

    background-color: #edf2f9!important;

    border-radius: 3px;

}

.s-space .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {

    right: 0!important;

    width: 6px!important;

    background-color: #6d757a!important;

}

.i-watchlater {

    display: none;

    position: absolute;

    right: 6px;

    bottom: 4px;

    width: 22px;

    height: 22px;

    z-index: 5;

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABT0lEQVQ4je3VMYrCQBTG8b/DWASLNKJgJ1hY2sloZeF2gkeYW+wZvIVXsLBJY5UdtLJLk17EIghCwChukWRxFzSaaLdfMwm8/EgemTclgOl02gEmwAAoky8RsAA+tdbrUoJ+AVZO8G9CoCeJ39Sq1+sopbBtO5e23+8xxrDdbi1gIog/vxAKYNs2Sqn0diBIenoP9X2fIAgyccv66WZZZBXvdjtc18UYkwlfJxM+n8+/1pfBefMPPw4LEZcEQcBqteJ0Or0GrlartFotLpcLnucxm83YbDbFYSEE/X6f4XBIpVLhcDjgOA6u63I8HvPDaRqNBuPxmHa7DcS7cT6f36yXj8IAUkq63S7NZpPlcomUtx9/Ck5Tq9UYjUZ3a976u0UQz9OiCcMwvYwk8XHyYYxBKXU9+p5Grybg4m1Hk9Bar4Ee4JC0JWeixOhprdffE/1yRW/TLMYAAAAASUVORK5CYII=) no-repeat;

}

.i-watchlater.has-select {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABiklEQVQ4jbXVzyvDcRzH8efns1+JIRtbOSiKrMRBrZZC5IzcHJYTJyc1J464ubuY5MQ/oLSTNSHfIg5KyEmbzY/5sa++c/hOCtv47rvX8f2pR+/3u0+fjwAgfNoFLAH9gA1jUYEIECLoU0QOjQIVBsHveQECEr1Ts1By1pJEH9/s9EuM77RQbLIMKACG4QaHhYNBL7EBj3lwtU2yFXDT6rRil8Ic2C4F634XnbU24m8aY9F46bAUsNJdR1+9g6f3LKPROBfp99LhxY5aRhorULUs43sJlFQmfxO/FWMDHpQhL+3VXzdxps3JVEsVAJOHSSK3rwWbsP5WtAhorrSy09vAxH6CeoeFOV8NALPHKTZvnovMBoLwafZ7sc4uWfe76HE70HKnUsDy+SNzJ/dFUciziruMxvBunNXLNFLo6Mb1M/N/RCHPKgAyWpbpoyQHdxmaKi0snD3wYzQj8GfWrtL/4L5S1rdCLYOrSvTvxOxEJBBC/07MygsQkgR9ChAAtiltLWrOCBD0KR9smmovo1v+1QAAAABJRU5ErkJggg==);

}

.icon {

    vertical-align: middle;

    background-repeat: no-repeat;

}

.icon-add {

    width: 30px;

    height: 30px;

    background-position: -81px -1170px;

}

.icon-cursor {

    width: 10px;

    height: 44px;

    background-position: -219px -1100px;

}

.icon-fav-public {

    width: 20px;

    height: 20px;

    background-position: -86px -1110px;

}

.icon-fav-private {

    width: 20px;

    height: 20px;

    background-position: -150px -1110px;

}

.icon-fav-default {

    width: 20px;

    height: 20px;

    background-position: -22px -1110px;

}

.icon-more {

    width: 30px;

    height: 30px;

    background-position: -209px -1041px;

    cursor: pointer;

}

.icon-arrow {

    width: 16px;

    height: 20px;

    background-position: -1305px -215px;

}

#popup-select-layer {

    position: absolute;

    top: 50px;

    left: 0;

    width: 108px;

    z-index: 899;

    background-color: #fff;

    border: 1px solid #ccd0d7;

    border-radius: 4px;

}

#popup-select-layer:after {

    background-image: url(./icons.png);

    background-position: -1307px -285px;

    content: "";

    display: block;

    width: 11px;

    height: 6px;

    position: absolute;

    top: -6px;

    left: 50%;

    margin-left: -6px;

}

#popup-select-layer .popup-select-choice {

    cursor: pointer;

    line-height: 30px;

    padding: 0 9px;

}

#popup-select-layer .popup-select-choice:hover {

    background-color: #e5e9ef;

}

#popup-select-layer .popup-select-choice:first-child {

    border-radius: 4px 4px 0 0;

}

#popup-select-layer .popup-select-choice:last-child {

    border-radius: 0 0 4px 4px;

}

.article-item {

    margin-bottom: 20px;

}

.article-item:last-child .article-content {

    border-bottom: none;

}

.article-img {

    height: 100%;

    background-repeat: no-repeat;

    background-position: 50%;

    background-size: img;

}

.s-content {

    width: 923px;

}

.article-content,.s-content {

    float: left;

    border-bottom: 1px solid #f4f5f7;

    padding-bottom: 23px;

}

.article-content {

    width: 563px;

}

.article-noimg {

    width: 100%;

}

.article-title {

    font-weight: 400;

    max-height: 26px;

    font-size: 18px;

    color: #222;

    line-height: 26px;

    overflow: hidden;

    display: block;

}

.article-title a {

    word-break: break-all;

}

.article-con {

    font-size: 12px;

    color: #6d757a;

    line-height: 20px;

    margin-top: 5px;

}

.article-con a {

    height: 20px;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.article-con a,.article-img {

    display: block;

    overflow: hidden;

}

.article-img {

    width: 117px;

    height: 88px;

    float: right;

    border-radius: 4px;

    line-height: 54px;

    text-align: center;

}

.article-bgimg,.article-img img {

    width: 100%;

    height: 100%;

}

.article-bgimg {

    background: #f0f2f4 url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;

    background-size: img;

    border-radius: 4px;

    display: block;

    overflow: hidden;

    font-size: 12px;

}

.meta-col {

    margin-top: 15px;

    color: #999;

    font-size: 0;

}

.meta-col,.meta-col span {

    height: 14px;

    line-height: 14px;

    white-space: nowrap;

}

.meta-col span {

    display: inline-block;

    font-size: 12px;

    overflow: hidden;

    margin-right: 20px;

}

.meta-col span .icon {

    width: 16px;

    height: 14px;

    margin-right: 3px;

    vertical-align: sub;

}

.meta-col .play .icon {

    background-position: -280px -25px;

}

.meta-col .time .icon {

    background-position: -280px -474px;

}

.meta-col .view .icon {

    background-position: -345px -282px;

}

.meta-col .comment .icon {

    background-position: -409px -282px;

}

.meta-col .like .icon {

    background-position: -472px -282px;

}

.create-channel-popup .modal-wrapper .modal-body {

    padding: 30px 20px!important;

}

.create-channel-popup .modal-wrapper .modal-body .be-input input {

    height: 30px;

    line-height: 30px;

    box-shadow: none;

}

.create-channel-popup .modal-wrapper .modal-body .be-textarea {

    margin-top: 20px;

}

.create-channel-popup .modal-wrapper .modal-body .be-textarea textarea {

    padding: 5px;

    height: 66px;

}

.follow-dialog-wrap .errmsg {

    display: none;

}

.follow-dialog-wrap .add-group {

    margin-top: 20px;

}

.bili-header-m .bili-wrapper {

    width: 1100px!important;

}

.icon-playlist {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_line.png);

}

.icon-playlist,.icon-playlist-loc {

    width: 22px;

    height: 22px;

    background-size: 100%;

    margin-right: 8px;

}

.icon-playlist-loc {

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_loc.png);

}

.icon-favlist-info {

    width: 20px;

    height: 20px;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAspJREFUWAntWD2IGlEQds0PSfSwjQSJRKKCNoGA2JhrAilMCiEY0gdiKls7bSy00UasQuQw4KU70OZSiSAikkYRE9SLihoFf+AgGohmJrkDWXaeq5y3G7iB2bdv3sz7vp03zspyin+igeEpqB5UDSqlnAL4Cegx6JSDC5J7C3obVE7yE8jEr8HlOeg9OTE743IDxj0lXPRnBjkOeiQodc2xEqNGgrIW2RO8vm36yuXya4vF8lBMfKVS+Wa1Wj+K8eX7XFYGl3xgsXPsg36xzlL4XVYGt362jWpwk7qjGG1aj1JkcKN6vKpB6qjF2qU4YrHc/vqRPxK73a5JpVIvdTrdLv/pLNvtdtftdn/K5/NTIeZkBsPh8JMdk0M+HGIA1r4QObSRBFUq1S0q6KLtarWaxCIJDgYDwZQLkfP7/YdOpzNWr9e/C62vs/V6vQnlQxKE2iCD+JsFAoFqOp0eGo3GD/F4PPMLhO/Dmnc6HRKLJNhoNMggCmyxWCg8Hk/R4XDEarVag/Lj25vNJolFEqxWq2QQH4A/LxQKU7PZfBCNRo/m8/mMv86fs7BIgqVSaWuC5wS8Xu8Xl8v1frlcLs5tQmOxWCSxSIKtVgsefv3TCwGu2maz2W+O40gcWJ9BDc5XY1bvyUB0Go1G5JOtbkLdRyKRR5lM5g21jvbxeMzEIN8kGDwcDidarfYu3m8iNptNk0gkXphMpgfr4hCD5cPMYL/fZwbzN1YqlYpYLPY4m82+E0MO47vdLhODmUGxvdDn85mgrUxDodAzg8Fwn0+cNWf1QIxjEhTbC4PB4CsWCdYaqwdiHPOI4ah+sDa/iLV1GEyCuVxukkwmP8Obi2wD25LEHoZ7IwZrj6u//KzsiFljHrGYDXbt818QxG/CcpVTzOCJXNkhNySIX9Pxg7XcBDkd40d07HFl0D3QO6A3QaUULLmvoIeg0z8kQfSabrii0gAAAABJRU5ErkJggg==);

    background-size: 100%;

}

.icon-back-follow {

    width: 16px;

    height: 16px;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjx0aXRsZT5nZW5lcmFsX2FkZCB0b19mcmllbmRzPC90aXRsZT4KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CjxnIGlkPSJnZW5lcmFsX2FkZC10b19mcmllbmRzIj4KCTxnIGlkPSLot6/lvoQtNDkiPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjIsMTIuNGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yTDIuMSw4LjRjLTAuMy0wLjMtMC4zLTAuOCwwLTEuMWMwLjMtMC4zLDAuOC0wLjMsMS4xLDBsMy4xLDMuMmw2LjYtNi4zCgkJCUMxMy4yLDQsMTMuNyw0LDE0LDQuM2MwLjMsMC4zLDAuMywwLjgsMCwxLjFsLTcuMiw2LjhDNi42LDEyLjMsNi40LDEyLjQsNi4yLDEyLjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==) no-repeat;

    background-size: 100% 100%;

    display: inline-block;

    margin-right: 4px;

    position: relative;

    top: 3px;

}

.icon-back-follow.grey {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACnSURBVDjLY2CgEujs7GQrKSkxYqAmKCsrky0qKroGxP+Li4vzqW4o1OBwahn6DMlQyl0LCk+ChoJsptBQTO+DBKEKDtfX1/MQaegXgmGKZDBBw4FqXZEM/QLi43UFUEEvIcOhDiDeUCSNM5ENByV4HL76QnJGQDN8LchwUGwjiT0jO3ehGX4N2VBSUw9Gnge5FslAsAUUGYoMkAynnqHIaRY5EgcFAAC8KcMdEfVlQwAAAABJRU5ErkJggg==) no-repeat;

    background-size: contain;

    width: 12px;

    height: 12px;

    top: 8px;

}

.icon-multiple {

    width: 20px;

    height: 20px;

    display: inline-block;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACDklEQVRYCe2Xv0rDUBTGmxCloyA4iCj6AiI+gpOIb+DSQdvioo8iDmlTGnDtJCi46CM4uLm4VXCxewtN+h3bCzf3T7z502a5gfae3NzvnF+/25ymtZo9rAPVOuAsq3wQBKdRFAVxHO+Y1HAcZ+i67hWOF369y5/kjcMwPBgMBuu8Pgsc6eiDkIbPQXEhQCR1O51OOB6Pv0aj0We3211jBUydY+tpVGk8fkGWmOAA9IDxYpF8D/EW4m8xT7vdTv0q+b4fixp2ngtQhKNk+A7dt1otCY4Vyjtm3mIVHIr7zWbzNi9Emi7hYL/f355MJs8k8DzvEsc7L9bBwblrOKjdJj5H1jjhIODOkOCIXtPp9LXX6x2zhFXAUe0EYL1ef8LcL10A0AaDrAqOOBKAjUbjB1t1gvkEJO7WR0D+3a0kwuEvc1vnJebvCUCaQuEPERJw55xoZXBUU9uf0IAPAfaGNZt54NJ6G5dPCsWeKTnIFMxJuEm9LcJ4l2VbsX7IcpmOKo0WkJIuIPcR7iK+QQLjVkI//KqCOlhaSxrddTtvHajKAanNlPUkXFYe6S4u60m4rDwSIJqz0X8IfstVGtUcr1HFKk3icUsUiV1dvG76a1Ekj+SgCFH1uQUsugPWQetgUQeK6lP7oGmf+w+iSB7pJsnykMnAVBrVHFuvG1UaCbCsJ+Gy8ug+jJ23DqzKgRnrdy/UychTEQAAAABJRU5ErkJggg==);

    background-size: img;

}

@media (min-width:1420px) {

    .bili-header-m .bili-wrapper,.wrapper {

        width: 1283px!important;

    }

    .bili-header-m .bili-wrapper .title-row .title,.wrapper .title-row .title {

        max-width: 800px;

    }

    .n-btn {

        margin-right: 43px;

    }

}

.fakeDanmu-item .length {

    z-index: 5;

    transition: background .2s ease;

}

.fakeDanmu-item .new-icon {

    transition: opacity .2s ease;

}

.fakeDanmu-item.preview-danmu .length {

    background: none;

}

.fakeDanmu-item.preview-danmu .new-icon {

    opacity: 0;

}

.fake-danmu-mask {

    z-index: 3;

    background-color: rgba(0,0,0,.2);

}

.fake-danmu,.fake-danmu-mask {

    position: absolute;

    display: none;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.fake-danmu {

    z-index: 4;

}

.fake-danmu-item {

    position: absolute;

    display: inline;

    color: #fff;

    font-size: 12px;

    line-height: 20px;

    font-family: Microsoft Yahei,simhei,榛戜綋;

    white-space: pre;

    pointer-events: none;

    opacity: .95;

    text-shadow: 1px 1px 2px #001;

}

.preview-bg {

    top: 10px;

    z-index: 2;

    height: 100%;

}

.preview-bg,.preview-wrapper {

    position: absolute;

    display: none;

    left: 0;

    width: 100%;

}

.preview-wrapper {

    top: 0;

    z-index: 4;

    padding: 0 5px 5px;

    box-sizing: border-box;

    background-color: #000;

}

.preview-progress {

    width: 100%;

    height: 2px;

    margin-top: 5px;

    background-color: hsla(0,0%,100%,.4);

    border-radius: 1px;

}

.preview-progress-bar {

    width: 0;

    height: 2px;

    border-radius: 1px;

    background-color: #fff;

}

.fade-transition {

    transition: opacity .3s ease;

}

.fade-enter,.fade-leave {

    opacity: 0;

}

.expand-transition {

    transition: height .3s ease;

    height: 30px;

    overflow: hidden;

}

.expand-enter,.expand-leave {

    height: 0;

    opacity: 0;

}

.expand-switch-transition {

    transition: height .3s ease;

    height: 40px;

    overflow: hidden;

}

.expand-switch-enter,.expand-switch-leave {

    height: 0;

}

.bounce-transition {

    display: inline-block;

}

.bounce-enter {

    animation: bounce-in .3s;

}

.bounce-leave {

    animation: bounce-out .3s;

}

.space-loading-tv {

    height: 100px;

    margin-top: 10px;

    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);

    background-repeat: no-repeat;

    background-position: 50%;

}

#space-body {

    min-height: 100%;

    padding-bottom: 30px;

    background-repeat: repeat;

    background-position: top;

}

#space-body .global-modal .modal-wrapper {

    width: 400px;

}

@keyframes bounce-in {

    0% {

        transform: scale(0);

    }

    to {

        transform: scale(1);

    }

}

@keyframes bounce-out {

    0% {

        transform: scale(1);

    }

    to {

        transform: scale(0);

    }

}

@font-face {

    font-family:iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff2) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");

}

.iconfont {

    font-family: iconfont!important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.icon-qipao:before {

    content: "\E63E";

}

.icon-tag:before {

    content: "\E6CE";

}

.icon-a-Slice1:before {

    content: "\E63D";

}

.icon-yincang:before {

    content: "\E63C";

}

.icon-a-Slice2:before {

    content: "\E63B";

}

.icon-wenhao:before {

    content: "\E63A";

}

.icon-xinjian:before {

    content: "\E639";

}

.icon-ic_zhiboyuyue:before {

    content: "\E638";

}

.icon-ic_toupiao:before {

    content: "\E637";

}

.icon-ic_choujiang:before {

    content: "\E636";

}

.icon-ic_at:before {

    content: "\E61A";

}

.icon-ic_yuyue:before {

    content: "\E619";

}

.icon-ic_tupian:before {

    content: "\E617";

}

.icon-ic_huati:before {

    content: "\E615";

}

.icon-ic_dingshi:before {

    content: "\E614";

}

.icon-ic_biaoqing:before {

    content: "\E613";

}

.icon-ic_channel1:before {

    content: "\E611";

}

.icon-ic_array_card:before {

    content: "\E60F";

}

.icon-ic_array_list:before {

    content: "\E610";

}

.icon-into:before {

    content: "\E765";

}

.icon-heji:before {

    content: "\E762";

}

.icon-ic_class1:before {

    content: "\E635";

}

.icon-huaban:before {

    content: "\E718";

}

.icon-dianzan:before {

    content: "\E710";

}

.icon-bofang:before {

    content: "\E711";

}

.icon-bodan:before {

    content: "\E712";

}

.icon-pinglun:before {

    content: "\E713";

}

.icon-shixiao:before {

    content: "\E714";

}

.icon-fenxiang:before {

    content: "\E715";

}

.icon-shoucang:before {

    content: "\E716";

}

.icon-tianjia:before {

    content: "\E717";

}

.icon-xiangxia:before {

    content: "\E719";

}

.icon-xiangshang:before {

    content: "\E71A";

}

.icon-shouting:before {

    content: "\E605";

}

.icon-checkbox_selected:before {

    content: "\E631";

}

.icon-checkbox:before {

    content: "\E632";

}

.icon-radio:before {

    content: "\E633";

}

.icon-radio_selected:before {

    content: "\E634";

}

.icon-ic_close:before {

    content: "\E630";

}

.icon-ic_more:before {

    content: "\E62F";

}

.icon-ic_upload:before {

    content: "\E62E";

}

.icon-ic_following:before {

    content: "\E62D";

}

.icon-ic_collect:before {

    content: "\E624";

}

.icon-ic_channel:before {

    content: "\E625";

}

.icon-ic_home:before {

    content: "\E626";

}

.icon-ic_setting:before {

    content: "\E627";

}

.icon-ic_playlist:before {

    content: "\E628";

}

.icon-ic_interest:before {

    content: "\E629";

}

.icon-ic_sub:before {

    content: "\E62A";

}

.icon-ic_article:before {

    content: "\E62B";

}

.icon-ic_video:before {

    content: "\E62C";

}

.icon-ic_time:before {

    content: "\E623";

}

.icon-ic_moveup:before {

    content: "\E620";

}

.icon-ic_movedown:before {

    content: "\E621";

}

.icon-ic_delete:before {

    content: "\E622";

}

.icon-ic_play:before {

    content: "\E61B";

}

.icon-ic_comment:before {

    content: "\E61C";

}

.icon-ic_up:before {

    content: "\E61D";

}

.icon-ic_danmu:before {

    content: "\E61E";

}

.icon-ic_collection:before {

    content: "\E61F";

}

.be-input {

    position: relative;

    color: #222;

    font-size: 14px;

    border-radius: 4px;

}

.be-input--append .be-input_inner {

    padding: 0 60px 0 5px;

}

.be-input_inner {

    display: block;

    width: 100%;

    height: 30px;

    line-height: 30px;

    padding: 0 50px 0 5px;

    border-radius: 4px;

    border: 1px solid #ccd0d7;

    outline: none;

    box-sizing: border-box;

    transition: all .3s ease;

}

.be-input_inner:focus {

    border-color: #00a1d6;

}

.be-input.is-diabled .be-input_inner {

    background-color: #e6e6e6;

    border-color: #afb6c1;

    color: #3c3c3c;

    cursor: not-allowed;

}

.be-textarea {

    position: relative;

    color: #222;

    font-size: 14px;

    border-radius: 4px;

}

.be-textarea.is-diabled .be-textarea_inner {

    background-color: #e6e6e6;

    border-color: #afb6c1;

    color: #3c3c3c;

    cursor: not-allowed;

}

.be-textarea--append .be-textarea_inner {

    display: table-cell;

}

.be-textarea_inner {

    display: block;

    width: 100%;

    line-height: 20px;

    height: 118px;

    padding: 0 5px;

    border: 1px solid #ccd0d7;

    border-radius: 4px;

    outline: none;

    box-sizing: border-box;

    resize: none;

    transition: all .3s ease;

}

.be-textarea_inner:focus,.be-textarea_inner:hover {

    border-color: #00a1d6;

}

.be-textarea_inner:focus~.be-input-word-counter,.be-textarea_inner:hover~.be-input-word-counter {

    opacity: 1;

}

.be-textarea .be-input-word-counter {

    opacity: 0;

    transition: opacity .2s ease;

}

.be-input-word-counter {

    position: absolute;

    right: 0;

    bottom: 0;

    height: 30px;

    min-width: 40px;

    padding: 0 10px;

    line-height: 30px;

    text-align: center;

    font-size: 12px;

    color: #99a2aa;

    border-radius: 4px;

}

.modal-container {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 20000;

}

.modal-wrapper {

    position: relative;

    top: 50%;

    transform: translateY(-50%);

    width: 300px;

    margin: 0 auto;

    word-break: break-all;

    line-height: 22px;

    z-index: 1011;

    background: #fff;

    box-shadow: 0 2px 4px rgba(0,0,0,.16);

    border-radius: 4px;

    transition: box-shadow .2s linear;

}

.modal-wrapper .modal-header {

    position: relative;

    font: 12px/1.11 Microsoft Yahei,Tahoma,Arial,Helvetica,STHeiti;

}

.modal-wrapper .modal-title {

    display: block;

    font-size: 16px;

    line-height: 48px;

    padding: 0 20px;

    border-bottom: 1px solid #ddd;

}

.modal-wrapper .modal-header-close {

    position: absolute;

    text-decoration: none;

    top: 13px;

    right: 12px;

    width: 20px;

    height: 20px;

    line-height: 20px;

    cursor: pointer;

    font-size: 16px;

    text-align: center;

}

.modal-wrapper .modal-header-close:hover {

    color: #00a1d6;

}

.modal-wrapper .modal-body {

    padding: 30px 60px;

    font-size: 14px;

    text-align: center;

    vertical-align: middle;

    min-width: 9em;

}

.modal-wrapper .modal-footer {

    padding: 0 0 30px;

    text-align: center;

}

.modal-mask {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 1010;

    background-color: rgba(0,0,0,.5);

}

.be-toast {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    z-index: 12000;

    height: 50px;

    line-height: 50px;

    padding: 0 30px;

    color: #fff;

    font-size: 14px;

    border-radius: 4px;

    box-shadow: 0 2px 4px rgba(0,0,0,.14);

    background-color: rgba(0,0,0,.8);

}

#id-card {

    background: #fff;

    box-shadow: 0 0 2px rgba(0,0,0,.3);

    border-radius: 4px;

    position: absolute;

    z-index: 1002;

    width: 375px;

}

#id-card .idc-laoding-text {

    padding: 10px;

    font-size: 12px;

    color: #222;

}

#id-card .idc-theme-img {

    border-radius: 4px 4px 0 0;

    display: block;

    width: 375px;

    height: 120px;

    background-size: img;

    background-position: 50%;

}

#id-card .idc-content .idc-username {

    display: inline-block;

    line-height: 22px;

    vertical-align: middle;

}

#id-card .idc-info {

    padding: 7px 40px 10px 100px;

    position: relative;

}

#id-card .idc-info .idc-avatar-container {

    position: absolute;

    top: -15px;

    left: 20px;

    width: 54px;

    height: 54px;

}

#id-card .idc-avatar {

    border: 2px solid #fff;

    border-radius: 50px;

    display: block;

    float: left;

    width: 50px;

    height: 50px;

    position: absolute;

    top: 0;

    left: 0;

}

#id-card .idc-uname {

    display: inline-block;

    font-size: 14px;

    vertical-align: top;

    max-width: 9em;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

#id-card .idc-uname:hover {

    color: #00a1d6!important;

}

#id-card .idc-gender {

    vertical-align: middle;

}

#id-card .idc-m-level {

    vertical-align: middle;

    margin-top: 1px;

}

#id-card .idc-meta {

    margin-top: 6px;

}

#id-card .idc-meta-item {

    margin-right: 20px;

}

#id-card .idc-tag-list {

    display: none;

    padding-bottom: 0;

}

#id-card .idc-certification {

    color: #ff931e;

    margin: 7px 0 0;

}

#id-card .idc-certification:empty {

    display: none;

}

#id-card .idc-certified-icon {

    background-position: -213px -791px;

    width: 20px;

    height: 20px;

    vertical-align: middle;

    margin-right: 5px;

}

#id-card .idc-auth-description {

    line-height: 20px;

    font-size: 12px;

    margin-top: 6px;

    color: #6d757a;

}

#id-card .idc-auth-description.no-desc {

    color: #99a2aa;

}

#id-card .idc-sign {

    color: #999;

    line-height: 1.7;

    padding: 7px 0 5px;

}

#id-card .idc-sign:empty {

    display: none;

}

#id-card .idc-action {

    text-align: center;

    padding: 0 20px 20px 29px;

}

#id-card .idc-btn {

    display: inline-block;

    cursor: pointer;

    line-height: 24px;

    height: 26px;

    width: 80px;

    margin: 0 10px;

    font-size: 12px;

}

#id-card .idc-btn.blue {

    color: #fff;

    background-color: #00a1d6;

    border: 1px solid #00a1d6;

}

#id-card .idc-btn.blue:hover {

    background-color: #00b5e5;

    border: 1px solid #00b5e5;

    color: #fff;

}

#id-card .idc-btn.unfollow {

    background-color: #edf2f9;

    border-color: #edf2f9;

    color: #999;

}

#id-card .idc-btn .btn-content {

    line-height: 24px;

}

.be-tab,.be-tab-item {

    position: relative;

}

.be-tab-item {

    float: left;

    font-size: 14px;

    margin-right: 20px;

    line-height: 28px;

    vertical-align: top;

    cursor: pointer;

}

.be-tab-item:last-child {

    margin-right: 0;

}

.be-tab-item.is-active {

    color: #00a1d6;

}

.be-tab-input {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    margin: 0;

    background: #ff3c3c;

    opacity: 0;

    cursor: pointer;

}

.be-tab-cursor {

    left: 0;

    border-bottom: 1px solid #00a1d6;

    transform: translateX(0);

    transition: width .2s ease,transform .2s ease;

}

.be-tab-cursor,.be-tab-cursor:after {

    position: absolute;

    bottom: 0;

    height: 0;

    width: 0;

}

.be-tab-cursor:after {

    content: "";

    left: 50%;

    transform: translateX(-50%);

    margin-left: -3px;

    border-bottom: 3px solid #00a1d6;

    border-top: 0;

    border-left: 3px solid transparent;

    border-right: 3px solid transparent;

}

.be-tooltip {

    position: fixed;

    z-index: 120;

    height: 26px;

    line-height: 26px;

    padding: 0 10px;

    color: #fff;

    font-size: 12px;

    border-radius: 4px;

    box-shadow: 0 2px 4px rgba(0,0,0,.14);

    background-color: rgba(0,0,0,.8);

}

.be-scrollbar-wrapper {

    position: relative;

}

.be-switch-container {

    position: relative;

    display: inline-block;

    height: 20px;

    cursor: pointer;

    white-space: nowrap;

}

.be-switch-container.is-checked .be-switch {

    background-color: #00a1d6;

}

.be-switch-container.is-checked .be-switch-cursor {

    left: 17px;

}

.be-switch {

    position: relative;

    display: inline-block;

    width: 30px;

    height: 16px;

    border-radius: 8px;

    background-color: #ccd0d7;

    vertical-align: middle;

    cursor: pointer;

    transition: background-color .2s ease;

}

.be-switch-cursor {

    position: absolute;

    top: 2px;

    left: 2px;

    width: 12px;

    height: 12px;

    border-radius: 12px;

    background: #fff;

    transition: left .2s ease;

}

.be-switch-label {

    display: inline-block;

    line-height: 20px;

    font-size: 14px;

    margin-left: 3px;

    vertical-align: middle;

}

.be-switch-input {

    position: absolute;

    left: 0;

    top: 0;

    margin: 0;

    opacity: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

}

.btn[data-v-53027a10] {

    display: inline-block;

    -ms-touch-action: manipulation;

    touch-action: manipulation;

    padding: 0 10px;

    margin-right: 20px;

    line-height: 30px;

    min-width: 70px;

    transition: all .2s ease;

    font-size: 0;

    color: #666;

    text-align: center;

    vertical-align: middle;

    outline: none;

    background-color: #fff;

    border: 1px solid #d9d9d9;

    border-radius: 4px;

    cursor: pointer;

    white-space: nowrap;

    box-sizing: border-box;

}

.btn[data-v-53027a10]:last-of-type {

    margin-right: 0;

}

.btn .btn-loading[data-v-53027a10],.btn i[data-v-53027a10] {

    margin-right: 8px;

}

.btn.default[data-v-53027a10] {

    color: #666;

    background-color: #fff;

    border-color: #d9d9d9;

}

.btn.primary[data-v-53027a10] {

    color: #fff;

    background-color: #00a1d6;

    border-color: #00a1d6;

}

.btn.primary[data-v-53027a10]:focus,.btn.primary[data-v-53027a10]:hover {

    background-color: #00b5e5;

    color: #fff;

    border-color: #00b5e5;

}

.btn.ghost[data-v-53027a10],.btn.ghost[data-v-53027a10]:focus,.btn.ghost[data-v-53027a10]:hover {

    color: #666;

    background-color: #f7f7f7;

    border-color: #d9d9d9;

}

.btn.warning[data-v-53027a10] {

    color: #fff;

    background-color: #fa0;

    border-color: #fa0;

}

.btn.warning[data-v-53027a10]:focus,.btn.warning[data-v-53027a10]:hover {

    color: #fff;

    background-color: rgba(255,170,0,.7);

    border-color: #fa0;

}

.btn.danger[data-v-53027a10] {

    color: #fff;

    background-color: #f50;

    border-color: #f50;

}

.btn.danger[data-v-53027a10]:focus,.btn.danger[data-v-53027a10]:hover {

    color: #fff;

    border-color: #f50;

    background-color: rgba(255,85,0,.7);

}

.btn.success[data-v-53027a10] {

    background-color: #87d068;

    border-color: #87d068;

    color: #fff;

}

.btn.success[data-v-53027a10]:focus,.btn.success[data-v-53027a10]:hover {

    color: #fff;

    border-color: #87d068;

    background-color: rgba(135,208,104,.7);

}

.btn.info[data-v-53027a10] {

    color: #fff;

    border-color: #2db7f5;

    background-color: #2db7f5;

}

.btn.info[data-v-53027a10]:focus,.btn.info[data-v-53027a10]:hover {

    color: #fff;

    border-color: #2db7f5;

    background-color: rgba(45,183,245,.7);

}

.btn[data-v-53027a10]:focus,.btn[data-v-53027a10]:hover {

    color: #00a1d6;

    background-color: #fff;

    border-color: #00a1d6;

}

.btn.btn-small[data-v-53027a10] {

    padding: .2rem .3rem;

    line-height: 1rem;

    min-width: 0;

}

.btn.btn-large[data-v-53027a10] {

    width: 140px;

    height: 40px;

    line-height: 40px;

}

.btn.btn-large .btn-content[data-v-53027a10] {

    font-size: 14px;

}

@keyframes loading-53027a10 {

    0% {

        transform-origin: 50% 50%;

        transform: rotate(0deg);

    }

    to {

        transform-origin: 50% 50%;

        transform: rotate(1turn);

    }

}

.btn-loading[data-v-53027a10] {

    display: inline-block;

    animation: loading-53027a10 1s linear infinite;

}

.btn-content[data-v-53027a10] {

    font-size: 12px;

    vertical-align: top;

}

.btn-content[data-v-53027a10]:hover {

    color: inherit;

    background-color: inherit;

}

.btn.btn-disabled[data-v-53027a10] {

    cursor: default;

}

.btn.btn-disabled[data-v-53027a10],.btn.btn-disabled[data-v-53027a10]:hover {

    color: #ccd0d7;

    background: #f4f5f7;

    border-color: #e5e9ef;

}

.btn-icon[data-v-53027a10] {

    display: inline-block;

    width: 20px;

    height: 20px;

    vertical-align: middle;

}

.btn-container[data-v-1ea3cefa] {

    font-size: 0;

    white-space: nowrap;

}

.btn-container.btn-center[data-v-1ea3cefa] {

    text-align: center;

}

.btn-container.btn-left[data-v-1ea3cefa] {

    text-align: left;

}

.btn-container.btn-right[data-v-1ea3cefa] {

    text-align: right;

}

.btn-container .btn[data-v-1ea3cefa]:last-of-type {

    margin-right: 0;

}

.be-pager {

    margin: 15px 0;

    text-align: center;

}

.be-pager:after {

    content: "";

    display: block;

    height: 0;

    clear: both;

    overflow: hidden;

    visibility: hidden;

}

.be-pager-item {

    display: inline-block;

    line-height: 38px;

    padding: 0 15px;

    margin-right: 4px;

    text-align: center;

    list-style: none;

    background-color: #fff;

    -ms-user-select: none;

    user-select: none;

    cursor: pointer;

    font-family: Arial;

    font-size: 14px;

    border: 1px solid #d7dde4;

    border-radius: 4px;

    transition: all .2s ease-in-out;

}

.be-pager-item a {

    text-decoration: none;

    color: #657180;

}

.be-pager-item:hover {

    border-color: #00a1d6;

}

.be-pager-item:hover a {

    color: #00a1d6;

}

.be-pager-item-active {

    background-color: #00a1d6;

    border-color: #00a1d6;

}

.be-pager-item-active:hover a,.be-pager-item-active a {

    color: #fff;

}

.be-pager-item-jump-next,.be-pager-item-jump-prev {

    padding: 0 5px;

}

.be-pager-item-jump-next:after,.be-pager-item-jump-prev:after {

    content: "\2022\2022\2022";

    display: block;

    letter-spacing: 1px;

    color: #ccc;

    text-align: center;

}

.be-pager-prev {

    margin-right: 8px;

}

.be-pager-item-jump-next,.be-pager-item-jump-prev {

    margin-right: 4px;

}

.be-pager-next {

    margin-left: 4px;

}

.be-pager-item-jump-next,.be-pager-item-jump-prev,.be-pager-next,.be-pager-prev {

    display: inline-block;

    font-size: 14px;

    line-height: 38px;

    list-style: none;

    text-align: center;

    cursor: pointer;

    color: #666;

    font-family: Arial;

    transition: all .2s ease-in-out;

}

.be-pager-next,.be-pager-prev {

    padding: 0 14px;

    border: 1px solid #d7dde4;

    border-radius: 4px;

    background-color: #fff;

}

.be-pager-next a,.be-pager-prev a {

    color: #666;

    font-size: 14px;

}

.be-pager-next:hover,.be-pager-prev:hover {

    border-color: #00a1d6;

}

.be-pager-next:hover a,.be-pager-prev:hover a {

    color: #00a1d6;

}

.be-pager-disabled {

    display: none;

}

.be-pager-options {

    float: left;

    margin-left: 15px;

}

.be-pager-options-elevator {

    display: inline-block;

    height: 32px;

    line-height: 32px;

    color: #99a2aa;

}

.be-pager-options-elevator input {

    border-radius: 4px;

    margin: 0 8px;

    width: 50px;

}

.be-pager-total {

    display: inline-block;

    height: 32px;

    line-height: 32px;

    margin-left: 30px;

    color: #99a2aa;

}

.be-dropdown {

    position: relative;

    display: inline-block;

    cursor: pointer;

}

.be-dropdown-trigger {

    width: 24px;

    height: 24px;

    margin: auto;

    text-align: center;

}

.be-dropdown-trigger .icon-ic_more {

    display: block;

    line-height: 24px;

    color: #222;

    font-size: 24px;

    color: #999;

}

.be-dropdown-item {

    height: 40px;

    padding: 0 20px;

    line-height: 40px;

    text-align: center;

    font-size: 14px;

    color: #222;

    box-sizing: border-box;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: background-color .2s ease;

    cursor: pointer;

}

.be-dropdown-item:hover {

    color: #00a1d6;

    background-color: #e5e9ef;

}

.be-dropdown-item.be-dropdown-item-delimiter {

    border-bottom: 1px solid #e5e9ef;

}

.be-dropdown-menu {

    position: fixed;

    top: 40px;

    z-index: 10;

    padding: 6px 0;

    background-color: #fff;

    border: 1px solid #e5e9ef;

    border-radius: 4px;

    box-shadow: 0 2px 4px rgba(0,0,0,.14);

}

.be-tags-container {

    position: absolute;

    top: 4px;

    right: 4px;

}

.be-tags-container .tag {

    display: inline-block;

    padding: 0 4px;

    font-size: 10px;

    color: #fff;

    text-align: center;

    line-height: 14px;

    border-radius: 2px;

    margin-left: 4px;

}

.be-tags-container .tag.pay-tag {

    background-color: #faab4b;

}

.be-tags-container .tag.coop-tag,.be-tags-container .tag.inter-tag,.be-tags-container .tag.live-review {

    background-color: #fb7299;

}

.be-tags-container .tag.new-tag {

    background-color: #42a0c4;

}

@font-face {

    font-family:iconfont;src:url(data:font/woff2;base64,d09GMgABAAAAAAO4AAsAAAAACFQAAANsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKgqDSIMoATYCJAMUCwwABCAFhG0HYxtjBxEVnI3IfhY4Z3NCT1bKOQcF/6IePckryH0fguczZ74vyVmtXCAGp0R4I5g7w61OmY0Rtx1eEErj+23apUB26KhKoJW100/L/Ac790KuK/D/uFc123MBmc++xWmOTWuCJByggO1p6SZrQSpQQeswduVFPIMAjjJqUQ0atehAqhF9J4wiG4MxKBDnyoihg/tiuRpTkytYhFjbvQb5akAtVleBlf7PyxvKZUHhaYyH2gxqOIArYcpEDR1EgR76KcF4ZXC+AjxAAyVWppVh9eYB6DBcgsaVBQ1VgCdbFISpwlOJGlGECCm5u/oXz+JwgEZhEJAYRnYKAOrAiIEwpY1AQ5gKgYLwFAIDiRrc+3jEA8ABPrAKOI/wBcTq3aSojBnTSgrTkTr39LsG6j6xk39vzYMH5Z2kVG5QCu3zADCzxo7uPvyL3b1bxp9+9t7dKn3OVDp1W3T8TuXTVXv7qZcigUu1RCSuEh8zeP3SzIM3bt1y5MC+DAPWBf2XHEKl8lIuPRo/4lIsOXMMExw/21h5/uSYH3CkAseK1Qk6bMi5Kc+szu3iKVrUTVm/9ciJDRaljBcd0P3EizpYOfuy00CTt1HuPy6YuWnmZgWW/upyYMGOEu+K71xwoAuP9xWkoNWnxJrb7T6U/FC79uZp08ufPrg5WBeVcG0zvsvkOedlel78OSjK+edyTpfz8h+HGV7vZXrHFACiHWgLoPupEJ9UUO23jlEf//HvMCHDjMa9U9f4Zn0DwNOfB39Bd3Toz/5HnNbsPyqhZVejMpHElFXaRgTVQim/y6rg38kjaE/n+TjWjIiNguUcCIokcoLGUgBt8CXAw6cCxLDUBkdxjQ/7pDcOjZhkoJj5AIQ0ToIiFZdBk8Y1tME/A49M3kGMNGlwqF4tz/Rtq72jIFUUlP2oznkwlk69IPeG0nWpJHk++QUZax/tSpXJxq4YIGNsGN/lXtWQEe7pAh5D1zFZ4Qa5BpWqPYSlB5V9UZBzP/EcCUgpKJDMD6nl2MC4w5WX+/4bKDmdlNRUVRhfQIzq8clOIGqBvoqHVlXX8pLRW2lPKYMYgvXIBRihM8OM2PJZDcipQNUjaB2EqJtpKw7ml/bPeAQeY/q02p2ma3PyW+I85b/juHLp8KvdEt926Q8S07RFj8H5bUqUB1ZMJg==) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");

}

.iconfont {

    font-family: iconfont!important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.video-commonicon_caozuo_huanyihuan:before {

    content: "\E73C";

}

.video-commonplayer_play:before {

    content: "\E60E";

}

.video-commonmenu:before {

    content: "\E60D";

}

.video-commonicon_tonote:before {

    content: "\E6B6";

}

/*# sourceMappingURL=space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/

然后就是图片素材了（我直接从B站八的）





具体效果过段时间我就会放在文末当打赏用了！

给博客添加个充电按钮（仿B站）的更多相关文章

  1. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  2. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  3. 给 hugo 博客添加搜索功能

    起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...

  4. CSDN博客添加量子恒道统计代码步骤

    CSDN博客添加量子恒道统计代码步骤. 1. 去量子恒道网站统计 注册账户: 2. 添加已有的CSDN博客地址: 3. 添加博客后恒道代码里面会给你一个JavaScript脚本,记下里面的一串数字: ...

  5. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  6. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

  7. 个人博客添加网易云音乐Flash插件

    博客底部添加网易云音乐播放插件 歌单或者歌曲外链可从音乐界面"生成外链播放器"中得到,选择Flash播放插件即可 footer.html文件增加 实现效果: 历史精选文章: Jli ...

  8. 给博客添加rss订阅

    如果是自己搭建博客,有一个问题是如何写一篇新的文章就可以告诉读者,你写了一篇新的?一个简单方法是使用 rss ,RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple ...

  9. 2019-8-31-jekyll-在博客添加流程图

    title author date CreateTime categories jekyll 在博客添加流程图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 ...

随机推荐

  1. Typora使用手册（小白入门级）

    Typora软件的简单使用 1.简介 Typora是一款支持Markdown语法的文档编辑器      特点:功能强大.画面极简. 下载地址:https://typoraio.cn/ 2.基础设置 偏 ...

  2. CentOS搭建BWAPP靶场并安装docker

    为了不触碰国家安全网络红线作为技术人员我们尽可能的要在自己本机在上面创建自己的靶场: 在centos上面搭建靶场看似非常简单短短几行代码,需要注意以下几个点:(1.在docker上搭建   2.端口号 ...

  3. vue大型电商项目尚品汇（后台篇）day04

    昨天太晚就没来得及更新,今天是spu管理界面,这个界面一共有三个界面需要切换,完成了两个界面,而且今天的难度在于最后两个章节,富有一定的逻辑性,当然中间也有很多需要注意的,比如ElementUI的照片 ...

  4. BUUCTF-一叶障目

    一叶障目 010editor打开没发现有什么异常,看分辨率尺寸觉得不对劲,修改了一下发现了flag 图片第二组前面四个是宽后面是高,修改第七位为05即可发现flag flag{66666}

  5. RPA应用场景-财务报表统计整合

    场景概述 财务报表统计整合 所涉系统名称 邮储银行系统 人工操作(时间/次) 3小时 所涉人工数量 1 操作频率 每月 场景流程 1.登录各个区支行系统 2.机器人按照要求,自动复选多项业务参数,导出 ...

  6. this关键字、static关键字、方法的调用

    1.带有static关键字的方法,不可使用this关键字.因为其调用方法为类名.方法名(建议这种方式,调用不需要对象的参与),不存在对象. 2.实例方法调用必须有对象的存在,先创建对象,通过引用.的方 ...

  7. docker 部署 minio

    1.下载镜像 docker pull minio/minio 2.启动 docker run -p 9000:9000 --name minio \ -d --restart=always \ -e ...

  8. NC212914 牛牛与后缀表达式

    NC212914 牛牛与后缀表达式 题目 题目描述 给定牛牛一个后缀表达式 \(s\) ,计算它的结果,例如,1+1对应的后缀表达式为1#1#+,'#'作为操作数的结束符号. 其中,表达式中只含有'+ ...

  9. 记一次 .NET 某工控数据采集平台 线程数 爆高分析

    一:背景 1. 讲故事 前几天有位朋友在 B站 加到我,说他的程序出现了 线程数 爆高的问题,让我帮忙看一下怎么回事,截图如下: 说来也奇怪,这些天碰到了好几起关于线程数无缘无故的爆高,不过那几个问题 ...

  10. ClickHouse(03)ClickHouse怎么安装和部署

    本文会介绍如何安装和部署ClickHouse,官方推荐的几种安装模式,以及安装之后如何启动,ClickHouse集群如何配置等. 简单来说,ClickHouse的搭建流程如下: 环境检查,环境依赖安装 ...