.mediaCon {
    font-family: Poppins;
    margin-top: 7.94vw;
}
.mediaTitle {
    font-size: 1.28vw;
    font-weight: 600;
    line-height: 1.28vw;
    color: #000;
    text-align: center;
}
.mediaItemCon {
    display: flex;
    justify-content: center;
    margin-top: 2.42vw;
    column-gap: 0.78vw;
}
.mediaItem {
    color: #fff;
    display: flex;
    justify-content: center;
    background-color: #000;
    padding: 0.32vw 0.65vw;
    column-gap: 0.52vw;
    border-radius: 50vw;
    white-space: nowrap;
    align-items: center;
    cursor: pointer;
}
.mediaItem img {
    width: 1.04vw;
    height: 1.04vw;
}
.mediaConPos {
    position: relative;
    overflow: hidden;
    border-radius: 0.6vw;
}
.mediaConPos img {
    width: 12.04vw;
    cursor: pointer;
    display: block;
    transition: transform 0.3s ease-in-out;
}
.mediaConPos img:hover {
    transform: scale(1.05);
}
.mediaConAbs {
    position: absolute;
    top: 2.21vw;
    white-space: nowrap;
    text-align: center;
    left: 50%;
    font-size: 0.6vw;
    line-height: 0.6vw;
    transform: translateX(-50%);
    z-index: 11;
}
.mediaSize1 {
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
}
.mediaSize2 {
    color: #6e6e6e;
    font-weight: 300;
    margin-top: 0.39vw;
    text-transform: capitalize;
}
.mediaConFlex {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 1.95vw 5.99vw;
    justify-content: center;
    padding: 4.03vw 0 5.73vw 0;
}
/* 切换分组时为容器添加平滑淡入淡出与微位移过渡 */
#mediaGridRoot {
    transition: opacity 0.22s ease, transform 0.22s ease;
    will-change: opacity, transform;
}
#mediaGridRoot.grid-animating-out {
    opacity: 0;
    transform: translateY(0.26vw);
    pointer-events: none;
}
.mediaConGrid {
    display: grid;
    justify-items: center;
    gap: 0.78vw;
    color: #fff;
    font-size: 0.64vw;
    font-weight: 300;
}
.mediaSubFlex {
    display: flex;
    column-gap: 1.17vw;
    color: #000;
}
.mediaSubFlex a {
    background-color: #000;
    border-radius: 5px;
    padding: 0.39vw 0.52vw;
    color: #fff;
    font-size: 0.68vw;
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.25s ease;
}
.mediaSubFlex a:hover {
    background-color: #6700cb;
}
/* 下载按钮伪元素的基础态：存在但不可见，便于平滑过渡 */
.mediaSubFlex a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 1.04vw;
    margin-left: 0;
    background-image: url('/wp-content/uploads/2025/10/media_05.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateX(-0.15vw) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease, width 0.22s ease, margin-left 0.22s ease;
    will-change: opacity, transform, width, margin-left;
    pointer-events: none;
}
/* 悬停时：逐步显现并展开宽度与间距，实现柔和动画 */
.mediaSubFlex a:hover::after {
    opacity: 1;
    transform: translateX(0) scale(1);
    width: 1.04vw;
    margin-left: 0.39vw;
}
@media (max-width: 768px) {
    .mediaConPos img {
        width: 100%;
    }
    .mediaTitle {
        font-size: 6.28vw;
        line-height: 6.28vw;
    }
    .mediaItemCon  {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 5vw;
    }
    .mediaItem {
        padding: 1.32vw 1.65vw;
        justify-content: flex-start;
    }
    .mediaItem img {
        width: 6.04vw;
        height: 6.04vw;
    }
    .mediaConFlex {
        padding: 4.03vw 2vw 5.73vw 2vw;
        grid-template-columns: repeat(2, auto);
        gap: 5.21vw 6.12vw;
    }
    .mediaConAbs {
        top: 3.3vw;
        font-size: 2.6vw;
        line-height: 3.6vw;
    }
    .mediaSubFlex a {
        font-size: 3.3vw;
        padding: 0.6vw 1.8vw;
    }
    .mediaConGrid {
        gap: 2.8vw;
    }
    .mediaSubFlex a:hover::after {
        width: 0;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .mediaConPos img {
        width: 100%;
    }
    .mediaConFlex {
        padding: 4.03vw 2vw 5.73vw 2vw;
        grid-template-columns: repeat(3, auto);
        gap: 2vw 3.5vw;
    }
    .mediaItem {
        padding: 0.6vw 1.5vw;
    }
    .mediaItemCon {
        justify-content: space-evenly;
    }
    .mediaItem img {
        width: 3.04vw;
        height: 3.04vw;
    }
    .mediaTitle {
        font-size: 3.5vw;
        line-height: 3.5vw;
    }
    .mediaConAbs {
        top: 3.3vw;
        font-size: 1.6vw;
        line-height: 2.2vw;
    }
    .mediaConGrid {
        gap: 1.5vw;
    }
    .mediaSubFlex a {
        padding: 0.5vw 2vw;
        font-size: 1.7vw;
    }
    .mediaSubFlex a:hover::after {
        width: 0;
    }
}