@charset "utf-8";

#youtube .youtube-navigation > * { cursor: pointer; }
#youtube .youtube-navigation > *.swiper-button-disabled svg { fill: #e0e0e0; cursor: default; }
.youtubeWrapper { --secHeight : 500px; width: 100%; height: var(--secHeight); margin-top: 1rem;  }
.youtubeWrapper .viewSeciton { width: 57.5%; }
.youtubeWrapper .viewSeciton iframe { width: 100%; height: auto; aspect-ratio: 16/9; background: var(--pointcolor); border-radius: 2rem; overflow: hidden; }
.youtubeWrapper .listSection { position: relative; width: 40%; margin: 0; }
.youtubeWrapper .swiper-slide { height: var(--secHeight); }
.youtubeWrapper .swiper-slide .swiper-item { height: calc( ( var(--secHeight) / 4 ) - 1.25% ); padding: 1.25% 0; border-bottom: 1px dashed #e0e0e0; cursor: pointer; }
.youtubeWrapper .swiper-slide .swiper-item .item-thumb { width: auto; height: 100%; aspect-ratio: 16/9; }
.youtubeWrapper .swiper-slide .swiper-item .item-thumb img { width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; }
.youtubeWrapper .swiper-slide .swiper-item .item-info { width: 60%; height: 100%; }

@media(max-width:990px){
    #youtube .Titwrap { flex-wrap: wrap; }
    #youtube .Titwrap > * { width: 100%; }
    .youtubeWrapper { flex-wrap: wrap; --secHeight : auto; margin-top: 0; }
    .youtubeWrapper .viewSeciton, .youtubeWrapper .listSection { width: 100%; }
    .youtubeWrapper .listSection { margin-top: 1rem; }
    .youtubeWrapper .swiper-slide { height: 300px; overflow-y: auto; }
    .youtubeWrapper .swiper-slide .swiper-item { height: auto; align-items: center; }
    .youtubeWrapper .swiper-slide .swiper-item .item-thumb { width: 25%; }
    .youtubeWrapper .swiper-slide .swiper-item .item-info { width: 70%; }
}
@media(max-width:500px){
    .youtubeWrapper .swiper-slide { height: 200px; }
    .youtubeWrapper .swiper-slide .swiper-item .item-thumb { width: 40%; }
    .youtubeWrapper .swiper-slide .swiper-item .item-info { width: 55%; }
}