@charset "utf-8";
#Youtube { background-color: var(--sub2color); }
#Youtube .video_wrap {height: 435px;  overflow: hidden;    position: relative; display: flex;  justify-content: space-between;  align-items: center;}
#Youtube .video_wrap .tab-content2.current{visibility:visible;position:relative;display: flex; align-items: center; justify-content: center;}
#Youtube .video_wrap .tab-content2{visibility:hidden;position:absolute;max-height:492px;cursor: pointer;}
#Youtube .video{float:left;width:55%; overflow: hidden; height: 100%; aspect-ratio: 16/9;  position: relative;}
#Youtube .video iframe{width:60%;min-height:435px}
#Youtube .thum_tab{float:Right;width:42.5%;}
#Youtube .thum_tab ul{overflow-y:scroll; height: 460px;}
#Youtube .thum_tab li{padding:.75rem 0;;overflow:hidden;cursor:pointer; height: 33.333%; width: 95%;}
#Youtube .thum_tab li:last-child{border:none;}
#Youtube .thum_tab img{margin:0 10px 0 0;}
#Youtube .thum_tab .view{display:Block;text-align:center;background:#b2b2b2;color:#FFF;padding:8.5px}
#Youtube .thum_tab .tab-link p {padding: .5rem 0 .5rem 1.5rem; }
#Youtube .thum_tab .tab-link p span {display: block; position: relative;}
@media(max-width: 1420px){
    #Youtube .video_wrap{flex-direction: column; height: auto;}
    #Youtube .video iframe{width: 50%;}
    #Youtube .video{width: 100%;margin-bottom: 40px; aspect-ratio: auto; float: none; }
    #Youtube .video_wrap .tab-content2 { max-height: none; }
    #Youtube .thum_tab{float: none; width: 100%;}
}
@media(max-width: 600px){
    #Youtube .thum_tab ul{height: 400px;}
    #Youtube .video iframe{min-height: 320px;}
}
@media(max-width: 500px){
    #Youtube .thum_tab ul{height: 300px;}
    #Youtube .video iframe{min-height: 280px;}
}
@media(max-width: 450px){
    #Youtube .thum_tab ul{height: 250px;}
    #Youtube .video iframe{min-height: 200px;}
}

.mediaPopupWrap { display: none; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 9999; }
.mediaPopupWrap.on { display: flex; align-items: center; justify-content: center; }
.mediaPopupCover { position: absolute; width: inherit; height: inherit; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.mediaPopup { position: relative; width: 50%; height: auto; aspect-ratio: 16/9; z-index: 60; }
.mediaPopup .mediaClose { position: absolute; top: -2.5%; right: -7.5%; cursor: pointer; }
.mediaPopup iframe { width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; }
@media(max-width:1240px){
  .mediaPopup { width: 90%; }
  .mediaPopup .mediaClose { top: -25%; right: 0; }
}