@charset "utf-8";

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



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

    /* SINGLE LAYOUT */
    .jt-single__related { margin-top: 180rem; }
    .jt-single__footer { margin-top: 180rem; }

}



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

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 74rem; height: 74rem; }
    .jt-native-video__poster:after { width: 74rem; height: 74rem; }

    /* ACCORDION */
    .jt-accordion__head { padding: 40rem 100rem 40rem 50rem; }
    .jt-accordion__content-inner { padding: 0 50rem 40rem; }
    .jt-accordion__control { width: 24rem; height: 24rem; top: calc((var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2) + 26rem); right: 50rem; }

    /* SEARCH */
    .jt-search:after { width: 80rem; }

    /* BOARD */
    .jt-board__flex > li > a { padding: 40rem; }

    .jt-board__cta { aspect-ratio: 1 / .35; }

    /* SINGLE LAYOUT */
    .jt-single__related { margin-top: 160rem; }
    .jt-single__footer { margin-top: 160rem; }

    /* POPUP */
    .jt-popup__title:after { width: 110rem; transform: translate(-160rem, 34rem); }
}



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

    /* BUTTON */
    .jt-btn__basic { padding: 14rem 36rem; }
    .jt-btn__round { padding: 14rem 36rem; }

    /* FORM */
    .jt-form__action { padding: 14rem 36rem; }

    .jt-checkbox label > span:before, .jt-radiobox label > span:before { top: -1rem; }
    .jt-checkbox label > span:after { top: 3rem; }
    .jt-radiobox label > span:after { top: 10rem; }

    .jt-form__chapter-inner { padding: 36rem; }
    .jt-form__chapter-result { padding: 24rem 36rem; gap: 60rem; }

    /* SWIPER */
    .swiper-navigation { margin-top: 30rem; }

    /* FLOAT */
    .jt-float__inner { min-height: 80rem; padding: 12rem 32rem; gap: 24rem; }
    .jt-float__content { gap: 24rem; }

    /* CATEGORY */
    .jt-category__list > li > a { padding: 10rem 32rem; }
    .jt-category--sticky { top: calc(var(--header-height) - var(--minimize-height) + 16rem); }

    /* CONTACT */
    .jt-contact__content { padding: 100rem 60rem; }
    .jt-contact__list { margin-top: 20rem; }
    .jt-contact__control { margin-top: 50rem; }

    /* ACCORDION */
    .jt-accordion { gap: 16rem; }
    .jt-accordion__head { padding: 36rem 100rem 36rem 40rem; }
    .jt-accordion__content { margin-top: -20rem; margin-bottom: 20rem; }
    .jt-accordion__content-inner { padding: 0 40rem 36rem; margin-bottom: -20rem; }
    .jt-accordion__control { width: 22rem; height: 22rem; top: calc((var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2) + 24rem); right: 40rem; }

    /* BOARD */
    .jt-board__grid:not(.jt-board__grid--slider) { gap: 80rem 16rem; }
    .jt-board__grid-content { margin-top: 28rem; }
    .jt-board__grid-category { margin-bottom: 10rem; }
    .jt-board__grid-status { top: 16rem; left: 16rem; }

    .jt-board__grid--slider { margin: 0 -8rem; }
    .jt-board__grid--slider .jt-board__grid-item { width: calc(33.33% - 16rem); margin: 0 8rem; }

    .jt-board__highlight-thumb { width: 740rem; }
    .jt-board__highlight-content { padding: 40rem 36rem; }

    .jt-board__flex { gap: 16rem; }
    .jt-board__flex > li > a { padding: 36rem; }

    .jt-board__webzine { gap: 16rem; }
    .jt-board__webzine > li > a { gap: 36rem; }
    .jt-board__webzine-desc { margin-top: 24rem; }

    .jt-board__control { margin-top: 80rem; }

    /* SEARCH */
    .jt-search { max-width: 600rem; }
    .jt-search:after { width: 74rem; }

    /* LIST COMPONENT */
    .jt-list-nothing { height: 420rem; }

    .jt-board__cta { aspect-ratio: 1 / .4; }
    .jt-board__cta-content .jt-btn__basic { min-width: 240rem; }

    /* SINGLE LAYOUT */
    .jt-single__footer { margin-top: 140rem; }
    .jt-single__control { margin-top: 100rem; }
    .jt-single__control a { min-width: 200rem; }
    .jt-single__related { margin-top: 140rem; }
    .jt-single__related-head { margin-bottom: 30rem; }

    /* POPUP */
    .jt-popup__title:after { width: 105rem; transform: translate(-150rem, 30rem); }

}



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

    /* BUTTON */
    .jt-btn__basic { padding: 12rem 32rem; }
    .jt-btn__basic.jt-btn--large { padding-top: 14rem; padding-bottom: 14rem; }

    .jt-btn__round { padding: 12rem 32rem; }
    .jt-btn__round.jt-btn--large { padding-top: 14rem; padding-bottom: 14rem; }

    /* FORM */
    .jt-form:has(.jt-form__chapter) { gap: 48rem; }
    .jt-form__action { padding: 12rem 32rem; }
    .jt-form__loading span { width: 6rem; height: 6rem; }

    .jt-form__chapter { gap: 16rem; }
    .jt-form__chapter-title .jt-icon { width: 28rem; height: 28rem; }
    .jt-form__chapter-inner { padding: 30rem; }
    .jt-form__chapter-result { padding: 20rem 30rem; gap: 40rem; }
    .jt-form__chapter-content .jt-form__control { margin-top: 16rem; }
    .jt-form__chapter-explain > li { padding-left: 32rem; }
    .jt-form__chapter-explain > li:before { left: 16rem; }

    .jt-checkbox label > span:before, .jt-radiobox label > span:before { width: 22rem; height: 22rem; }
    .jt-checkbox label > span:after { width: 14rem; height: 14rem; }
    .jt-radiobox label > span:after { width: 10rem; top: 9rem; }

    .jt-agreement li + li { margin-top: 12rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 68rem; height: 68rem; }
    .jt-native-video__poster:after { width: 68rem; height: 68rem; }

    /* FLOAT */
    .jt-float { bottom: 0; width: 100%; }
    .jt-float:before { border-radius: 0; border-width: 0; border-top-width: 1px; }
    .jt-float__inner { min-height: 96rem; padding: 12rem 24rem; margin: 1px 0 0; justify-content: space-between; }

    /* SWIPER */
    .swiper-navigation { margin-top: 24rem; }
    .swiper-navigation .swiper-button { width: 36rem; height: 36rem; }
    
    .swiper-control { gap: 8rem; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:before { width: 40rem; }

    /* WIDECARD */
    .jt-widecard__content { margin: 60rem auto 0; }
    .jt-widecard__title { margin-bottom: 30rem; }

    /* CATEGORY */
    .jt-category { max-width: calc(100% - 60rem); margin-bottom: 60rem; }
    .jt-category::-webkit-scrollbar { display: none; }
    .jt-category:before,
    .jt-category:after { content: ''; position: absolute; top: 0; bottom: 0; width: 60rem; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .3s; }
    .jt-category:before { left: 0; background: linear-gradient(270deg, transparent, var(--color-gray-100)); }
    .jt-category:after { right: 0; background: linear-gradient(90deg, transparent, var(--color-gray-100)); }
    .jt-category__list { padding: 8rem 12rem; overflow: auto; scrollbar-width: none; }
    .jt-category__list > li > a { padding: 8rem 28rem; }

    .jt-category--sticky { top: calc(var(--header-height) - var(--minimize-height) + 12rem); }

    .jt-category--start:before { opacity: 0; }
    .jt-category--end:after { opacity: 0; }

    /* CONTACT */
    .jt-contact { flex-direction: column; }
    .jt-contact__image { width: auto; }
    .jt-contact__image .jt-lazyload { padding-top: 86.33%; }
    .jt-contact__content { width: auto; padding: 60rem 40rem; }
    .jt-contact__list { margin-top: 16rem; }
    .jt-contact__control { margin-top: 40rem; }

    /* ACCORDION */
    .jt-accordion__head { padding: 30rem 80rem 30rem 30rem; }
    .jt-accordion__content { margin-top: -16rem; margin-bottom: 16rem; }
    .jt-accordion__content-inner { padding: 0 30rem 30rem; margin-bottom: -16rem; }
    .jt-accordion__control { width: 20rem; height: 20rem; top: calc((var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2) + 20rem); right: 30rem; }

    /* BOARD */
    .jt-board__grid:not(.jt-board__grid--slider) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60rem 16rem; }
    .jt-board__grid-content { margin-top: 24rem; }

    .jt-board__grid--slider .jt-board__grid-item { width: calc(50% - 16rem); }

    .jt-board__flex > li > a { padding: 30rem; }
    .jt-board__flex-date { width: 90rem; }

    .jt-board__highlight { margin-bottom: 80rem; }
    .jt-board__highlight-item > a { flex-direction: column; gap: 0; }
    .jt-board__highlight-thumb { width: inherit; border-radius: 16rem 16rem 0 0; }
    .jt-board__highlight-content { padding: 36rem 30rem; gap: 24rem; border-radius: 0 0 16rem 16rem;  }
    .jt-board__highlight-category { margin-bottom: 6rem; }
    .jt-board__highlight-title { height: calc(var(--font-size-primary-06) * var(--font-lineheight-primary-06) * 2); }

    .jt-board__webzine > li > a { gap: 30rem; padding: 12rem; }
    .jt-board__webzine-thumb { width: 240rem; }
    .jt-board__webzine-desc { margin-top: 20rem; }
    .jt-board__webzine-date { margin-top: 6rem; }

    .jt-board__cta { aspect-ratio: 1 / .5; }
    .jt-board__cta-content { gap: 20rem; padding: 30rem; }
    .jt-board__cta-content .jt-btn__basic { min-width: 220rem; }

    .jt-board__count { margin-bottom: 16rem; }

    .jt-board__control { margin-top: 60rem; }

    /* LOADMORE */
    .jt-loadmore__loading span { width: 6rem; height: 6rem; }

    /* SEARCH */
    .jt-search { max-width: 480rem; margin-bottom: 80rem; }
    .jt-search:after { width: 68rem; }
    .jt-search__input { height: auto; padding-bottom: 15rem; }
    .jt-search__label { margin-top: -7rem; }
    .jt-search__submit { margin-top: -7rem; }
    .jt-search__reset { margin-top: -7rem; }

    /* LIST COMPONENT */
    .jt-list-nothing { height: 360rem; gap: 12rem; padding: 30rem; }

    /* SINGLE LAYOUT */
    .jt-single__footer { margin-top: 120rem; }
    .jt-single__share { margin-top: 24rem; }
    .jt-single__excerpt { max-width: inherit; margin-bottom: 60rem; }
    .jt-single__excerpt-container { padding: 24rem 30rem; }
    .jt-single__excerpt-title { margin-bottom: 12rem; }
    .jt-single__control { margin-top: 80rem; }
    .jt-single__control a { min-width: 180rem; }
    .jt-single__related { margin-top: 120rem; }
    .jt-single__related-head { margin-bottom: 20rem; }

    /* POPUP */
    .jt-popup__inner { padding: 50rem 30rem 40rem; }
    .jt-popup__title:after { width: 100rem; transform: translate(-140rem, 30rem); }
    .jt-popup__head { margin-bottom: 24rem; }
    .jt-popup .jt-form__control { margin-top: 28rem; }

    .jt-popup__explain-item b { margin-bottom: 10rem; }
    .jt-popup__explain-list > li { padding-left: 14rem; }

    #form-explain .jt-popup__inner { width: 600rem; padding: 50rem 30rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 60rem; }
    .jt-pagination { gap: 12rem; }

}



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

    /* BUTTON */
    .jt-btn__basic { padding: 12rem 24rem; }
    .jt-btn__basic.jt-btn--large { padding-left: 28rem; padding-right: 28rem; }

    .jt-btn__round { padding: 12rem 24rem; }
    .jt-btn__round.jt-btn--large { padding-left: 28rem; padding-right: 28rem; }

    /* FORM */
    .jt-form__field { height: 48rem; padding: 0 11rem; }
    textarea.jt-form__field { padding: 11rem; }
    .jt-form__valid { margin-top: 6rem; }
    .jt-form__label + .jt-form__data { margin-top: 8rem; }
    .jt-form__fieldset { gap: 24rem; }

    .jt-form__chapter { gap: 12rem; }
    .jt-form__chapter-head { flex-direction: column; gap: 8rem; align-items: flex-start; }
    .jt-form__chapter-head .jt-popup__explain { order: 1; align-self: flex-end; }
    .jt-form__chapter-title { order: 2; gap: 8rem; }
    .jt-form__chapter-title .jt-icon { width: 24rem; height: 24rem; }
    .jt-form__chapter-inner { padding: 24rem 20rem; }
    .jt-form__chapter-content .jt-form__control { margin-top: 12rem; }
    .jt-form__chapter-result { padding: 20rem; gap: 24rem; }
    .jt-form__chapter-data { flex-direction: column; gap: 4rem; }
    .jt-form__chapter-explain { padding: 16rem 0; }
    .jt-form__chapter-explain > li { padding-left: 26rem; }
    .jt-form__chapter-explain > li:before { left: 14rem; width: 4rem; height: 4rem; top: calc(var(--font-size-primary-09) * var(--font-lineheight-primary-09) / 2 - 2rem) }
    .jt-form__chapter-explain > li + li { margin-top: 6rem; }

    .choices__inner { min-height: 48rem; padding: 0 47rem 0 11rem; }
    .choices[data-type*=select-one]::after { width: 48rem; }
    
    html.mobile .jt-choices__wrap:before { right: 11rem; top: 16rem; }
    html.mobile .jt-choices__wrap > select { height: 48rem; padding: 0 47rem 0 11rem; }

    .jt-checkbox label > span, .jt-radiobox label > span { padding-left: 28rem; }
    .jt-checkbox label > span:before, .jt-radiobox label > span:before { width: 20rem; height: 20rem; }
    .jt-checkbox label > span:after { width: 12rem; height: 12rem }
    .jt-radiobox label > span:after { width: 8rem; top: 8rem; }

    .jt-agreement li + li { margin-top: 8rem; }

    .jt-form__datepicker .jt-form__field { padding: 0 43rem; line-height: 48rem; }
    .jt-form__datepicker-calendar { left: 11rem; }
    .jt-form__datepicker-chevron { right: 11rem; }

    .jt-datepicker .air-datepicker-nav { gap: 110rem; margin-bottom: 16rem; }
    .jt-datepicker .air-datepicker-body--day-name { width: 30rem; height: 30rem; }
    .jt-datepicker .air-datepicker-body--cells { gap: 6rem 8rem; }
    .jt-datepicker .air-datepicker-cell { height: 30rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 32rem; height: 32rem; }
    .jt-native-video__poster:after { width: 32rem; height: 32rem; }
    
    /* SWIPER */
    .swiper-control { gap: 6rem; bottom: 16rem; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5rem; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:before { width: 36rem; }

    /* FLOAT */
    .jt-float__inner { padding: 10rem 20rem; gap: 20rem; }
    .jt-float__content { gap: 20rem; }
    .jt-float__close .jt-icon { width: 20rem; }

    /* WIDECARD */
    .jt-widecard__banner { padding-top: 144.65%; }
    .jt-widecard__bg--mobile { display: block; }
    .jt-widecard__bg--desktop { display: none; }
    .jt-widecard__content { margin: 40rem auto 0; }
    .jt-widecard__title { margin-bottom: 20rem; }

    /* CATEGORY */
    .jt-category { max-width: calc(100% - 42rem); margin-bottom: 40rem; }
    .jt-category__list > li > a { padding: 8rem 20rem; }

    .jt-category--sticky { top: calc(var(--header-height) - var(--minimize-height) + 8rem); }

    /* CONTACT */
    .jt-contact__content { padding: 40rem 30rem; }
    .jt-contact__list { margin-top: 12rem; }
    .jt-contact__list > li + li { margin-top: 4rem; }
    .jt-contact__control { margin-top: 30rem; }
    .jt-contact__control a { padding: 10rem 24rem; }

    /* ACCORDION */
    .jt-accordion { gap: 12rem; }
    .jt-accordion__item {  border-radius: 8rem; }
    .jt-accordion__head { padding: 24rem 60rem 24rem 20rem; }
    .jt-accordion__content { margin-top: -12rem; margin-bottom: 12rem; }
    .jt-accordion__content-inner { padding: 0 20rem 20rem; margin-bottom: -12rem; }
    .jt-accordion__control { width: 18rem; height: 18rem; top: calc((var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2) + 16rem); right: 20rem; }

    /* BOARD */
    .jt-board__grid:not(.jt-board__grid--slider) { grid-template-columns: 1fr; }
    .jt-board__grid-thumb { border-radius: 8rem; }
    .jt-board__grid-content { margin-top: 16rem; }
    .jt-board__grid-category { margin-bottom: 8rem; gap: 6rem; }
    .jt-board__grid-desc { margin-top: 6rem; }

    .jt-board__grid--slider { margin: 0 -6rem; }
    .jt-board__grid--slider .jt-board__grid-item { width: 280rem; margin: 0 6rem; }

    .jt-board__flex{ gap: 12rem; }
    .jt-board__flex > li > a { display: block; padding: 24rem 20rem; }
    .jt-board__flex-category { margin-bottom: 12rem; }
    .jt-board__flex-category > span { padding: 3rem 14rem; }
    .jt-board__flex-title > h2 { -webkit-line-clamp: 2; }
    .jt-board__flex-date { position: absolute; width: auto; right: 20rem; top: 28rem; }

    .jt-board__highlight { margin-bottom: 60rem; }
    .jt-board__highlight-thumb { border-radius: 8rem 8rem 0 0; }
    .jt-board__highlight-content { padding: 24rem 20rem; gap: 20rem; border-radius: 0 0 8rem 8rem; }

    .jt-board__webzine { gap: 12rem; }
    .jt-board__webzine > li > a { flex-direction: column; gap: 20rem; padding: 8rem; border-radius: 8rem; }
    .jt-board__webzine-thumb { width: 100%; border-radius: 6rem; }
    .jt-board__webzine-content { padding: 0 12rem 12rem; }
    .jt-board__webzine-desc { margin-top: 16rem; }

    .jt-board__cta { aspect-ratio: 1 / 1.6; border-radius: 8rem; }
    .jt-board__cta-content { gap: 16rem; padding: 24rem; }
    .jt-board__cta-content .jt-btn__basic { min-width: 200rem; }

    .jt-board__count { margin-bottom: 12rem; }

    .jt-board__control { margin-top: 40rem; }

    /* SEARCH */
    .jt-search { max-width: inherit; margin-bottom: 60rem; }
    .jt-search:after { display: none; }

    /* LIST COMPONENT */
    .jt-list-nothing { height: 300rem; border-radius: 8rem; padding: 24rem; gap: 8rem; }

    /* SINGLE LAYOUT */
    .jt-single__footer { margin-top: 100rem; }
    .jt-single__header { margin-bottom: 60rem; }
    .jt-single__meta { margin-bottom: 12rem; }
    .jt-single__share { margin-top: 20rem; gap: 24rem; }
    .jt-single__share > * + *:before { left: -12rem; }
    .jt-single__excerpt { margin-bottom: 40rem; }
    .jt-single__excerpt-container { padding: 20rem; border-radius: 8rem; }
    .jt-single__excerpt-title { margin-bottom: 8rem; }
    .jt-single__excerpt-icon { width: 20rem; }
    .jt-single__control { margin-top: 60rem; }
    .jt-single__control a { min-width: 160rem; }
    .jt-single__related { margin-top: 100rem; }
    .jt-single__related-head { margin-bottom: 16rem; }

    /* POPUP */
    .jt-popup__inner { width: 100%; padding: 50rem 20rem 24rem; border-radius: 8rem; }
    .jt-popup__title:after { width: 85rem; transform: translate(-118rem, 26rem); }
    .jt-popup__head { margin-bottom: 20rem; }
    .jt-popup .jt-form__control { margin-top: 24rem; }
    .jt-popup__close { right: 12rem; top: 12rem; }

    .jt-popup__explain { gap: 6rem; }
    .jt-popup__explain .jt-icon { width: 16rem; }
    .jt-popup__explain-item b { margin-bottom: 8rem; }
    .jt-popup__explain-list > li { padding-left: 12rem; }
    .jt-popup__explain-list > li + li { margin-top: 6rem; }

    #form-explain .jt-popup__inner { width: 100%; padding: 50rem 20rem; }

    /* TOOLTIP */
    .jt-tooltip { padding: 14rem 24rem; bottom: 20rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 40rem; }
    .jt-pagination { gap: 8rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 0; margin-right: -4rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: -4rem; margin-right: 0; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first { margin-left: 0; margin-right: -4rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: -4rem; margin-right: 0; }


}