@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1680px
 * 1200px
 * 1023px
 * 860px
 * 540px
 */



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

    /* POPUP */
    .jt-popup__slider .swiper-button-prev { left: 30rem; }
    .jt-popup__slider .swiper-button-next { right: 30rem; }

}



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

    /* CATEGORY */
    .jt-category { margin-top: 22rem; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 56rem; }
    .jt-loadmore__btn .jt-icon { width: 36rem; height: 36rem; }

    /* SINGLE */
    .jt-single__detail { margin-bottom: 112rem; }
    .jt-single__header { margin-bottom: 70rem; }
    .jt-single__meta { margin-top: 22rem; }
    .jt-single__desc { margin-top: 22rem; }
    .jt-single__share { margin-top: 44rem; }
    .jt-single__content { margin-bottom: 112rem; }
    .jt-single__control { margin: 44rem 0 72rem; }

    /* CARD LIST */
    .jt-card { --item-gap: 14rem; }
    .jt-card__navigator { gap: 22rem; }
    .jt-card__navigator .swiper-button { width: 48rem; padding: 8rem 0; }

    /* GRID LIST */
    .jt-grid { gap: 28rem; }
    .jt-grid__sticky { max-width: calc(50% - 14rem); }
    .jt-grid__container { max-width: calc(50% - 14rem); }
    .jt-grid__list { gap: 32rem 28rem; }

    .jt-grid__sticky .jt-grid__content { padding: 0 36rem 46rem; }

    /* COLUMN LIST */
    .jt-column__list { --item-gap: 14rem; }
    .jt-column__item { width: 434.66rem; }
    .jt-column__content { padding: 0 36rem 46rem; }

    /* SCROLLER SLIDER */
    .jt-scroller { --item-gap: 28rem; --button-width: 48rem; --navi-gap: 22rem; }
    .jt-scroller__slider .swiper-navigation { margin-top: 72rem; }

    /* THUMB LIST */
    .jt-thumb-list { gap: 56rem 28rem; }

    /* BANNER */
    .jt-banner__close { top: 16rem; right: 16rem; }

    .jt-banner--top .jt-banner__sound { right: 16rem; bottom: 12rem; }

    .jt-banner--cover .jt-banner__content { padding: 0 36rem 72rem; }
    .jt-banner--cover .jt-banner__info { margin-top: 14rem; }
    .jt-banner--cover .jt-banner__sound { bottom: 20rem; right: 20rem; }
    .jt-banner--cover .jt-banner__sound .jt-icon { width: 34rem; }

    /* POPUP */
    .jt-popup__slider .swiper-button { width: 60rem; height: 60rem; }
    .jt-popup__close { top: 40rem; right: 40rem; }

    /* SWIPER */
    .swiper-sound { bottom: 20rem; right: 20rem; }
    .swiper-sound .jt-icon { width: 34rem; }

    /* NEWSLETTER */
    .jt-newsletter__close { top: 18rem; right: 18rem; }
    
    /* JT CONFIRM */
    .jt-confirm__container { gap: 32rem; max-width: 440rem; padding: 60rem; }

}



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

    /* FORM */
    .jt-form { gap: 56rem; }
    .jt-form__entry { margin-top: 40rem; }

    /* CATEGORY */
    .jt-category { margin-top: 20rem; }
    .jt-category__list { gap: 10rem; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 48rem; }
    .jt-loadmore__btn .jt-icon { width: 32rem; height: 32rem; }

    /* SINGLE */
    .jt-single__detail { margin-bottom: 100rem; }
    .jt-single__header { margin-bottom: 60rem; }
    .jt-single__meta { margin-top: 20rem; }
    .jt-single__desc { margin-top: 20rem; }
    .jt-single__share { margin-top: 40rem; }
    .jt-single__content { margin-bottom: 100rem; }
    .jt-single__control { margin: 40rem 0 64rem; }

    /* CARD LIST */
    .jt-card { --item-gap: 12rem; }
    .jt-card__thumb .jt-icon { bottom: 16rem; right: 16rem; }
    .jt-card__navigator { gap: 20rem; }
    .jt-card__navigator .swiper-button { width: 44rem; }

    /* GRID LIST */
    .jt-grid { gap: 24rem; }
    .jt-grid__sticky { max-width: calc(50% - 12rem); }
    .jt-grid__container { max-width: calc(50% - 12rem); }
    .jt-grid__list { gap: 32rem 24rem; }
    .jt-grid__thumb .jt-icon { bottom: 16rem; right: 16rem; }

    .jt-grid__sticky .jt-grid__content { padding: 0 32rem 40rem; }
    .jt-grid__sticky .jt-grid__thumb .jt-icon { width: 18rem; }

    /* COLUMN LIST */
    .jt-column--secondary, .jt-column:has(.jt-column--secondary) { gap: 48rem; }
    .jt-column__list { --item-gap: 12rem; }
    .jt-column__item { width: 357.33rem; }
    .jt-column__thumb .jt-icon { bottom: 16rem; right: 16rem; }
    .jt-column__content { padding: 0 32rem 40rem; }

    /* SCROLLER SLIDER */
    .jt-scroller { --item-gap: 24rem; --button-width: 44rem; --navi-gap: 20rem; }
    .jt-scroller__head { padding-left: 40rem; }
    .jt-scroller__title { margin-bottom: 32rem; }
    .jt-scroller__body { width: calc(100% - 300rem); padding-right: 40rem; }
    .jt-scroller__slider .swiper-navigation { margin-top: 64rem; }

    /* THUMB LIST */
    .jt-thumb-list { gap: 48rem 24rem; }
    .jt-thumb-list__thumb .jt-icon { bottom: 16rem; right: 16rem; }

    /* BANNER */
    .jt-banner__close { top: 12rem; right: 12rem; }

    .jt-banner--top .jt-banner__sound { right: 12rem; bottom: 8rem; }

    .jt-banner--cover .jt-banner__content { padding: 0 32rem 64rem; }
    .jt-banner--cover .jt-banner__info { margin-top: 12rem; }
    .jt-banner--cover .jt-banner__sound { bottom: 18rem; right: 18rem; }
    .jt-banner--cover .jt-banner__sound .jt-icon { width: 32rem; height: 32rem; }

    /* POPUP */
    .jt-popup__slider .swiper-button { width: 56rem; height: 56rem; }
    .jt-popup__close { top: 30rem; right: 30rem; }

    /* SHARE */
    .jt-share__tooltip { padding: 14rem 36rem; bottom: 36rem; }

    /* SWIPER */
    .swiper-sound { bottom: 18rem; right: 18rem; }
    .swiper-sound .jt-icon { width: 32rem; }

    /* NEWSLETTER */
    .jt-newsletter__inner { padding: 36rem 0; }
    .jt-newsletter__close { top: 10rem; right: 10rem; }

    /* ACCORDION */
    .jt-accordion__content-inner { padding: 32rem; }
    
    /* JT CONFIRM */
    .jt-confirm__container { gap: 28rem; max-width: 420rem; min-height: 320rem; border-radius: 36rem; padding: 40rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 52rem; height: 52rem; }

    /* CUSTOM */
    .jt-cursor { width: 54rem; height: 54rem; }
    .jt-cursor__circle .jt-icon { width: 16rem; }
    .jt-cursor__circle .jt-icon:has(.drag) { width: 34rem; }

}



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

    /* FORM */
    .jt-form__entry { margin-top: 36rem; }

    /* CATEGORY */
    .jt-category { margin-top: 18rem; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 40rem; }
    .jt-loadmore__btn .jt-icon { width: 28rem; height: 28rem; }

    /* SINGLE */
    .jt-single__detail { margin-bottom: 92rem; }
    .jt-single__header { margin-bottom: 54rem; }
    .jt-single__meta { margin-top: 18rem; }
    .jt-single__desc { margin-top: 18rem; }
    .jt-single__share { margin-top: 36rem; }
    .jt-single__content { margin-bottom: 92rem; }
    .jt-single__control { margin: 36rem 0 60rem; }

    /* CARD LIST */
    .jt-card { --item-gap: 10rem; }
    .jt-card__navigator { gap: 18rem; }
    .jt-card__navigator .swiper-button { width: 40rem; }

    /* GRID LIST */
    .jt-grid { gap: 20rem; }
    .jt-grid__sticky { max-width: calc(50% - 10rem); }
    .jt-grid__container { max-width: calc(50% - 10rem); }
    .jt-grid__list { gap: 32rem 20rem; }

    .jt-grid__sticky .jt-grid__content { padding: 0 28rem 36rem; }

    /* COLUMN LIST */
    .jt-column__list { --item-gap: 10rem; }
    .jt-column__item { width: 301rem; }
    .jt-column__content { padding: 0 28rem 36rem; }

    /* SCROLLER SLIDER */
    .jt-scroller { --item-gap: 20rem; --button-width: 40rem; --navi-gap: 18rem; }
    .jt-scroller__body { width: calc(100% - 260rem); }
    .jt-scroller__slider .swiper-navigation { margin-top: 60rem; }

    /* THUMB LIST */
    .jt-thumb-list { gap: 40rem 20rem; }

    /* BANNER */
    .jt-banner__close { top: 8rem; right: 8rem; }

    .jt-banner--top .jt-banner__sound { right: 8rem; }

    .jt-banner--cover .jt-banner__content { padding: 0 28rem 60rem; }
    .jt-banner--cover .jt-banner__sound { bottom: 16rem; right: 16rem; }
    .jt-banner--cover .jt-banner__sound .jt-icon { width: 30rem; height: 30rem; }

    /* POPUP */
    .jt-popup__close { right: 6rem; top: 6rem; }
    .jt-popup__close span { position: absolute; overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }

    /* SWIPER */
    .swiper-sound { bottom: 16rem; right: 16rem; }
    .swiper-sound .jt-icon { width: 30rem; }
    
    /* JT CONFIRM */
    .jt-confirm__container { max-width: 400rem; min-height: 260rem; }

    /* CUSTOM */
    .jt-cursor { width: 48rem; height: 48rem; }
    .jt-cursor__circle .jt-icon:has(.drag) { width: 30rem; }

}



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

    /* BUTTON */
    .jt-btn__basic { padding: 7rem 18rem; gap: 6rem; }
    html.mac .jt-btn__basic { padding-top: 8rem; padding-bottom: 6rem; }

    /* FORM */
    .jt-form { gap: 48rem; }
    .jt-form__entry { margin-top: 32rem; } 
    .jt-form__label + .jt-form__data { margin-top: 6rem; }
    .jt-form__label + .jt-form__data:has(textarea.jt-form__field) { margin-top: 8rem; }
    .jt-form__field { height: 38rem; }
    textarea.jt-form__field { height: 232rem; }
    .jt-form__explain { margin-top: 6rem; }
    .jt-form__valid { margin-top: 6rem; }

    html.mobile .jt-choices__wrap > select { height: 38rem; }

    /* CATEGORY */
    .jt-category { margin-top: 16rem; opacity: 0; visibility: hidden; }
    .jt-category__list { gap: 0; }
    .jt-category__item { margin-right: 8rem; }
    .jt-category__item:last-child { margin-right: 0; }
    .jt-category.swiper-initialized .jt-category__list { justify-content: flex-start; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 36rem; }
    .jt-loadmore__btn .jt-icon { width: 24rem; height: 24rem; }

    /* SINGLE */
    .jt-single__detail { margin-bottom: 80rem; }
    .jt-single__header { margin-bottom: 48rem; }
    .jt-single__header-inner { height: 640rem; }
    .jt-single__meta { margin-top: 16rem; gap: 6rem; }
    .jt-single__desc { margin-top: 16rem; }
    .jt-single__content { margin-bottom: 80rem; }
    .jt-single__control { margin: 36rem 0 48rem; }
    .jt-single__detail-tag > a { padding: 6rem 12rem; }
    .jt-single__divider-logo i { width: 160rem; }

    /* CARD LIST */
    .jt-card { --item-gap: 8rem; }
    .jt-card__info { gap: 6rem; }
    .jt-card__navigator { gap: 16rem; }
    .jt-card__navigator .swiper-button { width: 36rem; }
    .jt-card__thumb .jt-icon { width: 12rem; right: 12rem; bottom: 12rem; }

    .jt-card--secondary { --item-count: 4; }

    /* GRID LIST */
    .jt-grid { gap: 16rem; }
    .jt-grid__sticky { max-width: calc(50% - 8rem); }
    .jt-grid__container { max-width: calc(50% - 8rem); }
    .jt-grid__list { gap: 32rem 16rem; }
    .jt-grid__thumb .jt-icon { width: 12rem; right: 12rem; bottom: 12rem; }

    .jt-grid__sticky .jt-grid__content { padding: 0 24rem 32rem; }
    .jt-grid__sticky .jt-grid__thumb .jt-icon { width: 14rem; right: 14rem; bottom: 14rem; }

    /* COLUMN LIST */
    .jt-column__list { --item-gap: 8rem; }
    .jt-column__item { width: 229.33rem; }
    .jt-column__content { padding: 0 24rem 32rem; }
    .jt-column__info { gap: 6rem; }
    .jt-column__thumb .jt-icon { width: 12rem; right: 12rem; bottom: 12rem; }

    /* SCROLLER SLIDER */
    .jt-scroller { --item-gap: 16rem; flex-direction: column; }
    .jt-scroller__title br { display: none; }
    .jt-scroller__title { font-size: var(--font-size-secondary-02); line-height: var(--font-lineheight-secondary-02); }
    .jt-scroller__head .jt-btn__basic { display: none; }
    .jt-scroller__body { width: 100%; padding-left: 40rem; padding-right: 24rem; }
    .jt-scroller__slider .swiper-navigation { display: none; }
    .jt-scroller__footer { display: block; margin-top: 32rem; padding-left: 40rem; }

    /* THUMB LIST */
    .jt-thumb-list { gap: 36rem 16rem; }
    .jt-thumb-list__thumb .jt-icon { width: 12rem; right: 12rem; bottom: 12rem; }
    .jt-thumb-list__tags { margin-top: 8rem; }

    .jt-thumb-list--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jt-thumb-list--secondary .jt-thumb-list__content { margin-top: 12rem; }
    .jt-thumb-list--secondary .jt-thumb-list__info { margin-top: 0; }
    .jt-thumb-list--secondary .jt-thumb-list__desc { margin-top: 6rem; }

    /* BANNER */
    body:has(.jt-banner--top) { --maximize-top-height: 14%; }
    body:has(.jt-banner--top .jt-banner__content) { --minimize-top-height: 40rem; }

    .jt-banner--cover .jt-banner__content { padding: 0 24rem 56rem; }
    .jt-banner--cover .jt-banner__info { margin-top: 10rem; }
    .jt-banner--cover .jt-banner__sound { bottom: 14rem; right: 14rem; }
    .jt-banner--cover .jt-banner__sound .jt-icon { width: 28rem; height: 28rem; }

    /* POPUP */
    .jt-popup .swiper-navigation { display: none; }
    .jt-popup__container { max-width: 100%; }
    .jt-popup__slider .swiper-control { border: 42rem; }

    /* SHARE */
    .jt-share__tooltip { padding: 12rem 32rem; bottom: 32rem; }

    /* SWIPER */
    .swiper-sound { bottom: 14rem; right: 14rem; }
    .swiper-sound .jt-icon { width: 28rem; }

    /* NEWSLETTER */
    .jt-newsletter__title { font-size: var(--font-size-secondary-03); line-height: var(--font-lineheight-secondary-03); }
    .jt-newsletter__inner { flex-direction: column; gap: 20rem; align-items: flex-start; padding: 32rem 64rem 32rem 0; }
    .jt-newsletter__close { top: 14rem; right: 14rem; }

    /* ACCORDION */
    .jt-accordion__head { padding: 22rem 48rem 22rem 0; }
    .jt-accordion__control { right: 0; }
    .jt-accordion__content-inner { padding: 28rem 24rem; }
    
    /* JT CONFIRM */
    .jt-confirm__container { border-radius: 20rem; gap: 24rem; padding: 40rem 32rem; max-width: 360rem; min-height: 240rem; }
    .jt-confirm__btn { padding: 7rem 18rem; }

}



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

    /* JT GUIDE */
    .jt-icon--mobile { display: inline-block; }
    .jt-icon--desktop { display: none; }

    /* FORM*/
    .jt-form__entry { margin-top: 30rem; } 

    /* LOADMORE */
    .jt-loadmore { margin-top: 32rem; }
    .jt-loadmore__btn .jt-icon { width: 20rem; height: 20rem; }

    /* SINGLE */
    .jt-single__detail { margin-bottom: 72rem; }
    .jt-single__header { margin-bottom: 40rem; }
    .jt-single__header-inner { height: 487rem; }
    .jt-single__header-caption { margin-top: 6rem; }
    .jt-single__content { margin-bottom: 72rem; }
    .jt-single__detail-list > li > b { width: 72rem; }
    .jt-single__control { margin: 36rem 0 40rem; }
    .jt-single__divider-logo i { width: 140rem; }

    /* CARD LIST */
    .jt-card { --item-count: 2; }
    .jt-card__navigator .swiper-button { width: 28rem; }

    /* GRID LIST */
    .jt-grid { flex-direction: column; gap: 32rem; }
    .jt-grid__sticky { position: relative; top: 0; max-width: inherit; width: 100%; }
    .jt-grid__container { max-width: inherit; }

    .jt-grid__sticky .jt-grid__content { padding: 0 24rem 30rem; }
    .jt-grid__sticky .jt-grid__thumb .jt-icon { width: 12rem; right: 12rem; bottom: 12rem; }
    
    .jt-grid--reverse .jt-grid__sticky { order: 1; }
    .jt-grid--reverse .jt-grid__container { order: 2; }

    /* COLUMN LIST */
    .jt-column__list { padding: 0 6rem; margin: 0 -14rem; }
    .jt-column__item { width: 362rem; }
    .jt-column__content { padding: 0 20rem 30rem; }

    .jt-column__list .swiper-control { position: relative; top: 0; margin-top: 12rem; margin-bottom: -4rem; }
    .jt-column__list .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { background: #d9d9d9; }
    .jt-column__list .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:before { background: var(--color-black); }

    /* SCROLLER SLIDER */
    .jt-scroller { --item-width: 200rem; }
    .jt-scroller__body { padding-right: 14rem; }
    .jt-scroller__footer { margin-top: 30rem; }

    /* THUMB LIST */
    .jt-thumb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32rem 16rem; }
    .jt-thumb-list--secondary { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .jt-thumb-list__tags { gap: 0 4rem; margin-top: 6rem; }

    /* BANNER */
    .jt-banner--desktop { display: none; }
    .jt-banner--mobile { display: block; }

    .jt-banner__close { top: 2rem; right: 2rem; }

    body:has(.jt-banner--top) { --maximize-top-height: 30.76%; }

    .jt-banner--top .jt-banner__sound { bottom: 2rem; right: 2rem; }

    .jt-banner--bottom .jt-banner__media { padding-top: 55.24%; }

    .jt-banner--cover { margin: 0 -14rem; }
    .jt-banner--cover .jt-banner__media { aspect-ratio: auto; height: 487rem; }
    .jt-banner--cover .jt-banner__content { padding: 0 24rem 52rem; }
    .jt-banner--cover .jt-banner__info { margin-top: 8rem; }
    .jt-banner--cover .jt-banner__sound { bottom: 2rem; right: 2rem; }
    .jt-banner--cover .jt-banner__sound .jt-icon { width: 24rem; height: 24rem; }

    /* POPUP */
    .jt-popup__close { right: 0; top: 0; }
    .jt-popup__item .jt-banner__container { aspect-ratio: 1 / 1.2487; }

    /* NEWSLETTER */
    .jt-newsletter__inner { gap: 16rem; padding: 24rem 48rem 24rem 0; }
    .jt-newsletter__close { top: 12rem; right: 2rem; }

    /* SHARE */
    .jt-share__tooltip { padding: 10rem 24rem; bottom: 24rem; }

    /* SWIPER */
    .swiper-sound { bottom: 2rem; right: 2rem; }
    .swiper-sound .jt-icon { width: 24rem; }

    /* ACCORDION */
    .jt-accordion__head { flex-direction: column; align-items: flex-start; gap: 4rem; padding: 20rem 40rem 20rem 0; }
    .jt-accordion__date { top: auto; }
    .jt-accordion__content-inner { padding: 24rem 16rem; }
    
    /* JT CONFIRM */
    .jt-confirm__container { max-width: 320rem; min-height: 180rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 36rem; height: 36rem; }

}