:root{
  --video-card-items-max-width: 214px;
  --video-card-items-per-row: 8; /*card每列數量*/
  --video-card-items-margin-x: 24px; /*card左右間距*/
  --video-card-items-margin-bottom: 16px; /*card下間距*/
}
@media (max-width: 2225px){
  :root{
      --video-card-items-max-width: 214px;
      --video-card-items-per-row: 8;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1920px){
  :root{
      --video-card-items-max-width: 214px;
      --video-card-items-per-row: 7;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1680px){
  :root{
      --video-card-items-max-width: 214px;
      --video-card-items-per-row: 6;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1536px){
  :root{
      --video-card-items-max-width: 190px;
      --video-card-items-per-row: 6;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1440px){
  :root{
      --video-card-items-max-width: 214px;
      --video-card-items-per-row: 5;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1366px){
  :root{
      --video-card-items-max-width: 190px;
      --video-card-items-per-row: 6;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 1280px){
  :root{
      --video-card-items-max-width: 214px;
      --video-card-items-per-row: 5;
      --video-card-items-margin-x: 24px;
      --video-card-items-margin-bottom: 24px;
  }
}
@media (max-width: 871px){
  :root{
      --video-card-items-per-row: 2;
      --video-card-items-margin-x: 8px;
      --video-card-items-margin-bottom: 12px;
  }
}
@media (max-width: 460px){
  :root{
      --video-card-items-per-row: 2;
      --video-card-items-margin-x: 8px;
      --video-card-items-margin-bottom: 12px;
  }
}
:root{
  --video-card-items-max-width: 214px;
  --search-card-items-per-row: 3;
  --search-card-items-margin-x: 24px;
  --search-card-items-margin-bottom: 24px;
}
@media (max-width: 1023px){
    :root{
        --search-card-items-per-row: 3;
        --search-card-items-margin-x: 24px;
        --search-card-items-margin-bottom: 24px;
    }
}
@media (max-width: 871px){
    :root{
        --search-card-items-per-row: 2;
        --search-card-items-margin-x: 8px;
        --search-card-items-margin-bottom: 12px;
    }
}

.emoji-font{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",Helvetica,Arial,sans-serif;
}

.film-container{
  position: relative;
  padding: 0;
}
.film-fixed-cover-container.recommend-page{ /*推薦頁*/
  position: absolute;
  z-index: 10
}

.full-screen-container{
  height: 100%!important;
  width: 100%!important;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
}

@media (max-width: 1399px){

}
@media (max-width: 871px){
  .film-container{
      padding: 0px;
  }
}

/* 訂閱按鈕 */
.subuser-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-shadow: 0px 0px 4px rgba(189, 123, 0, 0.85);
  background-color: var(--btn-color-BigGoY3);
  box-shadow: 0px 3px 7px rgba(237, 175, 32, 0.36);
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: 8px;
  color: var(--text-color-TextWhite);
  font-size: 14px;
  cursor: pointer;
}
.subuser-btn i{
  filter: var(--svg-color-BgWhite)
}
.subuser-btn.active{
  background-color: var(--opacityBg-color-BgOGray1);
  color: var(--foreground-2);
  box-shadow: none;
  text-shadow: none;
}
.subuser-btn.active i{
  background-image: url("/images/ic_check.svg")!important;
  filter: var(--svg-color-TextGray3)
}
@media (max-width: 871px){
  .subuser-btn{
    padding: 2px 8px;
    font-weight: 700;
    font-size: 13px;
  }
  .subuser-btn.active{
    color: var(--text-color-TextWhite);
  }
}
/* 訂閱按鈕 END */

.bicon-product{
  position: relative;
}
.bicon-product .count{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 22px;
  top: -2px;
  line-height: 17px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: var(--text-color-TextWhite);
  background-color: var(--bg-color-Negative2);
  border-radius: 50%;
  font-weight: 400;
}

.right-btn-area .count{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  line-height: 19px;
  width: 16px;
  height: 16px;
  margin-left: 24px;
  margin-top: -2px;
  font-size: 13px;
  color: var(--text-color-TextWhite);
  background-color: var(--text-color-TextGray1);
  border-radius: 50%;
  font-weight: 400;
}

.film-item{
  border-bottom: 1px solid var(--stroke-2);
  padding-top: 24px;
  padding-bottom: 24px;
}
.film-item .video-wrapper{
  display: flex;
  align-items: flex-end;
  margin-bottom: 17px;
  padding-right: 16px;
}
.film-item .video-wrapper .video-card-container{
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 12px;
}
.film-item .video-wrapper .video-card-container.vertical{ /*直式*/ /*voido:cover*/
  /* height: 720px;
  height: calc(450px + (100vw - 768px) / 1152 * 100); */
  height: 720px;
}
.film-item .video-wrapper .video-card-container.vertical canvas{
  display: block;
  visibility: hidden;
  height: 100%;
}
.film-item .video-wrapper .video-card-container.horizontal{ /*橫式*/ /*voido:contain*/
  /* width: 405px;
  width: calc(450px + ((100vw - 768px) / 1152) * 100); */
  width: calc(666px - 36px - 16px - 12px);
}
.film-item .video-wrapper .video-card-container.horizontal canvas{
  display: block;
  visibility: hidden;
  width: 100%;
}

.film-item .video-wrapper .video-content{
  /* height: 100%;
  position: relative; */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.film-item .video-wrapper .video-card-container .thumbnails{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-item .video-wrapper .right-btn-area{
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-color-TextGray2);
  padding: 0 8px;
}
.film-item .userinfo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--foreground-4);
  margin-bottom: 8px;
}
.film-item .profileimg{
  height: 32px;
  width: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
}
.film-item .profileimg img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.film-item .userinfo .name{
  font-weight: 700;
  font-size: 15px;
  color: var(--foreground-1);
}
.film-item .userinfo .atuserid{
  color: var(--foreground-4);
  margin-left: 8px;
}
.film-item .description-area{
  word-break: break-word;
}
.film-item .description-area[fold]{
  position: relative;
  max-height: 138px;
  overflow: hidden;
}
.film-item .description-area[fold='true'] .openbtn{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(245, 249, 253, 0) 0%, #F5F9FD 100%);
  color: var(--foreground-3);
  font-size: 14px;
  cursor: pointer;
}
.film-item .description-area[fold='true'] .openbtn:hover{
  color: var(--text-color-BigGoB);
}
.film-item .description-area[fold='true'] .openbtn:hover .bicon-arrowdown{
  filter: var(--svg-color-BigGoB)
}
/* 影片首頁 nsfw */
.film-item .video-wrapper .video-card-container .nsfw-wrap{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: fit-content;
  color: var(--text-color-TextWhite);
  gap: 24px;
  padding: 0 30px;
}
.film-item .video-wrapper .video-card-container .nsfw-wrap .nsfw-text-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.film-item .video-wrapper .video-card-container .nsfw-wrap .nsfw-title{
  font-weight: 700;
  font-size: 20px;
}
.film-item .video-wrapper .video-card-container .nsfw-wrap .nsfw-text{
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}
.film-item .video-wrapper .video-card-container .nsfw-wrap ._biggo-btn{
  margin: 0;
  padding: 0 10px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color-TextWhite);
}

/* 影片首頁 nsfw END*/

/* embed nsfw */
.embed-video-container .nsfw-wrap{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: fit-content;
  color: var(--text-color-TextWhite);
  gap: 24px;
  padding: 0 30px;
}
.embed-video-container .nsfw-wrap .nsfw-text-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.embed-video-container .nsfw-wrap .nsfw-title{
  font-weight: 700;
  font-size: 20px;
}
.embed-video-container .nsfw-wrap .nsfw-text{
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}
.embed-video-container .nsfw-wrap ._biggo-btn{
  margin: 0;
  padding: 0 10px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color-TextWhite);
}
/* embed nsfw END*/

.horizontal video{
  object-fit: contain !important;
}
img[src=""].swiper-lazy,
img.swiper-lazy:not([src]) {
  visibility: hidden;
}
/* PC header tab */
.film-header-tab-wrap{
  display: flex;
  align-items: flex-end;
  height: 64px;
}
.film-header-tab{
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--foreground-1);
  height: 100%;
  padding: 0 24px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.film-header-tab.active{
  color: var(--text-color-BigGoB);
  border-bottom: 2px solid var(--btn-color-BigGoB3);
}
/* PC header tab END */
/* mobile header tab bar */
.film-fixed-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  background-color: transparent;
  font-size: 16px;
  position: fixed;
  top: 15px;
  left: 0;
  right: 0;
  z-index: 1500;
  color: var(--text-color-TextWhite);
  padding: 0 16px;
}
.film-fixed-header .tabs{
  display: flex;
  align-items: center;
  gap: 2px;
}
.film-fixed-header .tabs > div{
  border-bottom: 2px solid;
  border-color: transparent;
  padding: 8px 10px;
  position: relative;
  opacity: 0.8;
}
.film-fixed-header .tabs > div.avtive{
  font-weight: 700;
  opacity: 1;
}
.film-fixed-header .tabs > div > div.newVideoNotice{
  position: absolute;
  width: 6px;
  height: 6px;
  right: 3px;
  top: 8px;
  background-color: var(--btn-color-BigGoB3);
  border-radius: 50%;
}
.film-fixed-header .header-tool-wrap{
  gap: 8px;
}
/* mobile header tab bar END */
/* mobile 訂閱 tab */
.subscribe-card{
  flex-flow: column;
  background: var(--bg-color-BgGray1);
  height: calc(100% - 16px);
  position: relative;
  text-align: center;
  gap: 16px;
}
.subscribe-card .title{
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.subscribe-card .recommend-wrap{
  width: 100%;
  height: 356px;
  padding: 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.subscribe-card .recommend-wrap::-webkit-scrollbar{
  display: none;
}
.subscribe-card .recommend-wrap::-webkit-scrollbar-thumb{
  display: none;
}
.subscribe-card .recommend-user-item{
  width: 232px;
  height: 100%;
  padding-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  scroll-snap-align: center;
}
.subscribe-card .recommend-user-card{
  position: relative;
  opacity: 0.3;
  height: 267px;
  width: 182px;
  border-radius: 20px;
  box-shadow: 0px 3px 7px var(--shadow-color-Sd1);
  background: linear-gradient(179.96deg, rgba(36, 52, 63, 0.24) 0.04%, rgba(36, 52, 63, 0.6) 99.96%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}
.subscribe-card .recommend-user-wrap .profileimg-wrap{
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
}
.subscribe-card .recommend-user-wrap .profileimg{
  top: -22px;
  width: 72px;
  height: 72px;
  border: 2px solid var(--bg-color-BgGray1);
}
.subscribe-card .recommend-user-wrap .profileimg img{
  transform: translateY(0);
}
.subscribe-card .recommend-user-wrap .profileimg-wrap div[class*="bicon-badge"]{
  position: absolute;
  width: 22px;
  height: 22px;
  right: 0;
  bottom: 0;
}
.subscribe-card .recommend-user-wrap .name{
  width: 100%;
  color: var(--text-color-TextWhite);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0px 0px 3px rgba(109, 126, 152, 0.75);
}
.subscribe-card .recommend-user-wrap .atuserid{
  width: 100%;
  color: var(--text-color-TextWhite);
  text-align: center;
  font-size: 13px;
  text-shadow: 0px 0px 3px rgba(109, 126, 152, 0.75);
}
.subscribe-card .recommend-user-wrap .subuser-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  text-shadow: 0px 0px 4px rgba(189, 123, 0, 0.85);
  background-color: var(--btn-color-BigGoY3);
  box-shadow: 0px 3px 7px rgba(237, 175, 32, 0.36);
  border-radius: 6px;
  padding: 3px 0;
  color: var(--text-color-TextWhite);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  margin: 14px 0 0 0;
}
.subscribe-card .recommend-user-wrap .subuser-btn.active{
  background-color: var(--opacityBg-color-BgOGray1);
  color: var(--foreground-2);
  box-shadow: none;
  text-shadow: none;
}
/* mobile 訂閱 bar END */
/* mobile取消靜音 */
.unmute-btn{
  display: flex;
  align-items: center;
  color: var(--foreground-1);
  font-weight: 700;
  font-size: 14px;
  background: rgba(254, 254, 255, 0.75);
  box-shadow: 0px 0px 4px rgba(36, 52, 63, 0.1);
  text-shadow: none;
  position: absolute;
  height: 38px;
  top: 85px;
  right: 16px;
  padding: 0 12px;
  border-radius: 10px;
}
/* 滿版暫停 */
.cover-pause-area{
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  pointer-events: none;
}
.cover-pause-area .pause-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 72px;
  background: rgba(36, 52, 63, 0.3);
  border-radius: 50px;
}
.cover-pause-area .pause-icon i{
  height: 48px;
  width: 48px;
}
/*影片蓋板內容*/
.video-cover-content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  color: var(--text-color-TextWhite);
  font-size: 13px;
  text-shadow: 0px 0px 3px rgba(36, 52, 63, 0.25);
  background: linear-gradient(180deg, rgba(36, 52, 63, 0) 66.25%, rgba(13, 40, 72, 0.6) 100%);
}
.video-cover-content:has(.bottom-video-caption .video-info-area.open){
  background: linear-gradient(180deg, rgba(36, 52, 63, 0.2) 29.17%, rgba(13, 40, 72, 0.8) 100%);
}
/* 播放器  */
.swiper-video-player{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* 喜歡評論分享按鈕 */
.video-cover-content .right-btn-area{
  position: absolute;
  width: 36px;
  bottom: 24px;
  right: 16px;
  text-align: center;
  z-index: 2;
}
/* 頭像姓名標題內容 */
.video-cover-content .bottom-video-caption{
  position: absolute;
  /* right: 68px;
  left: 16px;
  bottom: 24px; */
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 1;
}
.video-cover-content .bottom-video-caption .userinfo{
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-weight: bold;
  padding-right: 68px;
  padding-left: 16px;
}
.video-cover-content .bottom-video-caption .userinfo a{
  display: flex;
  align-items: center;
  color: var(--text-color-TextWhite);
  text-decoration: none;
}
.video-cover-content .bottom-video-caption .profileimg{
  width: 32px;
  height: 32px;
  margin-right: 6px;
}
.video-cover-content .bottom-video-caption [class*="bicon-badge"]{
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 0;
  right: 3px;
}
.video-cover-content .bottom-video-caption .video-info-area{
  padding-bottom: 24px;
}
.video-cover-content .bottom-video-caption .description-wrap{
  position: relative;
}
.video-cover-content .bottom-video-caption .description-wrap [hashtag],
.video-cover-content .bottom-video-caption .description-wrap [atuser],
.video-cover-content .bottom-video-caption .description-wrap [commitlink]{
  color: var(--text-color-TextWhite);
  font-weight: bold;
}

.video-cover-content .bottom-video-caption .description{
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 68px;
}
.video-cover-content .bottom-video-caption .description::-webkit-scrollbar{
  display: none;
}
.video-cover-content .bottom-video-caption .description::-webkit-scrollbar-thumb{
  display: none;
}
.video-cover-content .bottom-video-caption .description .description-content{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  min-width: 0;
  width: 100%;
}
.video-cover-content .bottom-video-caption .video-info-area.open .description{
  overflow: scroll;
  max-height: 360px;
  padding-left: 16px;
  padding-right: 16px;

  /* background: linear-gradient(#fff, transparent 100%),
      linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
  background-size: 100% 30px, 100% 10px;
  background-repeat: no-repeat;
  background-attachment: local, scroll; */
}
.video-cover-content .bottom-video-caption .video-info-area.open .description.top_gradient{
  -webkit-mask: linear-gradient(transparent 0%, #000 15%);
}
.video-cover-content .bottom-video-caption .video-info-area.open .description.bottom_gradient{
  -webkit-mask: linear-gradient(#000 85%, transparent);
}
.video-cover-content .bottom-video-caption .video-info-area.open .description.top_gradient.bottom_gradient{
  -webkit-mask: linear-gradient(transparent 0%, #000 15%,#000 85%, transparent);
}
.video-cover-content .bottom-video-caption .video-info-area.open .description-content{
  -webkit-line-clamp: 9999;
}
.video-cover-content .bottom-video-caption .description-more{
  right: 68px;
  bottom: 0;
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  margin-left: 6px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

.video-cover-content .view-product-btn{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 6px 0px 0px;
  margin-left: 16px;
  margin-bottom: 12px;
  gap: 4px;
  height: 32px;
  width: fit-content;
  background: var(--opacityBg-color-BgOGray2);
  color: var(--foreground-inverted);
  border-radius: 6px;
}
.video-cover-content .view-product-btn img{
  width: 32px;
  height: 32px;
  border-radius: 6px 0px 0px 6px;
  object-fit: contain;
  background-color: #FFFFFF;
}
.video-cover-content .view-product-btn .count{
  position: absolute;
  width: 16px;
  height: 16px;
  top: -6px;
  right: -5px;
  border-radius: 10px;
  background: var(--foreground-3);
  color: var(--foreground-inverted);
  font-size: 12px;
  line-height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-cover-content .view-product-btn .price{
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #FFFFFF;
}
.video-cover-content .timeprogress-bar{
  height: 2px;
  width: 100%;
  /* position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px; */
  /* margin-top: 12px; */
}
.video-cover-content .timeprogress-bar .value{
  background-color: rgba(255, 255, 255, 0.6);
  height: 2px;
  width: 0;
}
.video-cover-content .nsfw-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0px 10px;
  width: 100%;
  height: 100%;
}
.video-cover-content .nsfw-wrap .nsfw-text-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.video-cover-content .nsfw-wrap .nsfw-title{
  font-weight: 700;
  font-size: 20px;
}
.video-cover-content .nsfw-wrap .nsfw-text{
  font-size: 16px;
  line-height: 23px;
  padding: 0 28px;
  text-align: center;
}
.video-cover-content .nsfw-wrap ._biggo-btn{
  margin: 0;
  padding: 0 10px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color-TextWhite);
}


/* PC版 影片控制UI */
.video-controls{
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 10;
}
.video-controls .cover-pause{
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  /* background: linear-gradient(180deg, rgba(36, 52, 63, 0.16) 0%, rgba(36, 52, 63, 0.6) 100%); */
  background: linear-gradient(180deg, rgba(13, 40, 72, 0) 88.54%, rgba(13, 40, 72, 0.16) 100%);
  opacity: 0;
  transition: opacity .3s;
}
.video-controls .play-icon{
  width: 70px;
  height: 70px;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transition: opacity .3s;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.video-controls .play-icon i{
  width: 70px;
  height: 70px;
}
.video-controls .play-icon.bicon-play{opacity: 1}

/* .video-controls:hover .cover-pause,
.video-controls:hover .play-icon,
.video-controls:hover .mute-icon,
.video-controls:hover .time-display,
.video-controls:hover .progress-control,
.video-controls:hover .prev-video-btn,
.video-controls:hover .next-video-btn,
.video-controls:hover .back-film-home{
  opacity: 1 !important;
  transition: opacity .3s;
} */

.popup-component-body .video-controls.hover-active{
  background: linear-gradient(180deg, rgba(36, 52, 63, 0.16) 0%, rgba(36, 52, 63, 0.6) 100%);
}

.video-controls .cover-pause{cursor: none}
.video-controls.hover-active .cover-pause{cursor: pointer}


.video-controls.hover-active .cover-pause,
.video-controls.hover-active .play-icon,
.video-controls.hover-active .mute-icon,
.video-controls.hover-active .time-display,
.video-controls.hover-active .logo-wrap,
.video-controls.hover-active .video-control-wrap,
.video-controls.hover-active .progress-control,
.video-controls.hover-active .prev-video-btn,
.video-controls.hover-active .next-video-btn,
.video-controls.hover-active .playback-rate-wrap,
.video-controls.hover-active .bicon-playback-rate,
.video-controls.hover-active .bicon-fullscreen,
.video-controls.hover-active .embed-video-info-area,
.video-controls.hover-active .back-film-home span{
  opacity: 1 !important;
  transition: opacity .3s;
}

.video-controls .video-control-wrap{
  display: flex;
  align-items: flex-end;
  position: absolute;
  right: 16px;
  bottom: 29px;
  gap: 5px;
  pointer-events: none;
}
.video-controls .logo-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .3s;
  filter: drop-shadow(0px 0px 3px rgba(109, 126, 152, 0.75));
  pointer-events: none;
}
.video-controls .volume-control-wrap{
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: none;
}
.video-controls .volume-sound-wrap{
  width: 36px;
  height: 108px;
  border-radius: 30px;
}
.video-controls .volume-sound-wrap:hover{
  background-color: var(--opacityBg-color-BgOGray2)!important;
}
.video-controls .volume-control-wrap .volume-bar{
  transform: rotate(270deg);
  transform-origin: 0;
  position: absolute;
  display: none;
  width: 80px;
  height: 35px;
  left: 19px;
  bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  filter: drop-shadow(0px 0px 3px rgba(109, 126, 152, 0.75));
  pointer-events: auto;
}
.video-controls .volume-control-wrap:hover .volume-bar{
  display: block;
}
.video-controls .mute-icon{
  opacity: 0;
  transition: opacity .3s;
  pointer-events: auto;
}
.video-controls .mute-icon.bicon-sound{
  filter: drop-shadow(0px 0px 3px rgba(109, 126, 152, 0.75));
  position: absolute;
  bottom: 0;
}
.video-controls .mute-icon.bicon-mute{
  opacity: 0;
  transition: opacity .3s, background-color .3s;
  background: rgba(254, 254, 255, 0.75);
  border-radius: 8px;
  width: fit-content;
  height: 36px;
  gap: 8px;
  padding: 0 6px;
}
.video-controls .mute-icon.bicon-mute:hover{
  background-color : var(--foreground-inverted);
  transition: background-color .3s;
}
.video-controls .mute-icon.bicon-mute i{
  filter: var(--svg-color-TextGray4)
}
.video-controls .mute-text{
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  user-select: none;
}
.video-controls .arrow-wrap{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  height: 64px;
  background: rgba(13, 40, 72, 0.7);
  border-radius: 100px;
  background-color: var(--opacityBg-color-BgOGray2);
  transition: opacity 0.2s;
  pointer-events: none;
}
.video-controls .rewind-arrow-wrap{
  padding: 12px 18px 12px 16px;
  left: 120px;
  top: 49%;
}
.video-controls .rewind-arrow-wrap .bicon-play{
  transform: rotate(180deg);
}
.video-controls .forward-arrow-wrap{
  padding: 12px 16px 12px 18px;
  right: 120px;
  top: 49%;
}
.video-controls .show-product-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 8px 0px 0px;
  gap: 6px;
  position: absolute;
  height: 40px;
  right: 0px;
  bottom: 48px;
  background: rgba(254, 254, 255, 0.75);
  color: var(--foreground-1);
  border-radius: 8px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color .3s;
}
[data-theme='dark'] .video-controls .show-product-btn{
  background: rgba(41, 41, 41, 0.75);
}
.video-controls .show-product-btn:hover{
  background-color : var(--foreground-inverted);
  transition: background-color .3s;
}
/* nsfw */
.nsfw-cover{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: linear-gradient(0deg, #16283E, #16283E), rgba(13, 40, 72, 0.7);
}
.video-controls .nsfw-wrap{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: fit-content;
  color: var(--text-color-TextWhite);
  gap: 24px;
}
.video-controls .nsfw-wrap .nsfw-text-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 16px;
}
.video-controls .nsfw-wrap ._biggo-btn{
  margin: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color-TextWhite);
}
/* nsfw END */
.film-fixed-cover-container .tooltip-inner{
  max-width: 340px!important;
  background: var(--bg-color-BgGray4)!important;
  text-align: left;
  padding: 6px 8px;
  line-height: 20px;
}
.film-fixed-cover-container .tooltip.bs-tooltip-top .arrow::before{
  top: -0.5px;
  border-top-color: var(--bg-color-BgGray4)!important;
}
.film-fixed-cover-container .tooltip.bs-tooltip-bottom .arrow::before{
  bottom: -0.5px;
  border-bottom-color: var(--bg-color-BgGray4)!important;
}
.film-fixed-cover-container .tooltip.bs-tooltip-right .arrow::before{
  right: -0.5px;
  border-right-color: var(--bg-color-BgGray4)!important;
}
.film-fixed-cover-container .tooltip.bs-tooltip-left .arrow::before{
  left: -0.5px;
  border-left-color: var(--bg-color-BgGray4)!important;
}
.film-fixed-cover-container .fullscreen-target .tooltip-inner{
  display: flex;
  font-size: 13px;
  gap: 4px;
  align-items: center;
}
.film-fixed-cover-container .fullscreen-target .tooltip-inner .key{
  padding: 2px 6px;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  font-size: 12px;
  line-height: 14px;
}
.film-fixed-cover-container .fullscreen-target .tooltip:not(:has(.showArrow)) .arrow::before{
  display: none;
}
.main-video-wrap .tooltip-inner{
  max-width: 340px!important;
  background: var(--bg-color-BgGray4)!important;
  text-align: left;
  padding: 6px 8px;
  line-height: 20px;
}
.main-video-wrap .tooltip.bs-tooltip-top .arrow::before{
  top: -0.5px;
  border-top-color: var(--bg-color-BgGray4)!important;
}
.main-video-wrap .tooltip.bs-tooltip-bottom .arrow::before{
  bottom: -0.5px;
  border-bottom-color: var(--bg-color-BgGray4)!important;
}
.main-video-wrap .tooltip.bs-tooltip-right .arrow::before{
  right: -0.5px;
  border-right-color: var(--bg-color-BgGray4)!important;
}
.main-video-wrap .tooltip.bs-tooltip-left .arrow::before{
  left: -0.5px;
  border-left-color: var(--bg-color-BgGray4)!important;
}
.main-video-wrap .fullscreen-target .tooltip-inner{
  display: flex;
  font-size: 13px;
  gap: 4px;
  align-items: center;
}
.main-video-wrap .fullscreen-target .tooltip-inner .key{
  padding: 2px 6px;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  font-size: 12px;
  line-height: 14px;
}
.main-video-wrap .fullscreen-target .tooltip .arrow::before{
  display: none;
}
.video-controls .show-product-btn img{
  width: 40px;
  height: 40px;
  border-radius: 8px 0px 0px 8px;
  object-fit: contain;
  background-color: #FFFFFF;
}
.video-controls .show-product-btn .count{
  position: absolute;
  width: 16px;
  height: 16px;
  right: -6px;
  top: -6px;
  border-radius: 10px;
  background: var(--foreground-3);
  color: var(--foreground-inverted);
  font-size: 12px;
  line-height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-controls .show-product-btn .price{
  font-weight: 700;
  font-size: 13px;
  line-height: 19px;
  color: var(--foreground-1);
}
.video-controls .show-product-btn .price span{
  word-break: normal!important;
}
.video-controls .time-display{
  position: absolute;
  bottom: 52px;
  left: 24px;
  font-size: 14px;
  color: var(--text-color-TextWhite);
  opacity: 0;
  transition: opacity .3s;
  text-shadow: 0px 0px 3px rgba(109, 126, 152, 0.7);
}

.video-controls .prev-video-btn,
.video-controls .next-video-btn{
  width: 38px;
  height: 38px;
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-26px);
  z-index: 1;
  opacity: 0;
  transition: opacity .3s;
}
.video-controls .prev-video-btn i,
.video-controls .next-video-btn i{
  background-size: 16px;
}
.video-controls .next-video-btn{
  transform: translateY(26px);
}
.video-controls .fullscreen-control-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: auto;
}
.video-controls .embed-video-info-area{
  opacity: 0;
  transition: opacity .3s;
}

/* 播放進度條 */
.progress-control{
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: calc(100% - 32px);
  opacity: 0;
  transition: opacity .3s;
  box-shadow: 0px 0px 16px rgba(36, 52, 63, 0.3);
}
input[type=range].progress-control {
  -webkit-appearance: none;
  height: 5px;
  outline: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.8) 0%,
    var(--stroke-2) 0%,
    var(--stroke-2) 100%);
  box-shadow: 0px 0px 16px rgba(36, 52, 63, 0.3);
}
input[type=range].progress-control::-webkit-slider-thumb{
  -webkit-appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  opacity: 1;
}
input[type=range].BigGoB3-progress-control::-webkit-slider-thumb{
  background: var(--btn-color-BigGoB3);
}
input[type=range].progress-control:hover::-webkit-slider-thumb{
  opacity: 1;
}
/* 音量條 */
input[type=range].volume-control{
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  outline: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(to right,#FFFFFF 0%,#FFFFFF var(--volume),rgba(255, 255, 255, 0.36) var(--volume),rgba(255, 255, 255, 0.36) 100%);
}
input[type=range].volume-control::-webkit-slider-thumb{
  -webkit-appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 10px;
  background: #FFFFFF;
  border-radius: 50%;
}
input[type=range].volume-control::-webkit-slider-runnable-track{
  height: 36px;
}
/* 小控制版本(small 影片首頁) */
.video-controls.small .play-icon{
  width: 36px;
  height: 36px;
  top: auto;
  left: 16px;
  bottom: 29px;
  transform: none;
  pointer-events: auto;
}
.video-controls.small .play-icon i{
  width: 22px;
  height: 22px;
}
.video-controls.small .time-display{
  font-size: 13px;
  bottom: 37.5px;
  left: 54px;
}
/* 大控制版本(large 單一影片頁) */
.video-controls.large .time-display{
  bottom: 24px;
  left: 24px;
}
.video-controls.large .progress-control{
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.video-controls.large input[type=range].progress-control {
  height: 6px;
  border-radius: 0;
  background: linear-gradient(to right,
    var(--btn-color-BigGoB3) 0%,
    var(--btn-color-BigGoB3) 0%,
    var(--text-color-TextGray3) 0%,
    var(--text-color-TextGray3) 100%);
}
.video-controls.large input[type=range].progress-control::-webkit-slider-thumb{
  width: 16px;
  height: 16px;
  background: var(--btn-color-BigGoB3);
}

/* PC版 影片分析 */
.video-analytics-btn{
  display: flex;
  align-items: center;
  /* position: absolute; */
  /* bottom: 75px; */
  /* left: 50%; */
  /* z-index: 100; */
  /* transform: translate(-50%, 0); */
  background: var(--opacityBg-color-BgOGray2);
  color: var(--text-color-TextWhite);
  font-size: 14px;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}
.video-analytics-btn:hover{
  background-color: var(--bg-color-BgGray4);
}

.video-analytics-container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--background-2);
  overflow-y: auto;
}
.video-analytics-container .back-wrap{
  padding-top: 16px;
  padding-left: 24px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: var(--text-color-BigGoB);
  cursor: pointer;
}
.video-analytics-container .back-wrap .bicon-arrowleft i{
  background-size: 16px;
}
.video-analytics-container .header{
  background: var(--background-1);
  padding-top: 12px;
  padding-bottom: 48px;
}
.video-analytics-container .thumbnail-wrap{
  position: relative;
  width: 100px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}
