/* 인트로 */
.intro-wrap{width:100%; height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.intro-wrap .video-wrap{width:65%;}
.intro-wrap .video-wrap video{width:100%;}
.intro-wrap a{display:inline-block; text-align:center; margin:16px 0 0;}
.intro-wrap a p{font-size:24px; font-weight:700; line-height:1; color:#333; margin:0;}
.intro-wrap a p small{display:block; font-size:16px; margin:8px 0 0;}
.intro-wrap a:hover{text-decoration:none;}
.intro-wrap a p:hover{color:#ff0073;}
       
@media all and (max-width:1280px){
.intro-wrap .video-wrap{width:92%;}
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
.intro-wrap .video-wrap{width:auto;}
.intro-wrap .video-wrap video{height:70vh}
.intro-wrap a{margin:10px 0 0;}
}



/* 메인 */
.wrap{width:100%; min-width:; max-width:2540px; height:; margin:0 auto; position:relative;}
/*
.wrap .grid{display:grid; grid-gap:4px; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); grid-auto-rows:0;}
.wrap .grid li.item{align-self:center; object-fit:cover; position:relative;}
.wrap .grid li.item .content{align-self:center; object-fit:cover;}
.wrap .grid li.item .content img{width:100%; align-self:center; object-fit:cover;}

@media (max-width:768px) {
.wrap .grid{grid-gap:2px; grid-template-columns:repeat(3, 1fr);}
}
*/
.wrap .grid{column-count:10; column-gap:4px;}
.wrap .grid li.item{break-inside:avoid; margin:0 0 4px; cursor:pointer;}
.wrap .grid li.item {}
.wrap .grid li.item img{width:100%; display:block; display:block;}
@media (max-width:2536px){
.wrap .grid{column-count:9;}
}
@media (max-width:2282px){
.wrap .grid{column-count:8;}
}
@media (max-width:2028px){
.wrap .grid{column-count:7;}
}
@media (max-width:1774px){
.wrap .grid{column-count:6;}
}
@media (max-width:1520px){
.wrap .grid{column-count:5;}
}
@media (max-width:1266px){
.wrap .grid{column-count:4;}
}
@media (max-width:1012px){
.wrap .grid{column-count:3;}
}
@media (max-width:768px) {
.wrap .grid{grid-gap:2px;}
.wrap .grid li.item{margin:0 0 2px;}
}


.wrap .contact{background:rgba(0,0,0,0.8); border-radius:8px; position:fixed; right:20px; bottom:20px; padding:16px;}
.wrap .contact h1{font-size:20px; font-weight:700; line-height:1; color:#ccc; margin:0 0 14px;}
.wrap .contact p{font-size:16px; font-weight:400; line-height:1; color:#fff;}
.wrap .contact p:hover{color:#ff0073;}
.wrap .contact p+p{margin:6px 0 0;}
@media (max-width:768px) {
.wrap .contact{padding:12px;}
.wrap .contact h1{font-size:17px; margin:0 0 10px;}
.wrap .contact p{font-size:13px;}
.wrap .contact p+p{margin:4px 0 0}
}


.wrap .modal-dialog{max-width:; max-height:90vh;}
.wrap .modal-dialog.modal-hor{max-width:1440px;}
.wrap .modal-dialog.modal-ver{max-width:720px;}
.wrap .modal-body{padding:0.35rem;}
.wrap .modal-dialog .modal-img{text-align: center;}
.wrap .modal-dialog .modal-img button{font-size:28px; font-weight:500; line-height:1; color:#fff; text-shadow:none; position:absolute; top:0; right:-36px; z-index:10; opacity:1;}
.wrap .modal-dialog .modal-img img{}
.modal-open .modal{padding-right:0!important;}

@media (max-width:1920px) {
.wrap .modal-dialog.modal-hor{max-width:1440px;}
.wrap .modal-dialog.modal-ver{max-width:640px;}
}
@media (max-width:768px) {
.wrap .modal-body{padding:0.15rem;}
.wrap .modal-dialog .modal-img button{top:-38px; right:0;}	
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
.wrap .modal-content{width:auto; margin:auto;}
.wrap .modal-body{height:320px;}
.wrap .modal-dialog .modal-img{height:100%;}
.wrap .modal-dialog .modal-img img{height:100%;}
}