@charset "utf-8";

/*
 * File       : rwd-service.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * 1800px
 * 1640px
 * 1200px
 * 1023px
 * 861px ~ 1024px & portrait
 * 860px
 * 540px
 */



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

    /* TRIBES */
    .tribes-intro__message-titles { margin-left: 0; }

}



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

    /* TRIBES */
    .tribes-intro__screen-mockup { height: calc(var(--tribes-vh) / 100 * 80.277); max-height: 54vw; }
    .tribes-intro__message-titles { width: 360rem; }
    .tribes-intro__message-contents { width: 380rem; }

    .tribes-intro__list > li br { display: none; }

}



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

    /* TRIBES */
    .article__header .tribes-download { margin-top: 30rem; }

    .tribes-visual__icon { width: 110rem; margin-bottom: 60rem; }
    
    .tribes-intro__screen-mockup { height: calc(var(--tribes-vh) / 100 * 76.277); }
    .tribes-intro__message-contents { width: 350rem; }

    .tribes-share__screen { height: 570rem; }
    .tribes-share__mockup { width: 315rem; top: 73rem; left: 120rem; }
    .tribes-share__mockup-inner { left: 16rem; top: 14rem; right: 16rem; bottom: 14rem; }
    .tribes-share__mockup-header { width: 100%; }
    .tribes-share__mockup-qr { width: 43.2%; margin-top: 54rem; }
    .tribes-share__mockup-txt { margin-bottom: 30rem; }

    /* LPTV */
    .lptv-intro__img { padding-top: 16.22%; }
    .lptv-intro .lptv-intro__img.jt-lazyload img { height: 100%; object-fit: cover; }

    .lptv-playlist__tabs { max-width: 900rem; }
    .lptv-playlist__tabs:before, 
    .lptv-playlist__tabs:after { width: 52rem; }
    .lptv-playlist__tabs-slider { padding: 6rem; }
    .lptv-playlist__tabs a { padding: 5rem 26rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 180rem; }
    .lptv-playlist__banner { margin-bottom: 140rem; }
    .lptv-playlist__control { margin-top: 100rem; }

    .lptv-share { margin-top: 180rem; }
    .lptv-share__screen { height: 570rem; }
    .lptv-share__mockup { width: 58%; left: 120rem; }

}



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

    /* TRIBES */
    .tribes-visual__icon { width: 100rem; margin-bottom: 48rem; }

    .tribes-intro__message-titles { width: 310rem; }
    .tribes-intro__message-contents { width: 300rem; }
    .tribes-intro__desc { margin-top: 10rem; }
    .tribes-intro__list { gap: 10rem; }
    .tribes-intro__list > li { padding-left: 15rem; }
    .tribes-intro__list > li::before { width: 5rem; height: 5rem; top: 11rem; }

    .tribes-share__screen { height: 478rem; }
    .tribes-share__desc { margin-bottom: 35rem; }
    .tribes-share__mockup { width: 270rem; left: 100rem; }
    .tribes-share__mockup-inner { left: 13rem; top: 11rem; right: 13rem; bottom: 11rem; }
    .tribes-share__mockup-logo { display: block; width: 59.52%; }
    .tribes-share__mockup-header { display: none; }
    .tribes-share__mockup-qr { display: none; }
    .tribes-share__mockup-txt { display: none; }
    .tribes-share__mockup-btn .jt-share__item { width: 40rem; height: 40rem; }
    .tribes-share__mockup-btn .jt-icon { width: 20rem; }

    /* LPTV */
    .lptv-playlist__tabs { max-width: calc(100vw - 80rem); }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 150rem; }
    .lptv-playlist__banner { margin-bottom: 120rem; }
    .lptv-playlist__banner p { margin-top: 30rem; }
    .lptv-playlist__desc { margin-top: 6rem; }
    .lptv-playlist__control { margin-top: 90rem; }

    .jt-yt-list { gap: 44rem 30rem; }
    .jt-yt-list__title { margin-top: 14rem; }

    .lptv-share { margin-top: 150rem; }
    .lptv-share__screen { height: 510rem; }
    .lptv-share__content { gap: 35rem; }
    .lptv-share__mockup { left: 100rem; }

}



/* **************************************** *
 * 861px ~ 1024px & portrait
 * **************************************** */
