/* =========================================================
   24直播网 /luxiang/ 录像频道
   V5
   只控制录像主体
   不控制 Header / Footer
   ========================================================= */
.lx5-main{
    width:100%;
    min-height:600px;
    padding:22px 0 50px;
    box-sizing:border-box;
    background:#f3f5f7;
}
.lx5-container{
    width:1200px;
    max-width:calc(100% - 32px);
    margin:0 auto;
    box-sizing:border-box;
}
/* 面包屑 */
.lx5-breadcrumb{
    width:100%;
    height:24px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#929aa2;
    font-size:12px;
    line-height:1;
}
.lx5-breadcrumb a{
    color:#707983;
    text-decoration:none;
}
.lx5-breadcrumb a:hover{
    color:#e53935;
}
.lx5-breadcrumb span{
    color:#b8bec4;
}
.lx5-breadcrumb strong{
    color:#e53935;
    font-weight:500;
}
/* Hero */
.lx5-hero{
    position:relative;
    width:100%;
    min-height:174px;
    padding:30px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    box-sizing:border-box;
    overflow:hidden;
    background:radial-gradient(circle at 82% 35%,rgba(229,57,53,.16),transparent 32%),linear-gradient(135deg,#191f27 0%,#11161d 62%,#0c1117 100%);
    border:1px solid #252d36;
}
.lx5-hero::after{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    right:-100px;
    bottom:-160px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}
.lx5-hero-left{
    position:relative;
    z-index:2;
    min-width:0;
}
.lx5-hero-label{
    margin-bottom:9px;
    color:#e53935;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}
.lx5-hero h1{
    margin:0;
    color:#fff;
    font-size:30px;
    font-weight:600;
    line-height:1.3;
}
.lx5-hero p{
    max-width:700px;
    margin:11px 0 0;
    color:#aab2bb;
    font-size:13px;
    line-height:1.8;
}
.lx5-hero-right{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-width:150px;
    padding-left:30px;
    border-left:1px solid rgba(255,255,255,.12);
}
.lx5-hero-right span{
    display:block;
    margin-bottom:7px;
    color:#727d88;
    font-size:10px;
    letter-spacing:1px;
}
.lx5-hero-right strong{
    display:block;
    color:#f0f3f5;
    font-size:17px;
    font-weight:500;
    line-height:1.5;
}
/* 分类 */
.lx5-category{
    width:100%;
    margin-top:14px;
    background:#fff;
    border:1px solid #e2e7eb;
    box-sizing:border-box;
}
.lx5-category-title{
    position:relative;
    width:100%;
    height:48px;
    padding-left:29px;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    color:#30373e;
    border-bottom:1px solid #edf0f2;
    font-size:14px;
    font-weight:600;
}
.lx5-category-title i{
    position:absolute;
    left:18px;
    top:50%;
    width:3px;
    height:15px;
    background:#e53935;
    transform:translateY(-50%);
}
.lx5-category-list{
    width:100%;
    min-height:55px;
    padding:8px 18px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    box-sizing:border-box;
}
.lx5-category-item{
    height:32px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    color:#606a73;
    background:#f6f7f8;
    border:1px solid transparent;
    font-size:12px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}
.lx5-category-item:hover{
    color:#e53935;
    background:#fff5f5;
    border-color:#f0cccc;
}
.lx5-category-item.lx5-active{
    color:#fff;
    background:#e53935;
    border-color:#e53935;
}
/* 内容 */
.lx5-content{
    width:100%;
    margin-top:14px;
    background:#fff;
    border:1px solid #e2e7eb;
    box-sizing:border-box;
}
.lx5-content-head{
    width:100%;
    height:60px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-sizing:border-box;
    border-bottom:1px solid #edf0f2;
}
.lx5-content-title{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.lx5-content-title i{
    width:3px;
    height:17px;
    flex:0 0 3px;
    background:#e53935;
}
.lx5-content-title h2{
    margin:0;
    color:#252b31;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
}
.lx5-content-head>span{
    color:#9aa2aa;
    font-size:11px;
    white-space:nowrap;
}
/* 视频列表 */
.lx5-video-grid{
    width:100%;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    box-sizing:border-box;
}
.lx5-video-card{
    display:block;
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e9ec;
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.lx5-video-card:hover{
    border-color:#d6dce1;
    box-shadow:0 8px 22px rgba(22,30,38,.09);
    transform:translateY(-2px);
}
/* 图片 */
.lx5-cover{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#e9ecef;
}
.lx5-cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.lx5-video-card:hover .lx5-cover img{
    transform:scale(1.035);
}
/* 播放按钮 */
.lx5-cover em{
    position:absolute;
    left:50%;
    top:50%;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:50%;
    background:rgba(10,15,21,.72);
    transform:translate(-50%,-50%);
    font-style:normal;
}
.lx5-cover em::after{
    content:"";
    position:absolute;
    left:16px;
    top:12px;
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:13px solid #fff;
}
/* 标题 */
.lx5-video-title{
    width:100%;
    min-height:60px;
    padding:13px 14px;
    display:-webkit-box;
    box-sizing:border-box;
    overflow:hidden;
    color:#30373e;
    font-size:13px;
    font-weight:500;
    line-height:1.65;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.lx5-video-card:hover .lx5-video-title{
    color:#e53935;
}
/* =========================================================
   录像分页
   PC / Mobile 统一只保留上一页 / 下一页
   ========================================================= */
.lx5-page,
#page.lx5-page{
    width:100%;
    margin:30px 0 0;
    padding:0 12px 20px;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
}
.lx5-page .pagination,
#page.lx5-page .pagination,
.lx5-page ul,
.lx5-page ol,
#page.lx5-page ul,
#page.lx5-page ol{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    text-align:center !important;
}
.lx5-page ul,
.lx5-page ol,
#page.lx5-page ul,
#page.lx5-page ol{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}
.lx5-page li,
#page.lx5-page li{
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 5px !important;
    padding:0 !important;
    list-style:none !important;
    background:none !important;
}
.lx5-page li::before,
.lx5-page li::after,
#page.lx5-page li::before,
#page.lx5-page li::after{
    display:none !important;
    content:none !important;
}
.lx5-page a,
.lx5-page span,
#page.lx5-page a,
#page.lx5-page span{
    min-width:68px !important;
    height:38px !important;
    padding:0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    border:1px solid #e3e6e8 !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#555d66 !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:36px !important;
    text-align:center !important;
    text-decoration:none !important;
    box-shadow:none !important;
    white-space:nowrap !important;
}
.lx5-page a:hover,
#page.lx5-page a:hover{
    color:#e53935 !important;
    border-color:#e53935 !important;
    background:#fff7f7 !important;
    text-decoration:none !important;
}
.lx5-page .disabled,
.lx5-page .disabled a,
.lx5-page .disabled span,
#page.lx5-page .disabled,
#page.lx5-page .disabled a,
#page.lx5-page .disabled span{
    color:#b8bec5 !important;
    border-color:#eceff1 !important;
    background:#f7f8f9 !important;
    cursor:default !important;
}
.lx5-page .active,
.lx5-page .active a,
.lx5-page .active span,
#page.lx5-page .active,
#page.lx5-page .active a,
#page.lx5-page .active span{
    color:#fff !important;
    border-color:#e53935 !important;
    background:#e53935 !important;
}
/* =========================================================
   只保留第一页 / 最后一页
   第一项 = 上一页
   最后一项 = 下一页
   ========================================================= */
