body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-color);
    opacity: var(--overlay-opacity);
    backdrop-filter: blur(var(--overlay-blur));
    display: var(--overlay-display);
    pointer-events: none;
    z-index: -1;
    transition: all 0.3s ease
}

:root {
    --white: #ffffff;
    --black: #000000;
    --default-bg: var(--white);
    --default-text: var(--gray-900);
    --default-bg-2: var(--gray-500);
    --default-text-2: var(--gray-100);
    --default-text-link: var(--orange-xchina);
    --default-text-link-hover: var(--cyan-xchina);
    --default-text-link-reverse: var(--cyan-xchina);
    --default-text-link-reverse-hover: var(--orange-xchina);
    --default-text-disabled: var(--gray-300);
    --default-secondary-text: var(--gray-600);
    --default-split: var(--gray-100);
    --default-block-bg-hover: var(--orange-xchina);
    --default-block-text-hover: var(--white);
    --default-block-text-shadow-hover: rgba(59,130,246,0.2);
    --default-text-del: var(--gray-300);
    --default-btn-text: var(--white);
    --default-btn-text-hover: var(--white);
    --default-btn-disabled-text: var(--gray-500);
    --default-btn-bg: linear-gradient(45deg,#ff6b6b,#ffa500,#ff6b6b);
    --default-btn-bg-hover: linear-gradient(45deg,#ff8a8a,#ffb733,#ff8a8a);
    --default-btn-disabled-bg: var(--gray-300);
    --warning-text: var(--red-500);
    --highlight-text: var(--yellow-500);
    --success-text: var(--green-500);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-450: #848b98;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #273444;
    --gray-900: #1f2937;
    --gray-1000: #111827;
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --yellow-50: #fefce8;
    --yellow-100: #fef3c7;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
    --yellow-400: #fbbf24;
    --yellow-500: #f59e0b;
    --yellow-600: #d97706;
    --yellow-700: #b45309;
    --yellow-800: #92400e;
    --yellow-900: #78350f;
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;
    --orange-xchina: #dba531;
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7c3aed;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;
    --cyan-xchina: #3498db;
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;
    --model-link-text: var(--blue-500);
    --overlay-display: none;
    --overlay-opacity: 0;
    --overlay-color: rgb(0,0,0);
    --overlay-blur: 0px;
    --body-bg: var(--default-bg);
    --body-text: var(--default-text);
    --input-bg: var(--white);
    --input-focus-bg: var(--gray-200);
    --input-text: var(--gray-900);
    --input-focus-text: var(--gray-900);
    --input-border: var(--gray-300);
    --input-focus-border: var(--cyan-xchina);
    --input-placeholder-text: var(--gray-400);
    --top-nav-bg: var(--orange-xchina);
    --top-nav-text: var(--gray-100);
    --top-nav-hover: var(--cyan-700);
    --top-menu-subs-item-text: var(--gray-100);
    --top-menu-subs-item-text-hover: var(--gray-100);
    --top-menu-subs-bg: var(--orange-xchina);
    --top-menu-subs-item-bg-hover: var(--cyan-700);
    --top-language-bg: var(--gray-200);
    --top-language-hover-bg: var(--gray-50);
    --top-language-text: var(--gray-700);
    --top-language-hover: var(--gray-700);
    --top-language-checked: var(--gray-100);
    --top-language-checked-bg: var(--cyan-xchina);
    --breadcrumb-bg: var(--white);
    --breadcrumb-text: var(--gray-900);
    --breadcrumb-hover: var(--cyan-xchina);
    --breadcrumb-prefix-filter: none;
    --footer-bg: var(--gray-900);
    --footer-text: var(--gray-50);
    --footer-link-hover: var(--cyan-50);
    --footer-mobile-bg: var(--white);
    --footer-mobile-text: var(--default-text);
    --footer-mobile-text-disabled: var(--gray-300);
    --footer-mobile-border: var(--gray-50);
    --footer-mobile-fav-text: var(--orange-xchina);
    --bar-mobile-header-bg: var(--gray-200);
    --bar-mobile-header-text: var(--gray-600);
    --bar-mobile-bg: var(--white);
    --bar-mobile-text: var(--gray-600);
    --bar-mobile-split: var(--gray-200);
    --bar-mobile-subs-bg: var(--gray-50);
    --bar-mobile-subs-text: var(--gray-600);
    --border-color: var(--color7);
    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
    --aside-bg: var(--default-bg);
    --item-bg: var(--white);
    --item-shadow: rgba(0,0,0,0.2);
    --item-shadow-hover: rgba(0,0,0,0.5);
    --item-tag-bg: var(--orange-900);
    --item-tag-text: var(--gray-50);
    --item-text-color: var(--gray-600);
    --item-link-color: var(--default-text);
    --item-text-hover: var(--cyan-xchina);
    --tag-bg: transparent;
    --tag-bg-hover: var(--cyan-xchina);
    --tag-text: var(--gray-500);
    --tag-text-hover: var(--white);
    --tag-border: var(--gray-300);
    --tag-border-hover: var(--cyan-xchina);
    --modal-header-bg: var(--gray-100);
    --modal-header-text: var(--gray-700);
    --modal-body-bg: var(--white);
    --modal-body-text: var(--gray-700);
    --modal-footer-bg: var(--gray-100);
    --modal-footer-text: var(--gray-700);
    --modal-line: var(--gray-300);
    --numbered-list-item-bg: transparent;
    --numbered-list-item-bg-hover: var(--default-block-bg-hover);
    --numbered-list-item-rank-bg: var(--gray-700);
    --numbered-list-item-rank-text: var(--gray-300);
    --numbered-list-item-rank-no1-bg: linear-gradient(135deg,#FFD700,#FFA500);
    --numbered-list-item-rank-no1-text: #8B4513;
    --numbered-list-item-rank-no2-bg: linear-gradient(135deg,#C0C0C0,#A8A8A8);
    --numbered-list-item-rank-no2-text: #2F4F4F;
    --numbered-list-item-rank-no3-bg: linear-gradient(135deg,#CD7F32,#B87333);
    --numbered-list-item-rank-no3-text: var(--white);
    --filter-label-text: var(--default-text);
    --filter-opt-text: var(--default-text);
    --filter-opt-hover-text: var(--default-text-link-hover);
    --filter-opt-checked-text: var(--orange-xchina);
    --tab-container-shadow: 0 2px 6px rgba(0,0,0,0.1);
    --tab-nav-text: #6c757d;
    --tab-nav-text-hover: #343a40;
    --tab-nav-text-checked: var(--white);
    --tab-nav-bg: #f8f9fa;
    --tab-nav-bg-hover: #f8f9fa;
    --tab-nav-bg-checked: var(--orange-xchina);
    --tab-nav-split: #e9ecef;
    --tab-nav-split-checked: var(--orange-xchina);
    --tab-contents-bg: var(--white);
    --tab-content-text: var(--gray-700);
    --category-parent-text: var(--gray-700);
    --category-parent-text-hover: var(--default-text-link-hover);
    --category-sub-bg: var(--gray-100);
    --category-sub-text: var(--gray-700);
    --category-sub-bg-hover: var(--cyan-xchina);
    --category-sub-text-hover: var(--white);
    --category-sub-count-bg: var(--cyan-700);
    --category-sub-count-text: var(--gray-200);
    --table-border: var(--gray-300);
    --table-header-bg: var(--orange-xchina);
    --table-header-text: var(--gray-100);
    --table-row-bg: var(--gray-50);
    --table-row-hover-bg: var(--gray-200);
    --table-row-text: var(--gray-900);
    --table-row-hover-text: var(--gray-900);
    --affair-text: var(--blue-500);
    --affair-text-hover: var(--blue-500);
    --option-box-bg: var(--gray-50);
    --option-box-hover-bg: var(--white);
    --option-box-selected-bg: var(--orange-xchina);
    --option-box-text: var(--gray-600);
    --option-box-hover-text: var(--gray-600);
    --option-box-selected-text: var(--white);
    --option-box-unavailable-text: var(--gray-400);
    --option-box-border: var(--gray-300);
    --option-box-hover-border: var(--orange-xchina);
    --option-box-selected-border: var(--orange-xchina);
    --option-box-selected-icon: var(--white);
    --floating-toolbar-bg: rgba(255,255,255,0.5);
    --floating-toolbar-border: transparent;
    --floating-toolbar-btn-bg: var(--white);
    --floating-toolbar-btn-bg-hover: var(--cyan-xchina);
    --floating-toolbar-btn-border: var(--gray-300);
    --floating-toolbar-btn-border-hover: var(--cyan-xchina);
    --floating-toolbar-btn-text: var(--gray-600);
    --floating-toolbar-btn-text-hover: var(--white);
    --floating-toolbar-btn-bg-disabled: var(--gray-300);
    --floating-toolbar-btn-text-disabled: var(--gray-400);
    --floating-toolbar-btn-border-disabled: var(--gray-300);
    --hero-section-bg: var(--gray-900);
    --album-text: var(--gray-50);
    --album-text-shadow: rgba(0,0,0,0.5);
    --input-inline-icon-color: var(--gray-400);
    --input-inline-icon-color-hover: var(--cyan-xchina);
    --fiction-brief-text: var(--gray-500);
    --fiction-chapter-item-bg: var(--gray-100);
    --fiction-chapter-item-border: var(--gray-300);
    --fiction-chapter-item-text: var(--gray-600);
    --fiction-chapter-item-text-hover: var(--default-block-text-hover);
    --fiction-chapter-item-bg-hover: var(--default-block-bg-hover);
    --fiction-chapter-item-border-hover: var(--default-block-bg-hover);
    --fiction-controls-btn-text: var(--gray-500);
    --fiction-controls-btn-text-hover: var(--white);
    --fiction-controls-btn-bg: var(--default-btn-bg);
    --fiction-controls-btn-bg-hover: var(--cyan-xchina);
    --fiction-controls-btn-border: var(--gray-500);
    --fiction-controls-btn-border-hover: var(--cyan-xchina);
    --fiction-controls-floating-bg: var(--gray-100);
    --fiction-body-text: var(--gray-900);
    --mp3-player-bg: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    --mp3-player-secondary-bg: rgba(255,255,255,0.1);
    --mp3-player-audio-control-bg: linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);
    --mp3-player-caption-text: var(--gray-100);
    --not-found-title-color: var(--gray-600);
    --not-found-description-color: var(--gray-400);
    --not-found-svg-bg: #f7fafc;
    --not-found-svg-border: #e2e8f0;
    --not-found-svg-primary: #a0aec0;
    --not-found-svg-secondary: #cbd5e0;
    --comment-bg: var(--gray-100);
    --comment-nickname-text: var(--red-800);
    --comment-time-text: var(--gray-400);
    --comment-remark-border: var(--orange-xchina);
    --comment-remark-bg: var(--green-200);
    --comment-remark-text: var(--gray-800);
    --comment-misc-border: var(--orange-700);
    --comment-misc-bg: var(--green-200);
    --comment-misc-text: var(--gray-800);
    --comment-btn-text: var(--blue-400);
    --comment-btn-text-hover: var(--white);
    --comment-btn-bg: var(--blue-100);
    --comment-btn-bg-hover: var(--cyan-xchina);
    --comment-translated-content-border: var(--red-800);
    --comment-translated-content-bg: var(--red-100);
    --comment-translated-content-text: var(--gray-800)
}

.pager {
    --pager-text-color: var(--gray-200);
    --pager-bg-color: var(--gray-700);
    --pager-border-color: transparent;
    --pager-hover-text-color: var(--white);
    --pager-hover-bg-color: var(--gray-500);
    --pager-hover-border-color: transparent;
    --pager-current-text-color: var(--white);
    --pager-current-bg-color: var(--orange-xchina);
    --pager-current-border-color: transparent;
    --pager-disabled-text-color: var(--gray-400);
    --pager-disabled-bg-color: var(--gray-300);
    --pager-disabled-border-color: transparent
}

.pager-js {
    --pager-js-btn-text-color: var(--gray-700);
    --pager-js-btn-bg-color: var(--white);
    --pager-js-btn-border-color: var(--gray-300);
    --pager-js-btn-hover-text-color: var(--white);
    --pager-js-btn-hover-bg-color: var(--orange-xchina);
    --pager-js-btn-hover-border-color: transparent;
    --pager-js-btn-current-text-color: var(--white);
    --pager-js-btn-current-bg-color: var(--orange-xchina);
    --pager-js-btn-current-border-color: transparent;
    --pager-js-btn-disabled-text-color: var(--gray-500);
    --pager-js-btn-disabled-bg-color: var(--gray-300);
    --pager-js-btn-disabled-border-color: transparent
}

[data-theme="dark"] {
    --default-bg: var(--gray-900);
    --default-text: var(--gray-300);
    --default-bg-2: var(--gray-400);
    --default-text-2: var(--gray-700);
    --default-text-link-hover: var(--cyan-xchina);
    --default-text-link: var(--orange-xchina);
    --default-text-link-hover: var(--cyan-xchina);
    --default-text-link-reverse: var(--cyan-xchina);
    --default-text-link-reverse-hover: var(--orange-xchina);
    --default-secondary-text: var(--gray-400);
    --default-split: var(--gray-600);
    --default-block-bg-hover: var(--cyan-xchina);
    --default-block-text-hover: var(--gray-300);
    --default-block-text-shadow-hover: rgba(37,99,235,0.3);
    --default-text-del: var(--gray-500);
    --highlight-text: var(--orange-xchina);
    --overlay-display: block;
    --overlay-opacity: 0.75;
    --overlay-color: rgb(0,0,0);
    --overlay-blur: 0px;
    --body-bg: var(--default-bg);
    --body-text: var(--default-text);
    --input-bg: var(--gray-600);
    --input-focus-bg: var(--gray-700);
    --input-text: var(--gray-300);
    --input-focus-text: var(--gray-200);
    --input-border: var(--gray-700);
    --input-focus-border: var(--cyan-xchina);
    --input-placeholder-text: var(--gray-450);
    --top-nav-bg: var(--black);
    --top-nav-text: var(--default-text);
    --top-nav-hover: var(--default-text-link-hover);
    --top-menu-subs-bg: var(--gray-900);
    --top-menu-subs-item-text: var(--gray-300);
    --top-menu-subs-item-bg-hover: var(--default-text-link-hover);
    --top-language-bg: var(--gray-700);
    --top-language-hover-bg: var(--gray-500);
    --top-language-text: var(--default-text);
    --top-language-hover: var(--default-text);
    --top-language-checked: var(--default-text);
    --top-language-checked-bg: var(--cyan-xchina);
    --breadcrumb-bg: var(--gray-900);
    --breadcrumb-text: var(--gray-300);
    --breadcrumb-hover: var(--default-text-link-hover);
    --breadcrumb-prefix-filter: brightness(0.75);
    --footer-bg: var(--black);
    --footer-text: var(--gray-300);
    --footer-hover: var(--cyan-500);
    --footer-mobile-bg: var(--gray-900);
    --footer-mobile-text: var(--gray-300);
    --footer-mobile-text-disabled: var(--gray-500);
    --footer-mobile-border: var(--gray-700);
    --footer-mobile-fav-text: var(--orange-xchina);
    --bar-mobile-header-bg: var(--gray-900);
    --bar-mobile-header-text: var(--gray-200);
    --bar-mobile-bg: var(--gray-700);
    --bar-mobile-text: var(--gray-300);
    --bar-mobile-split: var(--gray-600);
    --bar-mobile-subs-bg: var(--gray-700);
    --bar-mobile-subs-text: var(--gray-300);
    --aside-bg: var(--default-bg);
    --item-bg: #1f2937;
    --item-shadow: rgba(0,0,0,0.2);
    --item-shadow-hover: rgba(0,0,0,0.5);
    --item-tag-bg: var(--orange-900);
    --item-tag-text: var(--gray-50);
    --item-text-color: var(--gray-500);
    --item-link-color: var(--default-text);
    --item-text-hover: var(--cyan-xchina);
    --numbered-list-item-bg: transparent;
    --numbered-list-item-bg-hover: var(--gray-800);
    --numbered-list-item-rank-bg: var(--gray-700);
    --numbered-list-item-rank-text: var(--gray-300);
    --numbered-list-item-rank-no1-bg: linear-gradient(135deg,#FFD700,#FFA500);
    --numbered-list-item-rank-no1-text: #8B4513;
    --numbered-list-item-rank-no2-bg: linear-gradient(135deg,#C0C0C0,#A8A8A8);
    --numbered-list-item-rank-no2-text: #2F4F4F;
    --numbered-list-item-rank-no3-bg: linear-gradient(135deg,#CD7F32,#B87333);
    --numbered-list-item-rank-no3-text: var(--white);
    --filter-label-text: var(--default-text);
    --filter-opt-text: var(--default-text);
    --filter-opt-hover-text: var(--default-text-link-hover);
    --filter-opt-checked-text: var(--orange-xchina);
    --tab-container-shadow: 0 2px 6px rgba(0,0,0,0.1);
    --tab-nav-text: var(--gray-400);
    --tab-nav-text-hover: var(--gray-200);
    --tab-nav-text-checked: var(--white);
    --tab-nav-bg: var(--gray-800);
    --tab-nav-bg-hover: var(--gray-700);
    --tab-nav-bg-checked: var(--orange-800);
    --tab-nav-split: var(--gray-800);
    --tab-nav-split-checked: var(--orange-800);
    --tab-contents-bg: var(--gray-900);
    --tab-content-text: var(--gray-300);
    --category-parent-text: var(--gray-300);
    --category-parent-text-hover: var(--default-text-link-hover);
    --category-sub-bg: var(--gray-600);
    --category-sub-text: var(--gray-300);
    --category-sub-bg-hover: var(--cyan-xchina);
    --category-sub-text-hover: var(--white);
    --category-sub-count-bg: var(--cyan-700);
    --category-sub-count-text: var(--gray-200);
    --table-border: var(--gray-500);
    --table-header-bg: var(--orange-xchina);
    --table-header-text: var(--gray-100);
    --table-row-bg: var(--gray-700);
    --table-row-hover-bg: var(--gray-600);
    --table-row-text: var(--gray-300);
    --table-row-hover-text: var(--gray-900);
    --affair-text: var(--cyan-200);
    --affair-text-hover: var(--cyan-xchina);
    --option-box-bg: var(--gray-700);
    --option-box-hover-bg: var(--gray-600);
    --option-box-selected-bg: var(--orange-xchina);
    --option-box-text: var(--gray-300);
    --option-box-hover-text: var(--gray-200);
    --option-box-selected-text: var(--gray-100);
    --option-box-unavailable-text: var(--gray-400);
    --option-box-border: var(--gray-500);
    --option-box-hover-border: var(--orange-xchina);
    --option-box-selected-border: var(--orange-xchina);
    --option-box-selected-icon: var(--white);
    --floating-toolbar-bg: rgba(0,0,0,0.5);
    --floating-toolbar-border: transparent;
    --floating-toolbar-btn-bg: var(--gray-900);
    --floating-toolbar-btn-bg-hover: var(--cyan-xchina);
    --floating-toolbar-btn-border: var(--gray-600);
    --floating-toolbar-btn-border-hover: var(--cyan-xchina);
    --floating-toolbar-btn-text: var(--gray-300);
    --floating-toolbar-btn-text-hover: var(--white);
    --floating-toolbar-btn-bg-disabled: var(--gray-500);
    --floating-toolbar-btn-text-disabled: var(--gray-400);
    --floating-toolbar-btn-border-disabled: var(--gray-400);
    --hero-section-bg: var(--gray-900);
    --tag-bg: var(--gray-800);
    --tag-bg-hover: var(--cyan-xchina);
    --tag-text: var(--gray-300);
    --tag-text-hover: var(--white);
    --tag-border: var(--gray-500);
    --tag-border-hover: var(--cyan-xchina);
    --modal-header-bg: var(--gray-700);
    --modal-header-text: var(--gray-300);
    --modal-body-bg: var(--gray-900);
    --modal-body-text: var(--gray-300);
    --modal-footer-bg: var(--gray-700);
    --modal-footer-text: var(--gray-300);
    --modal-line: var(--gray-500);
    --album-text: var(--gray-100);
    --album-text-shadow: rgba(0,0,0,0.5);
    --fiction-brief-text: var(--gray-300);
    --mp3-player-bg: linear-gradient(135deg,#3c3c64 0%,#36364e 100%);
    --mp3-player-secondary-bg: rgba(66,66,66,0.9);
    --mp3-player-audio-control-bg: linear-gradient(90deg,#3facfe 0%,#00929e 100%);
    --mp3-player-caption-text: var(--gray-300);
    --fiction-body-text: var(--gray-200);
    --not-found-title-color: var(--gray-300);
    --not-found-description-color: var(--gray-400);
    --not-found-svg-bg: #2d3748;
    --not-found-svg-border: #4a5568;
    --not-found-svg-primary: #718096;
    --not-found-svg-secondary: #4a5568;
    --comment-bg: var(--gray-800);
    --comment-nickname-text: var(--red-400);
    --comment-time-text: var(--gray-400);
    --comment-remark-border: var(--orange-xchina);
    --comment-remark-bg: var(--cyan-900);
    --comment-remark-text: var(--gray-300);
    --comment-misc-border: var(--orange-700);
    --comment-misc-bg: var(--cyan-900);
    --comment-misc-text: var(--gray-300);
    --comment-btn-text: var(--cyan-xchina);
    --comment-btn-text-hover: var(--gray-100);
    --comment-btn-bg: var(--cyan-900);
    --comment-btn-bg-hover: var(--cyan-800)
}

[data-theme="dark"] .pager {
    --pager-text-color: var(--gray-400);
    --pager-bg-color: var(--gray-700);
    --pager-border-color: transparent;
    --pager-hover-text-color: var(--white);
    --pager-hover-bg-color: var(--gray-500);
    --pager-hover-border-color: transparent;
    --pager-current-text-color: var(--gray-700);
    --pager-current-bg-color: var(--orange-xchina);
    --pager-current-border-color: transparent;
    --pager-disabled-text-color: var(--gray-500);
    --pager-disabled-bg-color: var(--gray-700);
    --pager-disabled-border-color: transparent
}

[data-theme="dark"] .pager-js {
    --pager-js-btn-text-color: var(--gray-300);
    --pager-js-btn-bg-color: var(--gray-600);
    --pager-js-btn-border-color: transparent;
    --pager-js-btn-hover-text-color: var(--white);
    --pager-js-btn-hover-bg-color: var(--gray-500);
    --pager-js-btn-hover-border-color: transparent;
    --pager-js-btn-current-text-color: var(--gray-700);
    --pager-js-btn-current-bg-color: var(--orange-xchina);
    --pager-js-btn-current-border-color: transparent;
    --pager-js-btn-disabled-text-color: var(--gray-500);
    --pager-js-btn-disabled-bg-color: var(--gray-300);
    --pager-js-btn-disabled-border-color: transparent
}

:root {
    text-autospace: normal
}

* {
    transition: background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease
}

body {
    font-size: 16px;
    margin: 0;
    background-color: var(--body-bg);
    color: var(--body-text);
    background-image: url('/images/background/seamless-01.png')
}

a {
    text-decoration: none;
    color: var(--body-text);
    transition: color 0.2s ease
}

a:hover {
    color: var(--default-text-link-hover)
}

del {
    color: var(--default-text-del)
}

textarea {
    padding: 5px;
    resize: none;
    background: var(--input-bg);
    color: var(--input-text)
}

input[type='text'],input[type='password'],input[type='number'],input[type='email'],input[type='url'] {
    outline: none;
    box-sizing: border-box;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    height: 30px;
    line-height: 30px;
    padding: 0 8px 0 8px
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type='number'] {
    -moz-appearance: textfield
}

textarea::placeholder,input[type='text']::placeholder,input[type='password']::placeholder,input[type='number']::placeholder,input[type='email']::placeholder {
    color: var(--input-placeholder-text)
}

input[type='text']:focus,input[type='password']:focus,input[type='number']:focus,input[type='email']:focus {
    border: 1px solid var(--input-focus-border);
    background: var(--input-focus-bg);
    color: var(--input-focus-text)
}

select {
    padding: 5px;
    background: var(--input-bg);
    color: var(--input-text)
}

.highlight {
    color: var(--highlight-text)
}

.hide {
    display: none
}

h1 {
    font-size: 22px
}

h2 {
    font-size: 20px;
    display: flex
}

h2>div:nth-child(1) {
    width: 80%
}

h2>div:nth-child(2) {
    padding-right: 1%;
    font-size: 16px;
    flex-grow: 1;
    text-align: right
}

h3 {
    font-size: 16px
}

.guessYouLike>a>div {
    width: 90%;
    height: 0;
    padding-bottom: 90% !important;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    transition: all 0.25s ease;
    margin: auto auto 20px auto
}

.guessYouLike>a>div:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.info,.thumbup,.prevNext,.sort,.download,.photo-tags {
    background-color: #fff;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    padding: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sort {
    height: auto;
    line-height: auto;
    padding: 8px 10px
}

.download a:hover {
    color: #fe711d
}

.download>span {
    padding-right: 15px
}

.prevNext {
    color: #888;
    font-size: 0.9em
}

.prevNext a {
    color: #00f
}

.prevNext a:hover {
    color: #f00
}

.prevNext>div:first-child>div {
    display: inline-block;
    width: 45%;
    padding-right: 5%
}

.info>div,.thumbup>div,.download>div {
    display: inline-block;
    margin-right: 25px
}

.info>.telegram {
    float: right
}

.info a {
    color: #00a
}

.info img {
    width: 18px;
    height: 18px;
    padding-right: 3px;
    padding-bottom: 4px;
    vertical-align: middle
}

.sort {
    display: flex
}

.sort .opt {
    display: inline-block;
    margin-right: 10px
}

.sort .opt[checked] {
    color: #f00;
    font-weight: bold
}

.sort>div:nth-child(1) {
    flex-grow: 1
}

.sort>div:nth-child(2) {
    width: 150px;
    text-align: right
}

.thumbup>div {
    cursor: pointer
}

.info i,.thumbup i,.download i,.photo-tags i {
    color: #fe711d;
    margin-right: 5px
}

.actor-intro {
    color: #666
}

.actor-intro>.link {
    padding: 5px 5px 5px 0;
    margin-top: 5px;
    border-top: #eee 1px solid;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: end
}

.actor-intro>.link a {
    color: #00c;
    vertical-align: middle
}

.actor-intro>.link a:hover img {
    transform: rotate(360deg)
}

.actor-intro>.link img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding-right: 3px;
    vertical-align: middle;
    transition: transform 0.5s ease
}

.verifyCode {
    cursor: pointer;
    vertical-align: middle
}

blockquote {
    width: 95%;
    margin: 5px auto 5px auto;
    padding: 10px 10px 20px 10px;
    background-color: #33809e;
    font-size: 0.9em;
    color: #fff;
    border-radius: 5px
}

blockquote>p {
    margin: 0
}

blockquote:before {
    content: url(/images/icon/pin.png)
}

.keyButton {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    text-align: center;
    color: #555;
    cursor: default;
    margin: 0 5px 0 5px;
    border-color: #f2f2f2;
    border-style: solid;
    text-shadow: 0 0.5px 1px #777,0 2px 6px #f2f2f2;
    border-width: 1px;
    border-radius: 8px;
    background: -webkit-linear-gradient(top,#f9f9f9 0%,#D2D2D2 80%,#c0c0c0 100%);
    display: inline-block;
    transition: box-shadow 0.3s ease,transform 0.15s ease;
    box-shadow: 0 0 1px #888,0 1px 0 #fff,0 6px 0 #C0C0C0,0 8px 17px rgba(#444,0.4),2px 1px 4px rgba(#444,0.25),-2px 1px 4px rgba(#444,0.25),0 9px 16px rgba(#444,0.1)
}

.article.notFound {
    padding-top: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px
}

.article.notFound i {
    padding-right: 5px
}

.article.intro {
    display: flex
}

.article.intro .logo {
    flex: 0 0 80px;
    height: 80px;
    color: #da0;
    background-color: #000;
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-shadow: #888 3px 4px 3px;
    user-select: none
}

.article.intro .logo img {
    border-radius: 10%;
    width: 100%;
    height: 100%
}

.article.intro .text {
    flex: 1 1 auto;
    padding-left: 10px;
    box-sizing: border-box
}

.article.intro .text>.header {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 5px
}

.article.intro .text>.body {
    color: #f00
}

img.banner960x80 {
    width: 100%
}

.error {
    margin: 0 0 20px auto;
    color: #666;
    padding: 10px 0 30px 0;
    font-size: 16px;
    font-size: 1.2em;
    width: 100%
}

.error img {
    width: 15vw
}

.error i {
    font-size: 130px;
    padding-bottom: 15px
}

.error span {
    color: #c00
}

.error>div {
    text-align: center
}

.error>div:nth-child(2) {
    font-size: 35px;
    font-weight: bold;
    padding-bottom: 25px
}

.error>div:nth-child(3) {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 25px
}

.error a {
    color: var(--default-text)
}

.error a:hover {
    color: var(--default-text-link-hover)
}

.photo-error {
    font-size: 1.2rem;
    text-align: center;
    padding: 2rem 0
}

.photo-error i {
    padding-right: 5px
}

.exoclick_720x80 {
    width: 100%;
    height: 125px
}

.ex-300-250,.adu_300x250 {
    width: 100% !important;
    aspect-ratio: 3 / 2.5 !important
}

.ex-300-250>div,.ex-300-250 video,.ex-300-250 iframe,.adu_300x250>div,.adu_300x250 video,.adu_300x250 iframe {
    width: 100% !important;
    height: 100% !important
}

.jumpto {
    cursor: pointer;
    color: #00c;
    padding-right: 3px
}

.register .avatar {
    display: flex;
    align-items: center
}

.paypal-button {
    width: 200px;
    background-color: #ffc439;
    background-image: url('/images/paypal.svg');
    background-size: 60px auto;
    background-position: center center;
    background-repeat: no-repeat;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    cursor: pointer
}

.paypal-button:hover {
    background-color: #f2ba36
}

.article.javd {
    position: relative;
    background-image: url('/images/background/01.png')
}

.article.javd .logo {
    background-image: url('/images/icon/javd.webp');
    background-size: 64px 64px;
    width: 64px;
    height: 64px;
    position: absolute;
    right: 15px;
    top: 10px;
    border-radius: 50%;
    -webkit-box-shadow: 2px 4px 12px 2px rgba(0,0,0,0.8);
    box-shadow: 2px 4px 12px 2px rgba(0,0,0,0.8);
    transition: transform 0.5s ease
}

.article.javd .logo:hover {
    transform: rotate(360deg)
}

.article.javd a {
    color: #00c
}

.article.javd>.body>div {
    display: flex;
    padding: 4px 10px;
    border-bottom: #ccc 1px solid
}

.article.javd>.footer {
    padding-top: 10px;
    text-align: right;
    font-size: 0.8em !important
}

.article.javd>.footer img {
    width: 16px;
    height: 16px;
    padding-right: 5px;
    vertical-align: middle
}

.article.javd>.body>div>div {
    overflow: hidden
}

.article.javd>.body>div>div:nth-child(1) {
    flex: 1 1 auto
}

.article.javd>.body>div>div:nth-child(2) {
    flex: 0 0 40%
}

.userFav {
    cursor: pointer;
    color: #f00
}

.joiner {
    padding: 0 8px
}

.user-tags {
    display: flex;
    align-items: center
}

.user-tags>img,.user-tag {
    width: 24px;
    height: 16px;
    border: #ddd 1px solid;
    margin-right: 2px
}

.show-help {
    color: #00f;
    font-size: 18px;
    cursor: pointer;
    padding-left: 5px
}

.show-help:hover {
    color: #f00
}

.block-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    user-select: none
}

.block-overlay a {
    color: white
}

.block-overlay a:hover {
    color: var(--default-text-link-hover)
}

figure {
    max-width: 60%;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--body-bg)
}

figure img {
    width: 100%;
    display: block
}

figcaption {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--body-text);
    line-height: 1.5;
    text-align: center;
    background: var(--body-bg);
    border-top: 1px solid var(--input-border)
}

@media screen and (max-width: 768px) {
    body {
        font-size:16px
    }

    h1 {
        font-size: 20px
    }

    h2 {
        font-size: 18px
    }

    h3 {
        font-size: 16px
    }

    .zoom-filter>.header {
        font-size: 1.2em;
        font-weight: bold;
        display: flex;
        border-bottom: transparent 1px dashed;
        height: 1.5em;
        line-height: 1.5em
    }

    .zoom-filter[expanded]>.header {
        border-bottom: #ddd 1px dashed;
        padding-bottom: 8px
    }

    .zoom-filter>.header>div:nth-child(1) {
        flex: 0 0 90%
    }

    .zoom-filter>.header>div:nth-child(2) {
        flex: 0 0 10%;
        display: flex;
        justify-content: right;
        align-items: center
    }

    .zoom-filter>.header>div:nth-child(3) img {
        width: 12px;
        height: 6px
    }

    .zoom-filter[expanded]>.header>div:nth-child(3) img {
        transform: rotate(180deg)
    }

    .zoom-filter[expanded]>.series-intro {
        display: none
    }

    .zoom-filter>.series-intro {
        padding-top: 10px
    }

    .zoom-filter>.series-intro {
        display: flex
    }

    .zoom-filter>.series-intro>div:nth-child(1) {
        flex: 0 0 80px
    }

    .zoom-filter>.series-intro>div:nth-child(1)>img {
        width: 64px;
        height: 64px;
        border-radius: 50%
    }

    .zoom-filter>.series-intro>div:nth-child(2) {
        color: #666;
        font-size: 1em;
        min-height: 64px;
        display: flex;
        align-items: center
    }

    .zoom-filter>.series-intro .active-series {
        display: none
    }

    .zoom-filter>.series-intro .link {
        display: none
    }

    .zoom-filter>.body {
        font-size: 1.05em;
        padding-top: 5px;
        display: none
    }

    .zoom-filter[expanded]>.body {
        display: block
    }

    .zoom-filter>.body>a>div {
        padding: 2px 0
    }

    .zoom-filter>.body>a>div[checked] {
        color: #f00;
        font-weight: bold
    }

    .zoom-filter>.body>.search {
        padding: 8px 0;
        padding-left: 4%;
        font-weight: bold;
        display: flex
    }

    .zoom-filter>.body>.search>div {
        display: flex;
        align-items: center
    }

    .zoom-filter>.body>.search[checked] {
        color: #f00
    }

    .zoom-filter>.body>.search>div:nth-child(1) {
        flex-shrink: 1;
        padding-right: 5px
    }

    .zoom-filter>.body>.search>div:nth-child(2) {
        flex: 0 0 50vw;
        background-color: #f0f
    }

    .zoom-filter>.body>.search>div:nth-child(3) {
        display: flex;
        align-items: center;
        padding: 0 5px
    }

    .zoom-filter>.body>.search input[type='search'] {
        height: 25px;
        line-height: 25px;
        width: 50vw;
        outline: none;
        border: #ccc 1px solid;
        padding: 0 8px 0 8px;
        position: relative
    }

    .zoom-filter>.body>a>div.sub0 {
        padding-left: 4%;
        font-weight: bold
    }

    .zoom-filter>.body>a>div.sub1 {
        padding-left: 8%
    }

    .zoom-filter>.body>a>div.sub2 {
        padding-left: 12%
    }

    .zoom-filter>.body>a>div.sub1:before {
        content: "- ";
        color: #ccc
    }

    .zoom-filter>.body>a>div.sub2:before {
        content: "• ";
        color: #ccc
    }

    .info>div {
        margin-right: 5vw
    }

    .info>div[target='tag'] {
        display: none
    }

    .info>.telegram {
        display: none
    }

    .guessYouLike {
        display: none
    }

    .keyButton {
        margin: 5px 10px
    }

    .top>.no-scroll {
        display: none
    }

    .exoclick_720x80 {
        width: 100%;
        height: 12.5vw
    }

    .mobile-video-body {
        margin: auto;
        padding-top: calc(56.25vw + 11vw + 15px);
        padding-bottom: 7vh
    }

    .mobile-video-body h1 {
        margin: 0;
        padding-bottom: 10px;
        font-size: 19px
    }

    .mobile-video-tabs {
        font-size: 14px;
        display: flex;
        align-items: center;
        border-bottom: #ccc 1px solid;
        position: fixed;
        top: 56.25vw;
        width: 100vw;
        height: 11vw;
        background-color: #fff;
        overflow: hidden;
        z-index: 2
    }

    .mobile-video-tabs i {
        padding-right: 1px
    }

    .mobile-video-tabs img {
        width: 16px;
        height: 16px;
        padding-right: 2px;
        border-radius: 50%;
        filter: grayscale(100%);
        opacity: 0.6
    }

    .mobile-video-tabs>div[checked] img {
        filter: grayscale(0%);
        opacity: 1
    }

    .mobile-video-tabs>div {
        padding: 0 8px;
        margin-right: 5px;
        overflow: hidden;
        display: flex;
        align-items: center
    }

    .mobile-video-tabs>div[checked] {
        font-weight: bold;
        position: relative
    }

    .mobile-video-tabs>div[checked]:after {
        content: "";
        width: 10px;
        position: absolute;
        border-bottom: 3px solid #000;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px
    }

    .mobile-video-tab {
        padding: 0 10px;
        display: none
    }

    .mobile-video-tab[checked] {
        display: block
    }

    .mobile-video-screenshot {
        padding-bottom: 15px
    }

    .mobile-video-screenshot h3 {
        font-size: 16px
    }

    .mobile-video-screenshot img {
        max-width: 100%
    }

    .mobile-video-tags {
        padding-bottom: 15px
    }

    .mobile-video-tags>div,.mobile-video-tags>a>div {
        display: inline-block;
        margin-right: 3px;
        margin-bottom: 2px;
        background-color: #999;
        color: #fff;
        border-radius: 5px;
        border: #ccc 1px solid;
        padding: 0 5px;
        height: 25px;
        line-height: 25px;
        font-size: 0.85em;
        max-width: 100%;
        overflow: hidden
    }

    .mobile-video-tags i {
        padding-right: 5px
    }

    .mobile-video-tags a {
        color: #fff
    }

    .mobile-video-tags img {
        width: 16px;
        height: 16px;
        padding-right: 5px;
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 5px
    }

    .mobile-video-tags .delimiter {
        color: #fff
    }

    .mobile-video-intro {
        color: #666;
        padding-bottom: 15px;
        font-size: 14px
    }

    .mobile-video-download .button {
        margin-bottom: 15px
    }

    .mobile-video-recommend {
        display: flex;
        margin-bottom: 8px
    }

    .mobile-video-recommend>div:nth-child(1) {
        flex: 0 0 35vw;
        height: calc(35vw * 0.5625);
        margin-right: 5px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative
    }

    .mobile-video-recommend>div:nth-child(1)>div {
        position: absolute;
        background-color: rgba(0,0,0,0.7);
        color: #fff;
        right: 2px;
        bottom: 2px;
        padding: 2px 5px;
        font-size: 0.8em !important
    }

    .mobile-video-recommend>div:nth-child(2)>div:nth-child(1) {
        font-size: 14px;
        line-height: 16px
    }

    .mobile-video-recommend>div:nth-child(2)>div:nth-child(2) {
        padding-top: 5px;
        height: 30px;
        line-height: 30px;
        overflow: hidden
    }

    .mobile-video-recommend>div:nth-child(2)>div:nth-child(2)>div {
        display: inline-block;
        margin-right: 3px;
        background-color: #999;
        color: #fff;
        border-radius: 5px;
        border: #ccc 1px solid;
        padding: 0 5px;
        height: 22px;
        line-height: 22px;
        font-size: 12px
    }

    .mobile-video-recommend>div:nth-child(2)>div:nth-child(2)>div i {
        padding-right: 5px
    }

    .mobile-video-javd>div {
        padding: 3px 0;
        border-bottom: #ddd 1px solid;
        font-size: 0.9em
    }

    .mobile-video-javd>div:last-child {
        border-bottom: transparent 1px solid
    }

    .mobile-video-javd a {
        color: #00c
    }

    .quickReply {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden
    }

    .quickReply option {
        font-size: 12px
    }

    ins {
        z-index: 0 !important
    }

    .error img {
        width: 50vw
    }

    .toast {
        right: 10px;
        left: auto;
        max-width: calc(100% - 20px);
        top: 10px
    }

    figure {
        max-width: 75%
    }
}

@keyframes ani-hero-section {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes ani-shake {
    10%,90% {
        transform: translate3d(-1px,0,0)
    }

    20%,80% {
        transform: translate3d(+2px,0,0)
    }

    30%,70% {
        transform: translate3d(-4px,0,0)
    }

    40%,60% {
        transform: translate3d(+4px,0,0)
    }

    50% {
        transform: translate3d(-4px,0,0)
    }
}

@keyframes ani-btn {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes ani-scroll-left {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

@keyframes ani-model-pulse {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.05)
    }
}

@keyframes ani-push-bottom {
    from {
        bottom: -100px
    }

    to {
        bottom: 0px
    }
}

@keyframes ani-pulse {
    0%,100% {
        opacity: 0.3
    }

    50% {
        opacity: 0.1
    }
}

@keyframes mp3-player-caption-pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0.5
    }
}

:root {
    --main-container-width: 1320px
}

.main-container {
    margin: auto;
    width: var(--main-container-width)
}

body>.main-container {
    margin-bottom: 1.5rem
}

.content-box {
    background-color: var(--default-bg);
    padding: 0.75rem;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 1rem;
    border-radius: 5px;
    overflow: hidden
}

.content-box.no-padding {
    padding: 0
}

.content-box.no-margin {
    margin: 0
}

.content-box .header {
    margin-bottom: 1rem
}

.layout-lr {
    display: flex;
    gap: 1rem;
    align-items: stretch
}

.layout-lr.nogap {
    gap: 0
}

.layout-lr>div {
    flex: 1 1 auto;
    min-width: 0
}

.layout-lr .left-fixed-50 {
    flex: 0 0 50px
}

.layout-lr .left-fixed-75 {
    flex: 0 0 76px
}

.layout-lr .left-fixed-100 {
    flex: 0 0 100px
}

.layout-lr .left-1 {
    flex: 1;
    min-width: 0
}

.layout-lr .left-2 {
    flex: 2;
    min-width: 0
}

.layout-lr .left-3 {
    flex: 3;
    min-width: 0
}

.layout-lr .left-4 {
    flex: 4;
    min-width: 0
}

.layout-lr .left-5 {
    flex: 5;
    min-width: 0
}

.layout-lr .left-6 {
    flex: 6;
    min-width: 0
}

.layout-lr .left-7 {
    flex: 7;
    min-width: 0
}

.layout-lr .left-8 {
    flex: 8;
    min-width: 0
}

.layout-lr .middle-1 {
    flex: 1;
    min-width: 0
}

.layout-lr .middle-2 {
    flex: 2;
    min-width: 0
}

.layout-lr .middle-3 {
    flex: 3;
    min-width: 0
}

.layout-lr .middle-4 {
    flex: 4;
    min-width: 0
}

.layout-lr .middle-5 {
    flex: 5;
    min-width: 0
}

.layout-lr .middle-6 {
    flex: 6;
    min-width: 0
}

.layout-lr .middle-7 {
    flex: 7;
    min-width: 0
}

.layout-lr .middle-8 {
    flex: 8;
    min-width: 0
}

.layout-lr .right,.layout-lr .right-1 {
    flex: 1;
    min-width: 0
}

.layout-lr .right-2 {
    flex: 2;
    min-width: 0
}

.layout-lr .right-3 {
    flex: 3;
    min-width: 0
}

.layout-lr .right-4 {
    flex: 4;
    min-width: 0
}

.layout-lr .right-5 {
    flex: 5;
    min-width: 0
}

.layout-lr .right-5 {
    flex: 6;
    min-width: 0
}

.layout-lr .right-7 {
    flex: 7;
    min-width: 0
}

.layout-lr .right-8 {
    flex: 8;
    min-width: 0
}

.title-lr {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem
}

.title-lr .left {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2rem;
    font-weight: bold
}

.title-lr .right {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15em;
    text-align: right;
    line-height: 1.5;
    font-size: 0.85rem
}

.title-lr .right i {
    padding: 0 0.5rem
}

@media only screen and (max-width: 768px) {
    :root {
        --main-container-width:95%
    }

    body>.main-container {
        margin-bottom: 4rem
    }

    .content-box {
        padding: 0.5rem
    }

    .left-1,.left-2,.right-1,.right-2 {
        display: none !important
    }

    .my .left-1,.my .left-2,.show-on-mobile .left-1,.show-on-mobile .left-2,.show-on-mobile .right-1,.show-on-mobile .right-2 {
        display: block !important
    }
}

@media only screen and (min-width: 1025px) and (max-width:1400px) and (pointer:fine) {
    :root {
        --main-container-width:95%
    }
}

.collection-hub__header {
    margin-bottom: 1.25rem
}

.collection-hub__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--default-text);
    line-height: 1.35
}

.collection-hub__lead {
    margin: 0;
    max-width: 42em;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--default-secondary-text)
}

.collection-hub__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0.75rem
}

@media only screen and (min-width: 600px) {
    .collection-hub__grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap: 0.875rem
    }
}

