/* 갤러리  */
.gallery .wrap{ padding: 180px 0; }
.gallery .tab_wrap{ display: flex; gap: 10px; justify-content: center; align-items: center; }
.gallery .tab_wrap .button{ width: 157px; border: 1px solid #000; text-align: center; cursor: pointer; padding: 16px 0;transition: background 0.3s ease-in, border 0.3s ease-in, color 0.3s ease-in; }
.gallery .tab_wrap .button.active{ background: #ed558b; border: 1px solid #ed558b; color: #fff; }
.gallery .tab_wrap .button a{ font-size: 18px; }

.gallery .tab_wrap .button:hover{ background: #ed558b; color: #fff; border: 1px solid #ed558b; }

.gallery .tab_cont{ max-width: 1440px; margin: 80px auto 115px; }
.gallery .tab_cont ul{ width: 100%; display: flex; flex-wrap: wrap; }
.gallery .tab_cont ul li .img_area{ border-radius: 15px; overflow: hidden; position: relative; }
.gallery .tab_cont ul li .img_area img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }


.gallery.youtube .tab_cont ul{ gap: 30px; }
.gallery.youtube .tab_cont ul li{ position: relative; width: calc((100% - 60px) / 3); overflow: hidden; }
.gallery.youtube .tab_cont ul li .img_area{ max-width: 460px; }
.gallery.youtube .tab_cont ul li .img_area::after{ content: ''; display: block; padding-bottom: calc(260 /460*100% ); }
.gallery.youtube .tab_cont ul li .img_area::before{
    content: ''; background: linear-gradient(180deg,rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.26) 60%, rgba(0,0,0,1) );
    position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transform: translateY(30px); transition: all 0.4s ease;
}
.gallery.youtube .tab_cont ul li .txt_area{ 
    position: absolute; bottom: 10%; left: 5%; 
    font-size: 18px; color: #fff; z-index: 3;
    opacity: 0; transform: translateY(30px); transition: all 0.4s ease 0.1s;
}
.gallery.youtube .tab_cont ul li:hover .img_area::before{ opacity: 1; transform: translateY(0); }
.gallery.youtube .tab_cont ul li:hover .txt_area{ opacity: 1; transform: translateY(0); }


.gallery.insta .tab_cont ul{ gap: 30px; }
.gallery.insta .tab_cont ul li{ width: calc((100% - 90px) / 4); }
.gallery.insta .tab_cont ul li .img_area{ width: 337px; }
.gallery.insta .tab_cont ul li .img_area img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease-in-out; }
.gallery.insta .tab_cont ul li .img_area::after{ content: ''; display: block; padding-bottom: calc(420 / 337 * 100%); }

.gallery.insta .tab_cont ul li .img_area:hover img{ transform: scale(1.05); }



@media screen and (max-width: 1024px ){
    .gallery.youtube .tab_cont ul li{ width: calc((100% - 30px) / 2); }

    .gallery.insta .tab_cont ul li{ width: calc((100% - 60px) / 3); }

}
@media screen and (max-width: 820px){
    .gallery.insta .tab_cont ul li{ width: calc((100% - 30px) / 2); }

    .gallery .tab_wrap .button:hover{ background: inherit; color: inherit; border: inherit; }
    .gallery .tab_wrap .button{ width: 157px; border: 1px solid #000; text-align: center; cursor: pointer; padding: 16px 0;transition: none; }


}
@media screen and (max-width: 500px){
    .gallery .tab_wrap .button{ width: 145px; }

    .gallery.youtube .tab_cont ul{ gap: 20px; justify-content: center; }
    .gallery.youtube .tab_cont ul li{ width: calc((100% - 20px) / 2); }

    
   /* .gallery.youtube .tab_cont ul li{ width: 100%; } */
    .gallery.insta .tab_cont ul li{ width: 100%; }
    .gallery.insta .tab_cont ul li a{ display: flex; justify-content: center; }
    

}

@media screen and (max-width: 360px){
    .gallery.youtube .tab_cont ul li{ width: 100%; }
    .gallery.insta .tab_cont ul li{ width: 100%; }
}