.actress-list-site {
    padding-top: 3rem;
}

.actress-hot-site .content-header {
    padding-top: 0;
}


.actress-list-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 5rem;
    padding: 1rem 0;
}

.actress-list-title {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.actress-list-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin: 0.3rem 0;
}

.actress-list-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.actress-list-site .sorting-nav {
    text-align: center;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
}

.actress-list-site .sorting-nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.actress-list-site .sorting-nav-list li {
    display: inline-block;
    margin: 0.3rem;
}

.actress-list-site .sorting-nav-list li a {
    position: relative;
    padding: 0.25rem 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.8rem;
}

.actress-list-site .sorting-nav-list li a::before {
    content: '';
    position: absolute;
    background: #f7327b;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0.1333rem;
    border-radius: 6.6667rem;
    transition: all .3s;
    transform: translateX(-50%);
    opacity: 0;
}

.actress-list-site .sorting-nav-list li.active a,
.actress-list-site .sorting-nav-list li:hover a {
    color: #fff;
}

.actress-list-site .sorting-nav-list li.active a::before,
.actress-list-site .sorting-nav-list li:hover a::before {
    width: 60%;
    opacity: 1;
}

.actress-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.actress-grid-item {
    min-width: 0;
}

.actress-item-link {
    display: block;
    text-decoration: none;
    padding: 0.4rem;
    border-radius: 0.4rem;
    transition: background .2s;
}

.actress-item-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

.actress-item-media {
    display: flex;
    align-items: center;
}

.actress-item-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.actress-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.actress-item-text-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.text-avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #2c2c2c;
    border-radius: 50%;
    color: rgba(255, 255, 255, .45);
    flex-shrink: 0;
    overflow: hidden;
    text-align: center;
}

.text-avatar-sm {
    font-size: .8750625rem;
    font-weight: 500;
    height: 2rem;
    width: 2rem;
}

.text-avatar-md {
    font-size: 1.9933rem;
    font-weight: 700;
    height: 5.3333rem;
    width: 5.3333rem;
}

.actress-item-detail {
    padding-left: 0.5rem;
    min-width: 0;
}

.actress-item-name {
    color: #b8babc;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.actress-item-link:hover .actress-item-name {
    color: #fff;
}

.actress-item-count {
    color: #5e5d5a;
    font-size: 0.65rem;
}

.actress-title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}
.actress-info{
    font-size: 0.9rem;
    color: #aaa;
    margin: 0.3rem 0;
}



@media (max-width: 51.2rem) {
    .actress-hot-site .text-avatar.d-none.d-md-flex {
        display: flex !important;
        width: 2.1333rem;
        height: 2.1333rem;
        font-size: .8750625rem;
        font-weight: 500;
    }

    .actress-list-site {
        padding-top: 10rem;
    }

    .actress-list-title {
        font-size: 1.6rem;
    }

    .actress-list-subtitle {
        font-size: 1.3rem;
    }

    .actress-list-count {
        font-size: 1.1rem;
    }

    .actress-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .actress-item-avatar,
    .actress-item-text-avatar {
        width: 6rem;
        height: 6rem;
    }

    .actress-item-text-avatar {
        font-size: 2.5rem;
    }

    .actress-item-name {
        font-size: 1.3rem;
    }

    .actress-item-count {
        font-size: 1.1rem;
    }

    .actress-list-site .sorting-nav-list li a {
        font-size: 1.4rem;
    }
}

@media (max-width: 29.8667rem) {
    .actress-list-site {
        padding-top: 12rem;
    }

    .actress-list-title {
        font-size: 1.8rem;
    }

    .actress-list-subtitle {
        font-size: 1.4rem;
    }

    .actress-list-count {
        font-size: 1.2rem;
    }

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

    .actress-item-avatar,
    .actress-item-text-avatar {
        width: 5rem;
        height: 5rem;
    }

    .actress-item-text-avatar {
        font-size: 2rem;
    }

    .actress-item-name {
        font-size: 1.4rem;
    }

    .actress-item-count {
        font-size: 1.2rem;
    }

    .actress-list-site .sorting-nav-list li a {
        font-size: 1.5rem;
    }
}

