@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@charset 'utf-8';
/*
 * name:gallery.css
 * author:sovanda nulo
*/

/* gallery
------------------------------------------------ */

/* hide show pc and sp */
.pc { display: block !important; }
.sp { display: none !important; }

    @media only screen and (max-width: 768px) {
        .pc { display: none !important; }
        .sp { display: block !important; }
    }

#gallery .title-08 .text-01 { margin: 0; margin-right: 5px; }
#gallery .title-08 .text-02 { font-size: 30px; color: #fff; }
.gallery__lists { position: relative; display: flex; flex-wrap: wrap; }
.gallery__lists li { display: block; position: relative; }
.gallery__lists li a { display: block; overflow: hidden; border-radius: 5px; }
.gallery__lists li img { display: block; overflow: hidden; vertical-align: top; transition: linear .2s; }

.gallery-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(21,18,111,0.85); justify-content: center; align-items: center; z-index: 9999; }
.gallery-popup .close-btn { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; color: #fff; cursor: pointer; transition: linear .2s; z-index: 10; }
.gallery-popup .close-btn:before, 
.gallery-popup .close-btn:after { content: ' '; position: absolute; left: 23px; height: 50px; width: 2px; background-color: #FAFAFA; border-radius: 1em; }
.gallery-popup .close-btn:before { transform: rotate(45deg); }
.gallery-popup .close-btn:after { transform: rotate(-45deg); }
.gallery-popup .f-btn { display: block; width: 70px; height: 70px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; border: 2px solid #999999; box-sizing: border-box; transition: linear .2s; }
.gallery-popup .f-btn:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid white; }
.gallery-popup .prev { left: -140px; }
.gallery-popup .prev:after { border: none; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 13px solid white; }
.gallery-popup .next { right: -140px; }
.gallery-popup--frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 680px; padding: 30px 0; margin: 0 auto; box-sizing: border-box; } 
.gallery-popup .f-img { display: block; width: 100%; }
.gallery-popup .f-img img { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 5px; }

    @media only screen and (min-width: 767px) {
        .gallery__lists li { width: 23.63%; margin-right: 1.82%; }
        .gallery__lists li:nth-child(4n) { margin-right: 0; }
        .gallery__lists li:nth-child(n+5) { margin-top: 1.82%; }
        .gallery__lists li a:hover img { transform: scale(1.1); }

        .gallery-popup .close-btn:hover { opacity: .8; }
        .gallery-popup .f-btn:hover { background: #fff; border-color: #fff; }
        .gallery-popup .f-btn:hover:after { border-left-color: #15126F; }
        .gallery-popup .prev:hover:after { border-right-color: #15126F; }
    }

    @media only screen and (max-width: 767px) {
        .gallery__lists li { width: 48.35%; margin-right: 3.3%; }
        .gallery__lists li:nth-child(2n) { margin-right: 0; }
        .gallery__lists li:nth-child(n+3) { margin-top: 3.3%; }

        .gallery-popup--frame { padding: 30px 20px 110px; }
        .gallery-popup .f-btn { width: 50px; height: 50px; top: auto; transform: none; bottom: 30px; }
        .gallery-popup .f-btn:after { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid white; }
        .gallery-popup .prev { left: 20px; }
        .gallery-popup .prev:after { border: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid white; }
        .gallery-popup .next { right: 20px; }
        .gallery-popup .close-btn { right: 13px; width: 40px; height: 40px; }
        .gallery-popup .close-btn:before, 
        .gallery-popup .close-btn:after { left: 18px; height: 40px; }

    }