@charset "UTF-8";

/* 가운데영역 */
.container{max-width: 1500px; padding: 0 20px; margin: 0 auto;}

#youtubeBox{height: 100vh;}
#youtubeBox .container{height: 100%;  display: flex; align-items: center; justify-content: center; }
#youtubeBox .youtubeList{display: flex; width: 100%; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap:0 4%;}
#youtubeBox .youtubeList li{display: block; width: 47.9%; }
#youtubeBox .youtubeList li a{display: block;}
#youtubeBox .youtubeList li a:hover img{transform: scale(1.15);}
#youtubeBox .youtubeList li a .box{position: relative; margin-bottom: 30px; height: 0; padding-top: 56.25%; border-radius: 20px; overflow: hidden; box-shadow: 10px 10px 15px rgba(0,0,0,.3);}
#youtubeBox .youtubeList li a .box::after{content: ''; position: absolute; top:18%; left:0; right:0; bottom: 0; z-index: 99999;}
#youtubeBox .youtubeList li a .box iframe{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; transition: all 1s;}
#youtubeBox .youtubeList li a .textBox .title{position: relative; margin-bottom: 15px; font-size: 25px; color: #333; font-weight: 700;}
#youtubeBox .youtubeList li a .textBox .title span{display: block; margin-top: 17px;}
#youtubeBox .youtubeList li a .text{padding: 15px 20px; font-size: 20px; font-weight: 500; border-radius: 10px; background-color: #fbfbfb;}

@media (max-width: 1199px){

  #youtubeBox .youtubeList li a .textBox .title{font-size: 22px;}

  #youtubeBox .youtubeList li a .text{font-size: 18px;}
  #youtubeBox .youtubeList li a .box::after{top: 20%;}

}

@media (max-width: 1024px){

  #youtubeBox{height: auto; padding: 100px 0;}
  #youtubeBox .youtubeList li{margin-bottom: 70px; width: 100%;}
  #youtubeBox .youtubeList li a .box::after{top: 13%;}

}

@media (max-width: 767px){

  #youtubeBox .youtubeList li a:last-child{margin-bottom: 0;}
  #youtubeBox .youtubeList li a .box{margin-bottom: 25px; border-radius: 10px;  box-shadow: 5px 5px 10px rgba(0,0,0,.3);}
  #youtubeBox .youtubeList li a .textBox .title{font-size: 20px;}
  #youtubeBox .youtubeList li a .text{font-size: 16px;}
  #youtubeBox .youtubeList li a .box::after{top: 20%;}

}

@media (max-width: 414px){

  #youtubeBox .youtubeList li a .box::after{top: 29%;}

}