.video-analytics-container .thumbnail-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-analytics-container .thumbnail-wrap .length{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%, 0px);
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-color-TextWhite);
  background-color: var(--opacityBg-color-BgOGray2);
  border-radius: 30px;
  padding: 2px 6px;
}
.video-analytics-container .icon-count-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 24px;
}
.video-analytics-container .icon-count-wrap [class*="bicon-"]{
  cursor: default;
  margin: 0;
}
.video-analytics-container .icon-count-wrap .item{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  text-align: center;
  color: var(--foreground-1);
}
.video-analytics-container .info{
  background: var(--background-1);
  margin-top: 24px;
  padding: 16px 96px;
}
.video-analytics-container .updateTime{
  font-size: 14px;
  color: var(--foreground-3);
  text-align: center;
  margin-bottom: 16px;
}
.video-analytics-container .datarow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}
.video-analytics-container .datarow .l{
  font-size: 16px;
  color: var(--foreground-2);
  text-align: left;
}
.video-analytics-container .datarow .r{
  font-weight: 700;
  font-size: 18px;
  color: var(--foreground-1);
  text-align: right;
}
.video-analytics-container .datarow span{
  font-size: 13px;
  color: var(--foreground-1);
  font-weight: normal;
}
.video-analytics-container .datarow .r span{
  color: var(--text-color-BigGoB);
}
.video-analytics-container .datarow .edited{
  color: var(--foreground-3);
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 871px){
  .video-analytics-btn{
    background: var(--bg-color-BgGray4);
    border-radius: 0;
    transform: none;
    position: static;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
  }
  .video-analytics-btn .l,
  .video-analytics-btn .r{
    display: flex;
    align-items: center;
  }
  .video-analytics-btn .r{
    color: var(--btn-color-BigGoB3);
  }
  .video-analytics-container{
    z-index: 2001;
  }
  .video-analytics-container .thumbnail-wrap{
    width: 80px;
    height: 145px;
  }
  .video-analytics-container .header{
    padding-bottom: 12px;
    margin-top: 72px;
  }
  .video-analytics-container .info{
    margin-top: 16px;
    padding: 16px 0;
  }
  .video-analytics-container .datarow{
    height: 55px;
    padding: 0 28px;
    border-bottom: 1px solid var(--stroke-2);
  }
  .video-analytics-container .datarow:last-child{
    border-bottom: none;
  }
  .video-analytics-container .datarow .r{
    font-size: 16px;
  }
}

