html, input, button, select, textarea
{
  font-family: 微软雅黑, "Microsoft YaHei UI", "Microsoft YaHei", 新微軟正黑體, "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold
}

*
{
  padding: 0;
  margin: 0;
  font-style: normal;
  box-sizing: border-box
}

:root
{
  --ui-theme-color: #ff5f00;
  --ui-theme-button: #e1442e;
  --ui-font-title: #ffffff;
  --ui-font-des: #666666;
  --ui-color-bg: #0c0c0c;
  --ui-color-header: #000000;
  --ui-color-bg2: #efefef
}

a
{
  -webkit-text-decoration: none;
  text-decoration: none
}

body
{
  background: var(--ui-color-bg);
  color: var(--ui-font-title)
}

.container
{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 15px
}

h2
{
  font-size: 1.5rem
}

.layui-layer
{
  border-radius: 0 !important
}

#search-layui
{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.app-header
{
  background: var(--ui-color-header)
}

.app-header .container
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 75px;
  height: 75px
}

.app-header .search-form
{
  border: 2px solid var(--ui-theme-color);
  height: 44px;
  border-radius: 22px;
  text-align: center;
  width: 250px;
  position: relative
}

.app-header .nav-logo a
{
  display: flex;
  align-items: center
}

.app-header .nav-logo img
{
  max-height: 32px
}

.app-header .menu-nf-header-container .nav-items
{
  display: flex;
  list-style: none
}

.app-header .menu-nf-header-container .nav-items .menu-item a
{
  color: var(--ui-color-1);
  padding: 0 20px;
  font-size: 1.25rem
}

.app-header .menu-nf-header-container .nav-items .menu-item a:hover
{
  color: var(--ui-color-0)
}

.app-header #search
{
  height: 100%;
  padding-right: 100px
}

.app-header #search .search-input
{
  color: var(--ui-font-title);
  display: block;
  width: 100%;
  border: 0;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  background: unset;
  height: 40px;
  outline: 0;
  line-height: 40px;
  padding-left: 20px
}

.app-header #search .search-help
{
  position: absolute;
  right: 62px;
  top: 0;
  display: flex;
  width: 40px;
  height: 40px;
  color: var(--ui-theme-color);
  justify-content: center
}

.app-header #search .search-help svg
{
  width: 20px
}

.app-header #search .search-submit
{
  position: absolute;
  right: 2px;
  top: 2px;
  width: 60px;
  height: 36px;
  border: 0;
  background: var(--ui-theme-color);
  border-radius: 20px;
  color: var(--ui-color-header);
  font-size: 16px;
  outline: 0;
  cursor: pointer
}

.hot-swiper
{
  padding: 15px 0
}

.hot-swiper .swiper-slide
{
  width: calc((100% - 30px) / 2);
  margin-right: 15px
}
.tags-swiper{
  width:
}
.tags-swiper .swiper-slide
{
  width: auto;
}

.eps-swiper .swiper-slide
{
  width: calc((100% - 55px) / 12);
  margin-right: 5px
}

.eps-swiper .swiper-slide .list-ep
{
  background: var(--ui-font-des);
  color: var(--ui-font-title);
  padding: 10px 0;
  border-radius: 5px;
  justify-content: center;
  margin: 15px 0 0 0
}

.eps-swiper .swiper-slide .list-ep.active
{
  background: var(--ui-theme-button)
}

.eps-prev
{
  display: flex;
  align-items: center;
  font-weight: 300;
  border: 1px solid var(--ui-theme-color);
  width: 80px;
  padding: 5px 7px 5px 0px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .9rem;
  justify-content: center;
  margin: 15px auto 0 auto
}

.eps-prev svg
{
  width: 20px
}

.light
{
  font-weight: normal
}

.items
{
  border-radius: 8px
}

.items ul
{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0
}

.items .item
{
  width: calc((100% - 30px) / 3);
  margin: 0 15px 15px 0;
  position: relative
}

