.app_home {
    position: relative;

    .block_box {
        margin-top: 30px;
    }

}

.home_title_box {
    margin-bottom: 30px;

    /**标题 */
    .webmaster_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
    
        .webmaster_title {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            font-size: 16px;
    
            h2 {
                margin-left: 10px;
                font-size: 30px;
                color: #fff;
            }
    
            span {
                color: #dbdbdd;
                font-size: 16px;
                margin-left: 10px;
            }
        }
    
        .more {
            font-size: 16px;
    
            a {
                padding: 0 20px;
                background: #fe628e;
                border-radius: 6px;
                line-height: 38px;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                color: #fff;
    
                img {
                    margin-left: 10px;
                }
            }
    
        }
    }
    
}




.webmaster_box_2 {
    margin-bottom: 30px;

    .listing_box {
        .listing_flex{
            margin-bottom: 30px;
            .listing_a {
               
                .listing_cover {
                    display: flex;
                    flex-direction: column;
                    cursor: pointer;
                    position: relative;

                    img{
                        padding: 0 5px;
                        width: 100%;
                        aspect-ratio: 16 / 10;
                        overflow: hidden;
                    }
    
                    .annual_video {
                        position: relative;
    
                        .absolute_top_left_vip {
                            position: absolute;
                            top: 10px;
                            left: 10px;
                            z-index: 999;
                        }
    
                        .absolute_bottom_left {
                            position: absolute;
                            bottom: 5px;
                            left: 5px;
                            display: flex;
                            flex-wrap: wrap;
    
                            span {
                                padding: 0 10px;
                                border-radius: 4px;
                                font-size: 14px;
                                margin-right: 9px;
                                background: #ff5922;
                            }
    
                            span:nth-child(1) {
                                background: #2884f3;
                            }
    
                            span:nth-child(2) {
                                background: #c21818;
                            }
    
                            span:nth-child(3) {
                                background: #fe628e;
                            }
    
                            span:nth-child(4) {
                                background: #18c237;
                            }
    
                            span:nth-child(5) {
                                background: #ff5922;
                            }
                        }
    
                        .absolute_bottom_right {
                            position: absolute;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #fff;
    
                            span {
                                padding: 0 10px;
                                border-radius: 4px;
                                font-size: 14px;
                                margin-left: 9px;
                                background: rgba(0, 0, 0, 0.5);
                            }
                        }
    
    
                        .video_flex {
                            position: absolute;
                            top: 0;
                            background: #000;
                            height: 100%;
                            border-radius: 7px;
                            display: flex;
                            z-index: 9999;
                        }
                    }
    
                    .absolute_top_left {
                        position: absolute;
                        top: 5px;
                        left: 10px;
                        display: flex;
                        flex-wrap: wrap;
    
                        span {
                            padding: 0 10px;
                            border-radius: 4px;
                            font-size: 14px;
                            margin-right: 9px;
                            background: #ff5922;
                            margin-bottom: 5px;
                            color: #fff;
                        }
    
                        span:nth-child(1) {
                            background: #ff5922;
                        }
    
                        span:nth-child(2) {
                            background: #c21818;
                        }
    
                        span:nth-child(3) {
                            background: #fe628e;
                        }
    
                        span:nth-child(4) {
                            background: #18c237;
                        }
    
                        span:nth-child(5) {
                            background: #2884f3;
                        }
    
                    }
    
                    .details {
                        display: flex;
                        flex-direction: column;
    
                        .video_title {
                            padding: 10px 0;
                            font-size: 16px;
                            color: #dbdbdd;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 42px;
    
                            a{
                                color: #fff;
                            }
                        }
    
                        .plug {
                            display: flex;
                            font-size: 12px;
                            color: #999aa8;
    
                            .player {
                                display: flex;
                                margin-right: 20px;
    
                                img {
                                    /* margin-right: 10px; */
                                }
                            }
    
                            .collect {
                                display: flex;
    
                                img {
                                    /* margin-right: 10px; */
                                }
                            }
                        }
                    }
                }
            }
        }
       
    }
}

