@charset "utf-8";

/*
 * File       : popup-strap.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.1
 *
 * SUMMARY:
 * 01) STRAP POPUP
 * 01) RWD
 */



/* **************************************** *
 * STRAP POPUP
 * **************************************** */
.jt-popup--strap { position: relative; width: 100%; height: 50rem; padding: 0; font-size: 0; background-color: #191919; overflow: hidden; z-index: 2; }
.jt-popup__inner { width: 100%; height: 100%; }

.jt-popup__standard { max-width: 1500rem; height: 100%; margin: 0 auto; position: relative; }

.jt-popup__item { display: block; }

.jt-popup__link { display: block; height: 100%; }
.jt-popup__content { display: block; width: 100%; text-align: center; }
.jt-popup__typo { display: block; height: 100%; font-size: 14rem; font-weight: 400; line-height: 49rem; letter-spacing: -0.01em; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.jt-popup__close { display: block; width: 30rem; height: 30rem; position: absolute; top: 10rem; right: 25rem; z-index: 2; cursor: pointer; transition: transform .6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.jt-popup__close svg { display: block; width: 20rem; height: auto; margin: 5rem auto; }
.jt-popup__close svg path { stroke: #fff; }
html.desktop .jt-popup__close:hover { transform: rotate(180deg); }

html.ios .jt-popup__typo { line-height: 50rem; }

/* Single */
.jt-popup:not(.jt-popup--slideshow) .jt-popup__link { transition: opacity .3s; }
html.desktop .jt-popup:not(.jt-popup--slideshow) .jt-popup__link:hover { opacity: 0.8; }

/* Multiple */
.jt-popup--strap.jt-popup--slideshow { background: transparent; }
.jt-popup--slideshow .swiper-container { height: 100%; }

.jt-popup__control { display: block; width: auto; height: 18rem; position: absolute; top: 50%; right: 100rem; margin-right: 0; margin-top: -9rem; z-index: 2; }
.jt-popup__control .swiper-pagination { display: inline-block; vertical-align: middle; position: relative; }
.jt-popup__control .swiper-pagination-bullet { width: 8rem; height: 8rem; margin: 0 8rem; background: transparent; border: 1rem solid #fff; opacity: 1; }
.jt-popup__control .swiper-pagination-bullet-active { background: #fff; }
.jt-popup__control .swiper-pagination-bullet:before,
.jt-popup__control .swiper-pagination-bullet:after { display: none; }

.jt-popup__control .jt-popup__playing { display: inline-block; vertical-align: middle; width: 18rem; height: 18rem; margin-left: 8rem; position: relative; }
.jt-popup__control .jt-popup__playing-btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: transparent; border: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s; }
.jt-popup__control .jt-popup__playing-btn svg { display: block; width: 8rem; height: auto; margin: 5rem auto; }
.jt-popup__control .jt-popup__playing-btn svg path { fill: #fff; }
.jt-popup__control .jt-popup__playing.jt-popup__playing--play .jt-popup__playing-btn:nth-child(2) { opacity: 1; visibility: visible; }
.jt-popup__control .jt-popup__playing.jt-popup__playing--pause .jt-popup__playing-btn:nth-child(1) { opacity: 1; visibility: visible; }

/* SHOW POPUP */
body.jt-popup--show #header { height: 124rem; }
body.jt-popup--show .header__inner { height: calc(100% - 50rem); }
body.jt-popup--show .main-container { padding-top: 205rem; }

body.jt-popup--show.home .main-container,
body.jt-popup--show.error404 .main-container,
body.jt-popup--show.page-template-support .main-container { padding-top: 0; }



/* **************************************** *
 * RWD
 * **************************************** */
@media (max-width: 1680px){

    .jt-popup__standard { max-width: inherit; margin: 0 80rem; }
    .jt-popup__content { padding: 0 100rem; }
    .jt-popup__control { right: 74rem; }

}

@media (max-width: 1480px){

    .jt-popup__standard { margin: 0 50rem; }
    .jt-popup__content { padding: 0 132rem; }
    .jt-popup__close { right: 44rem; }
    .jt-popup__control { right: 92rem; }

}

@media (max-width: 1023px){

    .jt-popup--strap { z-index: 651; }
    .jt-popup__standard { margin: 0 40rem; }
    .jt-popup__close { right: 33rem; }
    .jt-popup__close svg { width: 18rem; margin: 6rem auto; }
    .jt-popup__control { right: 84rem; }
    .jt-popup__control .swiper-pagination-bullet { margin: 0 7rem; }
    .jt-popup__control .jt-popup__playing { margin-left: 5rem; }

    /* SHOW POPUP */
    body.jt-popup--show .main-container { padding-top: 190rem; }
    
    body.jt-popup--show #small-menu-btn { top: 68rem; }
    body.jt-popup--show #small-menu-container { padding-top: 124rem; }
    body.jt-popup--show #small-menu-container:after { top: 123rem; }
    
}

@media (max-width: 860px){

    .jt-popup__standard { margin: 0 32rem; }
    .jt-popup__content { padding: 0 55rem; }
    .jt-popup__typo { line-height: 51rem; }
    .jt-popup__close { right: 25rem; }
    .jt-popup__control { display: none; }

    html.ios .jt-popup__typo { line-height: 52rem; }

}

@media (max-width: 540px){

    .jt-popup--strap { height: 46rem; }
    .jt-popup__standard { margin: 0 24rem; }
    .jt-popup__content { padding: 0 38rem 0 0; text-align: left; }
    .jt-popup__typo { font-size: 13rem; line-height: 46rem; }
    .jt-popup__close { top: 8rem; right: 17rem; }

    html.ios .jt-popup__typo { line-height: 49rem; }

    /* SHOW POPUP */
    body.jt-popup--show #header { height: 118rem; }
    body.jt-popup--show .header__inner { height: calc(100% - 46rem); }
    body.jt-popup--show .main-container { padding-top: 170rem; }

    body.jt-popup--show #small-menu-btn { top: 64rem; }
    body.jt-popup--show #small-menu-container { padding-top: 118rem; }
    body.jt-popup--show #small-menu-container:after { top: 117rem; }

}