::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body::-webkit-scrollbar-track,
:hover::-webkit-scrollbar-track {
  background: #1a1a1a; /* 捲軸底色（深灰） */
}
body::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb {
  background-color: #313030; /* 捲軸顏色（中灰） */
  border-color: 1px; /* 增加內距效果 */
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
  transition: var(--transition);
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 8px;
}

:root {
  --bg: #0a0a0a;
  --header-heightH5: 50px;
  --header-icon-color: #4d4d4d;
  --header-icon-color-establish: #7e7e7e;
  --header-icon-hover-color: #fff;
  --header-icon-hover-bg: rgba(255, 255, 255, 0.05);
  --header-nav-svg-width: 22px;
  --text-main-color: #f3f5f7;
  --text-next-color: #777;
  --button-text-color: #f3f5f7;
  --mainTop: 5.5rem;
  --main-content-border-radius: 35px;
  --main-recommend-width: 233px;
  --main-recommend-name-padding: 18px;
  --main-recommend-margin: 8px;
  --main-recommend-border-radius: 15px;
  --border-radius: 10px;
  --border: 1px solid #383939;
  --transition: all 0.5s;
  --iconInBg: #333638;
  --content-bg: #181818;
  --content-padding-vertical: 12px;
  --content-padding-horizontal: 24px;
  --content-margin-right: 8px;
  --content-share-text-color: #ccc;
  --content-share-bg: #1e1e1e;
  --content-share-icon-padding: 10px;
  --mobile-header-nav-bg: #101010;
  --mySwiper-img: 280px;
  --activity-mySwiper-img: 70px;
  --maskBg: rgba(0, 0, 0, 0.8);
  --popups-box-maxWidth: 620px;
  --popups-box-border-radius: var(--main-recommend-border-radius);
  --input-bg: #1e1e1e;
  --input-color: #f3f5f7;
  --button-bg: #ffffff;
  --button-color: #101010;
  --input-border-radius: 12px;
  --button-border-radius: var(--input-border-radius);
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: calc(100% - 32px);
  -webkit-text-size-adjust: calc(100% - 32px);
  line-height: 1.5;
  font-size: 16px;
  margin: auto;
  color: var(--text-color);
}
body {
  margin: 0;
  position: relative;
  background: var(--bg);
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
input:focus {
  outline: none;
}
input {
  color: var(--text-main-color);
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: var(--text-main-color);
  text-decoration: none;
  transition: all 0.5s;
  transform: scale(1);
}
a:active,
a:hover {
  outline-width: 0;
}
a:active {
  transform: scale(0.9);
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
ul {
  list-style: none;
}
ul,
li,
p,
figure {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
button {
  background: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--button-text-color);
  padding: 0.6em;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.5s;
  transform: scale(1);
  line-height: 1;
}
button:active {
  transform: scale(0.95);
}
input,
textarea {
  background: transparent;
  border: 0;
  color: #e4e6eb;
  outline: none;
  min-height: 1em;
  font-size: 1em;
}
textarea {
  resize: none;
  overflow: hidden;
}
textarea:focus-visible {
  border: 0;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid,
.plyr__controls__item.plyr__control,
.plyr__controls__item.plyr__menu,
.plyr__controls__item.plyr__volume input[type="range"],
.plyr__controls__item.plyr__time,
.plyr__progress .plyr__tooltip {
  display: none;
}
.plyr__volume {
  min-width: inherit;
  width: inherit;
}
.plyr__controls__item.plyr__control.plyr__controls__item[data-plyr="fullscreen"],
.plyr__controls__item.plyr__progress__container {
  display: block;
}
.plyr__controls__item.plyr__control.plyr__controls__item[data-plyr="fullscreen"],
.plyr--video .plyr__control {
  border-radius: 50%;
  color: var(--text-next-color);
  background: hsla(0, 0%, 0%, 0.61);
  transition: all 0.5s;
  transform: scale(1);
}
.plyr__controls__item.plyr__control.plyr__controls__item[data-plyr="fullscreen"]:hover,
.plyr--video .plyr__control:hover {
  background: hsla(0, 0%, 0%, 0.61);
  color: var(--text-next-color);
  transform: scale(1.05);
}
.plyr--full-ui input[type="range"] {
  color: #fff;
}
video,
iframe,
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
header {
  width: 62px;
  padding: 0 8px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: space-between;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 36;
}
header a {
  transition: var(--transition);
  border-radius: 10px;
  margin: 6px 0;
  width: 60px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
}
header nav a:hover {
  background: var(--header-icon-hover-bg);
}
header svg {
  width: var(--header-nav-svg-width);
  color: var(--header-icon-color);
  padding: 12px 17px;
  transition: var(--transition);
}
header .active svg {
  color: var(--text-main-color);
}
header #logo svg {
  width: 32px;
  transform: scale(1);
  color: var(--header-icon-hover-color);
  padding: 9px 13px;
}
header #logo:hover svg {
  transform: scale(1.05);
}
header .establish {
  background: var(--header-icon-hover-bg);
}
header a.establish:hover svg {
  color: var(--header-icon-hover-color);
}
header .notification {
  position: relative;
}
header .notification svg {
  width: calc(var(--header-nav-svg-width) + 5px);
  position: relative;
  left: -4px;
}
header .notification .icon {
  position: absolute;
  background: #ff0034;
  border-radius: 50%;
  border: 2px solid var(--bg);
  z-index: 1;
}
header .establish svg {
  color: var(--header-icon-color-establish);
}
header .bottom a:hover svg {
  color: var(--header-icon-hover-color);
}
main #recommend {
  color: var(--button-text-color);
  cursor: pointer;
  font-weight: bold;
  z-index: 20;
}
main #recommend,
.h1PaginationBg h1 {
  font-size: 0.96rem;
}
main .mainTop .recommend {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
main .mainTop .recommend .name {
  padding: var(--main-recommend-name-padding);
  padding-left: 0;
  display: flex;
  align-items: center;
  min-width: 6em;
}
.h1PaginationBg {
  position: relative;
  background: var(--bg);
  margin: auto;
}
.h1PaginationBg h1 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--header-icon-hover-color);
  z-index: 10;
  position: relative;
  text-align: center;
  margin-bottom: 0.2rem;
  padding: 0 var(--content-padding-vertical);
}
main .mainTop .recommend .name span {
  margin-right: var(--content-margin-right);
}
main .mainTop svg {
  border-radius: 50%;
  color: var(--button-text-color);
  font-size: 0.5rem;
  width: 12px;
  height: 12px;
  border: var(--border);
  padding: 5px;
  transform: scale(1);
  transition: var(--transition);
}
main .mainTop svg:hover {
  transform: scale(1.1);
}
main #recommend .recommend #recommendIn {
  position: absolute;
  background: var(--content-bg);
  border: var(--border);
  border-radius: var(--main-recommend-border-radius);
  display: none;
  left: 0;
  top: 3.5em;
  overflow-y: auto;
  width: var(--main-recommend-width);
}
main #recommend .recommend #recommendIn input[type="radio"] {
  display: none; /* 隱藏原生 radio 按鈕 */
}