@media (min-width: 861px) and (max-width: 1024px) and (orientation: portrait){

    /* TRIBES */
    .tribes-intro { padding: 0; }
    .tribes-intro__screen-mockup { max-height: 48vw; }

}



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

    /* TRIBES */
    .tribes-intro { padding: 0; }
    .tribes-intro__large { display: none; }
    .tribes-intro__smaller { display: block; padding: 100rem 0; overflow: hidden; }
    .tribes-intro__smaller .swiper { overflow: visible; }
    .tribes-intro__slider-item-inner { display: flex; align-items: center; gap: 32rem; padding-left: 84rem; padding-right: 84rem; }
    .tribes-intro__slider-screen { width: 220rem; flex-shrink: 0; }
    .tribes-intro__slider-screen .jt-lazyload { padding-top: 206.15%; }
    .tribes-intro__slider-content { align-self: center; flex: 1; }
    .tribes-intro__desc { margin-top: 8rem; }
    .tribes-intro__list { margin-top: 24rem; gap: 12rem; }
    .tribes-intro__slider .swiper-button { display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; margin: -20rem 0 0; padding: 0; top: 50%; background: var(--color-gray-300); border: none; border-radius: 50%; transition: opacity .3s, visibility .3s; }
    .tribes-intro__slider .swiper-button:after { display: none; }
    .tribes-intro__slider .swiper-button .jt-icon { width: 100%; }
    .tribes-intro__slider .swiper-button .jt-icon svg path { fill: var(--color-gray-700); }
    .tribes-intro__slider .swiper-button-next { right: 10rem; }
    .tribes-intro__slider .swiper-button-prev { left: 10rem; }
    .tribes-intro__slider .swiper-button.swiper-button-disabled { opacity: 0; visibility: hidden; }

    .tribes-share__screen { grid-template-columns: 1fr; height: auto; }
    .tribes-share__content { padding: 80rem; text-align: center; }
    .tribes-share__desc { margin-bottom: 30rem; }
    .tribes-share__mockup-outer { height: calc(100vw * 0.7); overflow: hidden; }
    .tribes-share__mockup { width: 55.86%; top: 0; left: 50%; transform: translateX(-50%); }
    .tribes-share__mockup-btn .jt-share__item { width: 52rem; height: 52rem; }
    .tribes-share__mockup-btn .jt-icon { width: 28rem; }

    /* LPTV */
    .lptv-intro__img { padding-top: 22.22%; }

    .lptv-playlist__tabs { max-width: calc(100vw - 60rem); top: 15rem; }
    body.jt-minimize-layout--show .lptv-playlist__tabs { top: 81rem; }
    .lptv-playlist__tabs a { padding-left: 22rem; padding-right: 22rem; }
    .lptv-playlist__item { padding-top: 72rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 130rem; }
    .lptv-playlist__banner { margin-bottom: 100rem; }
    .lptv-playlist__control { margin-top: 72rem; }

    .jt-yt-list { gap: 40rem 26rem; }
    .jt-yt-list__title { margin-top: 12rem; }

    .lptv-share { margin-top: 130rem; }
    .lptv-share__screen { grid-template-columns: 1fr; height: auto; }
    .lptv-share__content { padding: 80rem; gap: 30rem; text-align: center; }
    .lptv-share__desc br { display: none; }
    .lptv-share__mockup-outer { height: calc(100vw * 0.79); overflow: hidden; }
    .lptv-share__mockup { width: 55.86%; bottom: inherit; top: 0; left: 50%; transform: translateX(-50%); }

}



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

    /* TRIBES */
    .tribes-visual__icon { width: 96rem; margin-bottom: 42rem; }

    .tribes-intro__smaller { padding: 60rem 0; }
    .tribes-intro__slider-item-inner { flex-direction: column; gap: 0; padding: 0; }
    .tribes-intro__slider-screen { position: absolute; left: 50%; top: 189rem; transform: translate3d(-50%, 0, 0); }
    .tribes-intro__title { text-align: center; }
    .tribes-intro__desc { text-align: center; }
    .tribes-intro__list { margin-top: 533rem; }
    .tribes-intro__list > li::before { top: 10rem; }
    .tribes-intro__slider .swiper-button { top: 416rem; }
    .tribes-intro__slider .swiper-button-next { right: 0; }
    .tribes-intro__slider .swiper-button-prev { left: 0; }

    .tribes-share__content { padding: 40rem 30rem; }
    .tribes-share__desc { font-size: 25rem; line-height: 36rem; }
    .tribes-share__mockup-outer { height: calc(100vw * 0.8); }
    .tribes-share__mockup { width: 70%; }
    .tribes-share__mockup-logo { margin: 40rem auto 20rem; }
    .tribes-share__mockup-btn .jt-share__item { width: 40rem; height: 40rem; }
    .tribes-share__mockup-btn .jt-icon { width: 20rem; }

    /* LPTV */
    .lptv-intro__img { padding-top: 26.22%; }

    .lptv-playlist { padding-top: 50rem; }
    .lptv-playlist__tabs { max-width: calc(100vw - 48rem); top: 12rem; }
    body.jt-minimize-layout--show .lptv-playlist__tabs { top: 78rem; }
    .lptv-playlist__tabs:before, 
    .lptv-playlist__tabs:after { width: 44rem; }
    .lptv-playlist__tabs a { padding: 4rem 16rem; }
    .lptv-playlist__tabs a > span { font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); }
    .lptv-playlist__item { padding-top: 50rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 110rem; }
    .lptv-playlist__banner { margin-bottom: 80rem; }
    .lptv-playlist__banner .wrap { margin: 0; }
    .lptv-playlist__banner .jt-lazyload { border-radius: 0; }
    .lptv-playlist__banner p { margin-top: 20rem; padding: 0 24rem; }
    .lptv-playlist__banner p br:not(.smbr) { display: none; }
    .lptv-playlist__control { margin-top: 65rem; }

    .jt-yt-list-wrap { margin-top: 32rem; }
    .jt-yt-list { grid-template-columns: unset; }

    .lptv-share { margin-top: 110rem; }
    .lptv-share__content { padding: 48rem 30rem; }
    .lptv-share__content b { font-size: 25rem; line-height: 36rem; }
    .lptv-share__mockup-outer { height: calc(100vw * 0.92); }
    .lptv-share__mockup { width: 70%; }

}