@media only screen and (min-width: 900px) {
    .collection-hub__grid {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}

@media only screen and (min-width: 1200px) {
    .collection-hub__grid {
        grid-template-columns:repeat(6,minmax(0,1fr))
    }
}

.collection-hub__cell {
    margin: 0;
    padding: 0;
    min-width: 0
}

.collection-hub__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.75rem 0.625rem;
    padding-top: 0.875rem;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: var(--default-text);
    background-color: var(--item-bg);
    border: 1px solid var(--default-split);
    border-radius: 10px;
    box-shadow: 0 1px 3px var(--item-shadow);
    transition: transform 0.2s ease,box-shadow 0.2s ease,color 0.2s ease,border-color 0.2s ease
}

.collection-hub__card:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px var(--item-shadow-hover);
    color: var(--default-text-link-hover);
    border-color: var(--default-text-link-hover)
}

.collection-hub__title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.2em;
    max-width: 100%
}

.collection-hub__name {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word
}

.collection-hub__count {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--default-secondary-text);
    opacity: 0.88;
    white-space: nowrap
}

.collection-hub__hot-label {
    position: absolute;
    top: 5px;
    right: 6px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--default-secondary-text);
    background: transparent;
    border: 1px solid var(--default-split);
    pointer-events: none
}

.collection-page__intro {
    margin-bottom: 1rem
}