.items .item:nth-child(3n)
{
  margin-right: 0
}

.items .title-line
{
  flex-direction: column;
  align-content: flex-start
}

.items a
{
  display: flex;
  position: relative;
  color: var(--ui-color-1);
  flex-wrap: wrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.items a .remarks
{
  display: flex;
  justify-content: flex-end;
  padding: 10px
}

.items a h3
{
  display: flex;
  font-size: 1rem;
  margin: 10px 0 2px 0;
  color: var(--ui-font-title)
}

.items a .tags
{
  display: flex;
  color: var(--ui-font-des);
  font-size: 0.9rem
}

.items-title
{
  display: flex;
  margin: 15px 0 10px 0;
  color: var(--ui-font-title)
}

.swiper-slide a
{
  display: block;width:auto;
}

.thumb
{
  width: 100%;
  aspect-ratio: 71 / 100;
  border-radius: 8px
}

.douscore
{
  background-color: rgba(150, 148, 150, 0.8);
  text-align: center;
  color: var(--ui-color-header);
  padding: 2px;
  position: absolute;
  top: 15px;
  right: 10px;
  border-radius: 2px;
  width: 32px
}

.remarks
{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  color: var(--ui-font-title);
  border-radius: 0 0 8px 8px
}

.ellipsis
{
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.swiper-container
{
  position: relative
}

.app-footer
{
  padding: 30px 0;
  background-color: var(--ui-color-header)
}

#menu-nf-footer
{
  display: flex;
  justify-content: center
}

#menu-nf-footer a
{
  color: var(--ui-color-1);
  font-weight: 600;
  padding: 0 5px
}

.swiper-tags
{
  background: var(--ui-font-des);
  color: var(--ui-font-title);
  height:24px;
  line-height:24px;
  padding: 0;
  border-radius: 18px;
  font-size:14px;
  text-align: center;
}

.player-content
{
  max-width: 720px;
  margin: 0 auto;
  padding-top: 15px
}

.eps-content
{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 15px
}

.detail-content .items-title
{
  align-items: baseline;
  font-size: 2rem;
  margin: 15px 0 0 0
}

.detail-content .items-title svg
{
  width: 15px;
  color: var(--ui-theme-color)
}

.detail-content .items-title .items-epname
{
  font-size: 1.5rem;
  color: var(--ui-font-des)
}

.items-tags
{
  display: flex;
  align-items: center;
  color: var(--ui-font-des)
}

.items-tags a:first-child
{
  margin-left: 0
}

.items-tags time, .items-tags a
{
  font-weight: 300;
  margin: 5px 7px;
  color: var(--ui-theme-color)
}

.text-container
{
  position: relative;
  overflow: hidden;
  max-height: 3rem;
  line-height: 1.5rem;
  display: flex;
  transition: max-height 0.3s ease
}

.text-container .text-content
{
  display: flex;
  flex-direction: column
}

.text-container .text-content span
{
  font-weight: 400;
  color: var(--ui-font-des)
}

.text-container .text-content img
{
  width: 240px;
  margin: 10px auto
}

.text-container .text-content figcaption
{
  font-size: 0.9rem;
  color: var(--ui-font-des);
  text-align: center
}

.text-container.expanded
{
  max-height: none
}

.text-container.expanded .toggle-button
{
  transform: rotate(180deg)
}

.toggle-button
{
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  color: var(--ui-theme-color);
  transition: transform 1s ease;
  width: 20px;
  height: 20px;
  background: rgba(102, 102, 102, 0.5);
  border-radius: 5px
}

.ui-tag .swiper-container, .ui-category .swiper-container
{
  /* background: var(--ui-color-bg2) */
}

.separation
{
  width: 2px;
  height: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: var(--ui-font-des);
  display: inline-block
}

li
{
  list-style: none
}

.tagsec-swiper .swiper-slide
{
  width: calc((100% - 135px) / 10);
  margin-right: 15px;
  display: flex;
  justify-content: center
}

.tagsec-swiper a
{
  color: var(--ui-color-header);
  padding: 7px 0;
  width: 2rem;
  white-space: nowrap;
  overflow: hidden
}

.tagsec-swiper .active
{
  color: var(--ui-theme-color)
}

@media (max-width: 479.98px)
{
  .tagsec-swiper .swiper-slide
  {
    width: calc((100% - 75px) / 6)
  }

  .eps-swiper .swiper-slide
  {
    width: calc((100% - 25px) / 6)
  }

  .tags-swiper .swiper-slide
  {
    width: calc((100% - 45px) / 4)
  }

  .player-content
  {
    padding-top: 0
  }

  .detail-content .items-title
  {
    font-size: 1.2rem
  }

  .detail-content .items-title svg
  {
    width: 10px
  }

  .detail-content .items-title .items-epname
  {
    font-size: 1rem
  }

  h2
  {
    font-size: 1.2rem
  }
}

.content
{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 50px
}

.pagination ul
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0
}

.pagination ul .active
{
  background-color: var(--ui-theme-color);
  color: var(--ui-font-title) !important
}

.pagination ul .page-link
{
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--ui-font-title);
  font-weight: 400
}

