@charset "utf-8";

/*
 * File       : sub-service.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * DETAIL
 * TRIBES
 * LPTV
 * HOVER
 */



/* **************************************** *
 * DETAIL
 * **************************************** */
.tribes-section__header { text-align: center; }
.tribes-section__desc { margin-top: 40rem; }
.tribes-section__desc p { color: var(--color-gray-800); }
.tribes-section__desc p + p { margin-top: 12rem; }



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

/* VISUAL */
.tribes-visual { height: 100%; display: grid; align-items: center; justify-content: center; text-align: center; }
.tribes-visual:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: .3; }
.tribes-visual__icon { width: 148rem; margin: 0 auto 60rem; box-shadow: 0 4rem 4rem 0 rgba(0, 0, 0, .25); }
.tribes-visual__icon .jt-lazyload { padding-top: 100%; }
.tribes-visual__desc { color: var(--color-white); opacity: .8; }

/* INTRO */
.tribes-intro { padding: 240rem 0; overflow: hidden; }
.tribes-intro__mockcup { position: relative; width: 280rem; margin: 0 auto; }
.tribes-intro__mockcup .jt-lazyload { padding-top: 197.85%; }
.tribes-intro__mockcup:after { content: ''; position: absolute; top: 15rem; left: 15rem; right: 16rem; bottom: 17rem; background: url(../images/sub/service/tribes/service-tribes-mockup-screen.jpg) no-repeat center center / cover; border-radius: 26rem; overflow: hidden; }
.tribes-intro__slider-outer { position: relative; margin-top: 80rem; }
.tribes-intro__slider { position: absolute; top: 50%; left:0; width: 100%; transform: translateY(-50%); margin-top: 48rem; }
.tribes-intro__item { position: relative; width: 170rem; }
.tribes-intro__image { padding-top: 67.79%; border-radius: 20rem; background: no-repeat center center / cover; }
.tribes-intro__category { position: absolute; top: 20rem; left: 20rem; padding: 6rem 16rem 5rem; border-radius: 99rem; background: var(--color-white); }
html.ios .tribes-intro__category { padding-bottom: 6rem; }
.tribes-intro__category--creater { background: var(--color-white); color: var(--color-black); }
.tribes-intro__category--music { background: #7a5fea; color: var(--color-white); }
.tribes-intro__category--art { background: #d93f65; color: var(--color-white); }
.tribes-intro__category--sports { background: #5fbf78; color: var(--color-white); }
.tribes-intro__category--gourmet { background: #f5b81c; color: var(--color-white); }
.tribes-intro__bookmark { position: absolute; top: 20rem; right: 20rem; width: 36rem; height: 36rem; background: rgba(0, 0, 0, .5); border-radius: 50%; }
.tribes-intro__bookmark:after { content: ''; position: absolute; width: 20rem; height: 20rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/sub/service/tribes/service-tribes-bookmark.svg?v=1.0.0) no-repeat center center / cover; }
.swiper-slide-active .tribes-intro__bookmark:after { background-image: url(../images/sub/service/tribes/service-tribes-bookmark-active.svg?v=1.0.0); }

/* BENEFIT */
.tribes-benefit { overflow: hidden; }
.tribes-benefit__intro { position: relative; display: grid; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100vh; left: 0; }
.tribes-benefit__intro-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.tribes-benefit__intro-bg.tribes-benefit__intro--mobile { display: none; }
.tribes-benefit__intro-space { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.tribes-benefit__intro-space::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: .4; }
.tribes-benefit__intro .tribes-section__title { color: var(--color-white); }
.tribes-benefit__intro .tribes-section__desc p { color: var(--color-white); opacity: .8; }

.tribes-benefit__content-outer { position: relative; left: 100%; }
.tribes-benefit__content { display: grid; align-content: center; justify-content: center; text-align: center; height: 100%; padding-bottom: 45rem; gap: 60rem; }
.tribes-benefit__content-inner { display: grid; align-content: end; gap: 30rem; height: 280rem; padding: 0 40rem; }
.tribes-benefit__logo { margin: 0 auto; }
.tribes-benefit__desc { color: var(--color-white); opacity: .8; }
.tribes-benefit__category { display: block; color: var(--color-white); opacity: .7; }
.tribes-benefit__category:before { content: ''; display: block; width: 24rem; height: 3rem; background: var(--color-white); margin: 0 auto 20rem; }
.tribes-benefit__image { position: relative; }
.tribes-benefit__image-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.tribes-benefit__image-bg.tribes-benefit__image--mobile { display: none; }

.tribes-benefit__item { position: absolute; display: grid; width: 100%; height: 100vh; grid-template-columns: 800rem auto; left: 100%; top: 0; }
html.kakao .tribes-benefit__item { height: var(--full-height); }

.tribes-benefit__item--art .tribes-benefit__content-outer { background: #d93f65; }
.tribes-benefit__item--art .tribes-benefit__logo { width: 325rem; }
.tribes-benefit__item--art .tribes-benefit__logo .jt-lazyload { padding-top: 8.61%; }

.tribes-benefit__item--sports .tribes-benefit__content-outer { background: #5fbf78; }
.tribes-benefit__item--sports .tribes-benefit__logo { width: 180rem; }
.tribes-benefit__item--sports .tribes-benefit__logo .jt-lazyload { padding-top: 78.13%; }

.tribes-benefit__item--music .tribes-benefit__content-outer { background: #7a5fea; }
.tribes-benefit__item--music .tribes-benefit__logo { width: 201rem; }
.tribes-benefit__item--music .tribes-benefit__logo .jt-lazyload { padding-top: 76.11%; }

.tribes-benefit__item--gourmet .tribes-benefit__content-outer { background: #f5b81c; }
.tribes-benefit__item--gourmet .tribes-benefit__logo { width: 300rem; }
.tribes-benefit__item--gourmet .tribes-benefit__logo .jt-lazyload { padding-top: 17.7%; }

/* CHALLENGE */
.tribes-challenge { position: relative; background: #000; padding: 120rem 0 200rem; }
.tribes-challenge .tribes-section__title { color: var(--color-white); }
.tribes-challenge .tribes-section__desc p { color: var(--color-white); opacity: .8; }

.tribes-challenge__list-outer { margin-top: 80rem; }
.tribes-challenge__list-outer > .tribes-challenge__list { display: flex; flex-flow: row wrap; gap: 12rem; justify-content: center;  }
.tribes-challenge__item { padding: 8rem 25rem; background: var(--color-white); border-radius: 99rem; font-size: 0; }
.tribes-challenge__item i { font-style: normal; position: relative; top: 2rem; }

.tribes-challenge__marquee { display: none; }
.tribes-challenge__marquee .tribes-challenge__list + .tribes-challenge__list { margin-top: 12rem; }
.tribes-challenge__marquee .tribes-challenge__item { display: inline-block; margin-right: 12rem; }

/* SHARE */
.tribes-share { padding-top: 240rem; }
.tribes-share__screen { position: relative; height: 676rem; background: var(--color-gray-100); border-radius: 20rem; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.tribes-share__content { display: grid; align-items: center; align-content: center; gap: 40rem; padding: 160rem 40rem 160rem 128rem; }
.tribes-share__desc { display: block; }
.tribes-share__mockup-outer { position: relative; }
.tribes-share__mockup { position: absolute; top: 100rem; left: 40rem; width: 419rem; }
.tribes-share__mockup .jt-lazyload { padding-top: 197.85%; }
.tribes-share__mockup-inner { position: absolute; left: 23rem; top: 23rem; right: 25rem; bottom: 26rem; padding: 0rem; }
.tribes-share__mockup-logo { display: none; width: 240rem; margin: 67rem auto 20rem; }
.tribes-share__mockup-logo .jt-lazyload { padding-top: 100%; }
.tribes-share__mockup-header { width: 369rem; margin: 0 auto; }
.tribes-share__mockup-header .jt-lazyload { padding-top: 19.2%; }
.tribes-share__mockup-qr { width: 160rem; margin: 67rem auto 0rem; }
.tribes-share__mockup-qr .jt-lazyload { padding-top: 100%; }
.tribes-share__mockup-txt { text-align: center; margin-top: 20rem; margin-bottom: 60rem; }
.tribes-share__mockup-btn { display: flex; justify-content: center; align-items: center; gap: 14rem; }
.tribes-share__mockup-btn .jt-share__item { position: relative; display: flex; align-items: center; justify-content: center; width: 52rem; height: 52rem; }
.tribes-share__mockup-btn .jt-share__item:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; transition: transform .3s; }
.tribes-share__mockup-btn .jt-icon { width: 28rem; position: relative; }
.tribes-share__mockup-btn .jt-icon svg path { fill: var(--color-white); }

.tribes-share__mockup-btn .jt-share--kakaotalk:before { background: #fbe44d; }
.tribes-share__mockup-btn .jt-share--kakaotalk .jt-icon svg path { fill: #000; }
.tribes-share__mockup-btn .jt-share--facebook:before { background: #4a66ac; }
.tribes-share__mockup-btn .jt-share--url:before { background: #000; }



/* **************************************** *
 * LPTV
 * **************************************** */
/* INTRO */
.lptv-intro { padding-top: 240rem; padding-bottom: 140rem; text-align: center; }
.lptv-intro__img { padding-top: 38.58%; border-radius: 20rem; }
.lptv-intro__txt { margin-top: 40rem; }

/* BANNER */
.lptv-banner { padding: 140rem 0; background: var(--color-gray-100); text-align: center; }
.lptv-banner__icon { display: block; width: 153rem; margin: 0 auto; }
.lptv-banner__icon .jt-lazyload { padding-top: 55.88%; }
.lptv-banner p { display: block; margin-top: 24rem; }
.lptv-banner b { display: block; margin-top: 12rem; }

/* PLAYLIST */
.lptv-playlist { padding-top: 160rem; }
.lptv-playlist__item + .lptv-playlist__item { padding-top: 160rem; }
.lptv-playlist__desc { color: var(--color-gray-800); margin-top: 8rem; }
.lptv-playlist__control { text-align: center; margin-top: 160rem; }

.jt-yt-list-wrap { margin-top: 40rem; }
.jt-yt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 100rem 36rem; }
.jt-yt-list__thumb { position: relative; border-radius: 20rem; overflow: hidden; }
.jt-yt-list__thumb:after { content: ''; display: block; width: 1005%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity .3s; }
.jt-yt-list__thumb figure { padding-top: 56.25%; transition: transform 1s; }
.jt-yt-list__thumb figure img { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); transform-origin: center; }
.jt-yt-list__hover-txt { display: flex; align-items: center; gap: 6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--color-white); background: rgba(0, 0, 0, .5); border-radius: 80rem; padding: 8rem 24rem; opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 1; }
.jt-yt-list__hover-txt svg path { fill: var(--color-white); }
.jt-yt-list__title { display: block; margin-top: 24rem; }

/* SHARE */
.lptv-share { padding-top: 240rem; }
.lptv-share__screen { position: relative; height: 676rem; background: var(--color-gray-100); border-radius: 20rem; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.lptv-share__content { display: grid; align-items: center; align-content: center; gap: 40rem; padding: 160rem 40rem 160rem 128rem; }
.lptv-share__desc { display: block; }
.lptv-share__mockup-outer { position: relative; }
.lptv-share__mockup { position: absolute; top: 100rem; left: 40rem; width: 419rem; }
.lptv-share__mockup .jt-lazyload { padding-top: 197.85%; }



/* **************************************** *
* HOVER
* **************************************** */
@media (hover: hover) and (pointer: fine) {
    
    /* TRIBES */
    .tribes-share__mockup-btn .jt-share__item:hover:before { transform: scale(1.2); }
    
    /* IPTV */
    .jt-yt-list__link:hover .jt-yt-list__thumb:after { opacity: 1; visibility: visible; }
    .jt-yt-list__link:hover .jt-yt-list__hover-txt { opacity: 1; visibility: visible; }
}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

   /* TRIBES */
   .tribes-share__mockup-btn .jt-share__item:hover:before { transform: scale(1.2); }

}