/* 와이드 pc  */

.videoBox{width:100%;height:100%; overflow:hidden; position:absolute}
.videoBox>img{object-fit: cover;}

#imgBG{
	position:fixed; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   height:auto;
   min-height:100%; /*동영상 높이를 꽉차게*/
  transform:translateX(-50%) translateY(-50%);
   z-index:-100;
}

/* Common */
#content{width:100%; height: 100%; margin:0; background:rgba(0,0,0,.9); 
  position: relative; font-family: 'Noto Sans', sans-serif; padding: 20px 0;}
#content h2{position: absolute; margin: 0 auto; top: -500px; width: 100%; text-align: center; font-size: 4em; color: #fff; font-family: 'Orbitron', sans-serif;}
#content .subtitle{font-size: 1.8rem; text-align: center; margin-bottom: 100px; color: #fff; padding: 0 150px;}
#content p{font-size: 1.2rem;}
#content section .top_img_box{display: flex; justify-content: center; align-items: center; gap: 10%; margin: 150px auto 30px;}
#content section .top_img_box img{width: 20%;}


#content section .wrapper{
    padding: 0 150px;
    width: 100%;
    margin: 3em auto;
}

#content section .wrapper .masonry {
    margin: 1.5em 0;
    padding: 0;
    column-count: 5;
    column-gap: 1.5em;
    font-size: .85em;
}

#content section .wrapper .masonry li {
    display: inline-block;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .2);
}
#content section .wrapper .masonry li img{width:100%;}
#content section .wrapper .masonry li span{display: block; line-height: 1.5em;}



/* 일반 pc */
@media screen and (max-width:1280px) {
	#content section .wrapper .masonry {
        column-count: 4;
    }
  #content section .wrapper{padding: 0 80px;}
}

/* 태블릿 */
@media screen and (max-width:1024px) {
	#headerArea .menuOpen{ display:block; }
  #headerArea #gnb{
    float:none;
    width:100%;
    background: rgba(0, 0, 0, .9);
    display:none;
    position:absolute;
    top:0; left:0;
    padding-top: 80px;
    box-sizing: border-box;}
  #headerArea #gnb ul{display: flex; flex-direction: column;}
  #headerArea #gnb ul li{float:none; margin:0; text-align:center; margin-right: 0;}
  #headerArea #gnb li a{display: block; padding: 20px 0;font-size: 2em;}
  #headerArea #gnb ul li a{font-size: 1.3rem; font-weight: 600; font-family: 'Orbitron', sans-serif;}

  #content .subtitle{padding: 0 30px;}
  #content section .wrapper{padding: 0 30px;}
  #content .subtitle{font-size: 1.5rem;}
  #content section .wrapper .masonry {
        column-count: 3;
    }
  
  #content section .wrapper .masonry li:nth-of-type(24),
  #content section .wrapper .masonry li:nth-of-type(25),
  #content section .wrapper .masonry li:nth-of-type(26),
  #content section .wrapper .masonry li:nth-of-type(27),
  #content section .wrapper .masonry li:nth-of-type(28){display: none;}
  
  

  
}

/* 소형 테블릿 */
@media screen and (max-width:768px) {
  #content section .wrapper .masonry {
        column-count: 2;
    }
  #content .subtitle{font-size: 1.4rem;}

  #content section .wrapper .masonry li:nth-of-type(21),
  #content section .wrapper .masonry li:nth-of-type(22),
  #content section .wrapper .masonry li:nth-of-type(23){display: none;}
}

/* 모바일 */
@media screen and (max-width:640px) {
  #content section .wrapper .masonry {
        column-count: 1;
    }
    .wrapper { min-width:320px; }
  #content section .wrapper{padding: 0 10px;}

  #content .subtitle{font-size: 1.2rem; padding: 0 10px;}

  #content section .wrapper .masonry li:nth-of-type(14),
  #content section .wrapper .masonry li:nth-of-type(15),
  #content section .wrapper .masonry li:nth-of-type(16),
  #content section .wrapper .masonry li:nth-of-type(17),
  #content section .wrapper .masonry li:nth-of-type(18),
  #content section .wrapper .masonry li:nth-of-type(19),
  #content section .wrapper .masonry li:nth-of-type(20){display: none;}
}