main #recommend .recommendCheck a,
main #recommend .recommend #recommendIn .bottom > div,
main #recommend .recommend #recommendIn label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: var(--border-radius);
  padding: calc(var(--content-padding-vertical) / 1.5)
    var(--content-padding-vertical);
  margin: 0 var(--main-recommend-margin);
}
main #recommend .recommend #recommendIn .bottom {
  border-top: var(--border);
}
main #recommend .recommendCheck a:first-of-type,
main #recommend .recommend #recommendIn label:first-of-type {
  margin-top: var(--main-recommend-margin);
}
main #recommend .recommendCheck a:last-of-type,
main #recommend .recommend #recommendIn label:last-of-type {
  margin-bottom: var(--main-recommend-margin);
}
/* 讓勾選框出現在 label 內 */
main #recommend .recommendCheck a::before,
main #recommend .recommend #recommendIn label::before {
  content: ""; /* 預設沒有勾號 */
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: normal;
}

/* 當 radio 被選中時，顯示 ✔ 勾號 */
main #recommend .recommendCheck a.active::before,
main
  #recommend
  .recommend
  #recommendIn
  input[type="radio"]:checked
  + label::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-color: #fff; /* 控制勾選顏色 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='21.648 5.352 9.002 17.998 2.358 11.358' stroke='black' stroke-width='2.5' fill='none'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='21.648 5.352 9.002 17.998 2.358 11.358' stroke='black' stroke-width='2.5' fill='none'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
main #recommend .recommend #recommendIn .bottom svg {
  border: 0;
  width: 30px;
  height: 24px;
  position: relative;
  right: -6px;
}
main #recommend .recommend #recommendIn .bottom:hover svg {
  transform: scale(1);
}
main #recommend .recommendCheck a {
  display: block;
  position: relative;
}
main .content {
  color: var(--text-main-color);
  margin-top: 2.5rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
main .content.loading-bottom {
  padding-bottom: 128px;
}
main .content button {
  min-width: 4.1em;
}
main .content #message {
  padding: var(--content-padding-horizontal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-main-color);
}
main .content #message .userText {
  display: flex;
  align-items: center;
}
main .content .user {
  position: relative;
  z-index: 1;
}
.user .img {
  width: 36px;
  margin-right: var(--content-margin-right);
}
.user .img img {
  border-radius: 50%;
  overflow: hidden;
}
main.stringPageShow > .mainTop,
main.stringPageShow > .content,
main .stringPageBg {
  /* opacity: 0;
  visibility: hidden;
  width: 0;
  margin-left: 0;
  border: 0;
  padding: 0; */
  display: none;
}
main.stringPageShow .stringPageBg {
  /* opacity: 1;
  visibility: visible; */
  width: 100%;
  display: block;
}
main.stringPageShow {
  width: inherit;
  padding-top: 0;
}
main .content .user svg {
  width: 18px;
  height: 18px;
  background: #6e3def;
  position: absolute;
  right: 2px;
  bottom: -6px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  fill: #fff;
}
main .content #message .userText input {
  background: transparent;
  border: 0;
  font-size: 0.9875rem;
  width: 100%;
}
main .content .related .relatedInBg {
  padding: var(--content-padding-vertical) var(--content-padding-horizontal);
  border-top: var(--border);
  display: flex;
  align-items: self-start;
  position: relative;
}
main .content .related:first-child .relatedInBg {
  border-top: 0;
}
main .content .related .relatedInBg .relatedCrossArticleBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

main .relatedInBg .related:first-child .relatedInBg {
  border-top: 0;
}
.relatedInBg .user {
  width: 45px;
}
.relatedInBg .user ~ .relatedIn {
  width: calc(100% - 45px);
}
.relatedInBg .relatedIn {
  width: 100%;
}
.relatedInBg .relatedIn .account {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
}
.relatedInBg .relatedIn .account .name {
  margin-right: var(--content-margin-right);
  font-weight: bold;
}
.relatedInBg .relatedIn .subject,
.relatedInBg .relatedIn .account .time,
.relatedInBg .relatedIn .account .more svg {
  color: var(--text-next-color);
}
.relatedInBg .relatedIn .account .more svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  fill: currentColor;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: var(--transition);
}
.relatedInBg .relatedIn textarea {
  padding: 0;
  line-height: 1.5;
  height: 1.5rem;
}
.relatedInBg .relatedIn .relatedMsg,
.relatedInBg .relatedIn .relatedMsg h2 {
  font-size: 0.9875rem;
  font-weight: normal;
}
.relatedInBg .relatedIn .subject {
  display: flex;
  align-items: center;
}
.relatedInBg .relatedIn .subject input {
  max-width: 4rem;
}
.relatedInBg .relatedIn .subject::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: -3px;
  display: block;
  transform: rotate(270deg);
  background-color: currentColor; /* Uses text color */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><path d="m2.5 4.2 4 4 4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>')
    no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><path d="m2.5 4.2 4 4 4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>')
    no-repeat center;
}
.mySwiper {
  overflow: hidden;
}
.mySwiper .swiper-slide {
  width: auto;
}
.mySwiper a:focus {
  transform: scale(0.99);
}
.mySwiper .gallery {
  display: flex;
}
.mySwiper a.img video,
.mySwiper a.img img {
  height: var(--mySwiper-img);
}
.mySwiper .swiper-slide video {
  pointer-events: none;
}
.mySwiper .gallery:has(.swiper-slide:only-child) {
  width: 100%;
}
.mySwiper .gallery:has(.swiper-slide:only-child) a.img video,
.mySwiper .gallery:has(.swiper-slide:only-child) a.img img {
  max-width: 100%;
  max-height: 430px;
  height: auto;
}
.mySwiper .gallery:has(.swiper-slide:nth-child(2):nth-last-child(1)) a {
  width: calc(100% - 10px);
}
.mySwiper .gallery:has(.swiper-slide:nth-child(2):nth-last-child(1)) {
  display: flex;
}
.mySwiper
  .gallery:has(.swiper-slide:nth-child(2):nth-last-child(1))
  .swiper-slide {
  flex-shrink: inherit;
}
.mySwiper
  .gallery:has(.swiper-slide:nth-child(2):nth-last-child(1))
  a.img
  video,
.mySwiper .gallery:has(.swiper-slide:nth-child(2):nth-last-child(1)) a.img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.goverlay {
  background: var(--maskBg);
}
.gcontainer .gbtn.disabled {
  display: none;
}
.gcontainer .gbtn {
  width: 44px;
  height: 44px;
  min-width: inherit;
  border-radius: 50%;
  color: var(--text-next-color);
  background: var(--content-share-bg);
}
.gcontainer .gbtn svg {
  width: 16px;
  height: 16px;
}
.gcontainer .gclose.gbtn {
  top: 25px;
  left: 25px;
  right: inherit;
}
.gcontainer .gclose.gbtn svg {
  width: 20px;
  height: 20px;
}