#player
{
  width: 100%;
  aspect-ratio: 16 / 9
}

.player-box
{
  position: relative
}

.player-box .plyr__poster
{
  background-image: url("https://p0.meituan.net/csc/c623cd3343d70836680acfea0a7cb7fd182113.jpg");
  background-size: cover !important;
  opacity: 1;
  display: block;
  width: 110%;
  height: 110%;
  position: absolute;
  left: -5%;
  top: -5%;
  -moz-filter: blur(35px);
  -ms-filter: blur(35px);
  filter: blur(0)
}

.player-box .plyr__gifs
{
  position: absolute;
  pointer-events: none;
  border: 0;
  opacity: 1;
  border-radius: 0;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 184px;
  z-index: 3;
  background: url("https://p1.meituan.net/csc/dfc56d461c991d2213846547fa5cc95191779.png") no-repeat;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  animation: iconAnimation 0.94s steps(1) infinite;
  -webkit-animation: iconAnimation 0.94s steps(1) infinite;
  margin: -110px 0 0 -160px
}

.player-box .plyr--stopped .plyr__control--overlaid
{
  opacity: 0;
  visibility: hidden
}

.player-box .plyr--paused-browser.plyr--stopped .plyr__control--overlaid
{
  opacity: 1;
  visibility: visible
}

.plyr__tips
{
  margin-top: 10px;
  display: flex;
  justify-content: space-between
}

.plyr__tips .plyr__switch
{
  color: red;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer
}

.plyr__tips .plyr__tip
{
  color: magenta;
  font-weight: bold
}

.plyr__tips .plyr__tip .plyr__loading
{
  color: green;
  font-weight: normal
}

@keyframes iconAnimation
{
  0%
  {
    background-position: 0 0
  }

  6.25%
  {
    background-position: -320px 0
  }

  12.50%
  {
    background-position: -640px 0
  }

  18.75%
  {
    background-position: -960px 0
  }

  25.00%
  {
    background-position: -1280px 0
  }

  31.25%
  {
    background-position: -1600px 0
  }

  37.50%
  {
    background-position: -1920px 0
  }

  43.75%
  {
    background-position: -2240px 0
  }

  50.00%
  {
    background-position: -2560px 0
  }

  56.25%
  {
    background-position: -2880px 0
  }

  62.50%
  {
    background-position: -3200px 0
  }

  68.75%
  {
    background-position: -3520px 0
  }

  75.00%
  {
    background-position: -3840px 0
  }

  81.25%
  {
    background-position: -4160px 0
  }

  87.50%
  {
    background-position: -4480px 0
  }

  93.75%
  {
    background-position: 0 -184px
  }

  100.00%
  {
    background-position: -320px -184px
  }
}