.collection-page__block-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--default-text);
    line-height: 1.35
}

.collection-page__rec-links {
    margin: 0;
    line-height: 1.65;
    font-size: 0.9375rem
}

.collection-page__rec-sep {
    color: var(--default-secondary-text);
    opacity: 0.75;
    padding: 0 0.15em
}

.collection-page__seo-note {
    margin-top: 0.25rem
}

.collection-page__seo-note p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--default-secondary-text)
}

.collection-page__module-hint {
    margin: 0.5rem 0 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--default-secondary-text)
}

.collection-page__cross {
    margin: 0 0 0.15rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--default-secondary-text)
}

.collection-page__cross-label {
    margin-right: 0.15em
}

.collection-page__cross a {
    color: var(--default-text-link)
}

.collection-page__cross a:hover {
    color: var(--default-text-link-hover)
}

.collection-page__cross-sep {
    color: var(--default-secondary-text);
    opacity: 0.85
}

.collection-page__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem
}

.collection-page__related-item {
    margin: 0;
    padding: 0
}

.collection-page__related-item a {
    color: var(--default-text-link);
    font-size: 0.9375rem
}

.collection-page__related-item a:hover {
    color: var(--default-text-link-hover)
}

.collection-page__seo-site {
    margin-top: 0.5rem
}

.collection-page__seo-site p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--default-secondary-text)
}

nav.mobile {
    display: none
}

nav.pc {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    user-select: none;
    background-color: var(--top-nav-bg);
    height: 65px;
    line-height: 65px;
    width: 100%
}

nav.pc>div {
    width: 1700px;
    display: flex;
    margin: auto
}

nav.pc .logo {
    flex: 0 0 200px;
    display: flex;
    justify-content: end;
    position: relative
}

nav.pc .logo img {
    width: 150px;
    height: 57px;
    vertical-align: middle
}

nav.pc .logo .country {
    position: absolute;
    top: -12px;
    right: 0px;
    color: var(--top-nav-text);
    font-size: 12px;
    font-family: sans-serif
}

nav.pc .topMenu {
    margin: auto;
    flex: 0 0 1200px;
    display: flex;
    position: relative;
    font-size: 0.85em !important
}

nav.pc .topMenu:before {
    content: "";
    background-color: var(--top-nav-text);
    position: absolute;
    left: 0;
    top: 15px;
    height: 40px;
    width: 1px
}

nav.pc .topMenu>a,nav.pc .topMenu>.menu {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--top-nav-text);
    text-align: center
}

nav.pc .menu {
    position: relative;
    transition: transform 0.3s
}

nav.pc .menu:hover {
    color: var(--top-nav-hover);
    font-weight: bold;
    transform: scale(1.1)
}

nav.pc .menu>.subs {
    width: 150px;
    position: absolute;
    padding: 8px;
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--top-menu-subs-bg);
    color: var(--top-menu-subs-item-text);
    border: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
    display: none;
    font-weight: normal
}

nav.pc .menu>.subs>a>div {
    height: 28px;
    line-height: 28px;
    border-bottom: var(--default-split);
    padding: 5px;
    display: flex;
    align-items: center;
    color: var(--top-menu-subs-item-text)
}

nav.pc .menu>.subs>a>div img {
    width: 18px;
    height: 18px;
    padding-right: 5px
}

nav.pc .menu>.subs>a>div i {
    padding-right: 5px
}

nav.pc .menu>.subs>a>div:hover {
    background-color: var(--top-menu-subs-item-bg-hover);
    color: var(--top-menu-subs-item-text-hover);
    transition: background 0.2s ease
}

nav.pc .menu:hover>.subs {
    display: block
}

nav.pc .menu>.subs>a>div:last-child {
    border-bottom: 0
}

nav.pc .menu>div:nth-child(1) {
    height: 35px;
    display: flex;
    align-items: end;
    justify-content: center;
    font-size: 22px
}

nav.pc .menu>div:nth-child(2) {
    height: 25px;
    line-height: 25px;
    text-align: center
}

nav.pc .topMenu img {
    width: 75px;
    vertical-align: middle
}

nav.pc .theme-container {
    flex: 0 0 50px;
    display: flex;
    align-items: center
}

nav.pc .languages {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 0.9em
}

nav.pc .languages .choose {
    display: none;
    padding: 6px 7px 1px 7px;
    position: absolute;
    top: 48px;
    left: -5px;
    background-color: var(--top-nav-bg);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,1)
}

nav.pc .languages:hover .choose {
    display: block
}

nav.pc .languages .language {
    box-sizing: border-box;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    background-color: var(--top-language-bg);
    color: var(--top-language-text)
}

nav.pc .languages .choose .language {
    margin-bottom: 5px;
    cursor: pointer
}

nav.pc .languages .language[checked] {
    background-color: var(--top-language-checked-bg);
    color: var(--top-language-checked)
}

nav.pc .languages .choose .language:hover {
    color: var(--top-language-hover);
    background: var(--top-language-hover-bg);
    font-weight: bold
}

nav.pc .languages .choose .language[checked]:hover {
    background-color: var(--top-language-checked-bg);
    color: var(--top-language-checked);
    font-weight: normal
}

nav.pc .login {
    flex: 0 0 165px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right
}

nav.pc .login .logined {
    cursor: pointer;
    position: relative;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    padding-left: 120px;
    margin-left: -120px
}

nav.pc .login .logined img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    vertical-align: middle
}

nav.pc .login .logined .myMenu {
    display: none;
    position: absolute;
    top: 48px;
    right: -10px;
    width: 150px;
    background-color: var(--top-nav-bg);
    border: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
    font-size: 0.9em
}

nav.pc .login .logined .myMenu i {
    padding-left: 5px
}

nav.pc .login .logined:hover .myMenu {
    display: block;
    padding: 5px
}

nav.pc .login .logined .myMenu .nickname,nav.pc .login .logined .myMenu>a>div {
    padding: 10px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    border-bottom: 1px solid var(--default-split)
}

nav.pc .login .logined .myMenu>a:last-child>div {
    border-bottom: transparent 1px dashed
}

nav.pc .login .logined .myMenu .nickname {
    cursor: default;
    font-weight: bold;
    font-size: 1rem;
    color: var(--top-nav-text)
}

nav.pc .login .logined .myMenu>a>div:hover {
    font-weight: bold
}

nav.pc .login a {
    color: var(--top-nav-text);
    cursor: pointer
}

nav.pc .login a:hover {
    color: var(--top-nav-hover)
}

nav.pc .login .notLogined {
    overflow: hidden;
    height: 65px;
    line-height: 65px
}

@media only screen and (max-width: 768px) {
    nav.pc {
        display:none
    }

    nav.mobile {
        display: block;
        background-color: var(--top-nav-bg);
        color: var(--top-nav-text);
        height: 6vh;
        line-height: 6vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 999;
        user-select: none
    }

    nav.mobile .topMenu {
        display: flex;
        gap: 0.5rem;
        height: 6vh
    }

    nav.mobile .topMenu>div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%
    }

    nav.mobile .topMenu .logo {
        flex-grow: 1;
        justify-content: flex-start;
        padding-left: 1%
    }

    nav.mobile .topMenu .logo img {
        height: 6vh;
        width: auto;
        display: block
    }

    nav.mobile .logo .country {
        position: absolute;
        top: -1.8vh;
        left: 14.5vh;
        color: #fff;
        font-size: 0.8em
    }

    nav.mobile .topMenu .theme-container {
        flex-shrink: 1
    }

    nav.mobile .topMenu .history-btn-container {
        flex-shrink: 0;
        font-size: 1.25rem
    }

    nav.mobile .topMenu .history-btn-container a {
        color: var(--top-nav-text);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem
    }

    nav.mobile .topMenu .history-btn-container a:hover {
        color: var(--top-nav-hover)
    }

    nav.mobile .topMenu .toggle-btn-container {
        flex-shrink: 1;
        justify-content: flex-end;
        padding-right: 0.5rem;
        font-size: 1.5rem
    }

    nav.mobile .overlay {
        display: none;
        background: none repeat scroll 0 0 black;
        width: 100%;
        height: 100%;
        left: 0;
        opacity: 0.7;
        position: fixed;
        top: 0;
        z-index: 98
    }

    nav.mobile .toggle-bar {
        display: none;
        position: absolute;
        top: 0;
        right: -80vw;
        width: 80vw;
        z-index: 1001
    }

    nav.mobile .toggle-bar>div:first-child {
        height: 6vh;
        background: var(--bar-mobile-header-bg);
        text-align: right;
        padding-right: 5%;
        color: var(--bar-mobile-header-text);
        font-size: 1.35rem;
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    nav.mobile .toggle-bar>div:last-child {
        height: 94vh;
        background-color: var(--bar-mobile-bg)
    }

    nav.mobile .toggle-bar .menu {
        padding: 0 3% 0 3%;
        height: 4.5vh;
        line-height: 4.5vh;
        display: flex;
        align-items: center;
        font-size: 1em;
        color: var(--bar-mobile-text);
        font-weight: bold;
        border-bottom: 1px solid var(--default-split)
    }

    nav.mobile .toggle-bar .menu>div:nth-child(1) {
        width: 1.5em
    }

    nav.mobile .toggle-bar .menu>div:nth-child(2) {
        flex-grow: 1
    }

    nav.mobile .toggle-bar .subs {
        background-color: var(--bar-mobile-subs-bg);
        color: var(--bar-mobile-subs-text);
        font-weight: bold;
        font-size: 0.9em;
        display: none
    }

    nav.mobile .toggle-bar .subs>a>div {
        height: 2.2rem;
        line-height: 2.2rem;
        color: var(--bar-mobile-subs-text);
        border-bottom: 1px solid var(--bar-mobile-split);
        padding-left: 1.8rem;
        display: flex;
        align-items: center
    }

    nav.mobile .toggle-bar .subs>a:last-child>div {
        border-bottom: 0
    }

    nav.mobile .toggle-bar .subs img {
        width: 2vh;
        height: 2vh;
        padding-right: 0.5vh
    }

    nav.mobile .toggle-bar .subs i {
        padding-right: 0.5vh;
        font-size: 0.9em
    }
}

@media only screen and (min-width: 1025px) and (max-width:1400px) and (pointer:fine) {
    nav.mobile {
        display:none
    }

    nav.pc>div {
        width: 1350px
    }

    nav.pc .logo {
        flex: 0 0 160px
    }

    nav.pc .logo img {
        width: 120px;
        height: 45px;
        padding-right: 15px
    }

    nav.pc .logo .country {
        right: 10px
    }

    nav.pc .topMenu {
        flex: 0 0 950px;
        font-size: 0.8em !important
    }

    nav.pc .topMenu img {
        width: 65px
    }

    nav.pc .menu>div:nth-child(1) {
        font-size: 18px
    }

    nav.pc .login {
        flex: 0 0 115px
    }
}

body.is-tablet nav.mobile {
    display: none !important
}

body.is-tablet nav.pc {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    line-height: normal;
    overflow: visible;
    box-sizing: border-box
}

body.is-tablet nav.pc > div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    height: auto;
    line-height: normal;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow: visible
}

body.is-tablet nav.pc .logo {
    display: flex !important;
    flex: 0 0 10% !important;
    width: 10% !important;
    max-width: 10% !important;
    min-width: 0 !important;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative
}

body.is-tablet nav.pc .logo img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 42px !important;
    height: auto !important;
    vertical-align: middle
}

body.is-tablet nav.pc .logo .country {
    font-size: 10px;
    top: -8px;
    right: 2px
}

body.is-tablet nav.pc .topMenu {
    flex: 0 0 66% !important;
    width: 66% !important;
    max-width: 66% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px;
    font-size: 0.7em !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    overflow: visible;
    box-sizing: border-box
}

body.is-tablet nav.pc .topMenu:before {
    display: none
}

body.is-tablet nav.pc .topMenu > a,body.is-tablet nav.pc .topMenu > .menu {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 1px 2px
}

body.is-tablet nav.pc .topMenu img {
    width: auto !important;
    max-height: 22px !important;
    max-width: 36px !important;
    height: auto !important;
    vertical-align: middle
}

body.is-tablet nav.pc .menu {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    padding: 1px 0;
    box-sizing: border-box;
    max-width: 100%
}

body.is-tablet nav.pc .menu:hover {
    transform: none;
    font-weight: bold
}

body.is-tablet nav.pc .menu.has-subs {
    cursor: pointer;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent
}

body.is-tablet nav.pc .menu > .subs {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    pointer-events: auto
}

body.is-tablet nav.pc .menu.has-subs:not(.is-open):hover > .subs {
    display: none !important
}

body.is-tablet nav.pc .menu.has-subs.is-open > .subs,body.is-tablet nav.pc .menu.has-subs.is-open:hover > .subs {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important
}

@media (min-width: 769px) and (max-width:1366px) {
    nav.pc {
        height:auto !important;
        line-height: normal !important;
        overflow: visible !important
    }

    nav.pc > div {
        height: auto !important;
        overflow: visible !important
    }

    nav.pc .topMenu {
        overflow: visible !important
    }

    nav.pc .topMenu > .menu.has-subs {
        overflow: visible !important;
        position: relative
    }

    nav.pc .topMenu > .menu.has-subs > .subs {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10001
    }

    nav.pc .topMenu > .menu.has-subs:not(.is-open):hover > .subs {
        display: none !important
    }

    nav.pc .topMenu > .menu.has-subs.is-open > .subs,nav.pc .topMenu > .menu.has-subs.is-open:hover > .subs {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important
    }
}

body.is-tablet nav.pc .menu > div:nth-child(1) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    line-height: 1 !important;
    font-size: 11px !important;
    flex: 0 0 auto
}

body.is-tablet nav.pc .menu > div:nth-child(1) i {
    font-size: 11px !important
}

body.is-tablet nav.pc .menu > div:nth-child(2) {
    display: block !important;
    height: auto !important;
    line-height: 1.15 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto;
    text-align: center;
    padding: 0 1px;
    box-sizing: border-box
}

