span.gys{color: #c0c0c0;
 font-size: 11px;
    font-weight: 200;
        line-height: 22px;
        font-weight: normal;
display: block;
text-align: left}

/* ??? */
    .grid-cm {
       
        overflow: auto;
        margin: 0 10px 15px
    }

    .grid {
        display: grid;
        grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        grid-auto-flow: column;
        transition: all .30s ease;
       
    }


    .thumb {
        position: relative; 
        cursor: pointer;
        height: 280px;
        min-width: 150px; 
         
        transition: all .30s ease;
    }
  

    .thumb:hover {
        
    }

    /* ?????? */
    .thumb img {
        position: absolute;
        inset: 0;
        border-radius: 7px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        -webkit-user-drag: none;
    }

    /* ?????? */
    .thumb video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%; 
        user-select: none;
        -webkit-user-drag: none;
        display: none; /* ???????? */
    }

    /* ???????????? */
    /* .grid.expanded .thumb.active.video-playing video { */
    .grid.expanded .thumb.active video {
        object-fit: contain !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: #000;
        display: block;
    }

    .play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .55);
        display: grid;
        place-items: center;
    }

    .play:after {
        content: "";
        border-style: solid;
        border-width: 12px 0 12px 18px;
        border-color: transparent transparent transparent #fff;
        margin-left: 4px;
    }

    /* ??:??"????",?????? */
    .grid.expanded {
        grid-template-columns: 1fr; /* ????? */
        justify-items: center; /* ?? */
    }

    .grid.expanded  .active {
        /* ????????????? */
        width: 100vw;
        height: 70vh;
        aspect-ratio: auto; /* ??????,?????? */
        background-color: #000;
        position: relative;
        /*    transition: width var(--dur) ease, height var(--dur) ease, transform var(--dur) ease;*/
    }
 .grid.expanded  .horizontal-video-playing{height: 240px}
    .grid.expanded .thumb:not(.active) {
        display: none; /* ?????????? */
    }

    /* ????? */
    .video-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
        transition: all 0.3s;
        background-size: cover;
        background-position: center; border-radius: 7px;
         
    }

.loader {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid #ddd;
  border-top: 3px solid #42a5f5;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin: 0 auto 5px;
  
    
}
.loading-tip{  width: 60px;
   background: #0000009e;
    color: #fff;
    padding: 15px 0 5px;
    font-size: 12px;
    border-radius: 10px;text-align: center;}

@-webkit-keyframes spin {
  to {
    border-top-color: #ec407a;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    border-top-color: #ec407a;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


    /* ???? */
    .play-btn, .replay-btn {
        width: 60px;
        height: 60px;
        background: rgba(0, 0, 0, 0) url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjQgNDRjMTEuMDQ2IDAgMjAtOC45NTQgMjAtMjBTMzUuMDQ2IDQgMjQgNCA0IDEyLjk1NCA0IDI0czguOTU0IDIwIDIwIDIweiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjAgMjR2LTYuOTI4bDYgMy40NjRMMzIgMjRsLTYgMy40NjQtNiAzLjQ2NFYyNHoiIGZpbGw9IiNGRkYiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") no-repeat 50% 50%;
        background-size: 100% 100%;
        opacity: 0.7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
        z-index: 2;
    }

    .replay-btn {
        display: none
    }
    .pf{position: relative;
    z-index: 9}