main .mainTop {
  position: fixed;
  top: 1.5rem;
  left: 0;
  right: 0;
  z-index: 35;
  max-width: 930px;
  display: flex;
  flex-flow: row wrap;
  margin: auto;
}
main .content .related .relatedInBg .relatedIn .relatedMsg .img {
  margin-top: 0.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  display: inline-block;
}
main .content .share ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: var(--content-share-text-color);
  font-size: 0.875rem;
  margin-left: calc(-var(--content-share-icon-padding));
}
main .content .share ul li {
  position: relative;
  z-index: 2;
}
main .content .share > ul > li a {
  min-width: 3em;
}
main .content .share > a {
  min-width: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .content [class*="icon"] {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--content-share-icon-padding);
  border-radius: 25px;
  transition: var(--transition);
}
main .content [class*="icon"] svg {
  width: 20px;
}
main .content [class*="icon"] span {
  margin-left: 3px;
}
.icon-praise {
  transition: all 0.1s;
}

.icon-praise svg {
  stroke: currentColor;
  fill: none;
  transition: all 0.1s;
}
.icon-praise.liked svg {
  fill: currentColor;
  stroke: none;
  color: #ff0034;
}
.icon-praise.liked svg,
.icon-praise.liked .count {
  color: #ff0034;
}
.icon-praise .number {
  height: 20px;
  min-width: 2em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.icon-store.saved svg {
  fill: #eda000;
  color: transparent;
}
.icon-praise .number .count {
  position: relative;
  padding-right: 8px;
  min-height: 1em;
  min-width: 0.5em;
  transition: all 0.15s;
}
.icon-praise .number .count span {
  margin-left: 0;
  display: inline-block;
}
.icon-praise .number .count span:first-child {
  margin-left: 0;
}
.icon-praise .number .count .singleDigit {
  margin-left: 0;
  position: absolute;
  top: 0;
  right: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.icon-praise .number .count .singleDigit.up {
  transform: translateY(-20%);
  opacity: 0;
}

.icon-praise .number .count .singleDigit.down {
  transform: translateY(20%);
  opacity: 0;
}
.icon-sound {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #28282880;
}
.icon-sound svg {
  color: var(--button-text-color);
  width: 12px;
  height: 12px;
}

.icon-play {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 13px;
  height: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #28282880;
}
.icon-play svg {
  color: var(--button-text-color);
  width: 12px;
  height: 12px;
}

main .content .iconInBg {
  padding: 0;
}
main .content .iconInBg [class*="icon"].iconIn {
  visibility: hidden;
  transition: all 0.1s;
  padding: calc(var(--content-share-icon-padding) / 1.3);
  z-index: 3;
}
main .content .iconInBg.active [class*="icon"].iconIn {
  visibility: visible;
}
main .content .iconInBg [class*="icon"].iconIn li {
  width: 100%;
}
main .content .iconInBg [class*="icon"].iconIn li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: bold;
  transition: all 0.1s;
}
main .content .iconInBg [class*="icon"].iconIn li .communityShare,
main .content .iconInBg [class*="icon"].iconIn li .communityShare a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: auto;
  padding: 0;
}
main .content .iconInBg .iconIn {
  position: absolute;
  left: 0;
  top: inherit;
  bottom: 3em;
  width: 225px;
  background: var(--content-bg);
  z-index: 1;
  border: var(--border);
  border-radius: var(--main-recommend-border-radius);
}
.pagination {
  width: 100%;
  position: relative;
  z-index: 10;
  margin: auto;
  background: var(--bg);
}
.pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: max-content;
}
.pagination ul li a {
  border: var(--border);
  color: var(--text-next-color);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
  padding: 1px 7px;
  font-size: 0.75rem;
  border-radius: 15px;
}
.pagination ul li a.active {
  background: var(--text-next-color);
  color: var(--text-main-color);
}
.pagination ul li a.borderNone {
  border: 0;
  padding: 0;
}
.contentTopStle .center {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--content-bg);
  border-top: var(--border);
  width: 100%;
  height: 1px;
}
.contentTopStle:before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--mainTop));
  right: -1px;
  width: calc(100% + 2px);
  height: var(--mainTop);
  background: var(--bg);
}
.contentTopStle .messageBtn {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.activity .content {
  margin: 5rem auto 0 auto;
}
main.activity .mainTop .recommend {
  margin: auto;
}
main.activity .mainTop:before {
  display: none;
}
.activity .mySwiper a.img video,
.activity .mySwiper a.img img {
  height: var(--activity-mySwiper-img);
}
.activity .mySwiper .gallery:has(.swiper-slide:only-child) a.img video,
.activity .mySwiper .gallery:has(.swiper-slide:only-child) a.img img {
  max-height: var(--activity-mySwiper-img);
}
main.activity .content .related .relatedInBg .relatedIn .relatedMsg p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
main.activity .content .related .relatedInBg::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: calc(var(--content-padding-horizontal) + 45px);
  height: 2px;
  background: var(--content-bg);
  z-index: 1;
}
.activity .follows .followsTrachedYou {
  width: 100%;
  font-size: 0.96rem;
  color: var(--text-next-color);
}
.activity .follows .relatedIn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.activity .follows .relatedIn .followsBtn {
  background: #fff;
  color: #000;
  border-radius: 10px;
  min-width: 104px;
  padding: 8px 16px;
  line-height: 1;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-weight: bold;
}
.activity .follows .relatedIn .followsBtn.active {
  background: transparent;
  color: var(--text-next-color);
  border: var(--border);
}
.flip-up {
  animation: flipUp 0.4s ease-in-out;
}