body.is-tablet nav.pc .menu > div:nth-child(2) i.caret,body.is-tablet nav.pc .menu > div:nth-child(2) .fa-caret-down {
    font-size: 7px !important;
    margin-left: 1px
}

body.is-tablet nav.pc .topMenu > a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 2px;
    white-space: nowrap !important;
    font-size: 10px !important;
    overflow: hidden
}

body.is-tablet nav.pc .theme-container {
    flex: 0 0 8% !important;
    width: 8% !important;
    max-width: 8% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    transform: none
}

body.is-tablet nav.pc .languages {
    flex: 0 0 8% !important;
    width: 8% !important;
    max-width: 8% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    padding: 0;
    box-sizing: border-box
}

body.is-tablet nav.pc .languages .language {
    width: 92%;
    max-width: 100%;
    height: 28px;
    line-height: 28px;
    font-size: 11px;
    box-sizing: border-box
}

body.is-tablet nav.pc .login {
    flex: 0 0 8% !important;
    width: 8% !important;
    max-width: 8% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box
}

body.is-tablet nav.pc .login .logined {
    padding-left: 0;
    margin-left: 0;
    right: 0
}

body.is-tablet nav.pc .login .logined img {
    width: 30px;
    height: 30px
}

body.is-tablet nav.pc .login .notLogined {
    height: auto;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 0.7em
}

.hero-section {
    left: 0px;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('/images/xchina.co/banner_1280x166.jpg');
    background-color: var(--hero-section-bg);
    transition: opacity 0.3s ease 0s;
    overflow: hidden;
    position: relative;
    word-wrap: break-word;
    outline: none;
    user-select: none
}

.hero-section.index {
    height: 300px;
    background-size: auto 100%;
    background-image: none
}

.hero-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    display: flex;
    will-change: transform;
    animation: none !important
}

.hero-images-container .hero-image {
    position: relative;
    height: 100%;
    transform: translateX(0px);
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    border: 0;
    width: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block
}

.hero-section>.hero-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    right: 0px;
    font-size: 16px;
    white-space: normal
}

.hero-section>.hero-title .hero-title-item {
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    letter-spacing: 3px;
    margin: auto;
    text-align: center;
    user-select: none;
    padding-bottom: 1rem
}

.hero-section>.hero-title h1.hero-title-item {
    font-size: 2.5rem
}

.hero-section.index>.hero-title .hero-title-item a {
    color: #f99;
    padding: 0 3px;
    font-size: 1.3em
}

.hero-section .main-container input[type="text"],.hero-section .main-container input[type="search"],.hero-section input[type="text"],.hero-section input[type="search"] {
    padding-left: 10px !important;
    box-sizing: border-box
}

.hero-section .main-container [class*="dropdown"],.hero-section .main-container [class*="Dropdown"],.hero-section [class*="dropdown"],.hero-section [class*="Dropdown"] {
    width: 360px;
    min-width: 280px;
    max-width: 100%;
    box-sizing: border-box
}

.hero-section [class*="dropdown"] [class*="hot"],.hero-section [class*="Dropdown"] [class*="hot"],.hero-section [class*="dropdown"] [class*="popular"],.hero-section [class*="Dropdown"] [class*="popular"],.hero-section [class*="dropdown"] > div:last-child,.hero-section [class*="Dropdown"] > div:last-child,.hero-section [class*="dropdown"] [class*="section"]:last-child,.hero-section [class*="Dropdown"] [class*="section"]:last-child {
    min-height: 160px
}

@media only screen and (max-width: 768px) {
    .hero-section {
        height:20vh
    }

    .hero-section.index {
        height: 25vh
    }

    .hero-section>.hero-title .hero-title-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem
    }

    .hero-section>.hero-title h1.hero-title-item {
        font-size: 1.2rem
    }

    .hero-section.index>.hero-title .hero-title-item a {
        font-size: 1.1em
    }
}

.push-top-container {
    display: none;
    position: fixed;
    top: 12px;
    right: -320px;
    z-index: 10001
}

.push-top {
    border-radius: 5px;
    background-color: #fff;
    padding: 0;
    margin-bottom: 12px;
    display: flex;
    width: 320px;
    overflow: hidden
}

.push-top>.media {
    border-radius: 5px 0 0 5px;
    flex: 0 0 290px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer
}

.push-top>.media:hover {
    transform: scale(1.03)
}

.push-top>.close {
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
    color: #999;
    background-color: #fff;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center
}

.push-top>.close:hover {
    color: #000
}

.push-slider {
    display: none;
    left: 0;
    bottom: 0;
    position: fixed;
    width: 300px;
    height: 168.75px;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    z-index: 10001;
    background-color: #000
}

.push-slider:nth-of-type(2) {
    left: auto;
    right: 0
}

.push-slider .vid {
    width: 100%;
    height: 100%;
    outline: none;
    border: 0
}

.push-slider .close,.push-bottom>.close {
    position: absolute;
    padding: 5px 20px;
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 10001;
    top: 0;
    right: 0
}

.push-bottom>.close {
    padding: 4px 15px
}

.push-slider .close:hover,.push-bottom>.close:hover {
    background: rgba(0,0,0,0.75)
}

.push-bottom-container {
    width: 100%;
    padding: 3px 0 0 0;
    background-color: rgba(0,0,0,0.05);
    position: fixed;
    bottom: 0px;
    text-align: center;
    animation-name: ani-push-bottom;
    animation-duration: 0.5s;
    display: none;
    z-index: 10001
}

.push-bottom {
    width: 400px;
    height: 80px;
    aspect-ratio: 5 / 1;
    margin: auto;
    position: relative;
    cursor: pointer
}

.push-bottom .media,.push-bottom img {
    width: 100%;
    height: 100%
}

.push-bottom:hover {
    transform: scale(1.03)
}

.banner-sexgps {
    width: 100%;
    border-radius: 5px;
    background-color: #225953;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpattern id='pattern' x='0' y='0' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%23225953'/%3E%3Cpath d='M0 0c80 50 120 50 200 0v100c-80 50-120 50-200 0z' fill='%231b4641'/%3E%3Cpath d='M0 100c80 50 120 50 200 0v100c-80 50-120 50-200 0z' fill='%232a6b64'/%3E%3Ccircle cx='0' cy='0' r='30' fill='%231b4641' opacity='0.3'/%3E%3Ccircle cx='200' cy='200' r='30' fill='%232a6b64' opacity='0.3'/%3E%3Ccircle cx='0' cy='200' r='20' fill='%232a6b64' opacity='0.3'/%3E%3Ccircle cx='200' cy='0' r='20' fill='%231b4641' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23pattern)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    color: #fff;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: #4e6561 1px solid;
    padding: 5px 8px;
    font-size: 15px
}

.banner-sexgps>div {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.3em;
    height: 3.9em;
    align-content: flex-start
}

.banner-sexgps>div>div {
    padding: 0 14px 0 0;
    font-size: 0.9em;
    line-height: inherit
}

.banner-sexgps>div>div:nth-child(1) {
    padding-right: 5px;
    font-weight: bold
}

.banner-sexgps a {
    color: #fff
}

.banner-sexgps a:hover {
    color: #f7e4a4
}

.static-container-4,.static-container-5 {
    width: 100%
}

.static-container-4>.media,.static-container-5>.media {
    width: 100%;
    margin: auto;
    aspect-ratio: 12 / 1;
    object-fit: cover;
    margin-bottom: 5px;
    background-color: #fafafa;
    overflow: hidden
}

.static-container-4>.media:last-child,.static-container-5>.media:last-child {
    margin-bottom: 0px
}

.static-container-4>.media img,.static-container-5>.media img {
    width: 100%;
    height: 100%
}

.static-container-4>.media iframe,.static-container-5>.media iframe {
    display: block;
    margin: auto;
    width: 100%
}

.static-container-8 {
    width: 100%
}

.static-container-8>.media {
    margin: auto;
    width: 170px;
    height: 212.5px;
    margin-bottom: 10px;
    background-color: #fafafa;
    overflow: hidden
}

.static-container-8>.media:last-child {
    margin-bottom: 0
}

.static-container-8>.media img {
    width: 100%;
    height: 100%
}

.static-container-6 {
    padding: 5px;
    display: flex;
    justify-content: center
}

.static-container-6 .a-media {
    width: 150px;
    margin-right: 0.25rem
}

@media only screen and (max-width: 768px) {
    .push-top-container {
        right:-58vw
    }

    .push-top {
        width: 58vw
    }

    .push-top>.media {
        flex: 0 0 52vw;
        height: 8.97vw
    }

    .push-top>.close:hover {
        color: #000
    }

    .push-slider {
        border: 0;
        width: 47.5vw;
        height: 26.71vw;
        bottom: 9.5vh
    }

    .push-bottom {
        width: 100%
    }

    .static-container-6 .a-media {
        width: 23vw
    }

    .static-container-8 {
        width: 100%
    }

    .static-container-8>.media {
        margin: auto;
        width: 170px;
        height: 212.5px;
        margin-bottom: 10px;
        background-color: #fafafa;
        overflow: hidden
    }

    .static-container-8>.media:last-child {
        margin-bottom: 0
    }

    .static-container-8>.media img {
        width: 100%;
        height: 100%
    }
}

.list {
    display: grid;
    gap: 1rem;
    position: relative
}

.list.photo-index {
    grid-template-columns: repeat(5,1fr)
}

.list.video-index {
    grid-template-columns: repeat(4,1fr)
}

.list.fiction-index {
    grid-template-columns: repeat(5,1fr)
}

.list.comic-index {
    grid-template-columns: repeat(5,1fr)
}

.list.comic-list {
    grid-template-columns: repeat(4,1fr)
}

.list.photo-list {
    grid-template-columns: repeat(4,1fr)
}

.list.video-list,.list.video-home {
    grid-template-columns: repeat(3,1fr)
}

.list.model-list,.list.model-home,.list.actor-list,.list.actor-home {
    grid-template-columns: repeat(5,1fr)
}

.list.fiction-list,.list.fiction-home {
    grid-template-columns: repeat(4,1fr)
}

.list.amateur-list {
    grid-template-columns: repeat(3,1fr)
}

.list.amateur-items,.list.photo-items {
    grid-template-columns: repeat(3,1fr)
}

.list.photo-home {
    grid-template-columns: repeat(4,1fr)
}

.list .item {
    width: 100%;
    border-radius: 5px;
    background-color: var(--item-bg);
    border: 0;
    box-shadow: 5px 5px 10px 0px var(--item-shadow);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden
}

.list .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--item-shadow-hover)
}

.list .item .img {
    position: relative;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.list .item.photo-image,.list .item.amateur-image,.list .item.auto-height {
    align-self: start
}

@supports (aspect-ratio: 1) {
    .list .item.photo-image .img,.list .item.amateur-image .img {
        padding-top:0 !important;
        height: auto
    }
}

.list .item.photo-image .img,.list .item.amateur-image .img {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden
}

.list .item.photo .img,.list .item.comic .img {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding-top: 150%
}

.list .item.comic .img {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding-top: 150%
}

@supports (aspect-ratio: 1) {
    .list .item.photo .img,.list .item.comic .img {
        padding-top:0;
        height: auto
    }
}

.list .item.video .img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-top: 56.25%
}

@supports (aspect-ratio: 1) {
    .list .item.video .img,.list .item.wide .img {
        padding-top:0;
        height: auto
    }
}

.list .item.amateur .img,.list .item.fiction .img,.list .item.model .img,.list .item.actor .img {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding-top: 100%
}

@supports (aspect-ratio: 1) {
    .list .item.amateur .img,.list .item.fiction .img,.list .item.model .img,.list .item.actor .img {
        padding-top:0;
        height: auto
    }
}

.list .item.dd {
    position: relative;
    width: 100%;
    aspect-ratio: 0.7;
    padding-top: 142.8571%
}

.list .item img {
    border-radius: 5px 5px 0 0;
    width: 235px;
    height: 320px
}

.list .item.fiction img {
    height: 235px
}

.list .item img:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.list .item .text {
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.75rem;
    color: var(--item-text-color)
}

.list .item .text a {
    font-weight: bold;
    color: var(--item-link-color)
}

.list .item .text a:hover {
    color: var(--item-text-hover)
}

.list .item .text .subs {
    display: flex;
    gap: 0.5rem;
    min-height: 1.5em
}

.list .item .text .subs>div {
    align-items: stretch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.5em;
    line-height: 1.5em
}

.list .item .text .subs>div:nth-child(1) {
    flex: 0 0 auto
}

.list .item .text .subs>div:nth-child(2) {
    flex: 1 1 auto;
    text-align: right
}

.list .item .text .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.5
}

.list .item .text i {
    padding-right: 5px
}

.list .item .text .brief {
    font-size: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    height: 4.5em
}

.list .item .tags>div {
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    padding: 3px 10px 3px 10px;
    border-radius: 0 5px 5px 0;
    position: absolute;
    top: 10px;
    left: 0px;
    font-size: 0.8em;
    background-color: var(--item-tag-bg);
    color: var(--item-tag-text);
    user-select: none;
    height: 1.2em;
    line-height: 1.2em
}

.list .item .tags>div.empty {
    display: none
}

.list .item .tags>div img {
    width: 14px;
    height: 14px
}

.list .item .tags>div i {
    padding-right: 5px
}

.list .item .tags>div:nth-child(2) {
    border-radius: 5px 0 0 5px;
    left: auto;
    right: 0px
}

.list .item .tags>div:nth-child(3) {
    top: 40px
}

.list .item .tags>div:nth-child(4) {
    top: 40px;
    border-radius: 5px 0 0 5px;
    left: auto;
    right: 0px
}

.list .item .tags>div:nth-child(5) {
    top: 70px
}

@media only screen and (max-width: 768px) {
    .list.video-index,.list.video-list,.list.video-home {
        grid-template-columns:repeat(2,1fr)
    }

    .list.photo-index,.list.photo-list,.list.photo-home,.list.amateur-list {
        grid-template-columns: repeat(2,1fr)
    }

    .list.fiction-index,.list.fiction-list,.list.fiction-home {
        grid-template-columns: repeat(2,1fr)
    }

    .list.comic-list {
        grid-template-columns: repeat(2,1fr)
    }

    .list.model-home,.list.model-list {
        grid-template-columns: repeat(2,1fr)
    }

    .list.amateur-items,.list.photo-items {
        grid-template-columns: repeat(1,1fr)
    }

    .list.comic-index {
        grid-template-columns: repeat(2,1fr)
    }

    .list .item .tags>div {
        font-size: 0.75em
    }

    .list .item .tags>div:nth-child(3) {
        top: 35px
    }

    .list .item .tags>div:nth-child(4) {
        top: 35px
    }

    .list .item .tags>div:nth-child(5) {
        top: 60px
    }
}

.comments>h3 {
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    font-size: 18px
}

.comment>.user {
    display: flex;
    align-items: center;
    font-size: 0.9em
}

.comment>.user>.user-avatar {
    flex: 0 0 50px;
    padding-right: 10px;
    box-sizing: border-box;
    user-select: none
}

.comment>.user>.user-nickname {
    color: var(--comment-nickname-text);
    padding-right: 10px;
    display: flex;
    align-items: center
}

.comment>.user>.user-nickname:before {
    content: '@';
    padding-right: 1px
}

.comment>.user>.datetime {
    padding-left: 10px;
    color: var(--comment-time-text)
}

.comment>.user>.floor {
    flex: 1 1 auto;
    text-align: right
}

.comment>.user>.floor span {
    padding-left: 5px
}

.comment>.remark,.comment>.misc,.comment>.translated-content {
    margin: 0 1rem 0.5rem 50px;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 0.9rem;
    line-height: 150%
}

.comment>.translated-content {
    background: var(--comment-translated-content-bg);
    border-left: 3px solid var(--comment-translated-content-border);
    color: var(--comment-translated-content-text)
}

.comment>.remark {
    background: var(--comment-remark-bg);
    border-left: 3px solid var(--comment-remark-border);
    color: var(--comment-remark-text)
}

.comment>.misc {
    background: var(--comment-misc-bg);
    border-left: 3px solid var(--comment-misc-border);
    color: var(--comment-misc-text)
}

.comment>.remark a,.comment>.misc a {
    color: var(--default-text-link)
}

.comment>.remark a:hover,.comment>.misc a:hover {
    color: var(--default-text-link-hover)
}

.comment>.content {
    padding: 0.5rem 0.5rem 0.5rem 3rem
}

.comment>.content a {
    color: var(--default-text-link);
    transition: color 0.3s ease;
    padding: 0 3px
}

.comment>.content a.disabled {
    color: var(--default-text-disabled);
    cursor: not-allowed;
    pointer-events: none
}

.comment>.content a:hover {
    color: var(--default-text-link-hover)
}

.comment>.content a.disabled:hover {
    color: var(--default-text-disabled)
}

.comment>.content a.translate-btn {
    font-size: 0.85rem;
    padding-left: 0.5rem
}

.comment>.score {
    padding-left: 50px;
    padding-bottom: 5px;
    user-select: none;
    color: #f90
}

.comment>.submit-reply {
    display: none;
    flex-wrap: wrap;
    padding-left: 50px
}

.comment>.submit-reply>div:nth-child(1) {
    flex: 0 0 50px
}

.comment>.submit-reply>div:nth-child(2) {
    padding-left: 10px;
    box-sizing: border-box;
    flex: 0 0 calc(100% - 50px - 50px)
}

.comment>.submit-reply>div:nth-child(3) {
    flex: 0 0 100%;
    padding-right: 50px;
    box-sizing: border-box;
    text-align: right
}

.comment>.submit-reply input[type='text'] {
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 5px;
    font-size: 16px
}

.comment>.submit-reply input[type='text']:focus {
    background-color: transparent
}

.comment>.reply-container {
    display: none;
    padding-left: 50px;
    transition: all 0.3s ease
}

.comment>.reply-container>.comment-reply {
    padding: 10px 0;
    border-bottom: #ddd 1px dashed;
    flex-wrap: wrap;
    font-size: 0.9em
}

.comment>.reply-container>.comment-reply:last-child {
    border-bottom: 0
}

.comment>.reply-container>.comment-reply>.user {
    display: flex;
    align-items: center;
    color: #666
}

.comment>.reply-container>.comment-reply>.user>.user-avatar {
    flex: 0 0 50px;
    padding-right: 10px;
    box-sizing: border-box
}

.comment>.reply-container>.comment-reply>.user>.user-nickname {
    color: var(--comment-nickname-text);
    padding-right: 10px
}

.comment>.reply-container>.comment-reply>.user>.user-nickname:before {
    content: '@';
    padding-right: 1px
}

.comment>.reply-container>.comment-reply>.user>.datetime {
    padding-left: 10px;
    color: #888
}

.comment>.reply-container>.comment-reply>.content {
    padding: 5px 0 0 50px
}

.comment>.reply-container>.comment-reply>.content a {
    color: #00c;
    padding: 0 3px
}

.comment>.reply-container>.comment-reply>.content a:hover {
    color: #f00
}

.submit-comment {
    width: 100%;
    padding-right: 5%;
    box-sizing: border-box;
    display: flex
}

.submit-comment>.user-avatar {
    flex: 0 0 60px
}

.submit-comment>.submit {
    flex: 1 1 auto
}

.submit-comment>.submit>.quick-reply {
    max-width: 65vw;
    overflow: hidden
}

.submit-comment>.submit>div {
    padding-bottom: 5px
}

.submit-comment>.submit>.textarea-container {
    box-sizing: border-box
}

.submit-comment>.submit textarea {
    width: 100%;
    font-size: 14px;
    height: 5em;
    resize: none;
    padding: 0.5rem;
    box-sizing: border-box
}

.submit-comment>.submit>.rules {
    font-size: 0.9em;
    line-height: 150%
}

.submit-comment>.submit>.rules a {
    padding-right: 5px;
    color: var(--default-text-link)
}

.submit-comment>.submit>.rules a:hover {
    color: var(--default-text-link-hover)
}

.submit-comment>.submit>.rules ul {
    margin-left: 0px;
    padding-left: 1.5rem
}

.submit-comment>.submit>.button-line {
    display: flex;
    align-items: center;
    justify-content: right
}