/* 回覆評論 */
.comment-content{
  position: fixed;
  top: 0;
  bottom: 0px;
  right: 0px;
  left: 0px;
  z-index: 2100;
  background-color: var(--background-overlay);

  display: flex;
  align-items: flex-end;
}
.comment-content .comment-content-card{
  display: flex;
  flex-direction: column;
  padding-bottom: 53px;
}
.comment-content .comment-content-card.mobile-menu-card{
  padding-bottom: 0px;
}
.comment-content .comment-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--stroke-2);
  background: var(--background-1);
  color: var(--foreground-2);
  font-size: 16px;
  height: 55px;
  padding: 0 16px;
}

.comment-content .input-area{
  display: flex;
  align-items: center;
  border-top: 1px solid var(--stroke-2);
  background: var(--bg-color-BgWhite);
  min-height: 48px;
  padding: 6px 8px;
}
.comment-content .input-area .reply-comment-wrap{
  position: relative;
  min-height: 36px;
  width: 100%;
  background: var(--bg-color-BgGray2);
  border-radius: 10px;
}
.comment-content .input-area .reply-input-editor{
  width: 100%;
  height: 100%;
  padding: 8px;
  outline: 0;
}
.comment-content .input-area .reply-input-placeholder{
  position: absolute;
  top: 9px;
  left: 10px;
  font-size: 14px;
  color: var(--text-color-TextGray1);
}

/* 蓋板上傳進度 */
.uploading-wrap{
  background-color: var(--background-overlay);
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploading-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 422px;
  height: fit-content;
  padding: 24px 50px;
  background-color: var(--background-1);
  box-shadow: 0px 3px 7px var(--shadow-1);
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  color: var(--foreground-3);
}
.uploading-wrap .circleWrap{
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* background-color: var(--btn-color-BigGoY3); */
  /* 註：(進度 * 3.6 )deg */
  background: conic-gradient(var(--btn-color-BigGoY3) 0deg,
                            var(--stroke-2) 0deg);
  margin-bottom: 10px;
}
.uploading-wrap .circle-progress{
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--bg-color-BgWhite);
  font-weight: 700;
  font-size: 18px;
}


/* atuser hashtag建議 */
div[hashtag],
a[hashtag],
a[commitLink]{
  display: inline-block;
  color: var(--product-link);
  cursor: pointer;
}
div[atuser],
a[atuser]{
  display: inline-block;
  color: var(--text-color-BigGoB);
  cursor: pointer;
  font-weight: bold;
}
a[commitLink]{
  color: var(--product-link);
}

