.material-list {
    margin: 0 2.6vw;
    padding: 3.2vw;
    border-radius: 1.4vw;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.material-list .item {
    --item-width: 100%;
    width: var(--item-width);
    border-radius: 1.4vw;
    overflow: hidden;
    margin-bottom: 4vw;
}

.material-list .item.two {
    --item-width: 47%;
}

.material-list .item .poster {
    width: 100%;
    height: 58vw;
    position: relative;
    border-radius: 1.4vw;
    overflow: hidden;
    margin-bottom: 1.2vw;
}

.material-list .item .poster::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    filter: blur(10px);
    background-image: var(--video-bg);
    background-size: cover;
    background-position: 50% 50%;
}

.material-list .item .poster::after {
    content: '';
    display: block;
    width: calc(100vw * 96 / 750);
    height: calc(100vw * 96 / 750);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEQTJGOTE4RDc0NzExRjBCMEY1RDE0MTQ5MjFFODk3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEQTJGOTE5RDc0NzExRjBCMEY1RDE0MTQ5MjFFODk3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0RBMkY5MTZENzQ3MTFGMEIwRjVEMTQxNDkyMUU4OTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0RBMkY5MTdENzQ3MTFGMEIwRjVEMTQxNDkyMUU4OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ReQnDAAAIMUlEQVR42uxd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') no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.material-list .item.two .poster {
    padding-top: 120%;
    height: 0;
}

.material-list .item .poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.material-list .item .title {
    font-size: 4vw;
    line-height: 1.4;
    font-weight: bold;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.material-list .item.article .thumbs {
    height: 24vw;
    white-space: nowrap;
    line-height: 0;
    font-size: 0;
    margin-bottom: 1.2vw;
}

.material-list .item.article .thumbs .thumb {
    display: inline-block;
    height: 100%;
    width: 24vw;
    border-radius: 1.4vw;
    overflow: hidden;
    margin-right: 1.5vw;
}
.material-list .item.article .thumbs.thumbs-1 .thumb {
    width: 100%;
}
.material-list .item.article .thumbs.thumbs-2 .thumb {
    width: 50%;
}
.material-list .item.article .thumbs.thumbs-3 .thumb {
    width: 33%;
}

.material-list .item.article .thumbs .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#material-page .searchbar {
    padding-bottom: 2.8vw;
    background: #fff url(../images/image_01.png) 0 0 repeat-x;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
}

#material-page .material .item {
    display: flex;
    padding: 4vw;
    border-bottom: 1px solid #ddd;
    color: #333;
}

#material-page .material .item .brand-logo {
    width: 10vw;
    height: 10vw;
    border-radius: 1vw;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #fff;
    margin-right: 2vw;
    box-sizing: border-box;
    border: 1px solid #eee;
}

#material-page .material .item .brand-info {
    flex-grow: 1;
    width: 0;
    line-height: 1.5;
    font-size: 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#material-page .material .item .brand-info .brand-name {
    line-height: 5vw;
    font-size: 3.4vw;
    color: #ff990e;
    font-weight: bold;
}

#material-page .material .item .brand-info .content {
    max-height: 13.5vw;
    overflow: hidden;
}

#material-page .material .item .brand-info .content.open {
    max-height: initial;
}

#material-page .material .item .brand-info .btn-open {
    color: #576b95;
    display: inline-block;
}

#material-page .material .item .brand-info .my-video,
#material-page .material .item .brand-info .jgg {
    margin-top: 1.2vw;
    font-size: 0;
}

#material-page .material .item .brand-info .jgg {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
}

#material-page .material .item .brand-info .jgg .thumb {
    width: 25vw;
    height: 25vw;
}

#material-page .material .item .brand-info .jgg .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#material-page .material .item .brand-info .jgg .thumb.one {
    width: 60%;
    height: auto;
}

#material-page .material .item .brand-info .jgg .thumb.one img {
    height: auto;
}

#material-page .material .item .brand-info .my-video {
    position: relative;
}

#material-page .material .item .brand-info .my-video img {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#material-page .material .item .brand-info .my-video::after {
    content: '';
    display: block;
    width: 10vw;
    height: 10vw;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEQTJGOTE4RDc0NzExRjBCMEY1RDE0MTQ5MjFFODk3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEQTJGOTE5RDc0NzExRjBCMEY1RDE0MTQ5MjFFODk3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0RBMkY5MTZENzQ3MTFGMEIwRjVEMTQxNDkyMUU4OTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0RBMkY5MTdENzQ3MTFGMEIwRjVEMTQxNDkyMUU4OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ReQnDAAAIMUlEQVR42uxd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') no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

#material-page .material .item .brand-info .time {
    font-size: 2.8vw;
    color: #999;
    margin-top: 2vw;
}