.submit-comment>.submit>.button-line>span {
    padding-right: 10px
}

.comment-list>div {
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    border-bottom: #eee 1px dashed
}

.comment-list>div:last-child {
    border-bottom: transparent 1px dashed
}

.comment-list span {
    padding-right: 10px
}

.comment-list .obj {
    font-weight: bold;
    font-size: 1.15em
}

.comment-list .obj a {
    color: var(--default-text-link)
}

#comment_data {
    scroll-margin-top: 65px
}

.comment-btns {
    padding-left: 50px;
    padding-bottom: 10px;
    user-select: none
}

.comment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--comment-btn-text);
    background-color: var(--comment-btn-bg);
    padding: 0 0.5rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    height: 1.75rem;
    line-height: 1.75rem
}

.comment-btn:hover {
    color: var(--comment-btn-text-hover);
    background-color: var(--comment-btn-bg-hover)
}

.comment-btn i {
    padding-right: 0.1rem
}

.comment-btn .replyCount {
    padding: 0 0.15rem 0 0.1rem
}

.comments-item {
    border-radius: 5px;
    background-color: var(--comment-bg)
}

.comments-item .user-nickname {
    color: var(--comment-nickname-text)
}

.comment-reply-input {
    font-size: 0.85rem !important
}

.star-rating {
    display: inline-flex;
    font-size: 0
}

.star-rating input[type="radio"] {
    display: none
}

.star-rating label {
    font-size: 20px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 2px
}

.star-rating label:before {
    content: '★';
    display: inline-block
}

.star-rating label.active,.star-rating label.hover-active {
    color: #ffc107 !important
}

@media only screen and (max-width: 768px) {
    .comment>.user {
        flex-wrap:wrap
    }

    .comment>.user>.datetime {
        padding-left: 50px;
        padding-bottom: 5px;
        flex: 0 0 100%
    }

    .comment>.reply-container>.comment-reply>.user>.datetime {
        display: none
    }

    .comments .left-fixed-50 {
        flex: 0;
        display: none
    }

    .submit-comment>.submit>.rules {
        font-size: 0.85rem
    }

    .comment>.content {
        padding: 0.5rem 0.5rem 0.5rem 3rem;
        font-size: 0.9rem
    }

    .comment-btn {
        margin-right: 0;
        font-size: 0.7rem
    }

    .comment-reply-input {
        width: 100% !important;
        font-size: 0.8rem !important
    }

    .comment>.remark,.comment>.misc {
        font-size: 0.8rem
    }

    #comment_data {
        scroll-margin-top: 6vh
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em
}

table,th,td {
    border: 1px solid var(--table-border)
}

th,td {
    padding: 8px 5px;
    color: var(--table-row-text)
}

th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    user-select: none
}

tr {
    background-color: var(--table-row-bg);
    transition: all 0.3s ease
}

tr:hover {
    background-color: var(--table-row-hover-bg)
}

.btn {
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    user-select: none;
    position: relative;
    padding: 0 1.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    color: var(--default-btn-text);
    background: var(--default-btn-bg);
    background-size: 200% 200%;
    animation: ani-btn 3s ease infinite;
    transition: all 0.3s ease;
    position: relative
}

.btn.smaller {
    height: 1.76rem;
    line-height: 1.75rem;
    padding: 0 0.75rem;
    font-size: 13px
}

.btn.square-icon {
    width: 2.5rem;
    height: 2.5rem;
    line-height: auto;
    padding: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.btn.square-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0
}

.btn:not(.disabled):hover {
    background: var(--default-btn-bg-hover);
    color: var(--default-btn-text-hover)
}

.btn.disabled,.btn[disabled] {
    opacity: 0.5;
    color: var(--default-btn-disabled-text);
    background: var(--default-btn-disabled-bg);
    cursor: not-allowed
}

.btn i {
    margin-right: 0.5rem
}

.btn::before {
    padding-right: 0.5rem
}

.btn::after {
    padding-left: 0.5rem
}