.comment-image{
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.comment-image.horizontal img{max-width: 180px;}
.comment-image.vertical img{max-height: 160px;}

.biggo-texteditor-suggest{
  position: absolute;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px 0;
  background: var(--bg-color-BgWhite);
  box-shadow: 0 3px 7px var(--shadow-color-Sd1);
  color: var(--foreground-1);
  border-radius: 0px 0px 10px 10px;
  user-select: none;
}
.biggo-texteditor-suggest ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.biggo-texteditor-suggest li:hover{
  background-color: var(--bg-color-BgGray1);
}
.biggo-texteditor-suggest li > div{
  display: flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  padding: 0 16px;
}
.biggo-texteditor-suggest li > div.atuser{
  min-height: 69px;
}
.biggo-texteditor-suggest .atuser .userimg{
  margin-right: 8px;
}
.biggo-texteditor-suggest .atuser .name{
  font-size: 16px;
  color: var(--text-color-TextGray2);
}
.biggo-texteditor-suggest .atuser .atid{
  font-weight: 700;
  font-size: 14px;
  color: var(--foreground-1);
}

.biggo-texteditor-suggest strong{
  font-weight: 400;
  color: var(--text-color-BigGoB);
}

/* 影片popup元素 */
.popup-component{
  width: 1024px;
  height: 692px;
  border-radius: 10px;
  background-color: var(--background-1);
  box-shadow: 0px 3px 7px 0px var(--shadow-1);
}
[data-theme='dark'] .popup-component{
  box-shadow: 0px 0px 4px 2px var(--shadow-1), 0px 2px 12px 8px rgba(15, 21, 25, 0.15);
}
.product-editor-header{
  padding: 16px 24px 0;
  color: var(--foreground-1);
  font-size: 20px;
  font-weight: bold
}
.popup-component-body{
  height: 582px;
  padding: 16px 24px;
  gap: 24px;
}
.popup-component-body-video-wrap{
  width: 310px;
  height: 100%;
  overflow: hidden;
}
.popup-component-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--background-2);
  padding: 12px 24px;
  gap: 16px;
  border-radius: 0 0 10px 10px;
}
@media (max-height: 671px), (max-width: 1024px){
  .popup-component{
    width: 953px;
    height: 611px;
  }
  .popup-component-body{
    height: 501px;
  }
  .popup-component-body-video-wrap{
    width: 271px;
  }
}
.product-search-main{
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0px;
  background: var(--background-overlay);
  z-index: 1000;
}
.product-search-wrap{
  position: relative;
  width: 1024px;
  background: var(--background-1);
  border-radius: 10px;
}
.product-search-header{
  padding: 16px;
  background: var(--background-2);
  border-bottom: 1px solid var(--stroke-2);
  text-align: start;
  font-size: 16;
  font-weight: bold;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  font-size: 20px;
}
.product-search-body{
  display: flex;
  height: 569px;
  padding: 12px 24px;
}
.product-search-main:has(.affiliate-info) .product-search-body{
  height: 539px;
}
.product-search-footer{
  height: 63px;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px 11px 24px;
  background: var(--background-2);
  border-top: 1px solid var(--stroke-2);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.product-search-footer:has(.affiliate-info){
  height: fit-content;
}
.product-search-no-result-text{
  color: var(--foreground-2);
  font-size: 14px;
  height: 100%
}
@media (max-height: 671px), (max-width: 1024px){
  .product-search-wrap{
    width: 954px;
  }
  .product-search-body{
    height: 504px;
  }
  .product-search-main:has(.affiliate-info) .product-search-body{
    height: 452px;
  }
}
/* 影片popup元素 END */

/* PC 影片蓋版留言頁 */
.film-fixed-cover-container{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-color-BgWhite);
  z-index: 1499;
  display: flex;
  flex-direction: row;
}
.film-fixed-cover-container .exit-btn{
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
}
.film-fixed-cover-container .more-btn{
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
}
.film-fixed-cover-container .video-container{
  flex: 1;
  background: rgb(0, 0, 0);
  position: relative;
  overflow: hidden;
}
.film-fixed-cover-container .content-container{
  flex: 0 0 640px;
  width: 640px;
  display: flex;
  flex-direction: column;
  color: var(--foreground-1);
  position: relative;
  z-index: 10;
}
.film-fixed-cover-container .video-info{
  border-bottom: 1px solid var(--stroke-2);
  background: var(--background-1);
  padding: 32px 32px 24px;
}
.film-fixed-cover-container .video-info .userinfo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.film-fixed-cover-container .video-info .profileimg{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}
.film-fixed-cover-container .video-info .profileimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-fixed-cover-container .video-info .name{
  font-size: 20px;
  font-weight: bold;
  color: var(--foreground-1);
  word-wrap: break-word;
  word-break: break-word;
}
.film-fixed-cover-container .video-info .title-area{
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 8px;
  word-break: break-word;
  max-height: 30vh;
  overflow-y: auto;
}
.film-fixed-cover-container .video-info .description-area{
  font-size: 16px;
  margin-bottom: 4px;
  word-break: break-word;
  max-height: 30vh;
  overflow-y: auto;
}
.film-fixed-cover-container .video-info .description-area::-webkit-scrollbar{
	width: 15px;
}
.film-fixed-cover-container .video-info .description-area::-webkit-scrollbar-thumb{
  width: 7px;
  border-radius: 6px;
}
.film-fixed-cover-container .video-info .createtime-area{
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--foreground-4);
}
.film-fixed-cover-container .video-info .createtime-area .L{
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 12px;
}
.film-fixed-cover-container .video-info .createtime-area .showMoreDescription{
  color: var(--foreground-3);
}
.film-fixed-cover-container .video-info .createtime-area .showMoreDescription:hover{
  color: var(--foreground-1);
}
.film-fixed-cover-container .video-info .createtime-area .showMoreDescription:hover i{
  filter: var(--svg-color-TextGray4);
}
.film-fixed-cover-container .video-info .bottom-row{
  display: flex;
  align-items: center;
}
.film-fixed-cover-container .video-info .bottom-row .emoji-col{
  margin-right: 12px;
}
.film-fixed-cover-container .video-info .bottom-row .buttons-col{
  display: flex;
  align-items: flex-start;
  align-self: flex-end;
  font-size: 14px;
  color: var(--foreground-3);
  gap: 24px;
}
/* PC 影片蓋版留言頁 END */

/* 影片權限 */
.limit-state{
  display: flex;
  align-items: center;
  line-height: 0;
}

/* 單一影片頁 */
.film-single-container{
  display: flex;
  border-left: 1px solid var(--stroke-2);
  border-right: 1px solid var(--stroke-2);
}

.film-single-container .main-video-wrap{
  flex-grow: 1;
  border-right: 1px solid var(--stroke-2);
}
.film-single-container .more-video-wrap{
  flex-shrink: 0;
  flex-basis: 416px;
  padding: 24px;
  background-color: var(--background-1);
}

.film-single-container .video-container{
  width: 100%;
  height: 600px;
  background-color: var(--background-inverted);
  position: relative;
}
.film-single-container .video-container .back-film-home{
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-color-TextWhite);
  text-shadow: 0px 0px 3px rgba(109, 126, 152, 0.7);
  padding-right: 12px;
  cursor: pointer;
  user-select: none;
}
.film-single-container .video-container .back-film-home:hover{
  background-color: var(--opacityBg-color-BgOGray2);
}
.film-single-container .video-container .back-film-home span{
  opacity: 0;
}
.film-single-container .video-container .back-film-home:hover span{
  opacity: 1;
}

.film-single-container .video-info-container{
  display: flex;
  flex-grow: 1;
  border-left: 1px solid var(--stroke-2);
}
.film-single-container .more-video-wrap .video-info-container{
  display: block;
  position: relative;
  border-left: 0;
}
.film-single-container .video-info-wrap{
  background-color: var(--background-1);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--stroke-2);
}
.film-single-container .video-info-wrap .video-info{
  padding: 24px 24px 0;
}
.film-single-container .video-info h1.video_title-area{
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 16px;
}
.film-single-container .video-info h1.description-area{
  font-size: 16px;
  color: var(--foreground-1);
  line-height: 1.5;
  margin-bottom: 16px;
  word-break: break-word;
  max-height: 30vh;
}
.film-single-container .video-info h1.description-area::-webkit-scrollbar{
	width: 15px;
}
.film-single-container .video-info h1.description-area::-webkit-scrollbar-thumb{
  width: 7px;
  border-radius: 6px;
}
.film-single-container .video-info-wrap .video-info .showMoreDescription{
  color: var(--foreground-3);
}
.film-single-container .video-info-wrap .video-info .showMoreDescription:hover{
  color: var(--foreground-1);
}
.film-single-container .video-info-wrap .video-info .showMoreDescription:hover i{
  filter: var(--svg-color-TextGray4);
}
.film-single-container .video-info .video-metadata{
  font-size: 13px;
  color: var(--foreground-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.film-single-container .video-info .bottom-row{
  display: flex;
  align-items: center;
}
.film-single-container .video-info .bottom-row .emoji-col{
  margin-right: 8px;
}
.film-single-container .video-info .bottom-row .buttons-col{
  display: flex;
  align-items: flex-start;
  align-self: flex-end;
  font-size: 14px;
  color: var(--foreground-3);
  gap: 16px;
}


.film-single-container .author-info{
  padding: 20px 24px 16px;
  /* border-bottom: 1px solid var(--stroke-2); */
}
.film-single-container .author-info .profile-link{
  display: flex;
  align-items: center;
  color: var(--foreground-1);
}
.film-single-container .author-info .profileimg{
  width: 42px;
  height: 42px;
  margin-right: 10px;
}
.film-single-container .author-info .name{
  font-weight: 700;
  font-size: 20px;
  color: var(--foreground-1);
}
.film-single-container .author-info .fans{
  font-weight: 700;
  font-size: 15px;
  color: var(--foreground-1);
}
.film-single-container .author-info .span-unit{
  font-weight: 400;
  font-size: 13px;
  color: var(--foreground-3);
}
.film-single-container .author-info .analytics{
  background: var(--opacityBg-color-BgOGray2);
  color: var(--text-color-TextWhite);
  text-shadow: none;
  box-shadow: none;
  padding: 0 8px;
  gap: 4px;
}
.film-single-container .author-info .analytics:hover{
  background-color: var(--bg-color-BgGray4);
}
.film-single-container .author-info .subuser-btn{
  padding: 7px 24px;
}
.film-single-container .analytics-detail-wrap{
  color: var(--foreground-1);
  background: var(--background-2);
  border-radius: 8px;
  padding: 16px 24px 20px;
  margin-top: 12px;
}
.film-single-container .analytics-detail-wrap .head{
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--foreground-3);
  margin-bottom: 16px;
}
.film-single-container .analytics-detail-wrap .head .title{
  color: var(--foreground-1);
  font-weight: 700;
  font-size: 16px;
  margin-right: 8px;
}
.film-single-container .analytics-detail-wrap .content{
  display: flex;
  justify-content: space-between;
}
.film-single-container .analytics-detail-wrap .middle-line{
  margin: 0 44px;
  width: 1px;
  border-right: 1px solid var(--stroke-2);
}
.film-single-container .analytics-detail-wrap .content-L,
.film-single-container .analytics-detail-wrap .content-R{
  flex-grow: 1;
}
.film-single-container .analytics-detail-wrap .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}
.film-single-container .analytics-detail-wrap .l{
  font-size: 14px;
  color: var(--foreground-2);
}
.film-single-container .analytics-detail-wrap .r{
  font-weight: 700;
  font-size: 16px;
  color: var(--foreground-1);
  text-align: right;
}
.film-single-container .analytics-detail-wrap .edited{
  color: var(--foreground-3);
  font-size: 13px;
  font-weight: 400;
}


.film-single-container .more-video-wrap .title{
  font-weight: 700;
  font-size: 18px;
  color: var(--foreground-1);
}
.film-single-container .more-video-wrap .video-card-view{
  padding-top: 16px;
  gap: 24px 20px;
  max-width: none;
}
.film-single-container .more-video-wrap .card-item{
  width: calc(50% - 10px);
}
.film-single-container .more-video-wrap .card-item .video-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.film-single-container .more-video-wrap .card-item .video-container{
  height: 247px;
}
.film-single-container .more-video-wrap .card-item .bicon-more{
  opacity: 0;
}
.film-single-container .video-info-container:hover .bicon-more{
  opacity: 1;
}

