@charset "utf-8";

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



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

    /* TRIBES */
    .tribes-benefit__item { grid-template-columns: 42% auto; }

}



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

    /* TRIBES */
    .tribes-benefit__item { grid-template-columns: 50% auto; }

}



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

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

    .tribes-visual__icon { width: 120rem; margin-bottom: 40rem; }

    .tribes-intro { padding: 140rem 0; }

    .tribes-challenge { padding: 120rem 0 160rem; }
    .tribes-challenge__item { padding: 6rem 24rem 8rem; }

    .tribes-share { padding-top: 140rem; }
    .tribes-share__screen { height: auto; }
    .tribes-share__content { padding: 120rem 40rem 120rem 120rem; }
    .tribes-share__mockup { width: 55.86%; }
    .tribes-share__mockup-inner { left: 6%; top: 2.6%; right: 6%; bottom: 2.6%; }
    .tribes-share__mockup-logo { width: 64.69%; }
    .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 { padding-top: 140rem; padding-bottom: 120rem; }

    .iptv-banner { padding: 120rem 0; }

    .lptv-playlist { padding-top: 120rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 120rem; }
    .lptv-playlist__control { margin-top: 120rem; }

    .lptv-share { padding-top: 140rem; }
    .lptv-share__screen { height: auto; }
    .lptv-share__content { padding: 120rem 40rem 120rem 120rem; }
    .lptv-share__mockup { width: 55.86%; }

}



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

    /* TRIBES */
    .tribes-intro { padding: 120rem 0; }

    .tribes-challenge { padding: 120rem 0; }

    .tribes-share { padding-top: 120rem; }
    .tribes-share__content { padding: 100rem 40rem 100rem 100rem; }
    .tribes-share__mockup-btn .jt-share__item { width: 40rem; height: 40rem; }
    .tribes-share__mockup-btn .jt-icon { width: 20rem; }
    .tribes-share__mockup-logo { display: block; }
    .tribes-share__mockup-header { display: none; }
    .tribes-share__mockup-qr { display: none; }
    .tribes-share__mockup-txt { display: none; }

    /* LPTV */
    .lptv-intro { padding-top: 120rem; padding-bottom: 100rem; }
    .lptv-intro__txt { margin-top: 30rem; }

    .lptv-banner { padding: 100rem 0; }
    .lptv-banner__icon { width: 144rem; }

    .lptv-playlist { padding-top: 100rem; }
    .lptv-playlist__desc { margin-top: 6rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 100rem; }
    .lptv-playlist__control { margin-top: 100rem; }
    .jt-yt-list { gap: 90rem 30rem; }
    .jt-yt-list__title { margin-top: 20rem; }

    .lptv-share { padding-top: 120rem; }
    .lptv-share__content { padding: 100rem 40rem 100rem 100rem; }

}



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

    /* TRIBES */
    .tribes-section__desc { margin-top: 30rem; }
    
    .tribes-visual__icon { margin-bottom: 30rem; }

    .tribes-intro { padding: 100rem 0; }
    .tribes-intro__slider-outer { margin-top: 60rem; }

    .tribes-benefit__item { grid-template-columns: 1fr; left: 0; z-index: 1; }
    .tribes-benefit__content-outer { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; }
    .tribes-benefit__image { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; }

    .tribes-challenge { padding: 100rem 0; }
    .tribes-challenge__list-outer { margin: 60rem -30rem 0; }
    .tribes-challenge__list-outer > .tribes-challenge__list { display: none; }
    .tribes-challenge__marquee { display: block; }
    .tribes-challenge__item { padding: 6rem 20rem 8rem; }

    .tribes-share { padding-top: 100rem; }
    .tribes-share__screen { grid-template-columns: 1fr; }
    .tribes-share__content { padding: 80rem; text-align: center; gap: 30rem; }
    .tribes-share__desc br:not(.smbr) { display: none; }
    .tribes-share__mockup-outer { height: calc(100vw * .65); }
    .tribes-share__mockup { 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 { padding-top: 100rem; padding-bottom: 80rem; }

    .lptv-banner { padding: 80rem 0; }
    
    .lptv-playlist { padding-top: 80rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 80rem; }
    .lptv-playlist__control { margin-top: 80rem; }
    .jt-yt-list { gap: 80rem 26rem; }
    .jt-yt-list__title { margin-top: 20rem; }

    .lptv-share { padding-top: 100rem; }
    .lptv-share__screen { grid-template-columns: 1fr; }
    .lptv-share__content { padding: 80rem; text-align: center; gap: 30rem; }
    .lptv-share__desc br:not(.smbr) { display: none; }
    .lptv-share__mockup-outer { height: calc(100vw * .65); }
    .lptv-share__mockup { top: 0; left: 50%; transform: translateX(-50%); }

}



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

    /* TRIBES */
    .tribes-section__desc br:not(.smbr) { display: none; }

    .tribes-visual__desc br:not(.smbr) { display: none; }

    .tribes-intro { padding: 80rem 0; }
    .tribes-intro__slider-outer { margin-top: 40rem; }
    .tribes-intro__item { width: 312rem; }
    .tribes-intro__category { padding: 4rem 12rem; left: 16rem; top: 16rem; }
    html.ios .tribes-intro__category { padding-bottom: 4rem; }
    .tribes-intro__bookmark { width: 32rem; height: 32rem; top: 16rem; right: 16rem; }
    .tribes-intro__bookmark:after { width: 16rem; height: 16rem; }

    .tribes-benefit__intro-bg.tribes-benefit__intro--desktop { display: none; }
    .tribes-benefit__intro-bg.tribes-benefit__intro--mobile { display: block; }
    .tribes-benefit__image-bg.tribes-benefit__image--desktop { display: none; }
    .tribes-benefit__image-bg.tribes-benefit__image--mobile { display: block; }
    .tribes-benefit__intro .tribes-section__title br:not(.smbr) { display: none; }
    .tribes-benefit__content { gap: 40rem; }
    .tribes-benefit__desc br:not(.smbr) { display: none; }

    .tribes-benefit__item--art .tribes-benefit__logo { width: 216rem; }
    .tribes-benefit__item--sports .tribes-benefit__logo { width: 120rem; }
    .tribes-benefit__item--music .tribes-benefit__logo { width: 134rem; }
    .tribes-benefit__item--gourmet .tribes-benefit__logo { width: 200rem; }

    .tribes-challenge { padding: 80rem 0; }
    .tribes-challenge__list-outer { margin: 40rem -24rem 0; }
    .tribes-challenge__marquee .tribes-challenge__list + .tribes-challenge__list { margin-top: 10rem; }
    .tribes-challenge__marquee .tribes-challenge__item { margin-right: 10rem; }
    html.android .tribes-challenge__item { padding: 6rem 20rem 7rem; }
    .tribes-challenge__item i { top: 1rem; }

    .tribes-share { padding-top: 80rem; }
    .tribes-share__content { padding: 40rem 30rem; }
    .tribes-share__content b { font-size: 25rem; line-height: 36rem; }
    .tribes-share__mockup-outer { height: calc(100vw * .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 { padding-top: 80rem; padding-bottom: 60rem; }
    .lptv-intro__txt { margin-top: 20rem; }
    .lptv-intro__txt br:not(.smbr) { display: none; }

    .lptv-banner { padding: 60rem 0; }
    .lptv-banner__icon { width: 132rem; }
    .lptv-banner br { display: none; }

    .lptv-playlist { padding-top: 80rem; }
    .lptv-playlist__item + .lptv-playlist__item { padding-top: 80rem; }
    .lptv-playlist__control { margin-top: 80rem; }
    .jt-yt-list-wrap { margin-top: 32rem; }
    .jt-yt-list { grid-template-columns: unset; gap: 60rem; }
    .jt-yt-list__title { margin-top: 16rem; }

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

}