.btn.verify::before,.btn.validate::before,.btn.auth::before {
    content: "\f132";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.verify-key::before,.btn.authenticate::before {
    content: "\f084";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.back::before,.btn.return::before,.btn.undo::before {
    content: "\f0e2";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.check::before,.btn.yes::before,.btn.confirm::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.save::before {
    content: "\f0c7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.edit::before,.btn.modify::before {
    content: "\f044";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.delete::before,.btn.remove::before,.btn.trash::before {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.close::before,.btn.cancel::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.add::before,.btn.plus::before,.btn.create::before {
    content: "\f067";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.minus::before,.btn.subtract::before {
    content: "\f068";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.search::before,.btn.find::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.refresh::before,.btn.reload::before {
    content: "\f021";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.download::before {
    content: "\f019";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.upload::before {
    content: "\f093";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.copy::before {
    content: "\f0c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 400
}

.btn.print::before {
    content: "\f02f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.home::before {
    content: "\f015";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.prev::before,.btn.previous::before {
    content: "\f104";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.next::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.up::before {
    content: "\f062";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.down::before {
    content: "\f063";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.more::after {
    content: "\f101";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.user::before,.btn.profile::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.login::before,.btn.signin::before {
    content: "\f090";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.logout::before,.btn.signout::before {
    content: "\f08b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.settings::before,.btn.config::before {
    content: "\f013";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.lock::before {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.unlock::before {
    content: "\f09c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.record::before,.btn.log::before {
    content: "\f03a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.notes::before,.btn.memo::before {
    content: "\f15c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.history::before {
    content: "\f1da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.use::before,.btn.apply::before {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.run::before,.btn.execute::before {
    content: "\f144";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.pause::before,.btn.stop::before {
    content: "\f04c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.view::before,.btn.show::before {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.hide::before {
    content: "\f070";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.like::before,.btn.heart::before {
    content: "\f004";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.star::before,.btn.favorite::before {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.read::before,.btn.book::before {
    content: "\f518";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.info::before {
    content: "\f129";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.warning::before,.btn.alert::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.help::before,.btn.question::before {
    content: "\f128";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.email::before,.btn.mail::before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.phone::before,.btn.call::before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.contact::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.pay::before {
    content: "\f3d1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.calendar::before,.btn.date::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.time::before,.btn.clock::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free";
    font-weight: 400
}

.btn.folder::before {
    content: "\f07b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.file::before,.btn.document::before {
    content: "\f15b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.share::before {
    content: "\f14d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.website::before {
    content: "\f0ac";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.twitter::before {
    content: "\f099";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.facebook::before {
    content: "\f09a";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.instagram::before {
    content: "\f16d";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.youTube::before {
    content: "\f167";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.linkedIn::before {
    content: "\f0e1";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.gitHub::before {
    content: "\f09b";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400
}

.btn.comment-dot::before {
    content: "\f4ad";
    font-family: "Font Awesome 6 Free";
    font-weight: 400
}

.btn.link::before {
    content: "\f0c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 400
}

.btn.magnet::before {
    content: "\f076";
    font-family: "Font Awesome 6 Free";
    font-weight: 900
}

.btn.spin::before {
    content: "\f110";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    animation: fa-spin 2s infinite linear
}

@media only screen and (max-width: 768px) {
    .btn {
        font-size:0.8rem;
        padding: 0 0.75rem;
        height: 2.2rem;
        line-height: 2.2rem
    }
}

.tab-container {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: var(--tab-container-shadow)
}

.tab-container .tab-navs {
    display: flex;
    overflow-x: auto;
    white-space: nowrap
}

.tab-container .tab-nav {
    flex: 1 1 auto;
    padding: 15px 5px;
    cursor: pointer;
    background-color: var(--tab-nav-bg);
    color: var(--tab-nav-text);
    border-bottom: 3px solid var(--tab-nav-split);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: all 0.3s ease;
    overflow: hidden;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.tab-container .tab-nav:hover {
    background-color: var(--tab-nav-bg-hover);
    color: var(--tab-nav-text-hover)
}

.tab-container .tab-nav.active {
    background-color: var(--tab-nav-bg-checked);
    color: var(--tab-nav-text-checked);
    font-weight: bold;
    border-bottom: 3px solid var(--tab-nav-split-checked);
    display: flex;
    align-items: center;
    justify-content: center
}

.tab-container .tab-contents {
    padding: 15px;
    box-sizing: border-box;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--tab-contents-bg)
}

.tab-container .tab-contents .footer {
    padding: 5px 0
}

.tab-container .tab-content {
    display: none;
    color: var(--tab-content-text);
    font-size: 0.95rem
}

.tab-container .tab-content.active {
    display: block
}

.tab-container.video .video-info {
    position: relative
}

.tab-container.video .video-info img.misc {
    width: 24px;
    height: 24px;
    padding-left: 5px;
    border-radius: 50%
}

.tab-container.video .video-info>.models {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px 0 5px 5px;
    width: 425px;
    height: 85px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: end
}

.tab-container.video .video-info>.models>.marquee {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding-left: 100%;
    animation: ani-scroll-left 20s linear infinite
}

.tab-container.video .video-info>.models:hover .marquee {
    animation-play-state: paused
}

.tab-container.video .video-info>.models .item {
    user-select: none;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    width: 80px;
    height: 80px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    border: 3px solid #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}

.tab-container.video .video-info>.models .item:hover {
    animation: ani-model-pulse 0.3s forwards
}

.tab-container.video .video-info>.models .item:hover.no-pulse {
    animation: none
}

.tab-container.video .video-info>.models .item>div {
    position: absolute;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    text-align: center;
    padding: 2px 0;
    left: 0;
    bottom: 3px
}

.tab-container.video .video-info>div {
    display: flex;
    align-items: center;
    border-bottom: #eee 1px dashed;
    padding: 5px 0
}

.tab-container.video .video-info>div:first-child {
    font-weight: bold
}

.tab-container.video .video-info i {
    color: #888;
    padding-right: 10px
}

.tab-container.video .video-info i.fa-question-circle {
    color: #00c
}

.tab-container.video .video-info i.fa-question-circle:hover {
    color: #f00
}

.tab-container.video a {
    color: #00c
}

.tab-container.video a:hover {
    color: #f00
}

.tab-container.video a.button,.tab-container.video a.button:hover {
    color: #fff
}

.tab-container.video li {
    line-height: 200%
}

.tab-container.video .video-cover-screenshot>img {
    width: 49%;
    padding-right: 1%
}

.tab-container.video .video-cover-screenshot>img:last-child {
    padding-right: 0
}

.tab-container.video .tab-contents {
    background: var(--tab-content-bg)
}

.tab-container.video .user-fav {
    text-align: right
}

@media only screen and (max-width: 768px) {
    .tab-container {
        display:flex
    }

    .tab-container .tab-navs {
        flex: 0 0 35px;
        display: flex;
        flex-direction: column
    }

    .tab-container .tab-nav {
        flex: 0 0 auto;
        writing-mode: vertical-rl;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 3px solid transparent;
        border-bottom: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 6px;
        padding: 1rem 0.5rem;
        font-size: 13px
    }

    .tab-container .tab-nav img {
        padding-top: 0.25rem
    }

    .tab-container .tab.active {
        border-bottom: 0;
        border-right: 3px solid #ff6f61
    }

    .tab-container .tab.active:before {
        content: ""
    }

    .tab-container .tab-contents {
        flex: 1 1 auto;
        overflow: hidden;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 0
    }

    .tab-container .tab-content li {
        font-size: 0.9em
    }

    .tab-container.video .user-fav {
        display: none
    }

    .tab-content {
        font-size: 0.9em
    }
}

.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 1.5rem 0;
    user-select: none;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif
}

.pager a,.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid var(--pager-border-color)
}

.pager-num {
    color: var(--pager-text-color,#374151);
    background-color: var(--pager-bg-color,#ffffff);
    border-color: var(--pager-border-color,#e5e7eb)
}

.pager-num:hover {
    color: var(--pager-hover-text-color,#1f2937);
    background-color: var(--pager-hover-bg-color,#f3f4f6);
    border-color: var(--pager-hover-border-color,#d1d5db)
}

.pager-num.current {
    color: var(--pager-current-text-color,#ffffff);
    background-color: var(--pager-current-bg-color,#3b82f6);
    border-color: var(--pager-current-border-color,#3b82f6);
    font-weight: 600
}

.pager-btn {
    color: var(--pager-text-color,#374151);
    background-color: var(--pager-bg-color,#ffffff);
    border-color: var(--pager-border-color,#e5e7eb);
    overflow: hidden;
    white-space: nowrap
}

.pager-btn:hover:not(.disabled) {
    color: var(--pager-hover-text-color,#1f2937);
    background-color: var(--pager-hover-bg-color,#f3f4f6);
    border-color: var(--pager-hover-border-color,#d1d5db)
}

.pager-btn.disabled {
    color: var(--pager-disabled-text-color,#9ca3af);
    background-color: var(--pager-disabled-bg-color,#f9fafb);
    border-color: var(--pager-disabled-border-color,#e5e7eb);
    cursor: not-allowed
}

.pager .ellipsis {
    color: var(--pager-bg-color,#374151);
    border-color: transparent;
    padding: 0 4px;
    font-weight: 500
}

.pager a:focus {
    outline: none
}

.pager-num.current {
    transform: scale(1.05)
}

.pager a:active {
    transform: scale(0.95)
}

@media only screen and (max-width: 768px) {
    .pager {
        gap:6px
    }

    .pager a,.pager span {
        min-width: 18px;
        height: 25px;
        padding: 0 3px;
        font-size: 12px
    }

    .pager-num {
        color: var(--pager-text-color,#374151);
        background-color: var(--pager-bg-color,#ffffff);
        border-color: var(--pager-border-color,#e5e7eb)
    }

    .pager-num:hover {
        color: var(--pager-hover-text-color,#1f2937);
        background-color: var(--pager-hover-bg-color,#f3f4f6);
        border-color: var(--pager-hover-border-color,#d1d5db)
    }

    .pager-num.current {
        color: var(--pager-current-text-color,#ffffff);
        background-color: var(--pager-current-bg-color,#3b82f6);
        border-color: var(--pager-current-border-color,#3b82f6);
        font-weight: 600
    }

    .pager-btn {
        padding: 0 10px
    }

    .pager-prev::before {
        content: ''
    }

    .pager-next::after {
        content: ''
    }

    .pager .ellipsis {
        padding: 0px
    }

    .pager-tips {
        font-size: 13px
    }
}

.pager-js {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 5px 0;
    margin: 1.5rem 0;
    user-select: none
}

.pager-js.first {
    margin: 1.5rem 0 0.5rem 0
}

.pager-js.last {
    margin: 0.5rem 0 1.5rem 0
}

.pager-js-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    width: 2.3rem;
    height: 2.3rem;
    color: var(--pager-js-btn-text-color);
    background-color: var(--pager-js-btn-bg-color);
    border: var(--pager-js-btn-border-color) 1px solid;
    border-radius: 50%;
    cursor: pointer
}

.pager-js-btn.pager-js-ellipsis {
    border: none;
    cursor: default;
    background-color: transparent
}

.pager-js-btn:not(.disabled):not(.current):not(.pager-js-ellipsis):hover {
    color: var(--pager-js-btn-hover-text-color);
    background-color: var(--pager-js-btn-hover-bg-color);
    border-color: var(--pager-js-btn-hover-border-color);
    font-weight: 600
}

.pager-js-btn.current {
    color: var(--pager-js-btn-current-text-color);
    background-color: var(--pager-js-btn-current-bg-color);
    border-color: var(--pager-js-btn-current-border-color);
    font-weight: 600;
    cursor: default
}

.pager-js-btn.disabled {
    color: var(--pager-js-btn-disabled-text-color);
    background-color: var(--pager-js-btn-disabled-bg-color);
    border-color: var(--pager-js-btn-disabled-border-color);
    cursor: not-allowed
}

@media only screen and (max-width: 768px) {
    .pager-js {
        gap:0.3rem
    }

    .pager-js-btn {
        font-size: 0.7rem;
        width: 1.7rem;
        height: 1.7rem
    }
}

.breadcrumb {
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--breadcrumb-bg);
    color: var(--breadcrumb-text);
    -webkit-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.2);
    box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.2);
    font-size: 0.95em;
    user-select: none
}

.breadcrumb .main-container {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.breadcrumb .breadcrumb-prefix {
    font-size: 1.2em;
    filter: var(--breadcrumb-prefix-filter);
    padding-right: 0.5rem
}

.breadcrumb i {
    margin: 0 0.5rem
}

.breadcrumb a {
    color: var(--breadcrumb-text)
}

.breadcrumb a:hover {
    color: var(--breadcrumb-hover);
    font-weight: bold
}

@media only screen and (max-width: 768px) {
    .breadcrumb {
        height:7vh;
        line-height: 7vh;
        margin-bottom: 2vh;
        font-size: 0.8em
    }
}

footer.mobile {
    display: none
}

footer.pc {
    width: 100%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    z-index: 2
}

footer.pc>div:first-child {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

footer.pc>div:first-child>div {
    padding-right: 10px;
    flex: 0 0 auto
}

footer.pc .qrcode>img {
    width: 100px;
    height: 80px
}

footer.pc .links {
    padding-top: 20px
}

footer.pc .exchange {
    padding-top: 10px
}

footer.pc a {
    color: var(--footer-text)
}

footer.pc a:hover {
    color: var(--footer-hover)
}

@media only screen and (max-width: 768px) {
    footer.pc {
        display:none
    }

    footer.mobile {
        display: block;
        width: 100%;
        padding: 0;
        height: 7vh;
        overflow: hidden;
        display: flex;
        background-color: var(--footer-mobile-bg);
        border-top: 1px solid var(--footer-mobile-border);
        position: fixed;
        bottom: 0;
        z-index: 1000
    }

    footer.mobile>a {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        color: var(--footer-mobile-text)
    }

    footer.mobile .menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    footer.mobile .menu-item>div:first-child {
        height: 4.5vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        overflow: hidden
    }

    footer.mobile .menu-item>div:first-child img {
        width: 1.15em;
        height: 1.15em
    }

    footer.mobile .menu-item>div:last-child {
        height: 2.5vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 0.75em;
        white-space: nowrap;
        overflow: hidden
    }

    footer.mobile .menu-item.fav.isFaved {
        color: var(--footer-mobile-fav-text)
    }

    footer.mobile .menu-item.disabled {
        color: var(--footer-mobile-text-disabled)
    }
}

.series {
    overflow: hidden
}

.series h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem 0
}

.series .parent {
    font-weight: 600;
    font-size: 14px;
    margin: 16px 8px 5px 8px;
    cursor: default
}

.series .sub {
    font-size: 0.85rem;
    height: auto;
    line-height: 1.4;
    transition: all 0.2s ease;
    border-radius: 5px;
    margin: 0 8px 2px 8px;
    padding: 5px 5px 5px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.series>a>div.sub:before {
    content: ""
}

.series .sub:hover,.series .sub.checked {
    background-color: var(--default-block-bg-hover);
    color: var(--default-block-text-hover);
    border-bottom: none;
    padding-left: 15px;
    transform: translateX(4px);
    box-shadow: 0 2px 4px var(--default-block-text-shadow-hover)
}

@media only screen and (max-width: 768px) {
    .series {
        width:60px
    }

    .series h3 {
        display: none
    }

    .series > a {
        display: block;
        width: 100%
    }

    .series .parent {
        font-size: 12px;
        margin: 12px 2px 4px 2px;
        text-align: center;
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: inline-block;
        height: max-content
    }

    .series .sub {
        font-size: 0.8rem;
        white-space: nowrap;
        text-overflow: unset;
        overflow: visible;
        line-height: 1.2;
        padding: 0.5rem 0.1rem;
        margin: 0.5rem auto;
        writing-mode: vertical-rl;
        text-orientation: upright;
        text-align: center;
        display: inline-block;
        width: auto;
        max-width: 100%;
        height: max-content;
        box-sizing: border-box;
        vertical-align: top
    }

    .series .sub:hover,.series .sub.checked {
        padding: 0.2rem 0.1rem;
        margin: 0.5rem auto;
        transform: none
    }

    .series>a>div.sub:before {
        content: ""
    }
}

.category-container {
    padding: 0.5rem
}

.category-container .parent {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0.5rem 0
}

.category-container .parent a {
    color: var(--category-parent-text)
}

.category-container .parent a:hover {
    color: var(--category-parent-text-hover)
}

.category-container .parent a::before {
    content: '•';
    width: 100%;
    height: 2px;
    margin-bottom: 0.5rem
}

.category-container .subs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    margin-bottom: 2rem
}

.category-container .sub {
    font-size: 0.9rem;
    color: var(--category-sub-text);
    background-color: var(--category-sub-bg);
    padding: 0.5rem;
    border-radius: 5px;
    transition: all 0.2s ease;
    display: flex;
    align-items: stretch;
    gap: 0.5rem
}

.category-container .sub:hover {
    background-color: var(--category-sub-bg-hover);
    color: var(--category-sub-text-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    transform: scale(1.05)
}

.category-container .sub>div {
    display: flex;
    align-items: center
}

.category-container .sub .logo {
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    justify-content: center
}

.category-container .sub .logo img {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1
}

.category-container .sub .title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.category-container .sub .count {
    flex: 0 0 40px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.category-container .sub .count>span {
    color: var(--category-sub-count-text);
    background-color: var(--category-sub-count-bg);
    padding: 0.1rem 0.25rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600
}

.category-container .photo-tag-section {
    margin-top: 1rem
}

.category-container .subs.photo-tag-grid {
    grid-template-columns: repeat(6,1fr);
    gap: 0.75rem
}

.category-container .sub.photo-tag-item {
    padding: 0.45rem 0.6rem
}

.category-container .sub.photo-tag-item .title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.category-container .sub.photo-tag-item .count {
    flex: 0 0 auto
}

.category-container .photo-feature-filter-section {
    margin-top: 0.5rem
}

.category-container .subs.photo-feature-filter-grid {
    grid-template-columns: repeat(6,1fr);
    gap: 0.75rem
}

.category-container .sub.photo-feature-item {
    justify-content: center;
    text-align: center
}

.category-container .sub.photo-feature-item .title {
    white-space: nowrap
}

@media only screen and (max-width: 768px) {
    .category-container .subs {
        grid-template-columns:repeat(1,1fr)
    }

    .category-container .sub {
        font-size: 0.8rem;
        padding: 0.5rem
    }

    .category-container .sub .logo {
        flex: 0 0 36px
    }

    .category-container .sub .count>span {
        padding: 0.05rem 0.15rem;
        font-size: 0.7rem
    }

    .category-container .subs.photo-tag-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .category-container .subs.photo-feature-filter-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 200px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    word-break: break-word
}

.toast.show {
    transform: translateX(0);
    opacity: 1
}

.toast.success {
    background: linear-gradient(135deg,#28a745,#20c997)
}

.toast.error {
    background: linear-gradient(135deg,#dc3545,#c82333)
}

.toast.info {
    background: linear-gradient(135deg,#17a2b8,#138496)
}

.tag {
    display: inline-block;
    padding: calc(0.1rem + 1px) calc(0.3rem - 2px);
    border-radius: 0.2rem;
    background-color: var(--tag-bg);
    border: 1px solid var(--tag-border);
    color: var(--tag-text);
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
    user-select: none;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.tag.golden {
    background-color: var(--orange-xchina);
    border: 1px solid var(--orange-xchina);
    color: var(--white)
}

a>.tag:hover,a.tag:hover {
    border: 1px solid var(--tag-border-hover);
    background-color: var(--tag-bg-hover);
    color: var(--tag-text-hover)
}

.tag i {
    padding-right: 0.25rem
}

@media only screen and (max-width: 768px) {
    .tag {
        font-size:0.7rem
    }
}

.numbered-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem
}

.numbered-list .header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0
}

.numbered-list-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    padding: 0.3rem 0;
    border-radius: 5px;
    border-bottom: 1px solid var(--default-split);
    background: var(--numbered-list-item-bg)
}

.numbered-list-item:hover {
    background: var(--numbered-list-item-bg-hover);
    color: var(--default-block-text-hover)
}

.numbered-list-item:hover .rank span {
    transform: scale(1.1)
}

.numbered-list-item .rank {
    font-size: 0.8rem;
    text-align: center
}

.numbered-list-item .rank span {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    background: var(--numbered-list-item-rank-bg);
    color: var(--numbered-list-item-rank-text);
    border-radius: 5px;
    font-size: 0.7rem;
    transition: transform 0.3s ease
}

.numbered-list-item .rank.no-1 span {
    background: var(--numbered-list-item-rank-no1-bg);
    color: var(--numbered-list-item-rank-no1-text)
}

.numbered-list-item .rank.no-2 span {
    background: var(--numbered-list-item-rank-no2-bg);
    color: var(--numbered-list-item-rank-no2-text)
}

.numbered-list-item .rank.no-3 span {
    background: var(--numbered-list-item-rank-no3-bg);
    color: var(--numbered-list-item-rank-no3-text)
}

.numbered-list-item .title {
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    padding-right: 0.25rem;
    align-items: center;
    font-size: 0.85rem
}

.numbered-list.trend .numbered-list-item {
    padding: 0.5rem 0
}

.numbered-list.trend .numbered-list-item .title {
    font-size: 0.95rem
}

.albums {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 2rem
}

.albums .album {
    position: relative
}

.albums .album .text {
    position: absolute;
    font-size: 1em;
    color: var(--album-text);
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-shadow: 5px 5px 10px var(--album-text-shadow);
    overflow: hidden;
    text-align: center
}

.albums img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto;
    border-radius: 3%;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5)
}

.albums .album:hover {
    transform: scale(1.05);
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.photo-home-tags {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 0.75rem
}

.photo-home-tags .tag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    background-color: var(--category-sub-bg);
    color: var(--category-sub-text);
    border: 1px solid var(--default-split);
    transition: all 0.2s ease
}

.photo-home-tags .tag-item .name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem
}

.photo-home-tags .tag-item .count {
    flex: 0 0 auto;
    color: var(--category-sub-count-text);
    background-color: var(--category-sub-count-bg);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    font-weight: 600
}

.photo-home-tags a:hover .tag-item {
    background-color: var(--category-sub-bg-hover);
    color: var(--category-sub-text-hover);
    transform: translateY(-1px)
}

@media only screen and (max-width: 768px) {
    .albums {
        grid-template-columns:repeat(3,1fr);
        gap: 1rem
    }

    .albums .album .text {
        font-size: 1em
    }

    .photo-home-tags {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 0.6rem
    }

    .photo-home-tags .tag-item {
        padding: 0.55rem 0.6rem
    }
}

.option-box-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.75rem;
    margin-top: 1rem
}

.option-box {
    background-color: var(--option-box-bg);
    color: var(--option-box-text);
    border: 2px solid var(--option-box-border);
    border-radius: 5px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative
}

.option-box:hover {
    background-color: var(--option-box-hover-bg);
    color: var(--option-box-hover-text);
    border-color: var(--option-box-hover-border)
}

.option-box.unavailable {
    color: var(--option-box-unavailable-text);
    opacity: 0.75;
    cursor: not-allowed
}

.option-box.selected {
    color: var(--option-box-selected-text);
    border-color: var(--option-box-selected-border);
    background-color: var(--option-box-selected-bg);
    font-weight: bold
}

.option-box.selected:before {
    content: '✓';
    position: absolute;
    top: 0.1em;
    right: 0.25em;
    font-size: 35px;
    color: var(--option-box-selected-icon)
}

.option-box ul {
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 2.5em
}

.option-box li {
    line-height: 200%;
    font-size: 0.8rem
}

.option-box i {
    padding-right: 3px
}

@media only screen and (max-width: 768px) {
    .option-box {
        font-size:0.9em
    }
}

.affair {
    width: 100%;
    display: flex;
    font-size: 0.95em;
    margin-bottom: 30px
}

.affair>div:nth-child(1) {
    flex: 1 1 auto;
    padding: 10px;
    margin-right: 20px;
    box-sizing: border-box
}

.affair>div:nth-child(2) {
    flex: 0 0 20%;
    display: flex;
    align-items: end;
    justify-content: center;
    box-sizing: border-box;
    background-image: url('/images/timeline_1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    padding-bottom: 45%
}

.affair h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em
}

.affair h3:nth-of-type(n+2) {
    margin-top: 2em
}

.affair ul {
    line-height: 2
}

.affair a {
    color: var(--affair-text);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    padding-right: 5px;
    cursor: pointer
}

.affair a:hover {
    color: var(--affair-text-hover)
}

@media only screen and (max-width: 768px) {
    .affair>div:nth-child(2) {
        display:none
    }
}

.floating-toolbar {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    padding: 0.75rem;
    border: 1px solid var(--floating-toolbar-border);
    border-radius: 5px;
    background-color: var(--floating-toolbar-bg);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    z-index: 1000;
    box-sizing: border-box;
    transition: all 0.3s ease
}

.floating-toolbar:hover {
    transform: scale(1.1)
}

.floating-toolbar .btn-group {
    display: flex;
    align-items: center;
    gap: 0.25rem
}

.floating-toolbar .floating-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    font-size: 1rem;
    border: 1px solid var(--floating-toolbar-btn-border);
    background-color: var(--floating-toolbar-btn-bg);
    color: var(--floating-toolbar-btn-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
    box-sizing: border-box;
    min-width: 40px;
    min-height: 32px;
    text-align: center
}

.floating-toolbar .floating-btn:hover,.floating-toolbar .floating-btn.hover {
    background-color: var(--floating-toolbar-btn-bg-hover);
    border-color: var(--floating-toolbar-btn-border-hover);
    color: var(--floating-toolbar-btn-text-hover)
}

.floating-toolbar .floating-btn.disabled {
    background-color: var(--floating-toolbar-btn-bg-disabled);
    color: var(--floating-toolbar-btn-text-disabled);
    border-color: var(--floating-toolbar-btn-border-disabled);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6
}

.floating-toolbar .floating-btn.checked {
    color: var(--orange-xchina)
}

.floating-toolbar .floating-btn.checked:hover {
    color: var(--floating-toolbar-btn-text-hover)
}

@media only screen and (max-width: 768px) {
    .floating-toolbar {
        display:none
    }
}

@media only screen and (min-width: 1025px) and (max-width:1400px) {
    .floating-toolbar .floating-btn {
        font-size:1rem
    }
}

.content-filter {
    font-size: 0.85rem;
    display: flex;
    align-items: stretch;
    gap: 0.25rem
}

.content-filter .opts {
    flex: 1 1 auto
}

.content-filter .label {
    flex: 0 1 auto;
    font-weight: bold;
    color: var(--filter-label-text)
}

.content-filter.tag-filter .label {
    flex: 0 0 4.25rem;
    white-space: nowrap
}

.content-filter .opt {
    display: inline-block;
    margin-right: 1rem;
    color: var(--filter-opt-text);
    background-color: var(--filter-opt-bg)
}

.content-filter .opt:hover {
    transform: translateY(-1px);
    color: var(--filter-opt-hover-text)
}

.content-filter .opt.checked {
    color: #f00;
    font-weight: bold;
    color: var(--filter-opt-checked-text)
}

@media only screen and (max-width: 768px) {
    .content-filter .opt {
        margin-right:0.5rem
    }

    .content-filter.tag-filter {
        display: block
    }

    .content-filter.tag-filter .label {
        display: none
    }

    .content-filter.tag-filter .opts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem 0.75rem
    }

    .content-filter.tag-filter .opt {
        margin-right: 0;
        padding: 0.2rem 0.1rem
    }
}

.need-login {
    min-height: 15rem;
    text-align: center;
    font-size: 1.1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem
}

.need-login i {
    font-size: 5rem
}

.need-login a {
    padding-left: 15px;
    font-weight: bold;
    font-size: 1.25rem
}

.hot-tags {
    padding: 0.5rem 0
}

.sidebar-search {
}

.sidebar-search .header {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5rem
}

.search-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%
}

.sidebar-search-input {
    width: 100%;
    padding-left: 10px !important;
    padding-right: 30px !important
}

.sidebar-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--input-inline-icon-color)
}

.sidebar-search-btn:hover {
    color: var(--input-inline-icon-color-hover)
}

.modal-alert {
    width: 50vw;
    height: 40vh;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--default-text-link);
    background-color: var(--default-background-color);
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)
}

.modal-alert::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 5rem;
    color: var(--default-text-link);
    margin-right: 0.5rem
}

.obj-cover-background {
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    border-radius: 5px
}

.obj-cover-background.photo,.obj-cover-background.comic {
    aspect-ratio: 2 / 3;
    padding-top: 150%
}

.obj-cover-background.video {
    aspect-ratio: 16 / 9;
    padding-top: 56.25%
}

.obj-cover-background.amateur,.obj-cover-background.fiction,.obj-cover-background.model,.obj-cover-background.actor {
    aspect-ratio: 1 / 1;
    padding-top: 100%
}

@supports (aspect-ratio: 1) {
    .obj-cover-background {
        padding-top:0 !important;
        height: auto
    }
}

.obj-cover-background:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--item-shadow-hover)
}

.obj-cover-background>div {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    color: #fff;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5)
}

.normal-icon {
    width: 22px;
    height: 22px;
    padding: 0 0.3rem;
    border-radius: 50%;
    transition: transform 0.6s ease
}

.normal-icon.javd:hover {
    transform: rotate(360deg)
}

.alert-box {
    padding: 0.5rem 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--highlight-text)
}

.error-box {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    gap: 1rem
}

.error-box a {
    color: var(--default-text-link)
}

.error-box a:hover {
    color: var(--default-text-link-hover)
}

.error-box i {
    font-size: 5rem
}

@media only screen and (max-width: 768px) {
    .index .featured-comments {
        display:none
    }

    .obj-cover-background>div {
        padding: 0.25rem;
        font-size: 0.5rem
    }

    .modal-alert {
        width: 75vw;
        height: 25vh;
        font-size: 1rem
    }

    .modal-alert::before {
        font-size: 3rem
    }
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative
}

.info-card .item {
    border-bottom: 1px dashed var(--default-split);
    padding-bottom: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem
}

.info-card .item:last-child {
    border-bottom: none
}

.info-card .item i {
    padding-right: 0.5rem
}

.info-card .item>div {
    display: flex;
    align-items: center
}

.info-card .item .icon {
    flex: 0 0 1.5rem;
    justify-content: center
}

.info-card .item .date {
    flex: 0 0 5rem;
    justify-content: center
}

.info-card .item .text {
    flex: 1 1 auto
}

.info-card .item .text>.tag,.info-card .item .text>a>.tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    box-sizing: border-box
}

.info-card .item.mobile-only {
    display: none
}

.info-card .item.floating {
    position: absolute;
    max-width: 65%;
    top: 0;
    right: 0.5rem;
    user-select: none
}

.info-card a {
    color: var(--default-text-link)
}

.info-card a:hover {
    color: var(--default-text-link-hover)
}

.info-card.video-detail {
    min-height: 100px
}

@media only screen and (max-width: 768px) {
    .info-card .item {
        font-size:0.85rem
    }

    .info-card .item.floating {
        display: none
    }

    .info-card .item.mobile-only {
        display: flex
    }
}

.object-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem
}

.object-card .object-avatar {
    flex: 0 0 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden
}

.object-card .object-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.object-card .object-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.object-card .title {
    font-size: 1.2rem;
    font-weight: bold
}

.object-card .title span {
    font-size: 0.9rem;
    padding-left: 0.5rem;
    color: var(--default-secondary-text);
    font-weight: normal
}

.object-card .links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.object-card .links img {
    width: 20px;
    height: 20px;
    border-radius: 3px
}

.object-card .description {
    font-size: 0.9rem;
    color: var(--default-secondary-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.object-card .description>span {
    padding-right: 0.5rem
}

.model-profile-row {
    display: flex;
    align-items: stretch;
    gap: 1rem
}

.model-profile-main {
    flex: 1 1 auto;
    min-width: 0
}

.model-profile-row > .model-profile-main > .content-box.object-card {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    height: 100%;
    box-sizing: border-box
}

.model-card-teaser-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center
}

.model-card-teaser {
    position: relative;
    display: block;
    width: 92px;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18)
}

.model-card-teaser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.model-card-teaser-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    pointer-events: none
}

.model-card-teaser-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.35rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: linear-gradient(transparent,rgba(0,0,0,0.7));
    pointer-events: none
}

.model-card-teaser:hover .model-card-teaser-play,.model-card-teaser:focus-visible .model-card-teaser-play {
    background: rgba(0,0,0,0.72)
}

.model-card-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.model-card-modal[hidden] {
    display: none !important
}

.model-card-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.72);
    cursor: pointer
}

.model-card-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(420px,92vw);
    max-height: 90vh
}

.model-card-modal-dialog video {
    display: block;
    width: 100%;
    max-height: 90vh;
    background: #000;
    border-radius: 8px;
    aspect-ratio: 9 / 16;
    object-fit: contain
}

.model-card-modal-close {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer
}

body.model-card-modal-open {
    overflow: hidden
}

@media only screen and (max-width: 768px) {
    .object-card .object-avatar {
        flex:0 0 20%
    }

    .object-card .description {
        font-size: 0.85rem;
        -webkit-line-clamp: 5
    }

    .model-profile-row {
        gap: 0.75rem
    }

    .model-card-teaser {
        width: 72px
    }

    .model-card-modal-dialog {
        width: min(360px,88vw)
    }
}

.fiction-body {
    font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
    line-height: 2.2;
    color: var(--fiction-body-text);
    text-align: justify;
    position: relative
}

.fiction-body p {
    margin: 1em;
    text-indent: 2em;
    word-spacing: 0.1em;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    padding: 0 0.5rem
}

.fiction-body p:hover {
    background: rgba(102,126,234,0.05)
}

.fiction-body p:first-child {
    margin-top: 0
}

.fiction-body p:last-child {
    margin-bottom: 0
}

.fiction-body p:first-child::first-letter {
    float: middel;
    font-size: 2.5em;
    line-height: 1;
    margin: 0.1em 0.1em 0.1em 0;
    color: #667eea;
    font-weight: bold
}

.fiction-content .title,.fiction-content .chapter-title,.fiction-content .sub-title,.fiction-content .tags {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem
}

.fiction-content .title {
    font-weight: bold;
    margin-bottom: 1rem
}

.fiction-content .chapter-title {
    font-size: 1.25em;
    font-weight: bold;
    margin: 1.5rem 0
}

.fiction-content .sub-title {
    font-size: 0.9rem
}

.fiction-content .cpc-promo {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: var(--comment-bg);
    border: 1px solid var(--default-split);
    color: var(--default-secondary-text)
}

.fiction-content .mp3 {
    max-width: 500px;
    margin: 0 auto 1rem auto;
    background: var(--mp3-player-bg);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    user-select: none
}

.fiction-content .mp3>div:first-child {
    background: var(--mp3-player-secondary-bg);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1)
}

.fiction-content .mp3 audio {
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);
    border-radius: 25px;
    outline: none;
    border: none;
    box-shadow: 0 4px 12px rgba(79,172,254,0.3);
    transition: all 0.3s ease
}

.fiction-content .mp3 audio:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79,172,254,0.4)
}

.fiction-content .mp3 audio::-webkit-media-controls-panel {
    background: var(--mp3-player-audio-control-bg);
    border-radius: 25px
}

.fiction-content .mp3 audio::-webkit-media-controls-play-button,.fiction-content .mp3 audio::-webkit-media-controls-pause-button {
    border-radius: 50%;
    margin: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2)
}

.fiction-content .mp3 audio::-webkit-media-controls-timeline {
    background: rgba(255,255,255,0.3);
    border-radius: 8px;
    margin: 0 8px
}

.fiction-content .mp3 audio::-webkit-media-controls-current-time-display,.fiction-content .mp3 audio::-webkit-media-controls-time-remaining-display {
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 12px
}

.fiction-content .mp3 audio::-webkit-media-controls-volume-slider-container {
    background: rgba(255,255,255,0.3);
    border-radius: 8px;
    margin-right: 8px
}

.fiction-content .mp3 .caption {
    font-size: 0.95rem;
    text-align: center;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    color: var(--mp3-player-caption-text)
}

.fiction-content .mp3 .audio-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    animation: mp3-player-caption-pulse 2s infinite
}

.fiction-overview {
}

.fiction-overview-info .fiction-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding-top: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 20px
}

@supports (aspect-ratio: 1) {
    .fiction-overview-info .fiction-cover {
        padding-top:0;
        height: auto
    }
}

.fiction-overview-info-item {
    padding: 0.6rem 0;
    font-size: 0.9rem
}

.fiction-overview-info .title {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 0
}

.fiction-overview-info-item.tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fiction-overview-info-item.tags .tag {
    display: block
}

.fiction-completion-hint-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap
}

.fiction-completion-hint {
    position: relative;
    display: inline-flex;
    cursor: help;
    vertical-align: middle
}

.fiction-completion-hint-popup {
    display: none;
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: 100%;
    margin-bottom: 6px;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(16rem,70vw);
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #f5f5f5;
    font-size: 0.75rem;
    font-weight: normal;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    text-align: left;
    white-space: normal
}

.fiction-completion-hint:hover .fiction-completion-hint-popup,.fiction-completion-hint:focus-visible .fiction-completion-hint-popup {
    display: block
}

@media (max-width: 767px) {
    .fiction-completion-hint-desktop {
        display:none !important
    }
}

.fiction-overview-brief {
    padding: 0 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fiction-brief-text)
}

.fiction-overview-brief span {
    font-weight: bold
}

.fiction-overview-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.fiction-overview-cta > a .btn.read,.fiction-overview-cta > .btn.mv {
    margin-right: 0
}

.fiction-overview-cta > .btn.mv {
    color: var(--default-btn-text);
    background: linear-gradient(45deg,#5b7cfa,#7c3aed,#5b7cfa);
    background-size: 200% 200%;
    animation: ani-btn 3s ease infinite;
    cursor: pointer
}

.fiction-overview-cta > .btn.mv:not(.disabled):hover {
    background: linear-gradient(45deg,#7490ff,#925ef5,#7490ff);
    color: var(--default-btn-text-hover)
}

.fiction-mv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 12px 16px
}

.fiction-mv-modal.is-open {
    display: flex
}

.fiction-mv-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.75);
    cursor: default
}

.fiction-mv-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 960px;
    max-height: min(92dvh,940px);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--default-split);
    background: var(--default-bg);
    color: var(--default-text);
    box-shadow: 0 18px 48px rgba(0,0,0,0.25)
}

.fiction-mv-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--default-split);
    background: var(--default-bg);
    color: var(--default-text);
    flex: 0 0 auto
}

.fiction-mv-dialog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--default-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0
}

.fiction-mv-close-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--default-split);
    background: transparent;
    color: var(--default-secondary-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease,color 0.16s ease,border-color 0.16s ease
}

.fiction-mv-close-btn:hover {
    background: var(--default-split);
    border-color: var(--default-split);
    color: var(--default-text)
}

.fiction-mv-dialog-body {
    padding: 8px 12px 12px;
    overflow-y: auto;
    min-height: 0;
    background: var(--default-bg);
    line-height: 0
}

.fiction-mv-video-wrap {
    width: 100%;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0
}

.fiction-mv-video-wrap video {
    width: 100%;
    height: auto;
    max-height: min(72dvh,720px);
    display: block;
    vertical-align: top;
    object-fit: contain;
    background: #000;
    border: 0;
    outline: none
}

.fiction-overview-chapters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.5rem
}

.fiction-overview-chapters .header {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0 1rem
}

.fiction-overview-chapters .chapter-container {
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem
}

.fiction-overview-chapters .chapter-container .chapter-item {
    min-width: 0;
    padding: 0.5rem;
    border-radius: 5px;
    color: var(--fiction-chapter-item-text);
    background-color: var(--fiction-chapter-item-bg);
    border: 1px solid var(--fiction-chapter-item-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    transition: all 0.3s ease
}

.fiction-overview-chapters .chapter-container .chapter-item:hover {
    color: var(--fiction-chapter-item-text-hover);
    background-color: var(--fiction-chapter-item-bg-hover);
    border-color: var(--fiction-chapter-item-border-hover);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    transform: scale(1.05)
}

.fiction-cover-left {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 20px
}

@supports (aspect-ratio: 1) {
    .fiction-cover-left {
        padding-top:0;
        height: auto
    }
}

.fiction-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem
}

.fiction-control-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    font-size: 1rem;
    border: 1px solid var(--fiction-controls-btn-border);
    background-color: var(--fiction-controls-btn-bg);
    color: var(--fiction-controls-btn-text);
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
    white-space: nowrap
}

.fiction-control-btn:hover {
    background-color: var(--fiction-controls-btn-bg-hover);
    border-color: var(--fiction-controls-btn-border-hover);
    color: var(--fiction-controls-btn-text-hover);
    scale: 1.05
}

.fiction-control-btn.prev i {
    padding-right: 0.25rem
}

.fiction-control-btn.next i {
    padding-left: 0.25rem
}

.fiction-controls .font-size {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem
}

.fiction-controls .font-size .label {
    flex: none
}

.fiction-controls .chapter-go {
    display: flex;
    gap: 0.5rem;
    align-items: center
}

.fiction-control-btn:hover {
    background-color: var(--fiction-controls-btn-bg-hover);
    border-color: var(--fiction-controls-btn-border-hover);
    color: var(--fiction-controls-btn-text-hover);
    transform: scale(1.05)
}

.fiction-control-btn.disabled {
    background-color: var(--default-btn-disabled-bg);
    color: var(--default-btn-disabled-text);
    border-color: var(--default-btn-disabled-bg);
    ;cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6
}

.fiction-banner {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden
}

.fiction-banner>div {
    max-width: 728px;
    margin: 0 auto
}

.fiction-banner iframe {
    width: 100%;
    height: 90px
}

.fiction-chapter-navigator {
    border-top: 1px solid var(--default-split);
    padding: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center
}

.fiction-chapter-navigator>a {
    flex: 0 0 50%;
    display: flex
}

.fiction-chapter-navigator>a:nth-child(1) {
    justify-content: flex-start
}

.fiction-chapter-navigator>a:nth-child(2) {
    justify-content: flex-end
}

.fiction-chapter-navigator.has-next-rate-hint {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.75rem
}

.fiction-chapter-navigator.has-next-rate-hint>a {
    flex: 0 0 auto
}

.fiction-chapter-navigator.has-next-rate-hint>a:nth-child(1) {
    justify-content: flex-start
}

.fiction-chapter-navigator.has-next-rate-hint>a:nth-child(3) {
    justify-content: flex-end
}

.fiction-chapter-next-rate-hint {
    text-align: center;
    color: var(--fiction-subtitle-text);
    font-size: 0.95rem;
    white-space: nowrap
}

.fiction-illustration {
    width: 95%;
    margin: 0 auto
}

.fiction-illustration img {
    max-width: 100%
}

@media only screen and (max-width: 768px) {
    .fiction-control-btn {
        font-size:0.85rem
    }

    .fiction-overview-chapters .chapter-container {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .fiction-overview-chapters .chapter-container .chapter-item {
        font-size: 0.8rem
    }

    .fiction-chapter-navigator.has-next-rate-hint {
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        column-gap: 0.5rem
    }

    .fiction-chapter-next-rate-hint {
        font-size: 0.85rem
    }
}

.fiction-controls .anchor {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center
}

.fiction-controls .anchor a {
    display: block;
    text-decoration: none
}

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 18rem
}

.not-found-icon {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    opacity: 0.8
}

.not-found-icon svg {
    width: 100%;
    height: 100%
}

.not-found-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--not-found-title-color);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease
}

.not-found-description {
    font-size: 0.9rem;
    color: var(--not-found-description-color);
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 400px;
    transition: color 0.3s ease
}

.not-found-description a {
    color: var(--default-text-link)
}

.not-found-description a:hover {
    color: var(--default-text-link-hover)
}

@media only screen and (max-width: 768px) {
    .not-found {
        min-height:12rem
    }

    .not-found-icon {
        width: 5rem;
        height: 5rem
    }
}

.form {
    transition: all 0.3s ease-in-out
}

.form > div {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--default-split);
    transition: var(--form-transition);
    position: relative
}

.form > div:last-child {
    border-bottom: none
}

.form > div > div:nth-child(1) {
    flex: 0 0 150px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 0.5rem
}

.form.modal-form > div > div:nth-child(1) {
    flex: 0 0 15%
}

.form > div > div:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center
}

.form > div > div:nth-child(3) {
    flex: 0 0 250px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 0.5rem
}

.form.modal-form > div > div:nth-child(3) {
    flex: 0 0 20%
}

.form > .button-line,.form > .tip-line {
    display: flex;
    justify-content: flex-end;
    padding: 1.5rem
}

.form > .tip-line {
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600
}

.form textarea {
    height: auto;
    min-height: 80px;
    resize: vertical
}

.form .status-success {
    color: var(--success-text)
}

.form .status-warning {
    color: var(--warning-text)
}

.form .status-error {
    color: var(--warning-text)
}

.form .required::after {
    content: '*';
    color: var(--warning-text);
    margin-left: 0.25rem
}

@media only screen and (max-width: 768px) {
    .form > div {
        flex-direction:column;
        align-items: stretch;
        padding: 0.75rem;
        gap: 0.5rem
    }

    .form > div > div:nth-child(1) {
        flex: none;
        padding-right: 0;
        padding-bottom: 0.25rem;
        font-size: 0.875rem
    }

    .form > div > div:nth-child(2) {
        flex: none
    }

    .form > div > div:nth-child(3) {
        flex: none;
        padding-left: 0;
        padding-top: 0.25rem;
        font-size: 0.75rem;
        justify-content: flex-start
    }

    .form input[type='text'],.form input[type='password'],.form input[type='email'],.form input[type='number'],.form input[type='tel'],.form input[type='url'],.form select,.form textarea {
        max-width: none;
        width: 100%
    }

    .form > .button-line,.form > .tip-line {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch
    }
}

@media only screen and (min-width: 1401px) {
    .form input[type='text'],.form input[type='password'],.form input[type='email'],.form input[type='number'],.form input[type='tel'],.form input[type='url'],.form select,.form textarea {
        max-width:350px
    }
}

.user-dialog-force {
    max-width: 50vw;
    user-select: none;
    padding: 0.5rem;
    box-sizing: border-box;
    z-index: 10001
}

.user-dialog-force .force-media {
    width: 100%;
    cursor: pointer
}

.user-dialog-force .force-tip {
    padding: 0.2rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--default-text)
}

.user-dialog-force img,.user-dialog-force video {
    max-width: 100%
}

@media only screen and (max-width: 768px) {
    .user-dialog-force {
        max-width:95vw
    }
}

body.modal-open {
    overflow: hidden !important
}

.modal {
    display: none
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease,visibility 0.3s ease;
    transform: translateZ(0)
}

.modal-overlay.modal-show {
    opacity: 1;
    visibility: visible
}

.modal-overlay.modal-show .modal-container {
    transform: scale(1);
    opacity: 1
}

.modal-container {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease,opacity 0.3s ease;
    width: auto;
    height: auto;
    min-width: fit-content;
    min-height: fit-content;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    box-sizing: border-box;
    position: relative;
    z-index: 1
}

.modal-three-section .modal-container {
    max-height: calc(100vh - 60px);
    min-height: 200px;
    min-width: 320px
}

.modal-content {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    background-color: #ffffff
}

.modal-three-section .modal-content {
    height: fit-content;
    min-height: 200px;
    max-height: calc(100vh - 60px);
    min-width: 320px
}

.modal-content .modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #333333;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent
}

.modal-content .modal-body::-webkit-scrollbar {
    width: 8px
}

.modal-content .modal-body::-webkit-scrollbar-track {
    background: transparent
}

.modal-content .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px
}

.modal-content .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.5)
}

.modal-header {
    padding: 0 1rem;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    flex-shrink: 0;
    max-height: 50px
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1 1 auto;
    margin-right: 40px
}

.modal-three-section .modal-body {
    padding: 25px 30px;
    overflow-y: auto;
    min-width: 260px;
    min-height: 100px;
    max-height: calc(100vh - 200px);
    width: auto;
    background-color: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent
}

.modal-three-section .modal-body::-webkit-scrollbar {
    width: 8px
}

.modal-three-section .modal-body::-webkit-scrollbar-track {
    background: transparent
}

.modal-three-section .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px
}

.modal-three-section .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.5)
}

.modal-footer {
    padding: 15px 30px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    color: #333333;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    min-height: 50px
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0
}

.modal-close:hover {
    background: rgba(0,0,0,0.2);
    color: #333;
    transform: scale(1.1)
}

.modal-close:active {
    transform: scale(0.95)
}

.modal-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25)
}

.modal-btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 80px;
    line-height: 1.4
}

.modal-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25)
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff
}

.btn-primary:hover:not(:disabled) {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px)
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff
}

.btn-secondary:hover:not(:disabled) {
    background-color: #545b62;
    border-color: #545b62;
    transform: translateY(-1px)
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff
}

.btn-success:hover:not(:disabled) {
    background-color: #1e7e34;
    border-color: #1e7e34;
    transform: translateY(-1px)
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff
}

.btn-danger:hover:not(:disabled) {
    background-color: #bd2130;
    border-color: #bd2130;
    transform: translateY(-1px)
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529
}

.btn-warning:hover:not(:disabled) {
    background-color: #e0a800;
    border-color: #e0a800;
    transform: translateY(-1px)
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #ffffff
}

.btn-info:hover:not(:disabled) {
    background-color: #117a8b;
    border-color: #117a8b;
    transform: translateY(-1px)
}

.btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #212529
}