@media (max-width: 1700px){
  .film-single-container {
    border: 0;
  }
}
@media (max-width: 1180px){ /*pad 留言pop*/
  .film-fixed-cover-container .content-container{
    flex: 0 0 400px;
    width: 400px;
  }
}
@media (max-width: 871px){
  .film-single-container{
    flex-direction: column;
  }
  .film-single-container .more-video-wrap .card-item{
    width: calc(25% - 10px);
  }
  .film-single-container .more-video-wrap .video-card-view{
    padding: 16px 0;
  }
}
@media (max-width: 576px){
  .film-single-container .more-video-wrap .card-item{
    width: calc(50% - 10px);
  }
}
/* 單一影片頁 END */

/* 找不到影片 */
.video-container.notfound{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--bg-color-BgGray3);
}
.video-container.notfound .title,
.videoNotFound-mweb .title{
  font-weight: 700;
  font-size: 20px;
  color: var(--foreground-1);
  margin-bottom: 8px;
}
.video-container.notfound .desc,
.videoNotFound-mweb .desc{
  font-size: 16px;
  color: var(--text-color-TextGray3);
  margin-bottom: 16px;
}
.video-container.notfound ._biggo-btn{
  color: var(--text-color-TextGray3);
  border: solid 1px var(--border-color-BorderGray1);
  background-color: transparent;
  margin: 0;
  box-shadow: none;
}
.video-container.notfound ._biggo-btn:hover{
  background-color: var(--stroke-2);
}
.videoNotFound-mweb{
  position: fixed;
  inset: 0px;
  z-index: 1499;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: var(--text-color-TextWhite);
  text-align: center;
  padding: 0 15vw;
}
.videoNotFound-mweb .biggo-logo{
  width: 87px;
  margin-bottom: 40px;
}
.videoNotFound-mweb .title{
  color: inherit;
}
.videoNotFound-mweb .desc{
  color: inherit;
}
.videoNotFound-mweb ._biggo-btn{
  color: inherit;
  border: solid 1px #FFF;
  background-color: transparent;
  margin: 0;
  box-shadow: none;
}
/* 找不到影片 END */