@media (max-width:640px){
    .lx5-page,
    #page.lx5-page{
        width:100% !important;
        max-width:100% !important;
        margin:20px 0 0 !important;
        padding:0 8px 20px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }
    .lx5-page ul,
    .lx5-page ol,
    #page.lx5-page ul,
    #page.lx5-page ol{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        gap:0 !important;
    }
    .lx5-page li,
    #page.lx5-page li{
        flex:0 0 auto !important;
        margin:0 4px !important;
    }
    .lx5-page li:not(:first-child):not(:last-child),
    #page.lx5-page li:not(:first-child):not(:last-child){
        display:none !important;
    }
    .lx5-page a,
    .lx5-page span,
    #page.lx5-page a,
    #page.lx5-page span{
        min-width:82px !important;
        width:82px !important;
        height:36px !important;
        padding:0 8px !important;
        font-size:12px !important;
        line-height:34px !important;
        white-space:nowrap !important;
    }
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width:1100px){
    .lx5-container{
        max-width:calc(100% - 28px);
    }
    .lx5-video-grid{
        gap:16px;
        padding:16px;
    }
}
/* =========================================================
   SMALL TABLET
   ========================================================= */
@media (max-width:900px){
    .lx5-container{
        max-width:calc(100% - 20px);
    }
    .lx5-hero{
        padding:26px 25px;
    }
    .lx5-hero h1{
        font-size:26px;
    }
    .lx5-video-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:640px){
    .lx5-main{
        padding:14px 0 30px;
    }
    .lx5-container{
        max-width:calc(100% - 16px);
    }
    .lx5-breadcrumb{
        margin-bottom:10px;
        font-size:11px;
    }
    .lx5-hero{
        min-height:0;
        padding:23px 18px;
        display:block;
    }
    .lx5-hero-label{
        margin-bottom:7px;
    }
    .lx5-hero h1{
        font-size:22px;
    }
    .lx5-hero p{
        margin-top:9px;
        font-size:12px;
        line-height:1.7;
    }
    .lx5-hero-right{
        min-width:0;
        margin-top:18px;
        padding:12px 0 0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.1);
    }
    .lx5-category-title{
        height:44px;
    }
    .lx5-category-list{
        padding:8px 12px;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .lx5-category-list::-webkit-scrollbar{
        display:none;
    }
    .lx5-category-item{
        flex:0 0 auto;
    }
    .lx5-content-head{
        height:53px;
        padding:0 14px;
    }
    .lx5-content-title h2{
        font-size:15px;
    }
    .lx5-video-grid{
        padding:12px;
        gap:12px;
    }
    .lx5-video-title{
        min-height:54px;
        padding:10px;
        font-size:12px;
    }
}