.btn-light:hover:not(:disabled) {
    background-color: #e2e6ea;
    border-color: #e2e6ea;
    transform: translateY(-1px)
}

.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
    color: #ffffff
}

.btn-dark:hover:not(:disabled) {
    background-color: #23272b;
    border-color: #23272b;
    transform: translateY(-1px)
}

.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
    background-color: transparent
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: #007bff;
    color: #ffffff;
    transform: translateY(-1px)
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
    background-color: transparent
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d;
    color: #ffffff;
    transform: translateY(-1px)
}

.modal-three-section .modal-container[style*="height:"] .modal-content,.modal-three-section .modal-container[style*="height "] .modal-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 100% !important;
    overflow: hidden !important
}

.modal-three-section .modal-container[style*="height:"] .modal-body,.modal-three-section .modal-container[style*="height "] .modal-body {
    flex: 1 1 0 !important;
    overflow: auto !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important
}

.modal-three-section .modal-container[style*="height:"] .modal-header,.modal-three-section .modal-container[style*="height "] .modal-header,.modal-three-section .modal-container[style*="height:"] .modal-footer,.modal-three-section .modal-container[style*="height "] .modal-footer {
    flex-shrink: 0 !important;
    flex-grow: 0 !important
}

.modal-three-section .modal-container[style*="height:"] .modal-header,.modal-three-section .modal-container[style*="height "] .modal-header {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important
}

.modal-three-section .modal-container[style*="height:"] .modal-footer,.modal-three-section .modal-container[style*="height "] .modal-footer {
    min-height: 50px !important
}

@media (max-width: 768px) {
    .modal-container {
        margin:10px;
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px)
    }

    .modal-three-section .modal-container {
        max-height: calc(100vh - 40px)
    }

    .modal-content {
        border-radius: 8px
    }

    .modal-three-section .modal-header,.modal-three-section .modal-body,.modal-three-section .modal-footer {
        padding-left: 20px;
        padding-right: 20px
    }

    .modal-three-section .modal-body {
        padding-top: 20px;
        padding-bottom: 20px;
        min-width: 240px
    }

    .modal-header {
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 50px
    }

    .modal-footer {
        flex-direction: column;
        gap: 8px
    }

    .modal-footer .modal-btn {
        width: 100%
    }

    .modal-title {
        font-size: 16px;
        margin-right: 30px
    }

    .modal-close {
        width: 28px;
        height: 28px;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .modal-container {
        margin:5px;
        max-width: calc(100vw - 10px);
        max-height: calc(100vh - 10px)
    }

    .modal-three-section .modal-container {
        max-height: calc(100vh - 20px)
    }

    .modal-content {
        border-radius: 6px
    }

    .modal-three-section .modal-header,.modal-three-section .modal-body,.modal-three-section .modal-footer {
        padding-left: 15px;
        padding-right: 15px
    }

    .modal-three-section .modal-body {
        min-width: 220px
    }
}

@media (prefers-reduced-motion:reduce) {
    .modal-overlay,.modal-container,.modal-close,.modal-btn {
        transition: none
    }
}

.modal-overlay:focus-within {
    outline: none
}

.modal-content:focus {
    outline: none
}

@media (prefers-contrast:high) {
    .modal-overlay {
        background-color: rgba(0,0,0,0.8)
    }

    .modal-content {
        border: 2px solid
    }

    .modal-btn {
        border-width: 2px
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .modal-overlay {
        -webkit-overflow-scrolling:touch
    }

    .modal-body {
        -webkit-overflow-scrolling: touch
    }
}

.modal-debug {
    border: 2px dashed red !important
}

.modal-debug .modal-container {
    border: 2px dashed blue !important
}

.modal-debug .modal-content {
    border: 2px dashed green !important
}

.modal-share {
    width: 50vw;
    padding: 2rem 1rem;
    box-sizing: border-box
}

.modal-share > div {
    text-align: center;
    padding-bottom: 1rem
}

.modal-share .qrcode {
    max-width: 75%
}

.model-container {
    display: inline-flex;
    flex-wrap: wrap;
    color: var(--default-text-disabled)
}

.model-container>a.model-item {
    color: var(--default-text-link)
}

.model-container>a.model-item:hover {
    color: var(--default-text-link-hover)
}

.model-container>.model-item {
    color: var(--default-text-disabled)
}

.model-container>.model-item:after {
    content: "/";
    padding: 0 0.5rem;
    color: var(--default-text-disabled)
}

.model-container>.model-item:last-child:after {
    content: ""
}

.model-container .male {
    color: var(--default-text-disabled);
    vertical-align: super
}

.model-avatar-container {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0.25rem
}

.model-avatar-container .model-item {
    flex-shrink: 0;
    width: 80px;
    aspect-ratio: 1 / 1;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    position: relative;
    cursor: not-allowed
}

@supports (aspect-ratio: 1) {
    .model-avatar-container .model-item {
        padding-top:0 !important;
        height: auto
    }
}

.model-avatar-container .model-item.smaller {
    width: 64px
}

.model-avatar-container a>.model-item {
    cursor: pointer
}

.model-avatar-container a>.model-item:hover {
    transform: scale(1.05);
    z-index: 10
}

.model-avatar-container .model-item>div {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 3px #000,0 0 6px #000,1px 1px 2px #000;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 1rem;
    left: 50%;
    right: 0;
    transform: translate(-50%,50%);
    background-color: rgba(0,0,0,0.3)
}

@media only screen and (max-width: 768px) {
    .model-container>.model-item:after {
        padding:0 0.25rem
    }

    .model-avatar-container .model-item {
        width: 64px
    }

    .model-avatar-container .model-item.smaller {
        width: 48px
    }
}

.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-top: 56.25%;
    background-color: #000
}

@supports (aspect-ratio: 1) {
    .video-player {
        padding-top:0
    }
}

.video-player .video-player-inner-cover {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative
}

.video-player .video-player-inner-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 10rem;
    height: 10rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden
}

.video-player .video-player-inner-play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.6s ease
}

.video-player .video-player-inner-play-btn:hover {
    transform: translate(-50%,-50%) scale(1.05);
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2)
}

.video-player .video-player-inner-play-btn:hover::before {
    width: 100%;
    height: 100%;
    opacity: 0
}

.video-player .video-player-inner-cover .video-player-inner-play-btn i {
    font-size: 5rem;
    color: #fff
}

.screenshot-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.screenshot-container>div {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
    padding-top: 56.25%;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

@supports (aspect-ratio: 1) {
    .screenshot-container>div {
        padding-top:0;
        height: auto
    }
}

.screenshot-container>div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.mp4-player-in-photo {
    width: 100%;
    height: auto
}

.mp4-player-in-photo>video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain
}

.mp4-player-in-photo>.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem
}

.mp4-player-in-photo>.controls>div {
    display: inline-block;
    margin: 0 10px;
    padding: 5px
}