.flip-down {
  animation: flipDown 0.4s ease-in-out;
}
.video-thumbnail {
  position: relative;
  display: block;
}
.video-thumbnail:before,
.video-thumbnail:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.video-thumbnail:before {
  background: var(--bg);
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.video-thumbnail:after {
  background: url('data:image/svg+xml,<svg viewBox="0 0 20.01 24.65" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M0,12.32C0,8.97,0,5.61,0,2.25c0-0.36,0.02-0.72,0.1-1.06c0.24-0.95,1.03-1.39,1.97-1.1c0.31,0.1,0.62,0.24,0.9,0.42c5.27,3.31,10.53,6.63,15.79,9.95c0.65,0.41,1.18,0.93,1.24,1.75c0.06,0.92-0.47,1.51-1.18,1.96c-1.27,0.82-2.55,1.61-3.83,2.42c-4.01,2.52-8.01,5.05-12.02,7.56c-0.36,0.22-0.78,0.41-1.19,0.48c-0.94,0.15-1.66-0.52-1.75-1.54C0,22.83,0,22.57,0,22.32C0,18.99,0,15.65,0,12.32z"/></svg>')
    no-repeat center;
  z-index: 2;
  width: 50px;
  opacity: 0.5;
  height: 50px;
  transition: var(--transition);
}
.video-player {
  display: none;
}
@keyframes flipUp {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flipDown {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .popups-box.active{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
} */
/* .popups-box .popups-boxIn{
  position: relative;
  z-index: 9999;
  max-width: var(--popups-box-maxWidth);
  border-radius: var(--main-recommend-border-radius);
  border: var(--border);
  width: 100%;
  color: var(--text-next-color);
  font-size: 0.975rem;
}
  */

[class*="popups"].active:before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  background: var(--maskBg);
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}
.gslide-inline {
  background: transparent;
}
.glightbox-clean [class*="Body"] .gslide-media {
  background: var(--content-bg);
  border-radius: var(--main-recommend-border-radius);
  border: var(--border);
  max-width: calc(100vw - 40px);
  transition: all 0.1s;
  overflow-y: auto;
}
.gslide-inline .ginlined-content {
  padding: 0;
}
.newArticleBg .newArticle .newArticleHeader,
.newArticleBg .newArticle .newArticleHeader .btn ul,
.newArticleBg .newArticle .newArticleFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.newArticleBg .newArticle .newArticleHeader {
  color: var(--text-main-color);
  font-weight: bold;
  border-bottom: var(--border);
}
.newArticleBg .newArticle .newArticleHeader button {
  font-size: 1.125em;
}

.newArticleBg .newArticle .newArticleHeader,
.newArticleBg .newArticle .newArticleHeader .btn ul li {
  padding: 6px var(--content-share-icon-padding);
}
.newArticleBg .newArticle .newArticleHeader button.cancel {
  border: 0;
}
.newArticleBg .newArticle .newArticleContent .relatedInBg > ul > li {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  padding: 20px var(--content-padding-vertical);
  color: var(--button-text-color);
}
.newArticleBg .newArticle .newArticleContent .relatedInBg > ul > li:last-child {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.newArticleBg .newArticle .newArticleContent .relatedInBg > ul > li .user .img {
  position: relative;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  > ul
  > li
  .user
  .img:after {
  content: "";
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 31px;
  background: var(--iconInBg);
}
.newArticleBg .newArticle .newArticleContent .relatedInBg > ul > li:last-child {
  opacity: 0.5;
  padding-top: 0;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  > ul
  > li:last-child
  .user {
  display: flex;
  justify-content: center;
  text-align: center;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  > ul
  > li:last-child
  .user
  .img {
  position: relative;
  margin-right: var(--content-margin-right);
  width: 16px;
  line-height: 1;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  > ul
  > li:last-child
  .user
  .img:after {
  display: none;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  > ul
  > li
  .relatedIn
  input:disabled {
  cursor: not-allowed;
}
.newArticleBg .newArticle .newArticleContent .relatedInBg ul li .elseMsg ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  ul
  li
  .elseMsg
  ul
  li:first-child {
  margin-left: calc(-1 * var(--content-padding-vertical));
}
.newArticleBg
  .newArticle
  .newArticleContent
  .relatedInBg
  ul
  li
  .elseMsg
  ul
  li
  svg {
  color: var(--text-next-color);
  padding: 0;
}
.newArticleBg .newArticle .newArticleFooter {
  padding: var(--content-padding-horizontal);
  color: #000;
}
.newArticleBg .newArticle .newArticleFooter button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.newArticleBg .newArticle .newArticleFooter a {
  color: var(--text-next-color);
}
.newArticleBg .newArticle [class*="icon"] {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
  width: 20px;
  border-radius: 25px;
  transition: var(--transition);
}
.newArticleBg .newArticle svg {
  width: 24px;
}
#loginAndRegsiter,
#newArticle {
  display: none;
}

header .bottom .more {
  position: relative;
}
header .bottom .moreIn {
  width: 240px;
  display: block;
  background: var(--content-bg);
  border: var(--border);
  border-radius: var(--main-recommend-border-radius);
  position: absolute;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s;
}
header .bottom .moreIn.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
header .bottom .moreIn span {
  display: block;
}
header .bottom .moreIn span {
  padding: var(--content-padding-vertical) 0;
}
header .bottom .moreIn span:last-child {
  border-top: var(--border);
}
header .bottom .moreIn span a {
  display: block;
  padding: calc(var(--content-padding-vertical) / 2)
    var(--content-padding-horizontal);
  height: inherit;
  margin: 0;
  text-align-last: left;
  border-radius: 0;
  font-weight: bold;
  width: -webkit-fill-available;
}
header .bottom .moreIn span a:focus {
  transform: scale(0.98);
}
header .bottom .moreIn span a.rightIcon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .bottom .moreIn span a.rightIcon::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='16.502 3 7.498 12 16.502 21' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: scaleX(-1);
}
header .bottom .moreIn span a.logout {
  color: #ff3040;
}
.member {
  position: relative;
  background: #101010;
  color: var(--text-next-color);
  font-size: 0.95rem;
  padding: var(--content-padding-vertical);
  padding-top: 22px;
}
.member > div {
  text-align: center;
  padding: var(--content-padding-vertical);
  color: var(--text-main-color);
}
.member > div button,
.member > div input {
  width: -webkit-fill-available;
  padding: 16px;
  display: block;
  border-radius: var(--input-border-radius);
}
.member > div input {
  background: var(--input-bg);
  color: var(--input-color);
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.member > div input:focus {
  border: var(--border);
}
.member > div button {
  background: var(--button-bg);
  color: var(--button-color);
  font-size: 1rem;
  font-weight: bold;
}
.member > div button:disabled {
  color: #0f0f0f80;
  cursor: not-allowed;
}
.member .title {
  font-size: 1rem;
}
.member .logo {
  margin-top: 16px;
  margin-bottom: 16px;
}
.member .logo svg {
  width: 60px;
}
.loginBg .login .or {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBg .login .or::after,
.loginBg .login .or::before {
  content: "";
  background: #323333;
  width: 27px;
  height: 1px;
  margin: 0 8px;
}
.loginBg .login .or,
.loginBg .login .forgetPasswordBtn a {
  color: var(--text-next-color);
}
.loginBg .login .regBtn {
  background: transparent;
  color: var(--input-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.loginBg .login .regBtn::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: -3px;
  display: block;
  transform: rotate(270deg);
  background-color: currentColor; /* Uses text color */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><path d="m2.5 4.2 4 4 4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>')
    no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><path d="m2.5 4.2 4 4 4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>')
    no-repeat center;
}
@keyframes slideInBottom {
  from {
    bottom: -100dvh;
  }
  to {
    bottom: 0;
  }
}
.regsiterBg {
  display: none;
}
.gfadeIn {
  animation-duration: 100ms !important;
}
.gfadeOut {
  animation-duration: 100ms !important;
}
.ginlined-content .regsiterBg.hide,
.ginlined-content .loginBg.hide {
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
}
.ginlined-content .regsiterBg,
.loginBg {
  visibility: visible;
  opacity: 1;
}
.regsiterLogin {
  margin-top: 1rem;
  display: block;
}
.regsiterLogin a {
  color: #ff3040;
}
body.gscrollbar-fixer {
  margin-right: 0px;
}
.loading-spinner {
  color: var(--text-next-color);
  padding: var(--content-padding-horizontal);
  text-align: center;
  margin: auto;
}

.loading-spinner svg {
  width: 23px;
  height: 23px;
  animation: rotate 1s linear infinite;
}
#undressBtn,
#undress,
.undress [class*="step"],
.undress .step4,
.undress .imageInput {
  display: none;
}
#undress {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#undress.open {
  display: flex;
}
#undress .goverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--maskBg);
}
#undress .undressClose {
  cursor: pointer;
}
#undress .undress {
  max-width: 360px;
  width: calc(100dvw - 40px - var(--content-padding-horizontal) * 2);
  max-height: calc(100dvh - 40px - var(--content-padding-horizontal) * 2);
  text-align: center;
  color: var(--text-main-color);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.undress [class*="step"] {
  display: none;
  width: calc(100dvw - 8px - var(--content-padding-horizontal) * 2);
  max-height: calc(100dvh - 80px - var(--content-padding-horizontal) * 2);
  overflow-y: auto;
  padding: var(--content-padding-horizontal);
}
.undress .step1.blur {
  filter: blur(5px);
}
.undress .stepUploading {
  background: var(--maskBg);
  position: absolute;
  left: 0;
  top: 0;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-size: 1.25rem;
}
.undress .stepUploading div {
  display: flex;
  align-items: center;
}
.undress .stepUploading .notClose {
  width: 100%;
  color: #ff3040;
  font-size: 0.75em;
  font-weight: bold;
}
.undress .stepUploading .notClose span {
  margin: auto;
}
.undress .stepUploading div .dot {
  margin-left: 0.5rem;
}
.undress .stepUploading div .dot::after {
  content: "";
  display: flex;
  margin-top: -0.5em;
  align-items: center;
  animation: dotFlashing 1.5s infinite steps(1);
}
.undress [class*="step"].show {
  display: block;
  position: relative;
}
.undress [class*="step"] .resultCanvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.undress .nextBtn,
.undress .downloadBtn {
  background: #e16a00;
  color: #fff;
}
.undress .btnBg button {
  padding: var(--content-padding-vertical) var(--content-padding-horizontal);
  margin: auto;
}
.undress .btnBg button.nextBtn,
.undress .btnBg button.downloadBtn {
  width: inherit;
}
.undress .btnBg .againBtn {
  min-width: 4em;
  margin-right: 1rem;
}
.undress .btnBg .againBtn ~ .downloadBtn {
  width: 100%;
}
@keyframes dotFlashing {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
.undress .title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1rem;
}
.undress .title img {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.undress .custom-upload-btn,
.undress .custom-upload-btn [class*="icon-"] svg {
  color: var(--text-next-color);
  transition: var(--transition);
}
.undress .custom-upload-btn {
  display: inline-block;
  padding: var(--content-padding-horizontal);
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
  font-weight: 100;
  background: #000;
  border-radius: var(--border-radius);
  border: 2px dashed #5e4e10;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 1rem;
}
.undress .custom-upload-btn [class*="icon-"] svg {
  fill: currentColor;
}
.undress .custom-upload-btn .icon-main svg {
  width: 50%;
  margin-bottom: var(--content-padding-vertical);
}
.undress .custom-upload-btn .icon-upload {
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.undress .custom-upload-btn .icon-upload svg {
  width: 1em;
  margin-right: var(--content-margin-right);
}
.undress .btnBg {
  display: flex;
  margin-top: var(--content-padding-vertical);
}
.undress .btnBg button {
  font-size: 1rem;
}
.undress .recommendedSize {
  margin-top: 4px;
  font-size: 0.875rem;
}
.undress .recommendedSize ul {
  display: flex;
  gap: 0 var(--content-padding-vertical);
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  font-weight: 100;
}

.undress [class*="step"] .resultCanvas,
.undress .previewArea {
  border-radius: var(--border-radius);
}
.undress .previewArea {
  width: fit-content;
  margin: auto;
  margin-top: 15px;
  display: none;
  border: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.undress .previewArea .previewImage {
  min-height: 200px;
  max-height: calc(100dvh - 400px);
  object-fit: contain;
  border-radius: var(--border-radius);
}
.undress .previewArea button.imgClose {
  position: absolute;
  right: 6px;
  top: 6px;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000066;
  padding: 0;
  margin: 0;
  border: 0;
}
.undress .previewArea .imgClose svg {
  width: 12px;
  height: 12px;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.undress.drop-zone.dragging:before,
.undress.drop-zone.dragging:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.undress.drop-zone.dragging:before {
  width: 100%;
  height: 100%;
  background: var(--maskBg);
}
.undress.drop-zone.dragging:after {
  width: 30%;
  height: 30%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.52 42.52'%3E%3Cpath fill='white' d='M42.52,4.26c0,11.35,0,22.7,0,34.05c-0.38,0.91-1.08,1.18-2.04,1.18c-12.81-0.02-25.62-0.02-38.43,0c-0.96,0-1.66-0.27-2.04-1.18c0-11.35,0-22.7,0-34.05C0.32,3.33,0.98,3,1.95,3C14.82,3.02,27.7,3.02,40.57,3C41.54,3,42.2,3.33,42.52,4.26z M40,25.17c0-6.6,0-13.12,0-19.64c-12.52,0-25,0-37.48,0c0,7.88,0,15.73,0,23.58c0.03,0.02,0.07,0.05,0.1,0.07c0.09-0.12,0.16-0.26,0.27-0.37c2.4-2.41,4.81-4.82,7.22-7.22c0.81-0.81,1.47-0.81,2.28,0c2.18,2.18,4.36,4.36,6.55,6.55c0.1,0.1,0.21,0.2,0.36,0.35c0.13-0.16,0.21-0.28,0.32-0.39c3.48-3.49,6.97-6.97,10.45-10.45c0.88-0.88,1.5-0.88,2.4,0.01c2.39,2.39,4.78,4.78,7.16,7.16C39.74,24.93,39.85,25.03,40,25.17z M31.28,19.85c-0.19,0.25-0.27,0.38-0.38,0.49c-3.5,3.51-7,7.01-10.51,10.51c-0.81,0.81-1.46,0.81-2.28-0.01c-2.17-2.17-4.35-4.34-6.52-6.52c-0.11-0.11-0.18-0.25-0.27-0.37c-0.12,0.09-0.17,0.12-0.21,0.16c-2.82,2.82-5.64,5.63-8.45,8.46c-0.1,0.1-0.17,0.29-0.17,0.43c-0.01,1.25-0.01,2.49-0.01,3.74c0,0.08,0.03,0.15,0.04,0.22c12.5,0,24.98,0,37.49,0c0-0.16,0-0.29,0-0.43c0-2.46,0-4.93,0.01-7.39c0-0.28-0.08-0.49-0.28-0.69c-2.72-2.7-5.43-5.42-8.13-8.13C31.51,20.22,31.44,20.08,31.28,19.85z'/%3E%3Cpath fill='white' d='M15.02,15.18c0.02-2.33,1.94-4.22,4.29-4.2c2.32,0.02,4.22,1.96,4.2,4.3c-0.02,2.3-1.96,4.2-4.27,4.18C16.9,19.45,15,17.52,15.02,15.18z M19.27,16.96c0.95,0,1.74-0.79,1.74-1.74c0.01-0.97-0.79-1.76-1.76-1.76c-0.98,0-1.75,0.79-1.74,1.78C17.53,16.2,18.31,16.97,19.27,16.96z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.8;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.spinner-bar {
  animation: fadeOpacity 1s linear infinite;
}

.spinner-bar:nth-child(1) {
  animation-delay: -0.875s;
}
.spinner-bar:nth-child(2) {
  animation-delay: -0.75s;
}
.spinner-bar:nth-child(3) {
  animation-delay: -0.625s;
}
.spinner-bar:nth-child(4) {
  animation-delay: -0.5s;
}
.spinner-bar:nth-child(5) {
  animation-delay: -0.375s;
}
.spinner-bar:nth-child(6) {
  animation-delay: -0.25s;
}
.spinner-bar:nth-child(7) {
  animation-delay: -0.125s;
}
.spinner-bar:nth-child(8) {
  animation-delay: 0s;
}

@keyframes fadeOpacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.mainProjectTitleBg {
  background: var(--bg);
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  color: var(--button-text-color);
  font-size: 0.96rem;
  font-weight: bold;
  position: relative;
  z-index: 20;
  text-align: center;
}
.mainProjectTitleBg span {
  width: 100%;
  display: block;
}
.mainProjectTitleBg span.browse {
  font-size: 0.75rem;
  color: #777;
}
.backBtn svg {
  color: var(--header-icon-hover-color);
  stroke-linecap: round;
  stroke-width: 2;
  stroke: currentColor;
}
.backBtn svg polyline {
  fill: none;
}
.replyDynamic div,
.replyDynamic {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.replyDynamic {
  width: 100%;
  font-size: 0.9825rem;
  border-top: var(--border);
  padding-top: 16px;
}
.replyDynamic .dynamic svg,
.replyDynamic .dynamic {
  color: var(--text-next-color);
}
.replyDynamic .dynamic .icon {
  width: 12px;
  height: 12px;
  padding: 0 0 0 5px;
}
.replyDynamic .dynamic svg {
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
  transform: rotate(180deg);
}
.undressFixedBottomBg {
  position: fixed;
  z-index: 30;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
.undressFixedBottomBgWidth {
  display: flex;
  justify-content: center;
}
.undressFixedBottom {
  max-width: 385px;
  position: relative;
  text-align: center;
}
.undressFixedBottom a {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.undressFixedBottom a:hover {
  transform: scale(1);
}
.undressFixedBottom button.close {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  font-size: 0.625rem;
  top: -1.6em;
  z-index: 1;
}
.undressFixedBottom .close svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
#tagsBody.gscrollbar-fixer.glightbox-open {
  overflow: visible;
}
#tagsBody .h1PaginationBg {
  padding-bottom: 0.5rem;
  top: -2px;
  width: -webkit-fill-available;
}
#tagsBody main .mainTop {
  position: sticky;
}
#tagsBody main .mainTop .recommend {
  justify-content: flex-start;
}
#tagsBody .tagsListImg {
  width: 100%;
  display: flex;
  gap: 1em;
  overflow: auto hidden;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
#tagsBody .tagsListImg.dragging {
  cursor: grabbing;
}
#tagsBody .tagsListImg::-webkit-scrollbar {
  display: none;
}
#tagsBody .tagsListImg .img {
  min-width: 100px;
  flex: 0 0 auto;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
}
#tagsBody .tagsListImg .img picture {
  width: auto;
}
#tagsBody .mySwiper .swiper-slide {
  width: -webkit-fill-available;
}
#tagsBody .tagsListImg .img picture img {
  height: 100%;
  width: auto;
  display: block;
}
#tagsBody .tagsListImg.tagsListImgBig .img {
  height: 250px;
  width: auto;
}
#tagsBody .tagsListImg.tagsListImgBig.horizontalImg .img {
  max-width: 100%;
}
#tagsBody .tagsListImg.tagsListImgBig.horizontalImg .img,
#tagsBody .tagsListImg.tagsListImgBig.horizontalImg .img picture img {
  height: auto;
}
.popularSearches .searchBg {
  position: relative;
}
.popularSearches .searchBg .search {
  border: var(--border);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--header-icon-hover-bg);
  margin-bottom: 0.5rem;
}
.popularSearches .searchBg .search input {
  font-size: 0.875rem;
  line-height: 1;
  width: 100%;
}
.popularSearches .searchBg .search button {
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popularSearches .searchBg .search button svg {
  border: 0;
  width: 16px;
  height: 16px;
  opacity: 0.5;
}
.popularSearches .linkBg .link {
  border: var(--border);
  border-radius: var(--border-radius);
  padding: calc(var(--content-padding-vertical) / 1.5)
    var(--content-padding-vertical);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.popularSearches .linkBg .link .title {
  color: red;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.popularSearches .linkBg .link .title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: red;
  margin-right: 0.5em;
}
.popularSearches .linkBg ul {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--content-padding-vertical);
  font-size: 0.875rem;
  width: -webkit-fill-available;
  opacity: 0.7;
  max-height: 7em;
  overflow-y: auto;
}
.contentTop {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg);
  padding-top: 1rem;
  top: 0;
}
.contentTop .contentTopStle {
  width: -webkit-fill-available;
}
#tagsBody main.stringPageShow .mainTop {
  padding-top: 0;
  width: 100%;
  margin-right: 0;
  top: 0;
  overflow: hidden;
}
#tagsBody main.stringPageShow .mainTop .mainProjectTitleBg {
  padding: var(--content-padding-vertical) 0;
}
@media (min-width: 1200px) {
  html {
    overflow: hidden scroll !important;
  }
  header {
    height: 100dvh;
  }
  header nav {
    height: 37dvh;
    min-height: 276px;
    display: flex;
    flex-flow: row wrap;
  }
  main {
    width: calc(100% - 158px);
    justify-content: center;
    margin: auto;
    display: flex;
    align-items: flex-start;
    max-width: 930px;
    position: relative;
  }
  main #recommend .recommend #recommendIn {
    display: block;
    max-height: calc(100dvh - 7rem);
  }
  main #recommend .recommend #recommendIn::-webkit-scrollbar-track {
    background: transparent;
  }

  main .content {
    background: var(--content-bg);
    border: var(--border);
    width: calc(100% - var(--main-recommend-width) - 2px);
    margin-left: var(--main-recommend-width);
    z-index: 5;
    position: relative;
  }
  main .content .share > ul > li a > [class*="icon"]:hover {
    background: var(--content-share-bg);
  }
  main #recommend {
    display: block;
    width: 100%;
  }
  main #recommend .recommend #recommendIn .recommendCheck a:hover,
  main #recommend .recommend #recommendIn label:hover,
  main #recommend .recommend #recommendIn .bottom > div:hover {
    background: var(--header-icon-hover-bg);
  }
  .contentTopStle {
    width: calc(100% - var(--main-recommend-width));
    position: relative;
    top: 1rem;
  }
  .contentTopStle .left,
  .contentTopStle .left:before,
  .contentTopStle .right,
  .contentTopStle .right:before {
    width: var(--content-padding-horizontal);
    height: var(--content-padding-horizontal);
  }
  .contentTopStle .left,
  .contentTopStle .right {
    position: absolute;
    background: var(--bg);
    top: 0;
  }
  .contentTopStle .left:before,
  .contentTopStle .right:before,
  .contentTopStle .right:after {
    content: "";
    display: block;
    background: var(--content-bg);
    border-top: var(--border);
  }
  .contentTopStle .left {
    left: -1px;
  }
  .contentTopStle .left:before {
    border-radius: var(--content-padding-horizontal) 0 0 0;
    border-left: var(--border);
  }

  .contentTopStle .right {
    right: 0;
  }
  .contentTopStle .right:before {
    border-radius: 0 var(--content-padding-horizontal) 0 0;
    border-right: var(--border);
  }
  .contentTopStle .right:after {
    width: 1px;
    height: 25px;
    position: absolute;
    right: -1px;
    top: -7px;
    border-top: 0;
    background: var(--bg);
  }
  main .content .iconInBg.active:before {
    display: none;
  }
  main .content .iconInBg [class*="icon"].iconIn {
    transform: scale(0.9);
    transform-origin: left bottom;
    opacity: 0;
  }
  main .content .iconInBg.bottom-position [class*="icon"].iconIn {
    transform-origin: left top;
    top: 3em;
    bottom: inherit;
  }
  main .content .iconInBg [class*="icon"].iconIn li a:hover {
    background: var(--header-icon-hover-bg);
  }
  main .content .iconInBg.active [class*="icon"].iconIn {
    opacity: 1;
    transform: scale(1);
  }
  header .bottom .moreIn {
    transform-origin: bottom left;
    left: 100%;
    bottom: 15px;
  }
  .video-thumbnail:hover::after {
    opacity: 0.9;
  }
  header .notification .icon {
    right: 13px;
    top: 13px;
    width: 7px;
    height: 7px;
  }
  footer a {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 82px;
    height: 62px;
    color: var(--text-main-color);
    background: var(--content-bg);
    border-radius: var(--main-recommend-border-radius);
    border: var(--border);
    transition: all 0.25s;
    z-index: 10;
  }
  footer a:hover {
    transform: scale(1.1);
  }
  footer a:active {
    transform: scale(0.9);
  }
  footer svg {
    width: 24px;
    height: 24px;
  }
  .pagination ul {
    justify-content: center;
  }
  .pagination ul li a:hover {
    background: var(--text-next-color);
    color: var(--text-main-color);
  }
  main .mainTop .pagination ul li a:hover,
  main .mainTop .pagination ul li a svg:hover {
    transform: scale(1);
  }
  main.activity #recommend {
    margin: auto;
    width: 100%;
    background: var(--bg);
    position: relative;
  }
  main.activity #recommend .recommend #recommendIn {
    left: 50%;
    transform: translateX(-50%);
    top: 2.5em;
    display: none;
  }
  main.activity .mainTop .recommend .name {
    padding: calc(var(--main-recommend-name-padding) / 2);
    min-width: inherit;
  }
  .activity .contentTopStle,
  .activity .mainTop,
  .activity .content {
    width: 100%;
    max-width: 650px;
  }
  main.activity,
  .activity .contentTopStle,
  .activity .mainTop {
    max-width: 652px;
  }
  .activity .mainTop {
    width: calc(100% - 158px);
    top: 0;
  }
  .undress .custom-upload-btn:hover {
    background: var(--bg);
  }
  .undress .custom-upload-btn:hover,
  .undress .custom-upload-btn:hover [class*="icon-"] svg {
    color: var(--text-main-color);
  }
  #undress .gclose.gbtn {
    display: none;
  }
  .mainProjectTitleBg div:first-child {
    margin-left: var(--content-padding-horizontal);
  }
  .mainProjectTitleBg div:last-child {
    margin-right: var(--content-padding-horizontal);
  }
  .pageTitle .contentTopStle {
    width: 100%;
  }
  .pageTitle,
  .pageTitle .contentTopStle,
  .pageTitle .mainTop,
  .pageTitle .content {
    max-width: 652px;
  }
  .pageTitle .content {
    margin: auto;
    width: calc(100% - 2px);
    margin-top: calc(2.5rem + 41px);
  }
  .relatedInBg .relatedIn .account .more svg:hover {
    background: #1e1e1e;
  }
  .undressClick:hover {
    filter: brightness(120%);
  }
  .undressFixedBottomBg {
    width: calc(100% - 158px);
    max-width: 930px;
  }
  .undressFixedBottomBgWidth {
    margin-left: var(--main-recommend-width);
  }
  main .content .related:first-child .relatedInBg {
    padding-top: 1.5rem;
  }
  .contentTop {
    top: 1px;
  }
  .h1PaginationBg h1 {
    min-height: 1.5em;
  }
  #tagsBody .content {
    margin: 0;
  }
  #tagsBody .stringPageBg .contentTopStle {
    height: var(--content-padding-horizontal);
    margin-bottom: -6px;
    z-index: 10;
  }
  #tagsBody .stringPageBg .content {
    margin-top: calc(-1 * var(--content-padding-horizontal));
  }
  #tagsBody .contentTopStle {
    top: 0;
  }
  #tagsBody main .mainTop {
    margin: 0;
    padding-top: 3.05rem;
    width: var(--main-recommend-width);
    margin-right: var(--content-padding-horizontal);
  }
  #tagsBody main #recommend .recommend #recommendIn {
    position: relative;
    margin-top: 0.5rem;
    top: 0;
    left: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(100dvh - 20em);
  }
  .popularSearches ~ #recommend .name {
    display: none;
  }
  .popularSearches ~ #recommend .recommend #recommendIn {
    top: 0.5em;
  }
}

