body {
    /*background-color: #000000;*/
    background-image: url('/beijing.jpg');
    margin: 0;
    font-size: 14px;
    font-family: Roboto,sans-serif;
    color: #000000;}
.leixing0 {
    height: 40px;}
.leixing {
    height: 25px;
    display: block;}
.xiangqing {
    height:15px;
    margin: 3px;}
.breadcrumb {
    padding: 5px 0 15px 5px;
    font-size: 1.3em;}
.search-container form {
  display: flex;
  align-items: center;}
.search-container .input-wrapper1 {
    display: inline-block;
}
    .brief .image-right {
        position: relative;
        background-size: cover;
        background-image: url('/static/Group-pictures/index.webp');
        min-height: 342px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
.input-wrapper1 {
    position: relative;
}
.input-wrapper button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;}
@media (max-width: 640px) {
  .input-wrapper input {
    padding: 6px 25px 6px 8px;
    font-size: 12px;
  }
}
.site-comments {
                height: 283px;
                overflow: hidden;
                position: relative;
                transition: height 0.3s ease, box-shadow 0.3s ease;
                color: #3f3f3f;
                line-height: 22px;
                border-bottom: 2px solid #ccc;
                background-color: #fff;
                font-family: "Inter", sans-serif;
                border-radius: 10px;
                overflow-y: auto; 
                padding-right: 10px; 
                padding: 0 0 0 5px;
                width: 102.6%;
                margin: 6px;
                margin-top: -12px;
                margin-left: -7px;
              }
      /*.site-comments:hover {*/
      /*      box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);}*/
      .site-comments.expanded {
            height: auto;
            min-height: 200px;}
       .site-extra4 {
            margin: 0px;
            cursor: pointer;
            overflow-y: auto;
            padding: 0 5px 0 0;
            scrollbar-width: none;
            -ms-overflow-style: none;}
       .site-extra4::-webkit-scrollbar {
            width: 0;
            background: transparent;}
      .site-extra4:hover::-webkit-scrollbar {
            width: 8px;}
      .site-extra4:hover::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px; }
      .site-extra4:hover::-webkit-scrollbar-track {
            background: #f1f1f1;}
a {cursor: text;}
a[href] {
    cursor: pointer;
    color: #f30e4;
    text-decoration: none;
}
.guess-you-like-item
.leixing1 {
    display: flex;
    align-items: center; 
    height: 46px; }
.button1 {
    display: inline-block; 
    padding: 0.8rem 1.5rem; 
    margin: 0.5rem 0.5rem 0.5rem 5vw; 
    background-color: #007bff; 
    color: white; 
    text-align: center;
    text-decoration: none; 
    border-radius: 0.3rem; 
    cursor: pointer; 
    transition: box-shadow 0.3s ease; 
    font-size: clamp(14px, 2.5vw, 16px); 
    left: 10%;}
.button1:hover {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); }
div#linkButton.button{  
width: 360px;
position: relative;
    left:-5%;}
div.url{  
height: 6px;}
.misc.div{
    height: 26px;}