/* 留言樹 */
.comment-count{
  padding: 16px 0 4px 24px;
  color: var(--text-color-TextGray2);
}
.comment-messages-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.messages-area{
  flex: 1;
  overflow-y: auto;
  background: var(--background-2);
  z-index: 1;
}
.messages-area .comment-next-watcher{
  text-align: center;
}
.messages-area .nodata{
  display: flex;
  justify-content: center;
  height: 100%;
  padding-top: 80px;
  color: var(--foreground-3);
  background-color: var(--background-1);
  font-size: 16px;
}
.messages-area ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.messages-area li{
  position: relative;
}
.messages-area li.tier1{
  background-color: var(--background-1);
  border-bottom: 1px solid var(--stroke-2);
  padding-top: 16px;
  padding-bottom: 16px;
}
.messages-area .comment-item{
  display: flex;
  position: relative;
  color: var(--foreground-1);
  font-size: 16px;
  padding-left: 32px;
  padding-right: 24px;
}
.messages-area .comment-wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.messages-area .comment-body-wrap{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.messages-area .comment-body{
  width: 100%;
  flex-grow: 1;
  margin-left: 12px;
  word-break: break-word;
}
.messages-area .reply-wrap{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 6px;
  width: 100%;
}
.messages-area .reply-wrap .messages-input-area{
  display: flex;
  flex-direction: column;
  background: unset;
  width: 100%;
  border: none!important;
  padding: 16px 0px 0px 8px!important;
  align-items: flex-start;
}
.messages-area .reply-wrap .profileimg{
  display: flex;
  align-items: flex-start;
  height: 100%!important;
  width: 28px!important;
  padding-top: 22px;
  background-color: unset;
}
.messages-area .reply-wrap .profileimg::after{
  content: ' ';
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  display: block;
  position: absolute;
  top: unset;
}
.messages-area .reply-wrap .profileimg img{
  width: 28px;
  height: 28px;
  border-radius: 100%;
}

.messages-area .comment-btns{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--foreground-3);
}
.messages-input-area .comment-btns,
.messages-area .reply-wrap .comment-btns{
  flex-direction: row;
  gap: 4px;
  width: 100%;
  align-items: center;
  justify-content: end;
}
.messages-area .reply-wrap .comment-btns .hideReply{
  align-items: center;
  height: 100%;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 12px;
}
.messages-area .reply-wrap .comment-btns .hideReply:hover{
  background-color: var(--opacityBg-color-BgOGray1);
}
.messages-input-area .comment-btns .sendReply,
.messages-area .comment-btns .sendReply{
  font-size: 14px;
  align-items: center;
  padding: 4px 8px;
  gap: 6px;
  border-radius: 8px;
  cursor: pointer;
}
.messages-input-area .comment-btns .sendReply .bicon-sendmsg,
.messages-area .comment-btns .sendReply .bicon-sendmsg{
  width: 22px;
  height: 22px;
}
.messages-input-area .comment-btns .sendReply .bicon-sendmsg i,
.messages-area .comment-btns .sendReply .bicon-sendmsg i{
  width: 18px;
  height: 18px;
}
.messages-input-area .comment-btns .sendReply.disabled,
.messages-area .comment-btns .sendReply.disabled{
  color: var(--border-color-BorderGray1);
}
.messages-input-area .comment-btns .sendReply.disabled i,
.messages-area .comment-btns .sendReply.disabled i{
  filter: var(--svg-color-BorderGray1);
}
.messages-input-area .comment-btns .sendReply.active,
.messages-area .comment-btns .sendReply.active{
  color: var(--text-color-BigGoB);
}
.messages-input-area .comment-btns .sendReply.active i,
.messages-area .comment-btns .sendReply.active i{
  filter: var(--svg-color-BigGoB4);
}
.messages-input-area .comment-btns .sendReply.active:hover,
.messages-area .comment-btns .sendReply.active:hover{
  background-color: var(--opacityBg-color-BgOGray1);
}
.messages-input-area .comment-btns .sendReply.active:hover i,
.messages-area .comment-btns .sendReply.active:hover i{
  filter: var(--svg-color-BigGoB);
}
.messages-area .profileimg{
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50px;
  overflow: hidden;
}
.messages-area .profileimg::after{
  content: ' ';
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  display: block;
  position: absolute;
  top: 0;
}
.messages-area li.tier2 .profileimg,
.messages-area li.tier3 .profileimg{
  width: 32px;
  height: 32px;
}
.messages-area li.tier2 .profileimg::after,
.messages-area li.tier3 .profileimg::after {
  width: 32px;
  height: 32px;
  /* top: 12px; */
}
/* .messages-area .profileimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
} */
.messages-area .username{
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.messages-area .username a{
  font-size: 15px;
  color: var(--foreground-2);
  font-weight: 700;
  text-decoration: none;
}
.messages-area .username .author{
  background-color: var(--bg-color-BigGoB1);
  color: var(--text-color-BigGoB);
  font-size: 13px;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: 6px;
}
.messages-area .pinned-comment{
  display: flex;
  align-items: center;
  color: var(--text-color-BigGoB);
  font-size: 12px;
  padding-left: 6px;
}
.messages-area .msgdel{
  font-size: 14px;
  color: var(--foreground-4);
}
.messages-area .msgspam{
  width: fit-content;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--discount);
  background-color: var(--bg-color-Negative1);
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 4px;
  border-radius: 4px;
}
.messages-area .msgspam .bicon-alert,
.messages-area .msgspam .bicon-alert i{
  width: 14px;
  height: 14px;
  cursor: unset;
}
.messages-area .msgspam .bicon-alert i{
  filter: var(--svg-color-Negative2);
}
.messages-area .detail{
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  font-size: 13px;
  color: var(--foreground-3);
  padding: 6px 0;
}
.messages-area .detail .reply-btn{
  display: inline-block;
  margin-left: 16px;
  cursor: pointer;
}
.messages-area .detail .reply-btn:hover{
  color: var(--foreground-1);
  text-decoration: underline;
}
.messages-area .comment-reply-line,
.messages-area .comment-reply-line-child{
  position: absolute;
  border: 1px solid var(--background-4);
  height: calc(100% - 23px);
  top: 23px;
}
.messages-area li.tier1 .comment-reply-line-child,
.messages-area li.tier2 .comment-reply-line{
  left: 52px;
}
.messages-area li.tier2 .comment-reply-line-child,
.messages-area li.tier3 .comment-reply-line,
.messages-area li.tier3 .comment-reply-line-more{
  left: 97px;
}
.messages-area .comment-reply-line-more{
  position: absolute;
  top: 0px;
  left: 52px;
  z-index: 1;
  width: 33px;
  height: 30px;
  border-bottom-left-radius: 10px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-color: var(--background-4);
  border-width: 2px;
}
/* 留言更多按鈕 */
.messages-area .comment-reply-more{
  position: relative;
  font-size: 13px;
  color: var(--foreground-3);
  padding-left: 80px;
}
.messages-area .comment-reply-more .comment-reply-line-more{
  height: 13px;
  width: 22px;
}
.messages-area .comment-reply-more .loadmore-btn{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.messages-area .comment-reply-more .loadmore-btn:hover{
  color: var(--foreground-1);
  text-decoration: underline;
}
.messages-area .comment-reply-more .loadmore-btn .bicon-loading i{
  background-size: cover !important;
}
/* 留言更多按鈕 END */
.messages-area li.tier2 .comment-item{
  padding-left: 85px;
  padding-top: 12px;
}
.messages-area li.tier3 .comment-item{
  padding-left: 125px;
}
.messages-area .comment-item .bicon-more{
  opacity: 0;
}
.messages-area .comment-item:hover .bicon-more{
  opacity: 1;
}
@media (max-width: 871px){
  .comment-content-card .messages-area{
    padding-bottom: 53px;
  }
  .messages-area li.tier1{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .messages-area .comment-item{
    font-size: 14px;
    padding-left: 12px;
    padding-right: 14px;
    background-color: unset;
  }
  .messages-area li.tier2 .comment-item{
    padding-left: 41px;
    padding-top: 0px;
  }
  .messages-area li.tier2 li.tier3 .comment-item{
    padding-left: 70px;
  }
  .messages-area .comment-item[focus=true]{
    background-color: var(--background-2);
  }
  .messages-area .comment-wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .messages-area .comment-body-wrap{
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .messages-area .comment-body{
    margin-left: 6px;
  }
  .comment-messages-wrap .reply-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 6px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
  .comment-messages-wrap .reply-wrap .messages-input-area{
    padding: 6px 8px!important;
    background: var(--background-1);
    z-index: 999;
  }
  .messages-area .bicon-sendmsg.hover:hover{
    background-color: var(--opacityBg-color-BgOGray1);
  }
  .messages-area .bicon-sendmsg.hover:hover i{
    filter: var(--svg-color-BigGoB);
  }
  .messages-area .comment-btns{
    flex-direction: row;
  }
  .messages-area .profileimg{
    width: 32px;
    height: 32px;
  }
  .messages-area .profileimg::after{
    content: ' ';
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    display: block;
    position: absolute;
    top: 0;
  }
  .messages-area li.tier2 .profileimg,
  .messages-area li.tier3 .profileimg {
    line-height: 0;
    height: 22px;
    width: 22px;
  }
  .messages-area li.tier2 .profileimg::after,
  .messages-area li.tier3 .profileimg::after {
    width: 22px;
    height: 22px;
    top: 0;
  }
  .messages-area .username{
    font-size: 13px;
    font-weight: 400;
  }
  .messages-area .comment-reply-line,
  .messages-area .comment-reply-line-child{
    position: absolute;
    top: 0px;
    z-index: 1;
    border: 1px solid var(--bg-color-BgGray3);
    height: 100%;
  }
  .messages-area li.tier1 .comment-reply-line-child,
  .messages-area li.tier2 .comment-reply-line{
    left: 25px;
  }
  .messages-area li.tier2 .comment-reply-line-child,
  .messages-area li.tier3 .comment-reply-line,
  .messages-area li.tier3 .comment-reply-line-more{
    left: 54px;
  }
  .messages-area .comment-reply-line-more{
    position: absolute;
    top: 0px;
    left: 25px;
    width: 16px;
    height: 14px;
    border-bottom-left-radius: 10px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: var(--bg-color-BgGray3);
    border-width: 2px;
  }
  .messages-area .comment-reply-more{
    position: relative;
    font-size: 13px;
    color: var(--text-color-TextGray2);
    padding-left: 45px;
  }
  .messages-area .comment-item .bicon-more{
    opacity: 1;
  }
}
/* 留言樹 END */

/* 留言樹單一影片版 */
.comment-messages-wrap.single-page{
  flex-direction: column-reverse;
}
.comment-messages-wrap.single-page .messages-input-area{
  border-top: none;
  border-bottom: 1px solid var(--stroke-2);
}
/* 留言樹單一影片版 END */

/* 留言輸入框 */
.messages-input-area{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--stroke-2);
  background: var(--background-1);
  min-height: 60px;
  padding: 10px 16px;
  position: relative;
}
.messages-input-area .input-replyName{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 2px 4px 8px 4px;
  gap: 4px;
  font-size: 13px;
  line-height: 19px;
}
.messages-input-wrap{
  min-height: 40px;
  width: 100%;
  position: relative;
  background: var(--background-3);
  border-radius: 10px;
  overflow: hidden;
  max-height: 400px;
  overflow: auto;
}
.comment-messages-wrap.single-page .messages-input-wrap{
  max-height: 480px;
}
.messages-input-wrap .editor-container{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding-left: 16px;
}
.messages-input-wrap .input-editor-wrap{
  min-width: 0;
}
.messages-input-wrap .input-editor{
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  /* overflow-wrap: break-word; */
  overflow-wrap: anywhere;
  padding: 8px 0;
}
/* 捲軸寬度 */
.messages-input-wrap::-webkit-scrollbar {
  width: 12px;
}
/* 捲軸背景顏色 */
.messages-input-wrap::-webkit-scrollbar-track {
  background: transparent;
}
/* 捲軸把手顏色 */
.messages-input-wrap::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 60px;
}
/* 捲軸hover把手顏色 */
.messages-input-wrap::-webkit-scrollbar-thumb:hover {
  background-clip: padding-box;
  border: 3px solid transparent;
}

.messages-input-wrap .input-placeholder{
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  color: var(--input-placeholder);
  font-size: 16px;
  padding-left: 16px;
  pointer-events: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 上傳圖片 */
.upload-img-wrap{
  padding-bottom: 8px;
}
.upload-img-wrap .preview-item{
  position: relative;
  display: inline-block;
}
.upload-img-wrap .preview-item img{
  /* width: 100%; */
  border-radius: 8px;
  overflow: hidden;
}
.upload-img-wrap .preview-item.horizontal img{width: 90px;}
.upload-img-wrap .preview-item.vertical img{height: 80px;}

.upload-img-wrap .preview-item:hover .cover,
.upload-img-wrap .preview-item:hover .del{
  opacity: 1;
}
.upload-img-wrap .cover,
.upload-img-wrap .del{
  opacity: 0;
}
.upload-img-wrap .uploading,
.upload-img-wrap .cover{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: rgba(13, 40, 72, 0.40);
  border-radius: 8px;
}
.upload-img-wrap .del{
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  background: #24343F;
  border: 2px solid var(--bg-color-BgWhite);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 工具 */
.messages-input-wrap .input-tools{
  height: 40px;
  display: flex;
  align-items: center;
  align-self: flex-end;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding-right: 10px;
}
@media (max-width: 871px){
  .messages-input-area-wrap{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 3;
  }
  .messages-input-area{
    min-height: 48px;
    padding: 6px 8px;
    flex-direction: column;
    z-index: 1;
  }
  .messages-input-back-area{
    position: fixed;
    height: calc(100% - 53px);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(13, 40, 72, 0.4);
    z-index: 2;
  }
  .messages-input-back-area.reply{
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(13, 40, 72, 0.4);
    z-index: 2;
  }
  .upload-img-wrap{
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .upload-img-wrap .preview-item.horizontal img{width: 80px;}
  .upload-img-wrap .preview-item.vertical img{height: 70px;}
  .messages-input-wrap{
    max-height: 260px;
  }

  .comment-image.horizontal img{max-width: 160px;}
  .comment-image.vertical img{max-height: 140px;}

  .messages-input-wrap .input-editor-wrap{
    /* padding: 8px; */
    flex-grow: 1;
    padding-left: 8px;
  }
  .messages-input-wrap .input-placeholder{
    font-size: 14px;
    padding-left: 8px;
    pointer-events: none;
  }
  .upload-img-wrap .del{
    opacity: 1;
  }
}
.messages-input-area[btn]{ /*按鈕版本*/
  background: #000000;
  height: 58px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}
.messages-input-area[btn] .messages-input-wrap{
  background: var(--opacityBg-color-BgOGray1);
}
.messages-input-area[btn] .input-placeholder{
  color: var(--border-color-BorderGray1);
}
/* 留言輸入框 END */



/* 影片結果列表 */
.video-card-view{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px;
}
.video-card-view .card-item{
  display: inline-block;
  /* width: 240px; */
  width: calc(25% - 16px);
}
.video-card-view .card-item .video-container{
  position: relative;
  width: 100%;
  height: 330px;
  border-radius: 12px;
  background-color: var(--background-3);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 4px;
}
.video-card-view .card-item .cancel-dislike{
  margin: 0;
  padding: 8px 16px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color-TextGray2);
  font-size: 14px;
}
.video-card-view .card-item .cancel-dislike:hover{
  background-color: var(--opacityBg-color-BgOGray1);
}
/* .video-card-view .card-item .like{
  display: flex;
  align-items: center;
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 14px;
  color: var(--text-color-TextWhite);
  z-index: 10;
}
.video-card-view .card-item .date{
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  color: var(--text-color-TextWhite);
  z-index: 10;
} */
.video-card-view .tl,
.video-card-view .tr,
.video-card-view .bl,
.video-card-view .br{
  display: flex;
  align-items: center;
  position: absolute;
  left: 12px;
  bottom: 6px;
  font-size: 14px;
  color: var(--text-color-TextWhite);
  z-index: 10;
}
.video-card-view .br{
  left: auto;
  right: 10px;
}
.video-card-view .tl{
  top: 6px;
  bottom: auto;
}
.video-card-view .tr{
  top: 6px;
  left: auto;
  right: 10px;
  bottom: auto;
}
.video-card-view .tr .bicon-close{
  background-color: var(--opacityBg-color-BgOGray2);
  width: 34px;
  height: 34px;
}

.video-card-view .video-container .bicon-product{
  background: var(--opacityBg-color-BgOGray2);
  border-radius: 5px;
  width: 24px;
  height: 24px;
}
.video-card-view .video-container .bicon-product i{
  filter: var(--svg-color-BgWhite);
  width: 14px;
  height: 14px;
}
.video-card-view .video-time{
  width: fit-content;
  min-width: 45px;
  height: 23px;
  background: var(--opacityBg-color-BgOGray2);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
}
.video-card-view .card-item .video-thumbnails{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card-view .card-item .desc{
  font-size: 13px;
  color: var(--foreground-1);
  margin-bottom: 4px;
  /* min-height: 40px; */
}
.video-card-view .card-item .user-info {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  gap: 2px;
  color: var(--foreground-1);
}
.video-card-view .video-profile {
  font-size: 12px;
  line-height: 17px;
  color: var(--foreground-3);
  display: flex;
  gap: 4px;
}
.video-card-view .card-item .user-info .profileimg{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 6px;
  flex-shrink: 0;
  position: relative;
}
.video-card-view .card-item .user-info .profileimg::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.video-card-view .card-item .user-info .profileimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card-view .card-item .user-info .name{
  /* flex-grow: 1; */
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: var(--foreground-3);
  min-width: 0;
}
.video-card-view .card-item .user-info:hover .name{
  color: var(--foreground-1);
  text-decoration: underline;
}
.video-card-view .card-item .video-info{
  font-size: 12px;
  color: var(--foreground-3);
  padding-top: 4px;
}
.video-card-view .view-cnt {
    display: flex;
    align-items: center;
}
.video-card-view .card-item.processing .video-container{ /*處理中...*/
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-TextWhite);
  background-color: #16283E;
  cursor: default;
  font-size: 14px;
}

@media (max-width: 871px){
  .video-card-view{
    padding: 0px 5px;
  }
  .video-card-view .bl{
    left: 10px;
  }
  .video-card-view .br{
    right: 8px;
  }
  .video-card-view .card-item{
    width: calc(50% - 6px);
  }
  .video-card-view .card-item .desc{
    margin-bottom: 2px;
  }
}
/* 影片結果列表 END */

/* 影片首頁列表 */
.white-page.film-fixed-header{
  color: var(--foreground-1);
  background-color: var(--background-2);
  height: 55px;
  justify-content: flex-start;
  z-index: 1500;
  -webkit-transition: -webkit-transform 225ms cubic-bezier(0,0,.2,1);
  transition: -webkit-transform 225ms cubic-bezier(0,0,.2,1);
  transition: transform 225ms cubic-bezier(0,0,.2,1);
  transition: transform 225ms cubic-bezier(0,0,.2,1),-webkit-transform 225ms cubic-bezier(0,0,.2,1);
}
.index-page.film-fixed-header[hide]{
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
.index-page.film-fixed-header-tagList{
  flex-direction: column;
  justify-content: center;
  top: 50px;
  height: 65px;
  z-index: 100;
  -webkit-transition: -webkit-transform 225ms cubic-bezier(0,0,.2,1);
  transition: -webkit-transform 225ms cubic-bezier(0,0,.2,1);
  transition: transform 225ms cubic-bezier(0,0,.2,1);
  transition: transform 225ms cubic-bezier(0,0,.2,1),-webkit-transform 225ms cubic-bezier(0,0,.2,1);
}
.index-page.film-fixed-header-tagList[hide]{
  -webkit-transform: translate3d(0,-200%,0);
  transform: translate3d(0,-200%,0);
}
.white-page.film-fixed-header .tabs > div.avtive:after {
  content: ' ';
  width: 100%;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--foreground-1);
}
.black-page.film-fixed-header .tabs > div.avtive:after {
  content: ' ';
  width: 100%;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--text-color-TextWhite);
  box-shadow: rgba(109, 126, 152, 0.4) 0px 0px 3px;
}
.index-page .tagList-wrap{
  position: relative;
  height: 70px;
  width: 100%;
  padding: 0 23px;
}
.index-page .tagList{
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0px 5px;
  overflow-x: scroll;
}
.index-page .tagList .suggest-tag{
  flex-shrink: 0;
  height: 30px;
  margin-top: 0;
}
.index-page .tagList .suggest-tag:last-child{
  margin: 0;
}
.index-page .tagList-wrap::-webkit-scrollbar,
.index-page .tagList::-webkit-scrollbar{
  display: none;
}
.index-page .tagList-wrap::-webkit-scrollbar-thumb,
.index-page .tagList::-webkit-scrollbar-thumb{
  display: none;
}
.index-page .tagList-wrap .tagList-arrow{
  z-index: 1;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
  background-color: var(--bg-color-BgWhite);
  box-shadow: rgba(165, 186, 213, 0.3) 0px 3px 7px;
  border-radius: 30px;
  transform: translate(0, -50%);
}
[data-theme='dark'] .index-page .tagList-wrap .tagList-arrow{
  background-color: var(--bg-color-BgGray4);
  box-shadow: rgba(17, 19, 22, 0.3) 0px 3px 7px;
}
.index-page .tagList-wrap .tagList-arrow-shadow{
  width: 45px;
  height: 100%;
  top: 0;
  position: absolute;
}
.index-page .tagList-wrap .tagList-arrow-shadow.right{
  left: 0px;
  background: linear-gradient(270deg,rgba(255,255,255,0)0%,#f9fafb 35%);
}
.index-page .tagList-wrap .tagList-arrow-shadow.left{
  right: 0px;
  background: linear-gradient(90deg,rgba(255,255,255,0)0%,#f9fafb 35%);
}
[data-theme='dark'] .index-page .tagList-wrap .tagList-arrow-shadow.right{
  background: linear-gradient(270deg,#1F1F1F 60%,rgba(31,31,31,0) 100%);
}
[data-theme='dark'] .index-page .tagList-wrap .tagList-arrow-shadow.left{
  background: linear-gradient(90deg,#1F1F1F 60%,rgba(31,31,31,0) 100%);
}
.index-page.video-card-view{
  max-width: none;
  padding-left: 6px;
  padding-right: 6px;
  gap: 0px;
}
[pc] .index-page.video-card-view{
  padding-top: 24px;
}
.index-page.video-card-view .card-item-wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: calc(var(--video-card-items-per-row) * (var(--video-card-items-max-width) + var(--video-card-items-margin-x)));
  margin: 0 auto;
}
.index-page.video-card-view .card-item{
  width: calc(100% / var(--video-card-items-per-row) - var(--video-card-items-margin-x));
  /* width: calc(176px + var(--video-card-items-margin-x)); */
  max-width: var(--video-card-items-max-width);
  margin-left: calc(var(--video-card-items-margin-x) / 2);
  margin-right: calc(var(--video-card-items-margin-x) / 2);
  margin-bottom: 24px;
}
.search-video-page{
  width: 100%;
}
.search-video-page .video-card-view .card-item .bicon-more,
.index-page.video-card-view .card-item .bicon-more{
  opacity: 0;
}
.search-video-page .video-card-view .card-item .video-info-container,
.index-page.video-card-view .card-item .video-info-container{
  position: relative;
  flex-grow: 1;
}
.search-video-page .video-card-view .card-item .video-info-container:hover .bicon-more,
.index-page.video-card-view .card-item .video-info-container:hover .bicon-more{
  opacity: 1;
}
.search-video-page .video-card-view .card-item:has(.biggo-dropdown.d-block) .bicon-more,
.index-page.video-card-view .card-item:has(.biggo-dropdown.d-block) .bicon-more{
  opacity: 1;
}
.search-video-page .video-card-view .card-item .video-info-container .biggo-dropdown::after,
.index-page.video-card-view .card-item .video-info-container .biggo-dropdown::after{
  content: ' ';
  width: 100%;
  height: 15px;
  display: block;
  position: absolute;
  top: 100%;
  pointer-events: none;
}
.search-video-page .video-card-view .card-item .video-info-container .biggo-dropdown.more-arrow-up::before,
.index-page.video-card-view .card-item .video-info-container .biggo-dropdown.more-arrow-up::before{
  left: 85%;
}
.no-more-results{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 167px;
  width: 100%;
  margin-top: -3rem !important;
  color: var(--foreground-3);
}
.index-page.video-card-view .card-item .video-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction:column;
}
.index-page.video-card-view .card-item .video-container{
  height: auto;
  /* max-width: var(--video-card-items-max-width); */
  aspect-ratio: 9/12.5;
  margin-bottom: 8px;
}

@media (max-width: 871px){
  [mobile] .index-page.video-card-view{
    padding-top: 71px;
  }
  .index-page.video-card-view .card-item{
    width: calc(100% / var(--video-card-items-per-row) - var(--video-card-items-margin-x));
    max-width: none;
    margin-bottom: 12px;
  }
  .index-page.video-card-view .card-item .video-container{
    max-width: none;
    position: relative;
  }
  .index-page.video-card-view > div > div.linear-gradient .card-item .video-container:not(.no-after):after{
    content: ' ';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, rgba(36, 52, 63, 0) 66.25%, rgba(13, 40, 72, 0.3) 100%), url(video_bg_food_04), url();
  }
  .index-page .tagList .suggest-tag{
    height: 28px;
    padding: 4px 12px;
  }
}
@media (max-width: 460px){
  .index-page.video-card-view{
    padding-top: 120px;
    padding-left: 4px;
    padding-right: 4px;
  }
}
/* 影片首頁列表 END */

/* 影片搜尋結果 */
.search-video-page .video-card-view{
  max-width: calc(var(--search-card-items-per-row) * calc(var(--video-card-items-max-width) + var(--search-card-items-margin-x)));
  margin: 0 auto;
}
.search-video-page .video-card-view .card-item{
  width: 214px;
  margin-left: calc(var(--search-card-items-margin-x) / 2);
  margin-right: calc(var(--search-card-items-margin-x) / 2);
  margin-bottom: 24px;
}
.search-video-page .video-card-view .card-item .video-container{
  height: auto;
  max-width: 214px;
  aspect-ratio: 9/12.5;
  margin-bottom: 8px;
}
.search-video-page .video-card-view .card-item .video-container .bl .play-icon{
  width: fit-content;
  height: 23px;
  filter: drop-shadow(0px 0px 3px rgba(109, 126, 152, 0.75));
}
@media (max-width: 871px){
  .search-video-page .video-card-view{
    max-width: none;
  }
  .search-video-page .video-card-view .card-item{
    width: calc(100% / var(--search-card-items-per-row) - var(--search-card-items-margin-x));
    max-width: none;
    margin-bottom: 12px;
  }
  .search-video-page .video-card-view .card-item .video-container{
    max-width: none;
    position: relative;
  }
  .search-video-page .video-container:not(:has(.skeleton-block)):after{
    content: ' ';
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, rgba(36, 52, 63, 0) 66.25%, rgba(13, 40, 72, 0.3) 100%), url(video_bg_food_04), url();
    pointer-events: none;
  }
}
/* 影片搜尋結果 END */

/* user結果列表 */
.video-user-list{
  display: flex;
  flex-direction: column;
  max-width: 738px;
  width: 100%;
  padding: 0px 24px;
  gap: 4px;
  margin: 0 auto 24px;
}
.video-user-list .user-container{
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 16px;
}
.video-user-list .user-container:not(.title,.skeleton):hover{
  background-color:var(--opacityBg-color-BgOGray1)
}
.video-user-list .user-container.title{
  justify-content: space-between;
  align-items: center;
  padding: 8px 0px 10px;
  border-bottom: 1px solid var(--stroke-2);
}
.video-user-list .user-container.title .back{
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--foreground-3);
  width: 75px;
  height: 36px;
  padding: 7px 10px 7px 7px;
  gap: 8px;
  border-radius: 8px;
}
.video-user-list .user-container.title .back:hover{
  background-color:var(--opacityBg-color-BgOGray1);
}
.video-user-list .user-container.title .title{
  color: var(--foreground-1);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}
.video-user-list .profileimg{
  width: 56px;
  height: 56px;
  margin-right: 12px;
}
.video-user-list .info{
  flex-grow: 1;
}
.video-user-list .info .name-wrap{
  gap: 3px;
}
.video-user-list .info .name{
  font-weight: 700;
  font-size: 17px;
  line-height: 25px;
  color: var(--foreground-1);
}
.video-user-list .info .atuserid{
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--foreground-3);
}
.video-user-list .subuser-btn{
  padding: 4px 15px;
  height: 28px;
  align-items: center;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.video-user-list .subuser-btn.active{
  padding: 4px 8px;
  color: var(--text-color-TextGray2);
}
@media (max-width: 871px){
  .video-user-list{
    max-width: none;
    padding: 0;
  }
  .video-user-list .user-container{
    padding: 13px 16px;
  }
  .video-user-list .profileimg{
    width: 42px;
    height: 42px;
    margin-right: 8px;
  }
  .video-user-list .info .atuserid{
    font-size: 15px;
  }
  .video-user-list .info .name {
    font-size: 14px;
  }
  .video-user-list .subuser-btn{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    right: 16px;
  }
}
/* user結果列表 END */

/* 按讚列表 2023/06 規劃只有mweb */
.likelist-title{
  border-bottom: 1px solid var(--stroke-2);
}
.likelist-item{
  height: 62px;
  padding: 10px 16px;
  border: 0;
}
.like-user-container{
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.like-user-container .profileimg{
  width: 42px;
  height: 42px;
  margin-right: 8px;
}
.like-user-container .info{
  flex-grow: 1;
}
.like-user-container .info .name-wrap{
  gap: 3px;
}
.like-user-container .info .name{
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--foreground-1);
}
.like-user-container .info .atuserid{
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-color-TextGray2);
}
.likelist-item .subuser-btn{
  padding: 4px 15px;
  height: 28px;
  width: 60px;
  align-items: center;
  line-height: 20px;
}
.likelist-item .subuser-btn.active{
  padding: 4px 8px;
  color: var(--text-color-TextGray2);
}
@media (max-width: 871px){
}
/* 按讚列表 END */

