@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



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

    /* BUTTON */
    .jt-btn__icon { gap: 6rem; }
    
    /* LAZYLOAD */
    .jt-lazyload--caption figcaption { padding: 34rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 60rem; height: 60rem; margin-top: -30rem; margin-left: -30rem; }

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 58rem; height: 58rem; margin-top: -29rem; }
    .swiper-navigation .swiper-button .jt-icon { width: 26rem; }
    .swiper-navigation .swiper-button-prev { left: -90rem; }
    .swiper-navigation .swiper-button-next { right: -90rem; }

    /* MEDIA POPUP */
    .jt-mdp__content > img { border-width: 10rem; }

    .jt-mdp__close { width: 38rem; height: 38rem; }
    .jt-mdp__close, html.win .jt-mdp__close { right: -60rem; }

    /* JT ACCORDION LIST */
    .jt-accordion__control { top: 25rem; }

}



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

    /* BUTTON */
    .jt-btn__icon { padding: 6rem 12rem; gap: 4rem; }
    .jt-btn__icon .jt-icon { width: 22rem; margin-right: -4rem; }
    .jt-btn__icon:after { width: calc(100% - 24rem); left: 12rem; bottom: 6rem; }

    /* LAZYLOAD */
    .jt-lazyload--caption figcaption { padding: 28rem; }

    /* SHARE */
    .jt-share__tooltip { translate: 6rem -50%; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 56rem; height: 56rem; margin-top: -28rem; margin-left: -28rem; }

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 54rem; height: 54rem; margin-top: -27rem; }
    .swiper-navigation .swiper-button .jt-icon { width: 21rem; }
    .swiper-navigation .swiper-button-prev { left: -74rem; }
    .swiper-navigation .swiper-button-next { right: -74rem; }

    /* MEDIA POPUP */
    .jt-mdp__content { max-width: 420rem; }
    .jt-mdp__content > img { border-width: 8rem; }

    /* JT ACCORDION LIST */
    .jt-accordion__control { top: 24rem; }

}



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

    /* BUTTON */
    .jt-btn__icon .jt-icon { width: 20rem; margin-right: -3rem; }

    /* LAZYLOAD */
    .jt-lazyload--caption figcaption { padding: 18rem; }
    .jt-lazyload--caption figcaption br { display: none; }

    /* VIDEO */
    .jt-embed-video__inner { padding-top: 56.25%; }
    .jt-embed-video__overlay-btn { width: 50rem; height: 50rem; margin-top: -25rem; margin-left: -25rem; }
    
    /* SWIPER */
    .swiper-navigation .swiper-button { width: 48rem; height: 48rem; margin-top: -24rem; }
    .swiper-navigation .swiper-button .jt-icon { width: 19rem; }
    .swiper-navigation .swiper-button-prev { left: 24rem; }
    .swiper-navigation .swiper-button-next { right: 24rem; }

    /* MEDIA POPUP */
    .jt-mdp__content { max-width: 360rem; }

    .jt-mdp__close { top: -8rem; }
    .jt-mdp__close, html.win .jt-mdp__close { right: -46rem; }
    .jt-mdp__close > i { width: 32rem; }

}



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

    /* BUTTON */
    .jt-btn__icon { gap: 2rem; }
    .jt-btn__icon .jt-icon { width: 17rem; }

    html.ios .jt-btn__icon .jt-icon {
        position: relative;
        top: 1rem;
    }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 44rem; height: 44rem; margin-top: -22rem; margin-left: -22rem; }

    /* SWIPER */
    .swiper-navigation { display: none; }

    .swiper-control { display: block; position: absolute; left: 50%; font-size: 0; translate: -50% 0; z-index: 2; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets { display: inline-block; vertical-align: middle; width: auto; position: relative; bottom: auto; left: auto; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 18rem; height: 18rem; margin: 0 4rem; position: relative; background: transparent; opacity: 1; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; width: 8rem; height: 8rem; margin-top: -4rem; margin-left: -4rem; position: absolute; top: 50%; left: 50%; border: 2rem solid var(--color-primary); border-radius: 50%; transition: background-color .3s; box-sizing: border-box; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--color-primary); }

    /* MEDIA POPUP */
    .jt-mdp__content { max-width: 80%; }
    .jt-mdp__content > img { border-width: 6rem; }

    .jt-mdp__close { position: fixed; top: 10rem; }
    .jt-mdp__close, html.win .jt-mdp__close { right: 10rem; }
    .jt-mdp__close > i { width: 30rem; }

    /* JT ACCORDION LIST */
    .jt-accordion__head { padding-right: 52rem; }
    .jt-accordion__control { top: 23rem; right: 10rem; }

}