@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 860px
 * 540px
 * HOVER
 */



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

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 45rem; height: 90rem; margin: -45rem 0 0; }

    .swiper-pagination { top: 61rem; }

    /* CATEGORY */
    .jt-category { margin: -4rem -8rem; }
    .jt-category a { padding: 4rem 8rem; }

    /* GRID LIST */
    .jt-grid-list__content { padding-left: 36rem; }
    .jt-grid-list__content:before { width: 20rem; height: 20rem; }
    :is(.jt-grid-list__title, .jt-grid-list__date, .jt-grid-list__charge) { font-size: 20rem; }

}



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

    /* BUTTON */
    .jt-btn__basic { min-width: 220rem; padding: 9rem 43rem; font-size: 20rem; }

    /* FORM */
    .jt-form { gap: 80rem; }

    .jt-form__fieldset { gap: 28rem 0; }
    .jt-form__fieldset-row { flex-direction: column; gap: 28rem; }
    .jt-form__fieldset-row.jt-form__fieldset-row--narrow { margin-top: -14rem; }

    .jt-form__label { margin-bottom: 10rem; font-size: 25rem; }

    .jt-form__field { height: 50rem; font-size: 20rem; }
    textarea.jt-form__field { height: 260rem; }

    .jt-form__valid { margin-top: 10rem; font-size: 16rem; }

    .jt-checkbox label > span { padding-left: 30rem; font-size: 16rem; }
    .jt-checkbox label > span:before { width: 18rem; height: 18rem; top: 2rem; }
    .jt-checkbox label > span:after { width: 18rem; height: 18rem; top: 2rem; }

    .jt-form__chip > label > span { font-size: 30rem; }

    .jt-form__action { padding: 9rem 60rem; font-size: 25rem; }
    .jt-form__action-spinner { width: 72rem; height: 8rem; margin: -4rem 0 0 -36rem; }
    .jt-form__action-spinner > div { width: 8rem; height: 8rem; }

    .jt-agreement a:before, 
    .jt-agreement a:after { bottom: 0; }

    .privacy-popup__inner { width: calc(100% - 96rem); }
    .privacy-popup__head { margin-bottom: 60rem; }
    .privacy-popup__title { font-size: 26rem; }
    .privacy-popup__content { max-height: calc(100vh - 220rem); }
    .privacy-popup__content * { font-size: 13rem; }
    .privacy-popup__content li:before,
    html.ios .privacy-popup__content li:before { top: 9rem; }
    .privacy-popup__content > * + * { margin-top: 15rem; }
    .privacy-popup__close { width: 40rem; height: 40rem; right: 21rem; }

    .jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:not(:last-child) { width: 100%; }
    .jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:nth-child(1) { order: 1; }
    .jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:nth-child(2) { order: 3; }
    .jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:nth-child(3) { order: 2; margin-top: -14rem; }

    /* CATEGORY */
    .jt-category a { font-size: 50rem; }

    /* SEARCH */
    .jt-search { display: block; width: 44rem; height: 44rem; position: absolute; bottom: -92rem; right: 10rem; z-index: 499; }

    .jt-search__bundle { display: none; width: 297rem; position: absolute; right: 44rem; top: 0; }

    .jt-search__label { display: none; }
    .jt-search__input { height: 44rem; padding: 0 44rem 0 20rem; font-size: 22rem; color: var(--color-white); background: var(--color-black); border: none; border-radius: 44rem; }

    .jt-search__submit { width: 44rem; height: 44rem; bottom: 0; }
    .jt-search__submit .jt-icon { width: 24rem; }
    .jt-search__submit .jt-icon path { fill: var(--color-primary); }
    .jt-search__submit-icon--large { display: none; }
    .jt-search__submit-icon--small { display: block; }
    
    .jt-search__toggle { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: relative; background: var(--color-black); border: none; border-radius: 50%; cursor: pointer; }
    .jt-search__toggle .jt-icon { display: block; width: 13rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .jt-search__toggle .jt-icon path { fill: var(--color-white); }

    .jt-search.jt-search--fix { position: fixed; bottom: 58rem; }
    .jt-search.jt-search--hide { opacity: 0; z-index: -1; }

    /* PAGINATION */
    .jt-pagination { margin-top: 65rem; }

    /* LIST COMPONENT */
    .jt-board__head { margin-bottom: 0; padding: 55rem 0; position: static; }
    .jt-board__head:before { display: none; }
    .jt-board__head-row { display: block; }
    .jt-board__title { font-size: 50rem; }
    .jt-board__head .wrap-full { position: static; }

    .jt-list-nothing p > span { display: none; }

    /* TABS */
    .jt-tabs__menu { gap: 8rem; margin-bottom: 65rem; }
    .jt-tabs__menu li a { padding: 2rem 18rem; font-size: 26rem; }

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 25rem; height: 50rem; margin: -25rem 0 0; }
    .swiper-navigation .swiper-button-prev { left: 29rem; }
    .swiper-navigation .swiper-button-next { right: 29rem; }

    .swiper-pagination { top: 30rem; }
    .swiper-pagination > span.swiper-pagination-current,
    .swiper-pagination > span.swiper-pagination-slash { font-size: 24rem; }
    .swiper-pagination > span.swiper-pagination-total { font-size: 12rem; }

    /* VIDEO */
    .jt-background-video__poster--large { display: none; }
    .jt-background-video__poster--small { display: block; }

    /* ACCORDION LIST */
    .jt-accordion__content-inner { border-top: 1px solid var(--color-black); }

    .jt-accordion__item.jt-accordion--hover,
    .jt-accordion__item.jt-accordion--active { background: transparent; }

    /* GRID LIST */
    .jt-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .jt-grid-list__thumb-layer svg path { fill: #F0F0F0; }

    .jt-grid-list__content { padding-left: 28rem; }
    .jt-grid-list__content:before { width: 16rem; height: 16rem; }
    :is(.jt-grid-list__title, .jt-grid-list__date, .jt-grid-list__charge) { font-size: 16rem; }

    /* JT CONFIRM */
    .jt-confirm__container { max-width: 300rem; padding-bottom: 38rem; }

    .jt-confirm__content { padding: 38rem 24rem 23rem; }
    .jt-confirm__content p { font-size: 22rem; line-height: 1.31; }

    .jt-confirm__btn { width: 220rem; padding: 9rem 0 10rem; font-size: 20rem; }

    .jt-confirm--choice .jt-confirm__actions { gap: 10rem; padding: 0 24rem; }

}



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

    /* FORM */
    .jt-form { gap: 40rem; }

    .jt-form__fieldset { gap: 20rem 0; }
    .jt-form__fieldset-row { gap: 20rem; }
    .jt-form__fieldset-row.jt-form__fieldset-row--narrow { margin-top: -10rem; }

    .jt-form__label { font-size: 20rem; }

    .jt-form__field { height: 40rem; font-size: 12rem; }
    textarea.jt-form__field { height: 164rem; padding: 10rem 12rem; }

    .jt-form__valid { font-size: 12rem; }

    .jt-checkbox label > span { padding-left: 20rem; font-size: 12rem; }
    .jt-checkbox label > span:before { width: 10rem; height: 10rem; top: 3rem; border-width: 1px; }
    .jt-checkbox label > span:after { width: 10rem; height: 10rem; top: 3rem; }
    html.ios .jt-checkbox label > span:before,
    html.ios .jt-checkbox label > span:after { top: 4rem; }

    .jt-form__chip > label { padding: 3rem 8rem 1rem; }
    .jt-form__chip > label > span { font-size: 18rem; }
    .jt-form__chip.jt-form__chip--vertical { flex-direction: column; align-items: start; }

    .jt-form__control { margin-top: 25rem; }
    .jt-form__action { padding: 2rem 24rem; font-size: 20rem; }
    .jt-form__action-spinner { width: 45rem; height: 5rem; margin: -3rem 0 0 -22rem; }
    .jt-form__action-spinner > div { width: 5rem; height: 5rem; margin: 0 5rem; }

    .privacy-popup__inner { width: calc(100% - 75rem); padding: 23rem 20rem 20rem; }
    .privacy-popup__head { margin-bottom: 17rem; }
    .privacy-popup__title { font-size: 22rem; line-height: 1.09; }
    .privacy-popup__body { padding-right: 0; }
    .privacy-popup__content * { font-size: 10rem; line-height: 1.8; }
    .privacy-popup__content br { display: none; }
    .privacy-popup__content li { padding-left: 6rem; }
    .privacy-popup__content li:before { width: 2px; height: 2px; top: 8rem; }
    html.ios .privacy-popup__content li:before { top: 8rem; }
    .privacy-popup__content li > span { display: none; }
    .privacy-popup__copy { display: block; margin-top: 98rem; position: relative; right: inherit; bottom: inherit; transform: none; }
    .privacy-popup__close { width: 34rem; height: 34rem; top: 16rem; right: 14rem; }

    .jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:nth-child(3) { margin-top: -10rem; }

    /* CATEGORY */
    .jt-category { margin: -2rem -6rem; }
    .jt-category a { padding: 2rem 6rem; font-size: 33rem; }

    /* SEARCH */
    .jt-search { bottom: -42rem; }
    .jt-search__bundle { width: calc(100vw - 78rem); }
    
    /* PAGINATION */
    .jt-pagination { margin-top: 40rem; }

    /* LIST COMPONENT */
    .jt-board__head { padding: 40rem 0; }
    .jt-board__title { font-size: 40rem; }

    /* TABS */
    .jt-tabs__menu { gap: 4rem; margin-bottom: 40rem; }
    .jt-tabs__menu li a { font-size: 20rem; }

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 20rem; height: 40rem; margin: -20rem 0 0; }

    .swiper-pagination { top: 20rem; }
    .swiper-pagination > span.swiper-pagination-current,
    .swiper-pagination > span.swiper-pagination-slash { font-size: 20rem; }
    .swiper-pagination > span.swiper-pagination-total { font-size: 10rem; }

    /* ACCORDION LIST */
    .jt-accordion__content-inner { padding-top: 14rem; }

    /* GRID LIST */
    .jt-grid-list { grid-template-columns: 1fr; }

    .jt-grid-list__content { grid-template-columns: 1fr 1.23fr; margin-top: 21rem; padding-left: 16rem; }
    .jt-grid-list__content:before { width: 8rem; height: 8rem; top: -1rem; }
    :is(.jt-grid-list__title, .jt-grid-list__date, .jt-grid-list__charge) { font-size: 12rem; }

}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (max-width: 860px) and (hover: hover) and (pointer: fine) {

    /* SEARCH */
    .jt-search__toggle:hover .jt-icon path  { fill: var(--color-primary); }

}