.mp4-player-in-photo>.controls>.btn {
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
    background-color: #3498db;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    outline: none;
    margin: 0 5px
}

.mp4-player-in-photo>.controls>.btn:hover {
    background-color: #06c
}

.mp4-player-in-photo>.controls>.btn[disabled] {
    background-color: #c0c0c0;
    color: #fff;
    cursor: default
}

@media only screen and (max-width: 768px) {
    body.video .hero-section {
        display:none
    }

    body.video .breadcrumb {
        margin-top: calc(100vw * 9 / 16)
    }

    body.video .content-box.player-container {
        padding: 0;
        border: none;
        width: 100vw;
        height: 56.25vw;
        aspect-ratio: 16 / 9;
        position: fixed;
        top: 6vh;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 10;
        border-radius: 0
    }

    .video-player .video-player-inner-play-btn {
        width: 6rem;
        height: 6rem
    }

    .video-player .video-player-inner-cover .video-player-inner-play-btn i {
        font-size: 2.5rem
    }

    .screenshot-container {
        grid-template-columns: 1fr
    }
}

.search-container {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0.5rem;
    gap: 0.5rem
}

.search-container .search-box {
    display: flex;
    gap: 0.25rem;
    align-items: center
}

.search-container .search-tip {
    margin-top: 0.25rem;
    font-size: 0.9rem
}

.search-container .search-tip a {
    color: var(--default-text-link)
}

.search-container .search-tip a:hover {
    color: var(--default-text-link-hover)
}

.search-box .search-mode,.search-box .search-input {
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 42px !important;
    vertical-align: top !important;
    height: 44px !important;
    padding: 0 15px !important
}

.search-box .search-btn {
    height: 44px !important;
    line-height: 44px !important
}

.search-box .search-mode {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.search-box .search-input {
    width: 350px
}

.hot-keywords {
    padding-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9rem
}

.hot-keywords>a {
    color: var(--default-text-link)
}

.hot-keywords>a:hover {
    color: var(--default-text-link-hover)
}

.hot-keywords span {
    padding: 0 0.5rem;
    font-size: 0.5rem
}

.more-line {
    padding: 1.5rem 0 0.5rem 0
}

@media only screen and (max-width: 768px) {
    .search-container {
        flex-direction:column;
        align-items: flex-start;
        width: 100%
    }

    .search-box {
        width: 100%;
        flex-direction: column;
        align-items: flex-start !important
    }

    .search-box .search-input {
        width: 95% !important
    }
}

.change-appearance {
    width: 50vw;
    height: 60vh;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden
}

.change-appearance>.header {
    flex: 0 0 50px;
    position: sticky
}

.change-appearance>.body {
    flex: 1 1 auto;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box
}

.change-appearance>.footer {
    text-align: right
}

.change-appearance input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    height: 100%;
    padding: 15px 10px 0px 10px
}

.change-appearance input:focus {
    outline: none;
    border-color: #0088ff
}

.user-appearance {
    display: flex
}

.user-appearance>div {
    display: flex;
    align-items: center
}

.user-appearance>div:nth-child(1) {
    flex: 0 0 40px;
    padding-right: 8px
}

.user-appearance>div:nth-child(2) {
    padding-right: 8px
}

.user-appearance>div:nth-child(3) {
    flex: 1 1 auto
}

.user-appearance .user-tags {
    display: flex;
    align-items: center
}

.user-appearance .user-tags>img,.user-tag {
    width: 24px;
    height: 16px;
    border: #ddd 1px solid;
    margin-right: 2px
}

.change-appearance .avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.change-appearance .avatars .avatar {
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.75
}

.change-appearance .avatars .avatar.checked {
    filter: none;
    opacity: 1;
    animation: pulse 1s infinite ease-in-out
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15)
    }

    100% {
        transform: scale(1)
    }
}

.change-appearance .tags-caption,.change-appearance .avatars-caption {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    border-bottom: #eee 1px dashed;
    padding-bottom: 5px
}

.change-appearance .user-tags {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px
}

.change-appearance .user-tags .user-tag {
    width: 36px;
    height: 24px;
    filter: grayscale(90%);
    opacity: 0.6;
    border: transparent 2px solid
}

.change-appearance .user-tags>div {
    flex: 0 0 5%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer
}

.change-appearance .user-tags>div[disabled] {
    cursor: default
}

.change-appearance .user-tags>div[checked] .user-tag {
    filter: none;
    opacity: 1;
    border: #c00 2px solid
}

.change-appearance .tab-container {
    width: 100%;
    min-width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    box-sizing: border-box
}

.change-appearance .tab-container .tabs {
    display: flex;
    width: 100%;
    min-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    box-sizing: border-box
}

.change-appearance .tab-container .tab {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 15px 5px;
    cursor: pointer;
    background-color: #f2f2f2;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #666;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box
}

.change-appearance .tab-container .tab.active {
    background-color: #fff;
    color: #333;
    font-weight: bold;
    border-bottom: 3px solid #ff6f61;
    display: flex;
    align-items: center;
    justify-content: center
}

.change-appearance .tab-container .tab.active:before {
    content: "⭐";
    font-size: 0.8em;
    padding-right: 2px
}

.change-appearance .input-container {
    position: relative;
    height: 45px;
    margin-top: 10px
}

.change-appearance .input-container>.placeholder {
    font-size: 12px;
    transform: scale(0.9);
    color: #888;
    position: absolute;
    left: 5px;
    top: 2px
}

.change-appearance .tab-content {
    height: 42vh;
    overflow-y: scroll
}

@media only screen and (max-width: 768px) {
    .change-appearance {
        width:75vw;
        height: 50vh
    }

    .change-appearance .tab-content {
        height: 40vh
    }
}

#exo-im-container-wrapper {
    left: 0 !important
}

.a-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.a-media.zone-4,.a-media.zone-5 {
    aspect-ratio: 960/80;
    padding-top: 8.3333%;
    margin-bottom: 0.2rem
}

@supports (aspect-ratio: 1) {
    .a-media.zone-4,.a-media.zone-5 {
        padding-top:0;
        height: auto
    }
}

.a-media.zone-6 {
    aspect-ratio: 400/600;
    padding-top: 150%
}

@supports (aspect-ratio: 1) {
    .a-media.zone-6 {
        padding-top:0;
        height: auto
    }
}

.a-media.zone-8 {
    aspect-ratio: 160/200;
    padding-top: 125%;
    margin-bottom: 0.2rem
}

@supports (aspect-ratio: 1) {
    .a-media.zone-8 {
        padding-top:0;
        height: auto
    }
}

.a-media.ex-widget {
    aspect-ratio: 1000/240;
    padding-top: 24%
}

@supports (aspect-ratio: 1) {
    .a-media.ex-widget {
        padding-top:0;
        height: auto
    }
}

.a-media.ex-728-90 {
    aspect-ratio: 960/80;
    padding-top: 12.3611%;
    background-color: #000;
    margin-bottom: 0.2rem
}

@supports (aspect-ratio: 1) {
    .a-media.ex-728-90 {
        padding-top:0;
        height: auto
    }
}

.a-media.ex-300-250 {
    aspect-ratio: 300 / 250;
    padding-top: 83.3333%
}

@supports (aspect-ratio: 1) {
    .a-media.ex-300-250 {
        padding-top:0;
        height: auto
    }
}

.a-media.ex-300-500 {
    aspect-ratio: 300 / 500;
    padding-top: 166.6667%
}

@supports (aspect-ratio: 1) {
    .a-media.ex-300-500 {
        padding-top:0;
        height: auto
    }
}

.a-media.ex-160-600 {
    aspect-ratio: 160 / 600;
    padding-top: 375%
}

@supports (aspect-ratio: 1) {
    .a-media.ex-160-600 {
        padding-top:0;
        height: auto
    }
}

@media only screen and (max-width: 768px) {
    .a-media.ex-728-90 {
        aspect-ratio:960/120;
        padding-top: 12.5%
    }

    @supports (aspect-ratio: 1) {
        .a-media.ex-728-90 {
            padding-top:0;
            height: auto
        }
    }

    .a-media.ex-widget {
        aspect-ratio: 1000/380;
        padding-top: 38%
    }

    @supports (aspect-ratio: 1) {
        .a-media.ex-widget {
            padding-top:0;
            height: auto
        }
    }
}

.ai-views {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.ai-view {
    background: var(--default-bg);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards
}

.ai-view:nth-child(2) {
    animation-delay: 0.2s
}

.ai-view:nth-child(3) {
    animation-delay: 0.4s
}

.ai-view:nth-child(4) {
    animation-delay: 0.6s
}

.ai-view:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.15)
}

.ai-view .item-content {
    display: grid;
    grid-template-columns: 6.5fr 3.5fr;
    min-height: 250px
}

.ai-view .comment-section {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.ai-view .comment-title {
    color: var(--default-text);
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 10px
}

.ai-view .comment-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--default-text);
    overflow-y: auto;
    padding-right: 10px;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.3s forwards
}

..ai-view comment-text::-webkit-scrollbar {
    width: 8px
}

.ai-view .comment-text::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg,#667eea,#764ba2);
    border-radius: 4px
}

.ai-view .comment-text::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg,#5a6fd8,#6a4c93)
}

.ai-view .comment-text::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px
}

.ai-view .comment-text::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg,#667eea,#764ba2);
    border-radius: 3px
}

.ai-view .comment-text p {
    margin-bottom: 1em
}

.ai-view .image-section a {
    display: block;
    width: 100%;
    height: 100%
}

.ai-view .image-section {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center
}

.ai-view .image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease
}

.ai-view:hover .image-section img {
    transform: scale(1.05)
}

.ai-view .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,rgba(102,126,234,0.1),rgba(118,75,162,0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none
}

.ai-view:hover .image-overlay {
    opacity: 1
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media (max-width: 768px) {
    .ai-views {
        gap:40px
    }

    .ai-view {
        border-radius: 16px
    }

    .ai-view .item-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr
    }

    .ai-view .comment-section {
        padding: 1rem
    }

    .ai-view .comment-text {
        font-size: 0.9rem;
        line-height: 1.6;
        overflow-y: visible;
        max-height: none
    }
}

@media (min-width: 769px) and (max-width:1366px) {
    body.is-tablet {
        --main-container-width:100%
    }

    body.is-tablet > .main-container {
        margin-bottom: 2rem
    }

    body.is-tablet .content-box {
        padding: 0.65rem
    }

    body.is-tablet .hero-section,body.is-tablet .breadcrumb {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box
    }

    body.is-tablet .hero-section {
        height: 200px
    }

    body.is-tablet .hero-section.index {
        height: 220px
    }

    body.is-tablet .hero-section > .hero-title .hero-title-item {
        font-size: 1rem;
        padding-bottom: 0.5rem
    }

    body.is-tablet .hero-section.index > .hero-title h1.hero-title-item {
        font-size: 2rem
    }

    body.is-tablet .hero-section.index > .hero-title .hero-title-item a {
        font-size: 1.05em
    }

    body.is-tablet .breadcrumb {
        height: 48px;
        line-height: 48px;
        margin-bottom: 12px;
        font-size: 0.9em
    }

    body.is-tablet .layout-lr {
        flex-direction: column;
        gap: 0.75rem
    }

    body.is-tablet .layout-lr > .left-1,body.is-tablet .layout-lr > .left-2,body.is-tablet .layout-lr > .left-3,body.is-tablet .layout-lr > .left-4,body.is-tablet .layout-lr > .left-5,body.is-tablet .layout-lr > .right-1,body.is-tablet .layout-lr > .right-2,body.is-tablet .layout-lr > .right-3,body.is-tablet .layout-lr > .right-4,body.is-tablet .layout-lr > .right-5,body.is-tablet .layout-lr > .right-6,body.is-tablet .layout-lr > .right-7,body.is-tablet .layout-lr > .right-8 {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0
    }

    body.is-tablet .layout-lr.index > .left-1 {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 0.75rem;
        align-items: start
    }

    body.is-tablet .layout-lr.index > .left-1 > .series {
        min-width: 0
    }

    body.is-tablet .series {
        overflow: visible
    }

    body.is-tablet .series h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem
    }

    body.is-tablet .series .parent {
        font-size: 13px;
        margin: 10px 6px 4px 6px
    }

    body.is-tablet .series .sub {
        font-size: 0.8rem;
        margin: 0 6px 2px 6px;
        padding: 4px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    body.is-tablet .list.photo-index,body.is-tablet .list.fiction-index,body.is-tablet .list.comic-index {
        grid-template-columns: repeat(3,1fr)
    }

    body.is-tablet .list.video-index {
        grid-template-columns: repeat(3,1fr)
    }

    body.is-tablet .list.photo-list,body.is-tablet .list.photo-home,body.is-tablet .list.model-list,body.is-tablet .list.model-home,body.is-tablet .list.actor-list,body.is-tablet .list.actor-home {
        grid-template-columns: repeat(3,1fr)
    }

    body.is-tablet .list.video-list,body.is-tablet .list.video-home,body.is-tablet .list.fiction-list,body.is-tablet .list.fiction-home {
        grid-template-columns: repeat(2,1fr)
    }

    body.is-tablet .list.comic-list {
        grid-template-columns: repeat(3,1fr)
    }

    body.is-tablet .list.amateur-list {
        grid-template-columns: repeat(2,1fr)
    }

    body.is-tablet .list.amateur-items,body.is-tablet .list.photo-items {
        grid-template-columns: repeat(2,1fr)
    }

    body.is-tablet .category-container .subs {
        grid-template-columns: repeat(3,1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem
    }

    body.is-tablet .category-container .subs.photo-tag-grid {
        grid-template-columns: repeat(5,1fr)
    }

    body.is-tablet .category-container .subs.photo-feature-filter-grid {
        grid-template-columns: repeat(3,1fr)
    }

    body.is-tablet .category-container .sub {
        font-size: 0.85em
    }

    body.is-tablet .albums {
        grid-template-columns: repeat(3,1fr);
        gap: 0.75rem
    }

    body.is-tablet .albums .album .text {
        font-size: 0.95em
    }

    body.is-tablet .photo-home-tags {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    body.is-tablet .fiction-overview-chapters .chapter-container {
        grid-template-columns: repeat(2,1fr)
    }

    body.is-tablet .object-card .description {
        font-size: 0.85rem;
        -webkit-line-clamp: 4;
        line-clamp: 4
    }

    body.is-tablet .affair > div:nth-child(2) {
        display: none
    }

    body.is-tablet .form input[type='text'],body.is-tablet .form input[type='password'],body.is-tablet .form input[type='email'],body.is-tablet .form input[type='number'],body.is-tablet .form input[type='tel'],body.is-tablet .form input[type='url'],body.is-tablet .form select,body.is-tablet .form textarea {
        max-width: 100%
    }

    body.is-tablet .ai-views {
        gap: 40px
    }

    body.is-tablet .ai-view .item-content {
        grid-template-columns: 1fr minmax(200px,280px)
    }

    body.is-tablet .ai-view .comment-section {
        padding: 20px
    }

    body.is-tablet .ai-view .comment-text {
        font-size: 0.9rem;
        max-height: 280px
    }

    body.is-tablet .floating-toolbar {
        right: 1rem;
        bottom: 1rem;
        padding: 0.5rem;
        gap: 0.5rem
    }

    body.is-tablet .floating-toolbar:hover {
        transform: none
    }

    body.is-tablet .floating-toolbar .floating-btn {
        min-width: 36px;
        min-height: 28px;
        font-size: 0.9rem
    }

    body.is-tablet .push-slider {
        display: none !important
    }

    body.is-tablet .push-top-container {
        right: -280px
    }

    body.is-tablet .push-top {
        width: 320px
    }

    body.is-tablet .push-top > .media {
        flex: 0 0 270px;
        height: 46px
    }

    body.is-tablet .push-bottom {
        width: 100%
    }

    body.is-tablet .static-container-6 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem
    }

    body.is-tablet .static-container-6 .a-media {
        width: 120px;
        margin-right: 0
    }

    body.is-tablet .static-container-8 {
        width: 100%
    }

    body.is-tablet .static-container-8 > .media {
        width: 150px;
        height: 187.5px;
        margin-left: auto;
        margin-right: auto
    }

    body.is-tablet .index .featured-comments {
        display: block
    }

    body.is-tablet .modal-alert {
        width: 70vw;
        max-width: 520px;
        height: auto;
        min-height: 30vh
    }
}

@media (min-width: 769px) and (max-width:1366px) {
    nav.mobile {
        display:none
    }

    nav.pc {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 48px;
        line-height: normal;
        overflow: visible;
        box-sizing: border-box
    }

    nav.pc > div {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px;
        height: auto;
        line-height: normal;
        margin: 0 !important;
        padding: 0;
        box-sizing: border-box;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        overflow: visible
    }

    nav.pc .logo {
        display: flex !important;
        flex: 0 0 10% !important;
        width: 10% !important;
        max-width: 10% !important;
        min-width: 0 !important;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative
    }

    nav.pc .logo img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 42px !important;
        height: auto !important;
        vertical-align: middle
    }

    nav.pc .logo .country {
        font-size: 10px;
        top: -8px;
        right: 2px
    }

    nav.pc .topMenu {
        flex: 0 0 66% !important;
        width: 66% !important;
        max-width: 66% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 2px;
        font-size: 0.7em !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: stretch;
        gap: 0;
        overflow: visible;
        box-sizing: border-box
    }

    nav.pc .topMenu:before {
        display: none
    }

    nav.pc .topMenu > a,nav.pc .topMenu > .menu {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        white-space: nowrap !important;
        text-align: center;
        overflow: hidden;
        box-sizing: border-box;
        padding: 1px 2px
    }

    nav.pc .topMenu img {
        width: auto !important;
        max-height: 22px !important;
        max-width: 36px !important;
        height: auto !important;
        vertical-align: middle
    }

    nav.pc .menu {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative;
        padding: 1px 0;
        box-sizing: border-box;
        max-width: 100%
    }

    nav.pc .menu:hover {
        transform: none;
        font-weight: bold
    }

    nav.pc .menu.has-subs {
        cursor: pointer;
        overflow: visible !important;
        -webkit-tap-highlight-color: transparent
    }

    nav.pc .menu > .subs {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10001;
        pointer-events: auto
    }

    nav.pc .menu.has-subs:not(.is-open):hover > .subs {
        display: none !important
    }

    nav.pc .menu.has-subs.is-open > .subs,nav.pc .menu.has-subs.is-open:hover > .subs {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important
    }

    nav.pc .topMenu > .menu.has-subs.is-open > .subs,nav.pc .topMenu > .menu.has-subs.is-open:hover > .subs {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important
    }

    nav.pc .menu > div:nth-child(1) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 18px !important;
        line-height: 1 !important;
        font-size: 11px !important;
        flex: 0 0 auto
    }

    nav.pc .menu > div:nth-child(1) i {
        font-size: 11px !important
    }

    nav.pc .menu > div:nth-child(2) {
        display: block !important;
        height: auto !important;
        line-height: 1.15 !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
        text-align: center;
        padding: 0 1px;
        box-sizing: border-box
    }

    nav.pc .menu > div:nth-child(2) i.caret,nav.pc .menu > div:nth-child(2) .fa-caret-down {
        font-size: 7px !important;
        margin-left: 1px
    }

    nav.pc .topMenu > a {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1px 2px;
        white-space: nowrap !important;
        font-size: 10px !important;
        overflow: hidden
    }

    nav.pc .theme-container {
        flex: 0 0 8% !important;
        width: 8% !important;
        max-width: 8% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        transform: none
    }

    nav.pc .languages {
        flex: 0 0 8% !important;
        width: 8% !important;
        max-width: 8% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0.75em;
        padding: 0;
        box-sizing: border-box
    }

    nav.pc .languages .language {
        width: 92%;
        max-width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 11px;
        box-sizing: border-box
    }

    nav.pc .login {
        flex: 0 0 8% !important;
        width: 8% !important;
        max-width: 8% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box
    }

    nav.pc .login .logined {
        padding-left: 0;
        margin-left: 0;
        right: 0
    }

    nav.pc .login .logined img {
        width: 30px;
        height: 30px
    }

    nav.pc .login .notLogined {
        height: auto;
        line-height: 1.2;
        white-space: nowrap;
        font-size: 0.7em
    }
}