/* 選擇影片封面縮圖 */
#_editor_cover_image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
}
.thumbnails-wrap{
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
#uploadThumbnail{
  display: flex;
  padding: 12px 5px;
  border: 2px dashed var(--stroke-2);
  border-radius: 10px;
  height: 112px;
  width: 112px;
  justify-content: center;
  text-align: center;
  color: var(--border-color-BorderGray1);
  flex-shrink: 0;
}
#uploadThumbnail.hover{
  border: 2px dashed var(--stroke-1);
  color: var(--foreground-1);
}
#uploadThumbnail .upload-thumbnail-default-wrap i{
  filter: var(--svg-color-BorderGray1);
}
#uploadThumbnail.hover .upload-thumbnail-default-wrap i{
  filter: var(--icon-svg);
}
#uploadThumbnail.hover:hover{
  cursor: pointer;
  color: var(--icon-blue);
  border: 2px dashed var(--icon-blue);
}
#uploadThumbnail.hover:hover .upload-thumbnail-default-wrap i{
  filter: var(--icon-blue-svg);
}
#uploadThumbnail .upload-thumbnail-default-wrap{
  display: flex;
  gap: 8px;
}
#uploadThumbnail.uploaded{
  padding: 6px;
  box-shadow: 0px 3px 7px rgba(165, 186, 213, 0.50);
  border-radius: 10px;
  border: none;
  width: 84px;
}
#preview-thumbnail{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 4px;
}
#preview-thumbnail .preview-reupload{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color-TextWhite);
}
#preview-thumbnail:hover .preview-reupload{
  display: flex;
  background: rgba(13, 40, 72, 0.4);
}
#preview-thumbnail .preview-reupload span{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
#preview-thumbnail .preview-reupload span:hover{
  background: var(--opacityBg-color-BgOGray2);
}
#preview-thumbnail img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
#clear-preview-thumbnail{
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  width: 36px;
  height: 36px;
}
#clear-preview-thumbnail .bicon-clear i{
  width: 36px;
  height: 36px;
}
.upload-thumbnail-container{
  display: flex;
  position: fixed;
  inset: 0px;
  background: rgba(13, 40, 72, 0.2);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.upload-thumbnail-wrap{
  display: flex;
  flex-direction: column;
  width: 540px;
  min-width: 540px;
  min-height: 400px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  box-shadow: 0 3px 7px var(--shadow-1);
  background-color: var(--background-1);
  cursor: auto;
  z-index: 1;
}
.upload-thumbnail-wrap .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 13px 15px;
  color: var(--foreground-1);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0!important;
}
.upload-thumbnail-wrap.tailoring .title {
  border-bottom: 1px var(--border-color-BorderOGray2) solid;
}
.upload-thumbnail-wrap .body {
  position: relative;
  min-height: 376px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(199,216,240,.2);
  border-radius: 20px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A0AEC6' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  margin: 0 24px 24px 24px;
  color: var(--foreground-1);
  font-size: 16px;
}
.upload-thumbnail-wrap .body.dragging {
  background: var(--background-3);
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A0AEC6' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.upload-thumbnail-wrap .body .default-drag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 24px;
  padding: 0 28px;
}
.upload-thumbnail-wrap .body .default-drag-wrap label[for="thumbnailFile"] div{
  color: var(--foreground-3);
}
.upload-thumbnail-wrap .body .drag-wrap,
.tailoring-container .tailoring-drag-div {
  height: 100%;
  width: calc(100% + 48px);
  min-height: 376px;
  border-radius: 15px;
  color: var(--foreground-1);
  font-size: 16px;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
}
.tailoring-container .tailoring-drag-div {
  margin-left: -24px;
  margin-bottom: -24px;
}
.upload-thumbnail-wrap.dragging .tailoring-container {
    background: var(--background-3);
    border-radius: 20px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A0AEC6' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    margin: 0 24px 24px 24px;
    color: var(--foreground-1);
    font-size: 16px;
    position: relative;
}
.thumbnails-container{
  display: flex;
  position: relative;
  border: 1px solid var(--stroke-2);
  border-radius: 12px;
  width: 100%;
  height: 112px;
  padding: 8px;
}
.thumbnails-container.disable:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc( 100% - 12px);
  height: calc( 100% - 12px);
  background: var(--background-4);
  opacity: 0.80;
  z-index: 1;
}
.thumbnails-container.disable .empty,
.thumbnails-container.disable .draggable-element{
  display: none;
}
.thumbnails-container .empty{
  width: 54px;
  height: 100%;
  /* height: 120px; */
  background: var(--opacityBg-color-BgOGray1);
  border-radius: 10px;
}
.thumbnails-container .draggable-element{
  position: absolute;
  top: -3px;
  left: 0px;
  z-index: 1;
  width: 65px;
  height: 114px;
  border: 6px solid #FFFFFF;
  border-radius: 10px;
  background-color: #000;
  box-shadow: 0 3px 7px var(--shadow-color-Sd1);
  overflow: hidden;
  cursor: grab;
}
.thumbnails-container .draggable-element video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbnails-container img{
  height: 96px;
  /* width: 69px; */
  width: calc(100% / 9);
  object-fit: cover;
  opacity: 0.5;
}
.upload-thumbnail-tool-wrap{
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  gap: 16px;
  border-top: 1px var(--border-color-BorderOGray2) solid;
}
/* 選擇影片封面縮圖 END */

