/* 图片懒加载样式 */
img.lazy {
  opacity: 1; /* 默认显示图片 */
  transition: opacity 0.3s ease-in-out;
}

img.lazy.loaded {
  opacity: 1;
}

img.lazy:not(.loaded) {
  background-color: #f0f0f0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2UwZTBlMCIvPjx0ZXh0IHg9IjUwIiB5PSI1NSIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzk5OSI+SW1hZ2U8L3RleHQ+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
}

#home-slider{
    width: 100%;
    background: var(--base-background);
    height: 560px;
}
.home-carousel{
    width: 100%;
    height:  100%;
}
.home-slider-item{
    height: 560px;
    width: 100%;
    position:relative;
}
.home-slider-item-left{
    width: 40%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    background: linear-gradient(to right, var(--base-background),transparent);
}
.home-slider-item-right{
    width: 40%;
    height: 100%;
    top:0;
    right:0;
    position: absolute;
    background: linear-gradient(to left, var(--base-background), transparent);
}
.home-slider-item-a{
    touch-action: manipulation;
    user-select: none;
    height: 100%;
    width: 100%;
}
.home-slider-item-img{

    background-size:cover;
    background-position: center;
    height: 100%;
    width: 100%;
    display: block;
}

.adver-font{
    background: var(--van-red);
    color: var(--balloon-text-color);
}

@media screen and (max-width:800px){
    #home-slider{
        height: 47vw;
    }
    .home-slider-item{
        height: 47vw;
    }
}
@media screen and (min-width: 1330px){
    #home-slider{
        height: 680px;
    }
    .home-slider-item{
        height: 680px;
    }
}
.ads-block-long{
    --red: #e80100;
    position:relative;
    display: grid !important;
    padding: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.ads-block-long-item{
    width: 100%;
    cursor:pointer;
}
.ads-block-long-item img{
    aspect-ratio: 618/71.55;
    border-radius: 10px;
    transition: all .25s ease-out !important;
}
.ads-block-long-item img.loaded:hover{
    transform: scale(1) translate3d(0,-10px,0) !important;
}


.ads-block{
    --red: #e80100;
    position:relative;
    display: grid !important;
    padding: 10px 0;
    grid-template-columns: repeat(15, minmax(min(100%/18,88px) ,1fr));
    grid-gap: min(1vw,25px);
    margin-top: 10px;
    margin-bottom: 10px;
}
.ads-block img{
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 1 / 1;
    transition: all .25s ease-out;
    background-color: rgba(0,0,0,0.3);
    display: block;
}
@supports not (aspect-ratio: 1/1) {
    .ads-block img {
        height: auto;
    }
    .ads-block-long-item img{
        height: auto;
    }
}
.ads-block header{
    padding: 10px 0 5px 0;
    text-align:  center;
    color: var(--balloon-text-color);
    font-size: min(max(12px , 1.1vw), 16px) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all .25s ease-out;
}
@media screen and (max-width: 960px){
    .ads-block{
        grid-template-columns: repeat(5,16vw);
        grid-gap: 3.8vw;
    }
    .ads-block-long{
        grid-template-columns:1fr;
    }
    .ads-block header{
        font-size: min(max(12px , 2vw), 16px) !important;
    }
}
@media screen and (max-width: 460px){
    .ads-block{
        grid-template-columns: repeat(5, 16.5vw);
        grid-gap: 2.9vw;
    }
}
.ads-block-card{

}
.ads-block-card:hover{
    cursor:pointer;
}
.ads-block-card:hover img{
    transform: translateY(-5px);
    box-shadow: 0 5px 16px -4px rgba(255,0,0,.2);
}
.ads-block-card:hover header{
    color: var(--red);
}

@keyframes YoPopIn{
    from {transform: scale(.8);}
    to {transform: scale(1);}
}
.yo-lazy-img{
    opacity: 0.1;
    transition: all .25s ease-out !important;
    transform: scale(.5);
}
.yo-lazy-img.loaded{
    opacity:1;
    transform: scale(1);
    animation: YoPopIn .25s ease-out;
    /* animation-fill-mode: forwards; */
}

.yo-lazy-img.img_failure{
     /*transform: scale(.7) !important;*/
    opacity:.5;
}

.player-box #page-play-mid-ads{
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .player-box .plist-body {
        width: 100%;
    }
}
@media (min-width: 768px){
    .player-box .ads-block{
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 25px;
    }
}