/* PC Zeplin https://zpl.io/KE4AwRJ - actress_hot.tpl, action=actress, actress.css */
@media (min-width: 768px) {
    .actress-hot-site .content-header {
        margin-bottom: 40px;
        padding-top: 0;
    }

    .actress-hot-site .content-header .title-with-avatar.center {
        min-height: 0;
        padding: 30px 0 30px;
        margin: 0;
        background-color: #000;
    }

    .actress-hot-site .content-header .title-with-avatar .title-box {
        width: 100%;
        max-width: 1078px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
    }

    .actress-hot-site .content-header .actress-title.h3-md,
    .actress-hot-site .content-header .title-with-avatar h2.actress-title,
    .actress-hot-site .content-header .title-with-avatar h2.h3-md {
        font-size: 30px;
        font-weight: 600;
        line-height: 42px;
        margin: 0 !important;
        color: #fff;
    }

    .actress-hot-site .content-header .actress-info {
        width: 100%;
        max-width: 744px;
        margin: 0 auto;
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        color: #aaa;
        text-align: center;
    }

    .actress-hot-site .content-header .title-with-avatar .inactive-color.fs-2 {
        display: block;
        width: 100%;
        max-width: 744px;
        margin: 30px auto 0 !important;
        font-size: 16px !important;
        font-weight: 400;
        line-height: 22px;
        color: #aaa;
    }

    /* Group 512 sorting tabs */
    .actress-hot-site #list_models_models_list > .sorting-nav {
        width: 100%;
        max-width: 1078px;
        margin: 0 auto 20px;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        letter-spacing: 0;
        text-align: center;
        box-sizing: border-box;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li {
        display: block;
        margin: 0 60px 0 0;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:last-child {
        margin-right: 0;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li h2 {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a {
        display: inline-block;
        position: relative;
        padding: 0 0 9.5px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 18px;
        font-weight: 400;
        line-height: 25px;
        transition: color 0.3s;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a:visited {
        color: #fff !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 43px;
        height: 3px;
        margin-left: -21.5px;
        background: #f7327b;
        border-radius: 0;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li.active a {
        color: #f7327b !important;
        font-weight: 500;
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li.active a::before {
        opacity: 1;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active):hover a {
        color: #fff !important;
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active):hover a::before {
        opacity: 0;
    }

    /* Group 409 actress grid */
    .actress-hot-site #list_models_models_list > .container {
        width: 100%;
        max-width: 1078px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .actress-hot-site #list_models_models_list > .container section.pb-3 {
        padding-bottom: 0 !important;
    }

    .actress-hot-site #list_models_models_list .row.gutter-20 {
        display: grid;
        grid-template-columns: repeat(4, 168px);
        justify-content: space-between;
        row-gap: 40px;
        margin-left: 0;
        margin-right: 0;
    }

    .actress-hot-site #list_models_models_list .row.gutter-20 > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        width: auto;
        max-width: none;
        flex: none;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box.ml-3.mb-3 {
        margin: 0 !important;
        width: 168px;
        max-width: 168px;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .media {
        display: flex;
        align-items: center;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .text-avatar-md {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        font-size: 24px;
        font-weight: 500;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .rounded-circle.d-none.d-md-block,
    .actress-hot-site #list_models_models_list .horizontal-img-box .rounded-circle.d-none.d-md-block img {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .detail {
        padding-left: 16px;
        min-width: 0;
        flex: 1;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .title,
    .actress-hot-site #list_models_models_list .horizontal-img-box h3.title {
        margin: 0 0 6px;
        padding: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        line-height: 25px;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box a,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:focus,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover .title,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover span {
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box span {
        color: #aaa;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }
}

/*
 * H5 选女优页（actress_hot.tpl · 路由 action=actress 加载本文件）
 * Zeplin: https://zpl.io/ML589lo
 * ① 发布视频/Group 386 头部 ② Group 385 排序 Tab ③ Group 409 女优列表
 */
@media (max-width: 767.98px) {
    .actress-hot-site {
        padding-top: 0.1rem;
    }

    /* Group 386 · 头部 content-header */
    .actress-hot-site .content-header {
        margin-bottom: 0;
        padding-top: 0;
    }

    .actress-hot-site .content-header .title-with-avatar.center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
        margin: 0;
        padding: 16px 12px 20px;
        background-color: #000;
        text-align: center;
    }

    .actress-hot-site .content-header .title-with-avatar .title-box {
        width: 100%;
        max-width: 352px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
    }

    .actress-hot-site .content-header .title-box h2.actress-title.h3-md,
    .actress-hot-site .content-header .title-with-avatar .title-box h2.actress-title,
    .actress-hot-site .content-header .title-with-avatar h2.h3-md.actress-title,
    .actress-hot-site .content-header h1,
    .actress-hot-site .content-header h2 {
        font-size: 24px;
        font-weight: 600;
        line-height: 34px;
        margin: 0 0 2px !important;
        padding: 0;
        color: #f7327b;
        text-align: center;
    }

    .actress-hot-site .content-header .title-box p.actress-info,
    .actress-hot-site .content-header .actress-info {
        margin: 0 auto;
        padding: 0;
        max-width: 352px;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: #aaa;
        text-align: center;
    }

    .actress-hot-site .content-header .title-box .inactive-color.fs-2,
    .actress-hot-site .content-header .title-with-avatar .inactive-color.fs-2.mb-0 {
        display: block;
        margin: 16px auto 0 !important;
        padding: 0;
        font-size: 12px !important;
        font-weight: 400;
        line-height: 17px;
        color: #aaa;
        text-align: center;
    }

    /* Group 385 · 排序 Tab */
    .actress-hot-site #list_models_models_list {
        background-color: transparent;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 45px;
        margin-bottom: 20px;
        letter-spacing: 0;
        text-align: center;
        background-color: transparent;
        width: 100%;
        box-sizing: border-box;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav ul,
    .actress-hot-site #list_models_models_list > .sorting-nav ul#list_models_models_list_sort_list {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 0 12px;
        list-style: none;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li {
        display: block;
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li h2 {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a {
        display: inline-block;
        position: relative;
        padding: 0 0 7px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a:visited {
        color: #fff !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li a::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        margin-left: 0;
        background: #f7327b;
        border-radius: 0;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li.active a {
        color: #f7327b !important;
        font-weight: 500;
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li.active a::before {
        opacity: 1;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active) a,
    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active) a:visited {
        color: #fff !important;
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active):hover a {
        color: #fff !important;
        text-decoration: none !important;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li:not(.active):hover a::before {
        opacity: 0;
    }

    .actress-hot-site #list_models_models_list > .sorting-nav li.active:hover a {
        color: #f7327b !important;
    }

    /* Group 409 · 女优双列列表 */
    .actress-hot-site #list_models_models_list > .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .actress-hot-site #list_models_models_list > .container section.pb-3 {
        padding-bottom: 20px !important;
    }

    .actress-hot-site #list_models_models_list .row.gutter-20 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 51px;
        row-gap: 20px;
        margin-left: 0;
        margin-right: 0;
    }

    .actress-hot-site #list_models_models_list .row.gutter-20 > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        width: auto;
        max-width: none;
        flex: none;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box.ml-3.mb-3 {
        margin: 0 !important;
        max-width: 142px;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .media {
        display: flex;
        align-items: center;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .rounded-circle.d-md-none,
    .actress-hot-site #list_models_models_list .horizontal-img-box .rounded-circle.d-md-none img {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .text-avatar.text-avatar-md.d-none.d-md-flex {
        display: flex !important;
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        font-size: 20px;
        font-weight: 500;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .detail {
        padding-left: 10px;
        min-width: 0;
        flex: 1;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box .title,
    .actress-hot-site #list_models_models_list .horizontal-img-box h3.title {
        margin: 0 0 4px;
        padding: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        line-height: 25px;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box span {
        color: #aaa;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .actress-hot-site #list_models_models_list .horizontal-img-box a,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover .title,
    .actress-hot-site #list_models_models_list .horizontal-img-box a:hover span {
        text-decoration: none !important;
    }
}