.body-warp {
    position: relative;
    padding: 40px 0 0 0;
}

.category-warp {
    position: relative;
    width: 1280px;
    margin: 0 auto;
}

/* 瀵艰埅鏉 */
.body-warp .tab-ul {
    width: 122px;
    background: #fff;
    border-radius: 10px;
    position: fixed;
    top: 360px;
    /*left: 30px;*/
    z-index: 2;
    margin-left: -122px;
}

.body-warp .tab-ul li {
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
}

.body-warp .tab-ul li:hover {
    background: #ddd;
}

.body-warp .tab-ul .tab-title {
    vertical-align: middle;
    font-size: 16px;
    padding-right: 21px;
}

.body-warp .tab-ul a {
    display: block;
}

.body-warp .tab-ul .tab-arrow {
    height: 24px;
    vertical-align: middle;
    display: none;
    margin-left: -5px;
}

.body-warp .tab-ul .current {
    background: #F35051 !important;
}

.body-warp .tab-ul .current .tab-title {
    padding-right: 0;
    color: #fff;
}

.body-warp .tab-ul .current .tab-arrow {
    display: inline-block;
}

/* 绫诲埆 */
.body-warp .category-li {
    margin-bottom: 30px;
}

.body-warp .category-title {
    color: #343A48;
    font-size: 30px;
    font-weight: 500;
    padding-left: 20px;
}

.body-warp .item-list {
    margin-top: 27px;
    display: table;
}

.body-warp .item-list li {
    border: 1px solid #bbb;
}

.body-warp .item-list li:hover {
    border-color: #ccc;
}

.body-warp .category-ul li {
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
}

.body-warp .category-ul .content-body {
    width: 100%;
}

.body-warp .category-ul .content-box {
    background: #fff;
    padding: 20px;
    color: #343A48;
    font-size: 16px;
    border-radius: 0 0 4px 4px;
}

.body-warp .item-list li {
    margin-left: 20px;
}

/* 瑙嗛 */
.body-warp .item-list.video li {
    width: 610px;
    border-radius: 0 0 6px 6px;
}

.body-warp .item-list.video .content-body {
    height: 342px;
}

.body-warp .item-list.video .content-body video {
    display: block;
    width: 100%;
    height: 100%;
}

/* 鍥剧墖 */
.body-warp .item-list.picture li {
    width: 295px;
    background: #fff;
    border-radius: 6px;
}

.body-warp .item-list.picture li .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    display: none;
}

.body-warp .item-list.picture li:hover .mask {
    display: block;
}

.body-warp .item-list.picture .content-body {
    position: relative;
    height: 635px;
    display: block;
}

.body-warp .item-list.picture .content-body img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px 4px 0 0;
}

.body-warp .item-list.picture .content-body .mask {
    border-radius: 4px 4px 0 0;
    cursor: zoom-in;
}

.body-warp .item-list.picture .content-box {
    position: relative;
}

.body-warp .item-list.picture .content-box .mask {
    border-radius: 0 0 4px 4px;
}


/* 鍥剧墖棰勮 */
.preview-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: none;
    background: rgba(0, 0, 0, 0.8);
}

.preview-box .picture-warp {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 20px;
}

.preview-box .picture {
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
    user-select: none;
}