a[href]:hover {
    color: #052;}
.highlight {
    color: #f00;}
h2 {
    all: unset;
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    padding: 10px 0;
    font-weight: 400;}
select {
    outline: none;
    border: #aaa 2px solid;
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
    left: 50%;}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'] {
    outline: none;
    border: #ada9a9 2px solid;
    border-radius: 8px;
    padding: 8px 10px; 
    font-size: 12px;}
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='email'] {
    border: #666 2px solid;}
textarea::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder,
input[type='password']::-webkit-input-placeholder,
input[type='number']::-webkit-input-placeholder,
input[type='email']::-webkit-input-placeholder {
    color: #aaa;}
.button {
    border-radius: 8px;
    color: #fff;
    background-color: rgba(52, 179, 228, 1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 25px;
    width: 300px;
    height: 50px;
    cursor: pointer;
    font-size: 0.95em;}
.button.disabled {
    background-color: #ccc;
    cursor: default;}
.button > .left {
    flex: 0 0 50px;
    font-size: 1.75em;
    display: flex;
    align-items: center;}
.button > .left img {
    width: 28px;
    height: 28px;
    border-radius: 50%;}
.button > .right {
    flex: 0 0 50px;
    overflow: hidden;
    text-align: right;
    font-size: 1.8em;}
.button:hover > .text {
    font-weight: bold;}
.button:hover > .right {
    animation: fontZoom 1s infinite;
    transition: font-size 0.5s;}
.button.disabled > .right {
    animation: none;}
.button.disabled:hover > .text, .button.disabled:hover > .right {
    font-weight: normal;}
.button.disabled > .right {
    animation: none;}
.language[language] {
    background-size: cover;
    border: #ccc 1px solid;
    user-select: none;}
.language[language='1'] {
    background-image: url('../images/languages/1.jpg');}
.language[language='2'] {
    background-image: url('../images/languages/2.jpg');}
.language[language='3'] {
    background-image: url('../images/languages/3.jpg');}
.language[language='4'] {
    background-image: url('../images/languages/4.jpg');}
.language[language='5'] {
    background-image: url('../images/languages/5.jpg');}
.language[language='6'] {
    background-image: url('../images/languages/6.jpg');}
.header {
    height: 28px;
    line-height: 0px;
    overflow: hidden;
    background-color: #bf6120;
    color: #fff;
    border-bottom: #666 2px solid;
    text-align: center;}
.nav > .header > .section {
    display: flex;
    line-height: 18px;}
.nav > .header > .section > .text {
    flex-grow: 1;
    display: flex;
    justify-content: center;}
.nav > .header h2 {
    all: unset;
    font-size: 14px !important;}
.nav > .header a {
    color: #fff;}
.nav > .header a:hover {
    color: #9f9;}
.nav > .header > .section > .text > .submit, .nav > .header > .section > .text > .manage {
    padding-left: 20px;}
.nav > .header > .section > .text > .submit i, .nav > .header > .section > .text > .manage i {
    padding-right: 3px;}
.nav > .header > .section > .language-container {
    flex-grow: 1;
    display: flex;
    justify-content: end;
}
.nav > .header > .section > .language-container > .language[language] {
    display: none;
    width: 24px;
    height: 16px;}
.nav > .bar {
    margin: 3px 0 20px 0;}
.nav > .bar > .section {
    display: flex;}
.nav > .bar > .section > .left {
    flex-shrink: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;}
.nav > .bar > .section > .left > div {
    padding: 2px 0;
    flex-grow: 1;
    flex: 1;}
.nav > .bar > .section > .right {
    padding: 0 25px;
    flex-grow: 1;
    box-sizing: border-box;
    display: flex;}
.nav > .bar > .section > .right .site-button > div {
    padding: 5px 0;
    display: flex;
    justify-content: center;}
.nav .search-container {
    position: relative;
    display: inline-block;
    width: 30vw;}
.nav .search-container .input-wrapper {
    position: relative;
    width: 100%;
    display: inline-flex;}
.nav .search-container .input-wrapper select {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}
.nav .search-container i.fa {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    color: #ae7f6c;
    font-size: 1.8em;
    cursor: pointer;}
.nav .search-container select {
    font-weight: bold;
    font-size: 1.1em;}
.nav .search-container input[type='text'] {
    box-sizing: border-box;
    font-size: 1.1em;
    padding: 10px 3em 10px 7.5em;
    width: 100%;}
.breadcrumb {
    padding: 5px 0 15px 0;
    color: #fff;}
.breadcrumb a {
    color: #fff;}
.breadcrumb a:hover {
    color: #9f9;}
.breadcrumb > .section {
    display: flex;}
.breadcrumb > .section > div {
    white-space: nowrap;
}
.breadcrumb > .section > .joint {
    padding: 0 10px;
}
.breadcrumb > .section > .joint:after {
    content: ">";
}
.main {
    margin: auto;
      box-shadow: 6px 60px 20px 6px #5d5555;}
.footer {
    margin-top: 35vh;
    color: #fff;}
.footer a {color: #fff;}
.footer > div:nth-child(1) {
    background-color: #ec890c;
    padding: 25px 0;}
.footer > div:nth-child(2) {
    font-size: 0.9em;
    background-color: #bf6120;
    padding: 8px 0;}
.footer > div > .section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .rta {
    padding-left: 20px;
    width: 50px;
}
.box-container {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    border-left: #b1b1b1 1px solid;
    border-bottom: #b1b1b1 1px solid;
    border-right: #b1b1b1 1px solid;
}
.box-container .box {
    flex: 0 0 32.8%;
    margin-right: 0%;
}
.box-container .box:nth-child(3n) {
    margin-right: 0;
}
.box-container.with-aside > .box:nth-child(1) {
    flex: 0 0 25%;
}
.box-container.with-aside > .box:nth-child(2) {
    flex: 1;
}
.box {
    background-color: #ffffff;
    border: #b1b1b1 1px solid;
    border-radius: 0 0 8px 8px;
    padding: 1px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.box > .header {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    position: relative;
}
.box > .header a {
    color: #000;
    display: flex;
    align-items: center;
}
.box:nth-child(8n) > .header {
    border-bottom: #7b9067 3px solid;
}
.box:nth-child(8n+1) > .header {
    border-bottom: #6d2d94 3px solid;
}
.box:nth-child(8n+2) > .header {
    border-bottom: #d65832 3px solid;
}
.box:nth-child(8n+3) > .header {
    border-bottom: #61c765 3px solid;
}
.box:nth-child(8n+4) > .header {
    border-bottom: #375067 3px solid;
}
.box:nth-child(8n+5) > .header {
    border-bottom: #e96ca3 3px solid;
}
.box:nth-child(8n+6) > .header {
    border-bottom: #58c4f2 3px solid;
}
.box:nth-child(8n+7) > .header {
    border-bottom: #e8441f 3px solid;
}
.box:nth-child(8n):hover > .header::before,
.box:nth-child(8n):hover > .header::after {
    background-color: #7b9067;
}
.box:nth-child(8n+1):hover > .header::before,
.box:nth-child(8n+1):hover > .header::after {
    background-color: #6d2d94;
}
.box:nth-child(8n+2):hover > .header::before,
.box:nth-child(8n+2):hover > .header::after {
    background-color: #d65832;
}
.box:nth-child(8n+3):hover > .header::before,
.box:nth-child(8n+3):hover > .header::after {
    background-color: #61c765;
}
.box:nth-child(8n+4):hover > .header::before,
.box:nth-child(8n+4):hover > .header::after {
    background-color: #375067;
}
.box:nth-child(8n+5):hover > .header::before,
.box:nth-child(8n+5):hover > .header::after {
    background-color: #e96ca3;
}
.box:nth-child(8n+6):hover > .header::before,
.box:nth-child(8n+6):hover > .header::after {
    background-color: #58c4f2;
}
.box:nth-child(8n+7):hover > .header::before,
.box:nth-child(8n+7):hover > .header::after {
    background-color: #e8441f;
}
.box > .header i {
    font-size: 1.5em;
    padding-right: 5px;
}
.box > .header img {
    width: 28px;
    height: 28px;
    padding-right: 5px;
}
.box > .header::before,
.box > .header::after {
    content: "";
    position: absolute;
    bottom: -2px; 
    height: 2px;
    width: 30%;
    background-color: #ddd; 
    transition: background-color 0.3s ease-in-out; 
}
.box > .header::before {
    left: 0;
}
.box > .header::after {
    right: 0;
}
.box-container .box .intro {
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px;
    border-bottom: #6d2d94 3px solid;
}
.not-found {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
}
.not-found i {
    padding-right: 10px;
    font-size: 2.5em;
}
.box > .not-found {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box.submit {
    padding: 20px;
    font-size: 1.1em;
    line-height: 175%;
}
.form {
    padding: 10px 0;
    width: 95%;
    margin: auto;
}
.form input[type='text'] {
    width: 50%;
}
.form > div {
    display: flex;
    padding: 5px;
    min-height: 35px;
    border-bottom: #eee 1px dashed;
}
.form > div:last-child {
    border-bottom: 0;
}
.form > div > div {
    display: flex;
    align-items: center;
}
.form > div > div:nth-child(1) {
    flex: 0 0 150px;
}
.form > div > div:nth-child(2) {
    flex: 1;
}
.alert {
    color: #f00;
    padding-left: 10px;
}
.site-container > .body {
    max-height: 50vh;
    overflow: auto;
}
.site-container .site > .name.highlight {
    color: #f00;
}
.site-container .site > .name.cpc {
    color: #c33;
}
.site-container .site > .name.paid {
    color: #c33;
}
.site-container .site > .name > .subtitle {
    padding-left: 190px;
    padding-right: 15px;
    font-size: 0.75em;
    color: #999;
    display: none;
}
.site-container .site > .name.highlight > .subtitle {
    font-weight: normal;
}
.site-container .site > .extra {
    flex: 0 0 82%;
    display: flex;
    font-size: 0.76em;
    color: #958f8f;
}
.site-container .site > .extra i {
    font-size: 1.25em;
    padding-right: 5px;
    color: #999;
}
.site-container.homepage .site > .extra {
    flex: 0;
    display: none;
}
.category-container .category {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 6px 8px;
    border: #dcdcdc 1.5px dashed;
    font-weight: bold;
}
.category-container .category.active {
    color: #f00;
}
.category-container .category:hover {
    background-color: #f6f6f6;
    border-bottom: #aaa 1px dashed;
    font-weight: bold;
}
.category-container .category:last-child, .category-container .category:last-child:hover {
    /*border-bottom: 0;*/
}
.category-container .category > div {
    display: flex;
    align-items: center;
    overflow: hidden;
}
.category-container .category > .icon {
    flex: 0 0 40px;
    font-size: 20px;
}
.category-container .category > .icon img {
    width: 36px;
    height: 36px;
}
.category-container .category > .name {
    flex: 1;
    font-size: 1.06em;
}
.category-container .category > .name > span {
    font-size: 0.75em !important;
    color: #999;
    padding-left: 8px;
    font-weight: normal;
}
.error-404 {
    margin: auto;
    color: #fff;
    padding: 20px 0 20px 0;
    font-size: 16px;
}
.error-404 > div {
    padding: 5px 0 5px 0;
    text-align: center;
}
.error-404 > div:nth-child(2) {
    font-size: 35px;
}
.error-404 i {
    font-size: 175px;
}
.screenshot-container {
    position: relative;
    padding: 10px;
}
.screenshot-container::before {
    content: "";
    display: block;
    padding-top: 66.66%;
    background-size: cover;
    background-repeat: no-repeat;
}
.screenshot-container > .screenshot {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    position: absolute;
    width: 104%;
    height: 123%;
    left: -2%;
    top: -3.2%;
}
.site-info h2 {
    padding-top: 30px;
}
.site-info h2 i {
    font-size: 1.2em;
    padding-right: 5px;
}
.site-info > .brief {
    display: flex;
}
.site-info > .brief > .left {
    flex: 0 0 28%;
}
.site-info > .brief > .left .button {
        position: absolute;
    width: calc(100% - 20%);
    left: 9%;
    height: 13%;
    top: 40%;
    transform: translateX(-50%);
    transform: translateY(-50%);
    z-index: 2;
}
.site-info > .brief > .image-right {
    flex: 0 0 30%;
    margin-right: 0%;
}
.site-info > .brief > .image-right .button {
    position: absolute;
    width: calc(100% - 55%);
    left: 28%;
    height: 10%;
    top: 40%;
    transform: translateX(-50%);
    transform: translateY(-50%);
    z-index: 2;
}
.site-info > .brief > .right .button {
    width: 80%;
}
@keyframes fontZoom {
    0% {font-size: 2em;}
    50% {font-size: 2.2em;}
    100% {font-size: 2em;}}
.site-info h1 {
    padding: 0;
    margin: 0;
    font-size: 1.65em;
    font-weight: bold;
    color: #000;
}
.site-info h1:hover {
    color: #393;
}
.site-info h2 {
    padding: 3px 0;
    font-weight: normal;
    margin: 0;
    color: #000000;
    font-size: 17px;
}
.site-info > .brief > .right > .extra {
    padding-top: 20px;
    color: #666;
}
.site-info > .brief > .right > .extra > div {
    padding-bottom: 3px;
    margin-bottom: 15px;
    border-bottom: #eee 1px dashed;
    display: flex;
}
.site-info > .brief > .right > .extra > div > div {
    display: flex;
    align-items: center;
}
.site-info > .brief > .right > .extra > div > div:nth-child(1) {
    flex: 0 0 2.5em;
    justify-content: center;
}
.site-info > .brief > .right > .extra > div > div:nth-child(2) {
    flex: 1;
}
.site-info > .brief > .right > .extra i {
    padding-right: 8px;
    font-size: 1.5em;
}
.site-info > .brief > .right > .brief {
    color: #666;
    width: 100%;
    box-sizing: border-box;
    background-color: #3b2a32;
    border-left: #aaa 5px solid;
    padding: 8px 10px;
    line-height: 175%;
    color: #d2a19d;
    border-radius: 5px;
}
.site-info > .brief > .right > .url {
    padding: 10px 0;
}
.site-info > .brief > .right > .url > a {
    display: flex;
}
.site-info > .brief > .right > .url .icon {
    flex-shrink: 1;
    padding-right: 5px;
    display: flex;
    align-items: center;
}
.site-info > .brief > .right > .url .text {
    flex: 1;
    display: flex;
    align-items: center;
}
.site-info > .brief > .right > .intro {
    color: #444;
    max-height: 25em;
    overflow-y: auto;
}
.site-info > .brief > .right > .photographer-intro {
    margin-top: 10px;
    color: #666;
    max-height: 25em;
    overflow-y: auto;
}
.site-info > .brief > .right > .intro p {
    margin: 5px 0;
    line-height: 150%;
}
.site-info > .brief > .right > .intro .paragraph {
    font-weight: bold;
    margin-top: 20px;
}
.site-info > .brief > .right > .intro .button {
    width: 350px;
    height: 50px;
}
.site-info > .brief > .right > .misc {
    padding: 5px 0;
}
.site-info > .brief > .right > .misc > div {
    display: flex;
    padding: 2px 0;
    border-bottom: #eee 1px dashed;
}
.site-info > .brief > .right > .misc > div > div:nth-child(1) {
    flex: 0 0 6em;
}
.site-info > .brief > .right > .misc .language-container {
    display: flex;
}
.site-info > .brief > .right > .misc .language-container > .language {
    flex: 0 0 30px;
    height: 20px;
    margin-right: 2px;
}
.site-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.site-icon.small {
    width: 20px;
    height: 20px;
}
.site-icon.invert {
    filter: invert(100%);
}
.category-icon {
    width: 32px;
    height: 32px;
}
.site-icon.small {
    width: 20px;
    height: 20px;
}
.site-resource-container, .site-photo-container {
    margin-top: 5px;
}
.site-photo-container {
    display: flex;
    flex-wrap: wrap;
}
.site-photo-container > a {
    flex: 0 0 20%;
    padding: 5px;
    box-sizing: border-box;
}
.site-photo-container .photo {
    position: relative;
}
.site-photo-container .photo .photo-cover {
    width: 100%;
    padding-top: 150%;
    background-size: 100% 100%;
}
.site-photo-container .photo .photo-text {
    height: 2em;
    line-height: 2em;
    overflow: hidden;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    position: absolute;
    bottom: 5%;
    left: 0;
    padding: 0 5px;
    box-sizing: border-box;
}
.site-resource-container .resource {
    display: flex;
    padding: 5px;
    margin-bottom: 5px;
    border-bottom: #eee 1px dashed;
}
.site-resource-container .resource:last-child {
    border-bottom: 0;
}
.site-resource-container .resource:hover {
    background-color: #f6f6f6;
}
.site-resource-container .resource > .left {
    flex-shrink: 1;
    padding-right: 10px;
}
.site-resource-container .resource > .left > .cover {
    width: 100%;
    text-align: center;
    width: 8.8em;
    height: 5em;
    overflow: hidden;
}
.site-resource-container .resource > .left > .cover img {
    height: 100%;
}
.site-resource-container .resource > .right {
    flex: 1;
}
.site-resource-container .resource > .right > div {
    padding: 0.1em 0;
}
.site-resource-container .resource > .right > .url {
    font-size: 0.9em;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
}
.site-resource-container .resource > .right > .title {
    font-size: 1.1em;
}
.site-resource-container .resource > .right > .title > i {
    padding-right: 5px;
}
.site-resource-container > .record-count {
    margin-top: 10px;
    padding: 10px 0;
    text-align: center;
    border-top: #eee 1px solid;
}
.site-resource-container > .record-count a {
    color: #999;
}
.site-resource-container > .record-count a:hover {
    color: #052;
}
.pager {
    user-select: none;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pager > a {
    padding: 0.25em;
    font-size: 0.9em;
    color: #000;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    width: 2em;
    height: 2em;
    border: #ccc 1px solid;
    border-radius: 50%;
}
.pager > a:hover, .pager > a.current {
    background-color: #383;
    color: #fff;
}
.pager > a.disabled {
    color: #ababab;
    background-color: #e5e5e5;
}
.pager > a.disabled:hover {
    color: #ababab;
    background-color: #e5e5e5;
}
.resource-container {
}
.resource-container .resource {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 6px 8px;
    border-bottom: #eee 1px dashed;
}
.resource-container .resource:hover {
    background-color: #f6f6f6;
}
.resource-container .resource > .icon {
    flex-shrink: 1;
    padding-right: 8px;
}
.resource-container .resource > .title > .subtitle {
    display: inline;
    padding-left: 10px;
    font-size: 0.9em;
    color: #999;
}
.tabs .tab-controls {
    display: flex;
    align-items: flex-end;
}
.tabs .tab-controls > a {
    flex-shrink: 1;
    margin-right: 1px;
    user-select: none;
}
.tabs .tab-controls > a > div {
    color: #eee;
    font-weight: bold;
    box-sizing: border-box;
    padding: 8px 20px;
    background-color: #bf6120;
    border-bottom: #9f4100 2px solid;
    border-top: #c63 2px solid;
    font-size: 1.05em;
}
.tabs .tab-controls > a > div.active {
    padding: 12px 20px;
    font-size: 1.2em;
    background-color: #444;
    border-bottom: #444 1px solid;
    border-top: #444 1px solid;
    color: #fff;
}
.tabs .tab-controls > a:nth-child(1) > div {
    border-radius: 8px 0 0 0;
}
.tabs .tab-controls > a:nth-child(2) > div {
    border-radius: 0 8px 0 0;
}
.tabs .tab-controls > a:nth-child(1) > div.active {
    border-radius: 8px 8px 0 0;
}
.tabs .tab-controls > a:nth-child(2) > div.active {
    border-radius: 8px 8px 0 0;
}
.tabs .tab-controls i {
    padding-right: 5px;
}
.tabs .tab-content {
    box-shadow: 10px 10px 9px 5px rgba(0,0,0,0.28);
    -webkit-box-shadow: 10px 10px 9px 5px rgba(0,0,0,0.28);
    -moz-box-shadow: 10px 10px 9px 5px rgba(0,0,0,0.28);
    background-color: #444;
    padding: 1%;
}
.h2-recommend {
    padding: 30px 0 10px 0;
    font-size: 1.5em;
}
.site-recommend-container {
    display: flex;
    flex-wrap: wrap;
}
.site-recommend-container > div {
    flex: 20%;
    padding: 0 15px 15px 0;
    box-sizing: border-box;
}
.site-recommend-container .site-recommend {
    width: 100%;
    padding-bottom: 75%;
    background-size: 100% 100%;
    background-color: #000;
    position: relative;
}
.site-recommend-container .site-recommend.video {
    padding-bottom: 56.25%;
}
.site-recommend-container .site-recommend.photo {
    padding-bottom: 150%;
}
.site-recommend-container .site-recommend.fiction {
    padding-bottom: 100%;
}
.site-recommend-container .site-recommend.av {
    padding-bottom: 67.25%;
    background-size: contain;
}
.site-recommend-container .site-recommend.comic {
    padding-bottom: 140%;
    background-size: contain;
}
.site-recommend-container .site-recommend > .name {
    position: absolute;
    width: 100%;
    background-color: rgba(0,0,0,0.85);
    left: 0;
    bottom: 0;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    height: 2.75em;
    line-height: 2.75em;
    overflow: hidden;
    font-size: 1em;
    font-weight: bold;
}
.image-container > .name-overlay {color: #fff; }
.modal {
    display: none;
}
.modal > .header {
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 1em;
}
.modal > .body {
    padding-top: 10px;
}
.modal .footer {
    width: 95%;
    margin: auto;
    height: 50px;
    position: absolute;
    border-top: #ddd 1px solid;
    text-align: right;
    padding-top: 10px;
    bottom: 0px;
}
.modal .footer .button {
    display: inline-block;
    padding: 5px 15px;
    margin: 0 0 0 5px;
    font-size: 1em;
    width: auto;
    height: auto;
}
.misc{
    width: 100% !important;
}
.misc div {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .misc span.label {
        min-width: 80px;
    }
    .misc span.content {
        flex-grow: 1;
    }
    .site-comments::-webkit-scrollbar-thumb {
        background: #888; 
        border-radius: 4px;
    }
    .site-comments::-webkit-scrollbar {
    width: 3px;
}
    .site-comments::-webkit-scrollbar-thumb:hover {
        background: #555; 
    }
    .nav > .bar {
            margin: 4px 0 20px 0;
        }
        
 .breadcrumbs1 {
     background-color: #afdad0;
     /*width: 359%;*/
     padding: 4px;
     margin: 0px;
     background-color: #ffffff;
     border-radius: 8px 8px 0 0;
     font-size: 16px;
     border-left: #b1b1b1 1px solid;
    border-top: #b1b1b1 1px solid;
    border-right: #b1b1b1 1px solid;
 }
 .breadcrumbs a {
     background-color: #e0ebff;
     border-radius: 7px;
     padding: 4px;
 }
 .breadcrumbs {
     background-color: #afdad0;
     width: 25%;
     padding: 4px;
     margin: 0px;
     background-color: #ffffff;
     /*border-radius: 8px 8px 0 0;*/
     font-size: 17px;
    /* border-left: #b1b1b1 1px solid;*/
    /*border-top: #b1b1b1 1px solid;*/
    /*border-right: #b1b1b1 1px solid;*/
    border-bottom: #b1b1b1 1px solid;
    /*text-align: center;*/
    font-weight: 500;
    border-left: #b1b1b1 2px solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    white-space: nowrap;
    display: flex;
 }
 #title {
     font-size: 22px;
     text-align: center;
     border-bottom: #eee 1px dashed;
 }       
 .Group_description {
         border-bottom: #979292 2px solid;
         margin: 6px 0 0 6px;
         margin-bottom: 8px !important;
         font-size: 14px !important;
         font-weight: 400; 
         width: 48%;
         line-height: 19px;
         height: 322px;
         overflow-y: auto;
         color: #5c5c5c;
 }
  .Group_description h3{
      color: #282828;
    font-size: 16px;
    background: #aaa;
    padding: 8px 12px;
    border-radius: 5px;
    margin: 15px 0px 8px 0px;
    text-align: center;
  }
 .Group_description::-webkit-scrollbar {
         width: 3px;
 }  
 .Group_description::-webkit-scrollbar-thumb {
    background: #98aed2;
}
  .misc div {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .misc span.label {
            min-width: 68px;
        }
        .misc span.content {
            flex-grow: 1;
        }
        @media (max-width: 640px) {
            .misc span.label {
                min-width: 60px;
            }
        }
        @media (max-width: 480px) {
            .nav > .bar {
                margin: 55px 0 20px 0;
            }
        }
        .screenshot {
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 200px;
        }
        .misc h2.label {
            min-width: 40px;
            font-size: 16px;
            margin: 6px;
            display: inline-block;
            writing-mode: horizontal-tb;
        }
        h2{
            padding: 2px;
            margin: 3px;
            font-size: 17px;
            font-weight: 600;
            color: #7f7e7e;
        }
        h4 {
            font-size: 15px;
            padding: 2px;
            margin: 3px;
            font-weight: 600;
            color: #5b5858;
            margin: 15px 0 8px;
            font-size: 16px;
        }
    
        .features {
            font-size: 14.3px;
            color: #474747;
            line-height: 1.7;
            overflow-y: auto; 
            padding-left: 10px;
            margin-top: 6px;
            }
       .right {width: 38%;}
        .button > .text {
    flex: 1;
    height: auto;
    text-align: center; 
    overflow: visible;
    white-space: nowrap;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
 .brief {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .brief .left, .brief .right, .brief .image-right {
        flex: 1;
    }
    .brief .left .screenshot-container .button, .brief .image-right .button {
        display: flex;
        align-items: center;
        padding: 10px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        text-decoration: none;
        color: #333;
        justify-content: center;
   }
    .brief .left .screenshot-container .button:hover, .brief .image-right .button:hover {
        background: rgba(2, 146, 201, 0.9);
    }
    .brief .left .screenshot-container .button .text, .brief .image-right .button .text {
        margin: 0 10px;
        font-weight: bold;
    }
    .brief .left .screenshot-container .button .right i, .brief .image-right .button .right i {
        font-size: 1.2em;
    }
    @media (max-width: 767px) {
        .brief .left, .brief .right, .brief .image-right {
            flex: 100%;
        }
        .brief .left .screenshot-container, .brief .image-right {
            min-height: 300px;
        }
        
       .icon-url-container .site-img {
           margin-left: 21px !important;
       }
    }
    @media (min-width: 1296px) {
    .screenshot-container {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    padding: 10px; 
    background-color: #ffffff;
    }
   }
    .icon-url-container {
        display: flex;
        gap: 2px;
        border-bottom: #eee 1px dashed;
        align-items: center; 
        color: #888888;
     }
    .icon-url-container .site-img {
        width: 15px;
        height: 15px;
        object-fit: contain;
        border-radius: 50%;
        margin-left: 9px;
    }
    .guess-you-like-section {
            margin: -10px auto;
            max-width: 1200px;
            padding: 0 15px 50px 15px;
            background-color: #fffdfd;
            border-radius: 6px;
        }
        .guess-you-like-section h2 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .guess-you-like-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 50px;
            margin-top: 34px;
        }
        .guess-you-like-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            aspect-ratio: 1 / 1.14;
            border: 2px solid #cacaca;
        }
        .guess-you-like-item img {
            width: 100%;
            object-fit: cover;
            display: block;
        }
        .guess-you-like-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 2px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .guess-you-like-item:hover .guess-you-like-overlay {
            background: rgba(0, 0, 0, 0.8);
        }
        @media (max-width: 767px) {
            .guess-you-like-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .guess-you-like-overlay {
                font-size: 14px;
                padding: 8px;
            }
        }
.guess-you-like-item img {
    transition: transform 0.3s ease;
}
.guess-you-like-item img:hover {
    transform: scale(1.1);
}
        .left img {
    transition: transform 0.3s ease;
}
.left img:hover {
    transform: scale(1.1);
}
h5 {
    font-size: 1.6em;
    text-align: center;
}
.bar {
    /*width: 50.6%;*/
    display: flex;
}
 @media (min-width: 992px) {
  .main {width: 970px;}
  .search-container1 input[name='keyword'] {width: 464.6%; }
    }
 
@media (min-width: 1200px) {
    .main {width: 1170px;}
    .search-container1 input[name='keyword'] {width: 559%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .main {width: 750px;}
    .search-container1 input[name='keyword'] {width: 358.6%; }
}
@media (max-width: 768px) {
    .search-container1 input[name='keyword'] {width: 268.6%; }
    .menu-toggles {display:block !important;}
}
/*搜索框内字体颜色*/
.search-container1 {color:#000;}
.input-wrapper1 input::placeholder {color: #6d9476; font-size:14px; }

.Features {
  display: flex;
  flex-direction: column; 
  height: 7vh; 
  
}
.h1 {
    height: 22px;
}
.header1 {
    border-bottom: #a39b9b 2px solid;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 12px;
    align-items: center; 
    justify-content: center; 
    display: flex;
    flex-wrap: nowrap;
}
.search-container {
    border-radius: 20%;
}
.fa {
    font-size: 22px;
}
.breadcrumbs img {
    border-radius: 50%;
    transform: translateY(-2px);
    height: 17px;
    width: 17px;
    vertical-align:middle;
    margin-right: -3px;
}
.breadcrumbs1 img {
    border-radius: 50%;
    transform: translateY(-2px);
    height: 17px;
    width: 17px;
    vertical-align:middle;
    margin-right: -3px;
}
.brief .left .screenshot-container:hover {
    background-size: 108%; 
}
.star-rating img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.star-rating {
    display: flex;
    gap: 8px;
}
        .search-container { position: relative; display: inline-block; }
        /*.search-container .input-wrapper { display: inline-block; }*/
        .search-container1 input[name='keyword'] { 
            /*width: 559.6%; */
            height: 42px;
        }
        .search-container img{width:20px; height:20px; margin-left:900%;}
        .search-container .fa-search:hover { color: #000; }
        .category-container { overflow-y: auto; }
        .site-container { min-height: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.site { 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    min-width: 0; 
    padding: 0 0 6px 0;
    border: 1.6px solid #d0d0d0;
    border-radius: 8px;
    background-color: #fff;
}
.image-container {
    width: 100%;
    height: 230px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 8px;
    transition: background-size 0.5s ease;
    transition: transform 0.5s ease;
}
.image-container:hover{ background-size: 105%; }
.button-overlay { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.image-container:hover .button-overlay { display: flex; gap: 10px; }
.btn { padding: 8px 12px; background: rgba(0, 0, 0, 0.7); color: white; text-decoration: none; border-radius: 4px; font-size: 12px; }
.btn:hover { background: rgba(0, 0, 0, 0.9); }
.name-overlay img {border-radius: 50%;}
.name-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 5px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; display: flex; align-items: center; justify-content: center; }
.status {
    margin-top: 0px;
    font-size: 12px;
    color: #666;
    max-width: 194px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; text-overflow: ellipsis; text-align: center;
    padding: 2px 4px;
}
        .category-container .category .name { color: #000; }
        .category-container .category.active { background-color: #c5c5c5; font-weight: bold; border-left: 3px solid #f0f0f0; }
        .category-container .category { 
            padding: 10px; 
            min-height: 48px; 
            border-radius: 168px;
        }
        .category .icon img, .site .icon img { width: 19px; height: 19px; border-radius: 50%;}
        a { color: inherit; text-decoration: none; }
        .header1 h1 {font-size: 20px;}
        .search-title {font-size: 16px; text-align: center; padding: 6px 0;}
        .header1 { 
        }
        .header1 .icon { 
            margin-right: 2px; 
        }
        .header1 .icon img { 
            width: 36px; 
            height: 36px; 
            border-radius: 50%; 
        }

.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
}

.image-button {
    position: absolute;
    width: 72%;
    height: 31px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-align: center;
    line-height: 31px;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    text-decoration: none; 
    transition: opacity 0.3s ease;
    border-radius: 8px;
}
.image-button:hover {
    opacity: 1; 
}
.top-button {
    top: 46%;
    transform: translateY(-100%);
    background-color: #00d6f1;
}
.bottom-button {
    bottom: 46%;
    transform: translateY(100%);
    background-color: #2faf62;
}
.image-container:hover .image-button {
    opacity: 1; 
}
.text1 {
    font-size: 15px!important;
    line-height: 30px;
}
    .btn-main {
        display: flex;
        grid-area: 2 / 1 / 3 / 2;
    padding: 8px 11px 8px 11px;
    align-items: center;
    justify-content: center;
    color: #767676;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 15px;
    position: relative;
    display: flex;
    border-radius: 12px;
    border: 1.5px solid #59595982;
    margin-top: 9px;
    }
    .Group-buttons {
        width: 88%;
        display: flex;
        justify-content: center !important;
        left: 6%;
    }
    
    .btn-main img {
        width: 25px;
        height: 25px;
        margin-left: 5px;
    }
    .screenshot-container {
        border: 1px solid #ccc;
    }
    .group-select {
    text-align: center;
    width: 100%;
    font-size: 18px;
    display: none;
}
        .menu-toggles {
            position: relative;
            cursor: pointer;
            background: transparent;
            /*left: -19%;*/
            margin-top: 1%;
        }
        [lang="en"] .menu-toggles {
            left: -6%; 
        }
        .menu-toggles .fa-bars {
            font-size: 24px;
            color: #333;
            left: 50%;
        }
        .menu-dropdowns {
            display: none;
            position: absolute;
            top: calc(100% + 5px) !important;
            background: #fff !important;
            border: 2px solid #ccc !important;
            width: 288px;
            height: 70vh;
            overflow-y: auto !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
            border-radius: 4px;
            text-align: left;
            z-index: 10000;
            left: 3px;
            border-radius: 10px;
        }
        .menu-dropdowns a {
            display: block;
            padding: 12px 16px;
            color: #333 !important;
            text-decoration: none;
            font-size: 16px;
            line-height: 1.5;
            cursor: pointer;
            position: relative;
            border-bottom: 1px solid #ccc;
        }
        .menu-dropdowns a:hover {
            background: #f0f0f0 !important;
        }
        .menu-dropdowns a.active {
            background: #e0e0e0 !important;
            font-weight: bold !important;
        }
        .nav, .header, .section, .text {
            overflow: visible !important;
            z-index: 999 !important;
        }

            .menu-toggles, .menu-dropdowns {
                display: none;
            }
.nav {
    overflow: hidden; 
    width: 100%; 
}

.text {
    display: flex;
    align-items: center; 
    width: 100%; 
}

@keyframes pulse {
            0% { background-color: #f0f0f0; }
            50% { background-color: #ff9701; }
            100% { background-color: #f0f0f0; }
        }

        .btn-main {
            display: flex;
            align-items: center;
            background-color: #f0f0f0;
            text-decoration: none;
            color: #000;
            border-radius: 10px;
            transition: background-color 0.5s ease;
        }

        .btn-main:hover {
            animation: pulse 1s infinite;
        }

        .btn-main img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            transition: transform 0.5s ease;
        }

        .btn-main:hover img {
            transform: translateX(2px); 
        }

        .btn-main h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            position: relative;
            color: #4e4e4e;
            transition: color 0.5s ease;
        }

        .btn-main:hover h2 {
            color: #fff; 
        }
        .btn-main h2::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: #e5e5e5;
            border-radius: 2px;
            transition: width 0.3s ease, background-color 0.3s ease;
        }

        .btn-main:hover h2::after {
            width: calc(100% - 25px); 
            background-color: #ff9701; 
        }

        @media (max-width: 991px) {
            .btn-main {
                padding: 8px 16px;
            }
            .btn-main img {
                width: 24px;
                height: 24px;
            }
            .btn-main h2 {
                font-size: 14px;
            }
        }
        .right {padding: 2px 0px 5px 1px;}
         .menu-icon.fa-times {font-size: 24px; }
        .menu-icon.fa-bars {font-size: 24px; }
        .site-comments h3 {
            color: #000;
            font-size: 18px;
            background: #aaa;
            padding: 8px 12px;
            border-radius: 5px;
            margin: 15px 0px 8px 0px;
            text-align: center;
        }
        .site-comments p{
            /*background-color: #f8f8f8;*/
            padding-right: 3px;
            margin: 0 0 12px;
        }
        .feature-line {
          border-bottom: 1px solid #f2ecec;
          white-space: nowrap; 
          overflow: hidden; 
          line-height: 30px;
        }
        
        @media (max-width: 767px) {
                .main {
              margin-top: -0px; }
         }
         .breadcrumbs1 a{
                     background: #edf3ff;
                    border: 1px solid #cecece;
                    border-radius: 7px;
                    text-decoration: none;
                    /*padding: 2px 6px;*/
                    font-weight: 500;
         }
         .Group_description p{margin: 0 0 12px;}