.webmaster_box_10 {
    margin-bottom: 30px;

    .listing_box {
        overflow: hidden;
        
        .swiper-container-10{
            width: 100%;
            height: 100%;
            position: relative;

                .swiper-slide{

                    .annual_box_shu {
                        display: flex;
                        flex-direction: column;
                        cursor: pointer;
            
                        .annual_video {
                            position: relative;
                            overflow: hidden;

                            /* img{
                                aspect-ratio: 11 / 16;
                               
                                } */
                                
                            img{
                                aspect-ratio: 0.8050;
                                object-fit: cover;
                                object-position: right center;
                                transition: all 0.2s ease-in-out;
                                overflow: hidden;
                            }
                            img:hover {
                                object-position: 91% top;
                            }
                            .absolute_top_left {
                                position: absolute;
                                top: 5px;
                                left: 5px;
                                display: flex;
                                flex-wrap: wrap;
                                color: #fff;
                
                                span {
                                    padding: 0 10px;
                                    border-radius: 4px;
                                    font-size: 14px;
                                    margin-right: 9px;
                                    background: #ff5922;
                                    margin-bottom: 5px;
                            
                                }
                
                                span:nth-child(1) {
                                    background: #ff5922;
                                }
                
                                span:nth-child(2) {
                                    background: #c21818;
                                }
                
                                span:nth-child(3) {
                                    background: #fe628e;
                                }
                
                                span:nth-child(4) {
                                    background: #18c237;
                                }
                
                                span:nth-child(5) {
                                    background: #2884f3;
                                }
                
                            }
            
                            .absolute_top_left_vip {
                                position: absolute;
                                top: 10px;
                                left: 10px;
                                z-index: 999;
                            }
            
                            .absolute_bottom_left {
                                position: absolute;
                                bottom: 5px;
                                left: 5px;
                                display: flex;
                                flex-wrap: wrap;
                                color: #fff;
            
                                span {
                                    padding: 0 10px;
                                    border-radius: 4px;
                                    font-size: 14px;
                                    margin-right: 9px;
                                    background: #ff5922;
                        
                                }
            
                                span:nth-child(1) {
                                    background: #2884f3;
                                }
            
                                span:nth-child(2) {
                                    background: #c21818;
                                }
            
                                span:nth-child(3) {
                                    background: #fe628e;
                                }
            
                                span:nth-child(4) {
                                    background: #18c237;
                                }
            
                                span:nth-child(5) {
                                    background: #ff5922;
                                }
                            }
            
                            .absolute_bottom_right {
                                position: absolute;
                                bottom: 5px;
                                right: 5px;
                                display: flex;
                                flex-wrap: wrap;
                                color: #fff;
            
                                span {
                                    padding: 0 10px;
                                    border-radius: 4px;
                                    font-size: 14px;
                                    margin-left: 9px;
                                    background: rgba(0, 0, 0, 0.5);
                 
                                }
                            }
            
                        }
            
                        
            
                        .details {
                            display: flex;
                            flex-direction: column;
            
                            .video_title {
                                padding: 10px 0;
                                font-size: 16px;
                                color: #dbdbdd;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
            
                                a{
                                    color: #fff;
                                }
                            }
            
                            .plug {
                                display: flex;
                                font-size: 12px;
                                color: #999aa8;
            
                                .player {
                                    display: flex;
                                    margin-right: 20px;
            
                                    img {
                                        margin-right: 10px;
                                    }
                                }
            
                                .collect {
                                    display: flex;
            
                                    img {
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                    }
                }

                .swiper-button-next-10{
                    width: 37px; /* 或其他所需宽度 */
                    height: 60px; /* 或其他所需高度 */
                    background-image: url(../image/pic_right.svg); /* 使用背景图 */
                    background-repeat: no-repeat;
                    position: absolute;
                    right: 0;
                    top: 40%;
                    z-index: 9;
                    background-size: contain;
                    transform: translateY(-40%);
                  }
                  .swiper-button-prev-10{
                    width: 37px; /* 或其他所需宽度 */
                    height: 60px; /* 或其他所需高度 */
                    background-image: url(../image/pic_left.svg); /* 使用背景图 */
                    background-repeat: no-repeat;
                    position: absolute;
                    left: 0;
                    top: 40%;
                    z-index: 9;
                    background-size: contain;
                    transform: translateY(-40%);
                  }

                
         
        

        }

     
    }
}

.webmaster_box_11 {
    margin-bottom: 30px;

    .listing_box {
        .listing_flex{
            margin-bottom: 30px;
            padding: 0 5px;

            .listing_a {
                display: flex ;
                flex-direction: column;
                background: #1f202e;
                border-radius: 12px;
                padding: 10px;

                .listing_cover {
                    display: flex;
                    flex-direction: column;
                    cursor: pointer;
                    
                    .annual_video {
                        position: relative;
                        overflow: hidden;

                        /* img{
                            aspect-ratio: 11 / 16;
                        } */
                        img{
                            aspect-ratio: 0.7050;
                            object-fit: cover;
                            object-position: right center;
                            transition: all 0.2s ease-in-out;
                            overflow: hidden;
                        }
                        img:hover {
                            object-position: 91% top;
                        }
                        
                        .absolute_bottom_left {
                            position: absolute;
                            bottom: 5px;
                            left: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #fff;
    
                            span {
                                padding: 0 10px;
                                border-radius: 4px;
                                font-size: 14px;
                                margin-right: 9px;
                                background: #ff5922;
                            }
    
                            span:nth-child(1) {
                                background: #2884f3;
                            }
    
                            span:nth-child(2) {
                                background: #c21818;
                            }
    
                            span:nth-child(3) {
                                background: #fe628e;
                            }
    
                            span:nth-child(4) {
                                background: #18c237;
                            }
    
                            span:nth-child(5) {
                                background: #ff5922;
                            }
                        }
    
                        .absolute_bottom_right {
                            position: absolute;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #fff;
    
                            span {
                                padding: 0 10px;
                                border-radius: 4px;
                                font-size: 14px;
                                margin-left: 9px;
                                background: rgba(0, 0, 0, 0.5);
                            }
                        }

                        .absolute_top_left {
                            position: absolute;
                            top: 5px;
                            left: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #fff;
        
                            span {
                                padding: 0 10px;
                                border-radius: 4px;
                                font-size: 14px;
                                margin-right: 9px;
                                background: #ff5922;
                                margin-bottom: 5px;
                            }
        
                            span:nth-child(1) {
                                background: #ff5922;
                            }
        
                            span:nth-child(2) {
                                background: #c21818;
                            }
        
                            span:nth-child(3) {
                                background: #fe628e;
                            }
        
                            span:nth-child(4) {
                                background: #18c237;
                            }
        
                            span:nth-child(5) {
                                background: #2884f3;
                            }
        
                        }
        
                        .video_flex {
                            position: absolute;
                            top: 0;
                            background: #000;
                            height: 100%;
                            border-radius: 7px;
                            display: flex;
                            z-index: 9999;
                        }

                        .absolute_top_left_vip {
                            position: absolute;
                            top: 10px;
                            left: 10px;
                            z-index: 999;
                        }

                        
    
                        
                    }

                    .details {
                        display: flex;
                        flex-direction: column;
    
                        .video_title {
                            padding: 10px 0;
                            font-size: 16px;
                            color: #dbdbdd;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
    
                            a{
                                color: #fff;
                            }
                        }
    
                        .plug {
                            display: flex;
                            font-size: 12px;
                            color: #999aa8;
    
                            .player {
                                display: flex;
                                margin-right: 20px;
    
                                img {
                                    margin-right: 10px;
                                }
                            }
    
                            .collect {
                                display: flex;
    
                                img {
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
    
                   
                    
                }
            }
        }
        
    }
}

.webmaster_box_20 {
    margin-bottom: 10px;

    .listing_box {

        .annual_grid{
            display: grid;
            grid-template-columns: repeat(6, 16%);
            row-gap: 20px;
            -moz-column-gap: 12px;
            column-gap: 12px;

            .actress_avatar{
                padding: 0px;
                margin: 0px;
                display: grid;
                /* grid-template-rows: 70% 20%; */
                cursor: pointer;
                
                .annual_box {
                    display: flex;
                    flex-direction: column;
                    cursor: pointer;
                    align-items: center;
                    background: url(/assets/image/class_bg.png) no-repeat;
                    background-position-y: bottom;
                    min-height: 182px;
                    width: 178px;
                    margin-bottom: 20px;
        
                    .annual_video {
                        position: relative;
                        width: 140px;
        
                        img{
                            border-radius: 100px;
                            width: 140px;
                            height: 140px;
                            object-fit: cover;
                            border: 3px solid #fff;
                        }
                        img:hover{
                            border: 3px solid #FFD3E2;
                        }
        
                        .actess_name {
                            font-size: 16px;
                            margin-top: 10px;
                            text-align: center;
                            color: #fff;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
        
                        .welcomt_actress {
                            border: 2px solid #fff;
                            border-radius: 100px;
                        }
        
        
                    }
        
        
                }
        
                .annual_box:hover {
                    background: url(/assets/image/class_bg2.png) no-repeat;
                    background-position-y: bottom;
        
                    .annual_video {
                        .welcomt_actress {
                            border: 2px solid #fe628e;
                            border-radius: 100px;
                        }
                    }
        
                }
            }
        }
        
       



    }
}

.trademark_flex{
    display: grid;
    grid-template-columns: repeat(15, 6%);
    row-gap: 20px;
    -moz-column-gap: 12px;
    column-gap: 12px;

    .trademark_img{
        display: grid;
        /* grid-template-rows: 70% 20%; */
        cursor: pointer;

        .trademark_top{
            img{
                /* width: 100%; */
                width: 77px;
                border-radius: 20px;
            }
        }
        .trademark_bottom{
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
            text-align: center;
        }
       
    }
}

.year_box{
    margin-bottom: 30px;
}
.year_item {
    line-height: 54px;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    margin: 0 10px 10px 0;
    text-align: center;
}

.year_item:hover {
    color: #fff;
}

.year_flex{
    a:nth-child(1){
        background: #fe628e;
    }
    a:nth-child(2){
        background: #ad50ff;
    }
    a:nth-child(3){
        background: #14dc38;
    }
    a:nth-child(4){
        background: #ff5040;
    }
    a:nth-child(5){
        background: #5b50ff;
    }
    a:nth-child(6){
        background: #ff40bf;
    }
}
.no1 {
    background: #fe628e;
}

.no2 {
    background: #ad50ff;
}

.no3 {
    background: #14dc38;
}

.no4 {
    background: #ff5040;
}

.no5 {
    background: #5b50ff;
}

.no6 {
    background: #ff40bf;
}

.foot_left,
.foot_right {
    font-size: 14px;
    color: #dbdbdd;
}

.bottom_flex{
    text-align: right;
}

.foot_left_des {
    display: flex;

    a {
        margin-right: 15px;
    }
}

.foot_left_url {
    p {
        margin-top: 10px;

        span {
            color: #fe628e;
        }
    }
}

.foot_right_des {
    h5 {
        font-size: 16px;
        margin-bottom: 20px;
        color: #fff;
    }

}

.foot_right_ul {
    font-size: 14px;

    li {
        margin-bottom: 10px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: none !important;

        a {
            color: #dbdbdd;
        }

    }
}

.foot_icon {
        display: flex;
        justify-content: end;
        text-align: right;
            a {
                display: flex;
                flex-direction: column;
                color: #999aa8;
            }

            img {
                margin-bottom: 10px;
                margin-left: 10px;
            }
}

.advertise_box {
    margin:30px 0;
    
        .advertise_flex {
            column-gap: 12px;
            a {
                cursor: pointer;
                /* padding: 0 15px; */
                margin-bottom: 20px;
                img{
                    width: 100%;
                    aspect-ratio: 16 / 2.3;
                }
            }
    
    }
    }

.left_levitate {
    position: fixed;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    width: 181px;
    padding: 10px;
    z-index: 9999;

    .sm_box {
        width: 158px;
        height: 226px;
        background: #1f202e;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .domload_btn {
            background: #fe628e;
            color: #fff;
            font-size: 16px;
            border-radius: 4px;
            width: 126px;
            height: 38px;
            text-align: center;
            line-height: 38px;
            margin-top: 16px;
        }
    }

    .close_btn {
        margin-top: 20px;
        text-align: center;
        cursor: pointer;
        display: flex;
        justify-content: center;
    }
}

.right_levitate {
    display: none;
    position: fixed;
    top: 80%;
    right: 30px;
    transform: translateY(-50%);
    width: 68px;
    height: 68px;
    border-radius: 12px;
    background-color: #1f202e;
    background-image: url(../image/toTop.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 9999;
}

.right_levitate:hover {
    background-color: #fe628e;
    background-image: url(../image/toTop-select.png);
}

.preloading{
    position: absolute;
    /* z-index: 9; */
}

.swiper-container-adv{
    overflow: hidden;
}