/* 圖片截圖 */
.tailoring-wrap-parent{
  display: flex;
  align-items: center;
  width: 480px;
  height: 360px;
  margin: 0 auto;
  background: var(--background-2);
}
.tailoring-wrap{
  margin: 0 auto;
}

:root{
  --cropper-radius: 24px;
}
.cropper-bg{
  background: transparent!important;
}
.cropper-modal{
  background-color: rgba(0, 0, 0, 0.40)!important;
  opacity: 1!important;
}
.cropper-crop-box .cropper-view-box,.cropper-move{
  outline: 0;
  border-radius: var(--cropper-radius);
  box-shadow: 0px 0px 3px rgba(109, 126, 152, 0.75);
}
.cropper-crop-box .cropper-line[class*='line-']{
  display: none;
}
.cropper-crop-box .cropper-point[class*='point-']{
  opacity: 1;
  border: 6px var(--bg-color-BgWhite) solid;
  background-color: transparent;
  width: 48px;
  height: 48px;
}
.cropper-crop-box .cropper-point.point-n,
.cropper-crop-box .cropper-point.point-e,
.cropper-crop-box .cropper-point.point-s,
.cropper-crop-box .cropper-point.point-w{
  display: none;
}
.cropper-crop-box .cropper-point.point-ne{
  border-radius: 0 var(--cropper-radius) 0 0;
  border-left: 0;
  border-bottom: 0;
  right: -4px;
  top: -4px;
}
.cropper-crop-box .cropper-point.point-nw{
  border-radius: var(--cropper-radius) 0 0 0;
  border-right: 0;
  border-bottom: 0;
  left: -4px;
  top: -4px;
}
.cropper-crop-box .cropper-point.point-sw{
  border-radius: 0 0 0 var(--cropper-radius);
  border-top: 0;
  border-right: 0;
  bottom: -4px;
  left: -4px;
}
.cropper-crop-box .cropper-point.point-se{
  border-radius: 0 0 var(--cropper-radius) 0;
  border-top: 0;
  border-left: 0;
  right: -4px;
  bottom: -4px;
}
/* 圖片截圖 END */

/* 骨架 */
.skeleton-block-cover-white,
.skeleton-block-cover{
  width: 3000px;
  height: 3000px;
  position: absolute;
  background-image: linear-gradient(165deg, rgba(248, 250, 253, 0.00) 20%,  rgba(248, 250, 253, 0.8) 45%,  rgba(248, 250, 253, 0.8) 55%, rgba(248, 250, 253, 0.00) 80%);
  animation: 1.5s linear 0s infinite normal none running load;
  z-index: 999;
}
.skeleton-block-cover-white{
  background-image: linear-gradient(165deg,rgba(254,254,255,0) 20%,rgba(254,254,255,.8) 45%,rgba(254,254,255,.8) 55%,rgba(254,254,255,0) 80%);
}
.skeleton-block{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16px;
  background-color: var(--bg-color-BgGray2);
  position: relative;
  overflow: hidden;
}
.skeleton.card-item .video-container{
  margin-bottom: 8px!important;
  background-color: transparent;
}
.skeleton.card-item .video-container .skeleton-block{
  border-radius: 12px!important;
}
.skeleton.card-item .video-info-container .desc{
  margin-bottom: 8px!important;
}
.skeleton.card-item .video-info-container .desc .skeleton-block{
  border-radius: 8px!important;
}
.skeleton.card-item .video-info-container .user-info{
  gap: 8px!important;
}
.skeleton.card-item .video-info-container .user-info .skeleton-block{
  border-radius: 8px!important;
}
.skeleton.card-item .video-info-container .user-info .profileimg{
  height: 18px;
  width: 18px;
  margin-right: 0px!important;
}
.skeleton.card-item .video-info-container .user-info .name{
  height: 16px;
  width: 85px;
}
@keyframes load {
  0% {
      background-position: 0 -1500px;
  }
  100% {
      background-position: 0 1500px;
  }
}
@media (max-width: 871px){
  .skeleton.card-item .video-container{
    margin-bottom: 6px!important;
  }
  .skeleton.card-item .video-container .skeleton-block{
    border-radius: 8px!important;
  }
}
/* 骨架 END */

/* emoji按鈕 */
.add-emoji-button{
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 30px;
  background: var(--opacityBg-color-BgOGray1);
  color: var(--foreground-2);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  padding: 0px 6px;
}

.swiper-emoji-picker-wrapper{
  position: relative;
}
.swiper-emoji-btn{
  position: relative;
  width: 36px;
  height: 36px;
  line-height: 1;
  margin-bottom: 4px;
}
.swiper-emoji-btn :nth-child(1){
  position: absolute;
  z-index: 3;
  font-size: 26px;
}
.swiper-emoji-btn :nth-child(2){
  position: absolute;
  z-index: 2;
  font-size: 18px;
}
.swiper-emoji-btn :nth-child(3){
  position: absolute;
  z-index: 1;
  font-size: 16px;
}
.swiper-emoji-btn.count-1 :nth-child(1){
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.swiper-emoji-btn.count-2 :nth-child(1){
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.swiper-emoji-btn.count-2 :nth-child(2){
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
}
.swiper-emoji-btn.count-3 :nth-child(1){
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.swiper-emoji-btn.count-3 :nth-child(2){
  top: 0;
  right: 0;
  transform: translate(0%, 0%);
}
.swiper-emoji-btn.count-3 :nth-child(3){
  bottom: 0;
  right: 0;
  transform: translate(0%, 0%);
}

.swiper-emoji-total-count.active{
  border-radius: 30px;
  background-color: var(--btn-color-BigGoB3);
}

.swiper-emoji-list{
  position: absolute;
  bottom: 50px;
  right: 0;
  text-align: right;
}
.swiper-emoji-list .emoji-btn{
  height: 32px;
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 2px;
  border-radius: 30px;
  background: var(--opacityBg-color-BgOGray2);
  color: var(--text-color-TextWhite);
  font-size: 12px;
  user-select: none;
  padding: 0px 8px;
}
.swiper-emoji-list .emoji-btn.active{
  background: var(--btn-color-BigGoB3);
  font-weight: bold;
}
.swiper-emoji-list .scroll-emoji-wrap{
  overflow: auto;
  max-height: 260px;
  margin-top: 8px;
  padding-bottom: 8px;
}
.swiper-emoji-list .scroll-emoji-content{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.swiper-emoji-list .scroll-emoji-wrap[data-gradient="top"]{-webkit-mask: linear-gradient(transparent 0%, #000 10%);}
.swiper-emoji-list .scroll-emoji-wrap[data-gradient="bottom"]{-webkit-mask: linear-gradient(#000 90%, transparent);}
.swiper-emoji-list .scroll-emoji-wrap[data-gradient="both"]{-webkit-mask: linear-gradient(transparent 0%, #000 10%, #000 90%, transparent);}
/* emoji按鈕 END */

/* 播放速度 */
.playback-rate-wrap{
  opacity: 0;
  transition: opacity .3s;
}
.playback-rate-wrap .biggo-dropdown{
  width: 120px;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc( -100% - 8px ));
  pointer-events: auto;
  background-color: var(--bg-color-BgGray4);
  box-shadow: 0px 4px 4px rgba(36, 52, 63, 0.30);
}
.playback-rate-wrap .biggo-dropdown ul li{
  color: var(--text-color-TextWhite);
}
.playback-rate-wrap .biggo-dropdown li:hover {
  background-color: var(--opacityBg-color-BgOGray1);
}
.video-container .bicon-playback-rate{
  opacity: 0;
  transition: opacity .3s;
  pointer-events: auto;
  font-size: 14px;
}
.video-container .bicon-playback-rate.playbackRate{
  width: fit-content;
  display: flex;
  gap: 7px;
  align-items: center;
  border-radius: 100% / 200%;
  padding: 7px 9px;
  color: var(--text-color-TextWhite);
}
.playbackRate-title{
  display: flex;
  align-items: center;
  gap: 7px;
}
/* 播放速度 END */

/* 全螢幕 */
.bicon-fullscreen{
  filter: drop-shadow(0px 0px 3px rgba(109, 126, 152, 0.75));
  opacity: 0;
  transition: opacity .3s;
  pointer-events: auto;
}
.bicon-fullscreen svg path{
  stroke: #FFF;
}
.bicon-fullscreen:hover #full-screen-1{
  animation: fullscreen-button-corner-1-animation .4s cubic-bezier(0.4,0,0.2,1);
}
.bicon-fullscreen:hover #full-screen-2{
  animation: fullscreen-button-corner-2-animation .4s cubic-bezier(0.4,0,0.2,1);
}
.bicon-fullscreen:hover #full-screen-3{
  animation: fullscreen-button-corner-3-animation .4s cubic-bezier(0.4,0,0.2,1);
}
.bicon-fullscreen:hover #full-screen-4{
  animation: fullscreen-button-corner-4-animation .4s cubic-bezier(0.4,0,0.2,1);
}
#full-screen-1,#full-screen-2,#full-screen-3,#full-screen-4{
  -webkit-transform: none;
  transform: none;
}
@keyframes fullscreen-button-corner-1-animation{
  50%{
    -webkit-transform: translate(-1px,-1px);
    transform: translate(-1px,-1px);
  }
}
@keyframes fullscreen-button-corner-2-animation{
  50%{
    -webkit-transform: translate(1px,-1px);
    transform: translate(1px,-1px);
  }
}
@keyframes fullscreen-button-corner-3-animation{
  50%{
    -webkit-transform: translate(1px,1px);
    transform: translate(1px,1px);
  }
}
@keyframes fullscreen-button-corner-4-animation{
  50%{
    -webkit-transform: translate(-1px,1px);
    transform: translate(-1px,1px);
  }
}

:-webkit-full-screen{
  width: 100% !important;
  height: 100% !important;
}
/* 全螢幕 END */

/* zoom.css */
img[data-action="zoom"]{cursor:zoom-in}.zoom-img,.zoom-img-wrap{position:relative;z-index:666;transition:all 300ms}img.zoom-img{cursor:zoom-out}.zoom-overlay{cursor:zoom-out;z-index:420;background:#fff;position:fixed;top:0;left:0;right:0;bottom:0;filter:"alpha(opacity=0)";opacity:0;transition:opacity 300ms}.zoom-overlay-open .zoom-overlay{filter:"alpha(opacity=100)";opacity:1}