@media all and (max-width: 1199px) {
  ::-webkit-scrollbar {
    display: none;
  }
  :hover::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: none;
  }
  body,
  html {
    min-width: 320px;
    overflow: hidden;
  }
  header .bottom {
    position: fixed;
    right: 0;
    top: 0;
    padding-right: var(--content-padding-vertical);
  }
  header .bottom svg {
    color: var(--header-icon-hover-color);
  }
  header .bottom #sticky {
    display: none;
  }
  header #logo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    text-align: center;
  }
  header a {
    flex-wrap: nowrap;
    text-align: center;
    border-radius: 10px;
    width: auto;
  }
  header svg {
    padding: 9px;
  }
  header nav {
    position: fixed;
    left: 0;
    bottom: 0;
    height: var(--header-heightH5);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--mobile-header-nav-bg);
  }
  header nav a img {
    max-height: calc(var(--header-heightH5) - 10px);
  }
  header .notification .icon {
    width: 4px;
    height: 4px;
    left: 48%;
    bottom: 7px;
    transform: translateX(-50%);
  }
  header .bottom .more {
    display: block;
  }
  header .bottom .moreIn {
    right: 0;
    top: 100%;
  }
  header .bottom .moreIn {
    transform-origin: top right;
  }
  .contentTopStle {
    display: none;
  }
  main #recommend {
    justify-content: end;
    padding-left: var(--content-padding-vertical);
    z-index: 30;
    position: fixed;
    background: transparent;
    width: 105px;
    left: 0;
    top: 0;
    font-size: 0.875rem;
  }
  main #recommend::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg);
    height: 50px;
  }
  main .mainTop svg {
    padding: 3px;
  }
  main #recommend .recommend #recommendIn {
    max-height: calc(100dvh - 120px);
  }
  main .content {
    margin-top: 60px;
    height: calc(100dvh - 60px - 50px);
    overflow-y: auto;
  }
  main .content [class*="icon"] {
    padding: calc(var(--content-share-icon-padding) / 2);
  }
  main .content #message,
  main .content .related .relatedInBg {
    padding: var(--content-padding-vertical);
  }
  footer {
    display: none;
  }
  header.activity .bottom {
    position: fixed;
    display: block;
    right: 16px;
    top: 5px;
  }
  header.activity .bottom a:first-child {
    display: none;
  }
  main.activity #recommend {
    width: 100%;
    padding: 0;
    top: -1rem;
    position: relative;
  }
  main.activity .mainTop .recommend {
    max-width: 100%;
  }
  main.activity .mainTop .recommend .name,
  main.activity
    #recommend
    .recommend
    #recommendIn
    input[type="radio"]:checked
    + label::before {
    display: none;
  }
  main.activity #recommend .recommend #recommendIn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    width: inherit;
    border: 0;
    overflow-x: auto;
    background: var(--bg);
    top: 2.2em;
    padding-top: 1em;
    margin: 0 var(--content-padding-vertical);
  }
  main.activity #recommend .recommend #recommendIn label {
    padding: 9px 17px;
    line-height: 1;
    white-space: nowrap;
    border: var(--border);
    border-radius: 22px;
    margin: 0 calc(var(--content-padding-vertical) / 2);
  }
  main .content .iconInBg [class*="icon"].iconIn {
    position: fixed;
    width: inherit;
    left: 0;
    right: 0;
    bottom: -10em;
    z-index: 999;
    top: auto;
    padding: var(--content-padding-vertical);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  main .content .iconInBg.active [class*="icon"].iconIn {
    bottom: 0;
  }
  main .content .iconInBg [class*="icon"].iconIn li a {
    padding: var(--content-padding-vertical);
    background: var(--header-icon-hover-bg);
  }
  main .content .iconInBg [class*="icon"].iconIn li:nth-child(1) a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: var(--border);
  }
  main .content .iconInBg [class*="icon"].iconIn li:nth-child(2) a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .activity .contentTopStle,
  .activity .mainTop {
    max-width: inherit;
  }
  .activity .mainTop {
    overflow-x: auto;
  }
  .pagination {
    width: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    margin-top: 1rem;
    overflow-x: auto;
  }
  .activity .content {
    margin-top: 8.5rem;
  }
  main #recommend .recommend #recommendIn input[type="radio"]:checked + label {
    background: var(--content-share-bg);
  }
  main.activity .content .related .relatedInBg::after {
    background: var(--bg);
  }
  .gslide-video,
  .gslide video {
    margin: auto;
  }
  .plyr__video-wrapper {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .plyr__video-wrapper video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  main .content .communityShare {
    margin-top: 0.5em;
  }
  main .content .communityShare [class*="icon"] {
    margin-left: 0;
    padding: var(--content-share-icon-padding);
  }
  .glightbox-mobile .goverlay {
    opacity: 0.8;
  }

  .mainProjectTitleBg div.more,
  .mainProjectTitleBg .mainProjectTitle {
    display: none;
  }
  .backBtn {
    margin: 6px 0;
    padding: 9px;
    padding-left: var(--content-padding-horizontal);
  }
  .backBtn.backBtn2 svg {
    border: 0;
    width: 20px;
    height: 20px;
  }
  .pageTitle .mainTop {
    max-width: inherit;
    top: 0;
  }
  .undressFixedBottom {
    max-width: 325px;
    width: 80%;
    bottom: var(--header-heightH5);
  }
  .h1PaginationBg {
    width: calc(100% - var(--content-padding-horizontal) * 2);
  }
  .contentTop {
    padding-top: 0;
    margin-bottom: -1px;
  }
  #tagsBody main .content > .related:first-of-type .relatedInBgg {
    border-top: 0;
  }
  #tagsBody .stringPageBg .backBtn {
    margin: 0;
    padding: 0;
  }
  #tagsBody .stringPageBg .backBtn a {
    display: inline-block;
    padding: 3px 0;
  }
  #tagsBody main .mainTop {
    max-width: inherit;
    margin-top: 2.5rem;
    padding: var(--content-padding-vertical);
    padding-bottom: 0;
    z-index: 5;
  }
  #tagsBody .pagination {
    padding-top: 0.5rem;
    margin-top: 0;
  }
  #tagsBody main .content {
    height: calc(100dvh - 60px - 80px);
    margin-top: 0;
  }
  #tagsBody main #recommend::before {
    display: none;
  }
  #tagsBody main #recommend .recommend #recommendIn,
  .popularSearches .linkBg ul {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .popularSearches .searchBg .linkBg {
    visibility: hidden;
    max-height: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
  }
  .popularSearches .searchBg .search:focus-within ~ .linkBg {
    visibility: visible;
    height: 100%;
    max-height: 50dvh;
  }
  .popularSearches .searchBg .search:focus-within ~ .linkBg .link {
    overflow-y: auto;
    max-height: calc(50dvh - 5rem);
  }
}
@media all and (max-width: 360px) {
  header.activity a {
    width: auto;
  }
}