@charset "utf-8";

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



/* **************************************** *
 * TRIBES
 * **************************************** */
body.service-tribes .article__body { padding-bottom: 0; }

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

/* VISUAL */
.tribes-visual { width: 100%; height: 100%; display: grid; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; left: 0; }
.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 80rem; }
.tribes-visual__icon .jt-lazyload { padding-top: 100%; }
.tribes-visual__icon > p { margin-top: 4rem; color: var(--color-white); }
.tribes-visual__text { display: flex; flex-direction: column; align-items: center; gap: 24rem; }
.tribes-visual__slogan { display: inline-block; padding: 4rem 20rem; color: var(--color-white); background: #000; border-radius: 4rem; }
.tribes-visual__desc { color: var(--color-white); }

/* INTRO */
.tribes-intro { padding: 81rem 0; }

.tribes-intro__large { --tribes-vh: 100vh; height: calc(var(--tribes-vh) * 5); position: relative; overflow: hidden; }
html.mobile .tribes-intro__large { --tribes-vh: 100lvh; }
html.mobile:not(.samsungbrowser) .tribes-intro__large { margin-bottom: calc(100lvh - 100svh); }

.tribes-intro__screen { height: var(--tribes-vh); display: flex; align-items: center; justify-content: center; position: relative; }
.tribes-intro__screen-mockup { height: calc(var(--tribes-vh) / 100 * 84.277); max-height: 804rem; aspect-ratio: 390 / 804; position: relative; }
.tribes-intro__screen-mockup .jt-lazyload { width: 100%; height: 100%; }
.tribes-intro__screen-mockup .jt-lazyload img { width: 100%; height: 100%; position: relative; }
.tribes-intro__screen-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.tribes-intro__screen-view li { width: 100%; height: 100%; position: relative; top: 0; left: 0; }
.tribes-intro__screen-view li:not(:first-child) { position: absolute; opacity: 0; }

.tribes-intro__message { width: 100%; height: var(--tribes-vh); position: absolute; top: 0; left: 0; }
.tribes-intro__message-inner { width: 100%; height: var(--tribes-vh); display: flex; justify-content: space-between; align-items: center; }
.tribes-intro__message-titles { width: 400rem; margin-left: -2.6vw; position: relative; text-align: center; }
.tribes-intro__message-title { width: 100%; }
.tribes-intro__message-title:not(:first-child) { position: absolute; top: 50%; left: 0; transform: translate3d(0, -50%, 0); opacity: 0; will-change: transform; }
.tribes-intro__message-contents { width: 455rem; position: relative; }
.tribes-intro__message-content { width: 100%; }
.tribes-intro__message-content:not(:first-child) { position: absolute; top: 50%; left: 0; transform: translate3d(0, -50%, 0); opacity: 0; will-change: transform; }

.tribes-intro__title { display: block; }
.tribes-intro__desc { margin-top: 12rem; }
.tribes-intro__list { display: flex; flex-direction: column; gap: 12rem; }
.tribes-intro__list > li { padding-left: 16rem; position: relative; color: var(--color-gray-800); }
.tribes-intro__list > li::before { content: ''; display: block; width: 6rem; height: 6rem; position: absolute; top: 12rem; left: 0; background: #000; border-radius: 50%; }
.tribes-intro__list > li > span { display: block; }

.tribes-intro__smaller { display: none; }

/* SHARE */
.tribes-share { position: relative; background: var(--color-gray-100); overflow: hidden; }
.tribes-share__screen { position: relative; height: 676rem; display: grid; grid-template-columns: 1fr 1fr; }

.tribes-share__content { display: grid; align-items: center; align-content: center; }
.tribes-share__label { display: block; margin-bottom: 12rem; }
.tribes-share__desc { display: block; margin-bottom: 40rem; }

.tribes-share__mockup-outer { position: relative; }
.tribes-share__mockup { width: 373rem; position: absolute; top: 80rem; left: 133rem; }
.tribes-share__mockup > .jt-lazyload { padding-top: 203.48%; }
.tribes-share__mockup-inner { position: absolute; left: 19rem; top: 17rem; right: 19rem; bottom: 17rem; padding: 0rem; }
.tribes-share__mockup-logo { display: none; width: 240rem; margin: 67rem auto 20rem; }
.tribes-share__mockup-logo .jt-lazyload { padding-top: 107.08%; }
.tribes-share__mockup-header { width: 335rem; margin: 0 auto; }
.tribes-share__mockup-header .jt-lazyload { padding-top: 19.1%; }
.tribes-share__mockup-qr { width: 145rem; margin: 60rem auto 0rem; }
.tribes-share__mockup-qr .jt-lazyload { padding-top: 100%; }
.tribes-share__mockup-txt { text-align: center; margin-top: 16rem; margin-bottom: 48rem; }
.tribes-share__mockup-btn { display: flex; justify-content: center; align-items: center; gap: 12rem; }
.tribes-share__mockup-btn .jt-share__item { position: relative; display: flex; align-items: center; justify-content: center; width: 48rem; height: 48rem; }
.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: 25rem; 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
 * **************************************** */
body.service-lptv .article__body { padding-bottom: 0; }

/* INTRO */
.lptv-intro__img { padding-top: 13.22%; }

/* PLAYLIST */
.lptv-playlist { padding-top: 80rem; }

.lptv-playlist__tabs { width: fit-content; max-width: 1000rem; margin: 0 auto; position: sticky; top: 20rem; border-radius: 99rem; overflow: hidden; z-index: 1; transition: top .4s; }
body.jt-minimize-layout--show .lptv-playlist__tabs { top: 86rem; }
.lptv-playlist__tabs:before,
.lptv-playlist__tabs:after { content: ''; display: block; width: 61rem; height: 100%; position: absolute; top: 0; z-index: 2; transition: opacity .3s; }
.lptv-playlist__tabs:before { left: 0; background: linear-gradient(270deg, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, 1) 70%); }
.lptv-playlist__tabs:after { right: 0; background: linear-gradient(90deg, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, 1) 70%); }
.lptv-playlist__tabs.lptv-playlist__tabs--start:before { opacity: 0; }
.lptv-playlist__tabs.lptv-playlist__tabs--end:after { opacity: 0; }
.lptv-playlist__tabs-slider { padding: 8rem; background: var(--color-gray-200); border: 1px solid var(--color-gray-300); border-radius: 99rem; overflow: hidden; }
.lptv-playlist__tabs-slider-inner { display: flex; width: fit-content; }
.lptv-playlist__tabs a { display: flex; padding: 6rem 28rem; white-space: nowrap; color: var(--color-gray-600); border-radius: 99rem; transition: color .3s, background .3s; }
.lptv-playlist__tabs a.lptv-playlist--active { color: var(--color-white); background: #000; }

.lptv-playlist__item { padding-top: 80rem; }
.lptv-playlist__item + .lptv-playlist__item { padding-top: 200rem; }

.lptv-playlist__title > i { font-style: normal; color: var(--color-gray-600) }
.lptv-playlist__desc { color: var(--color-gray-800); margin-top: 8rem; }
.lptv-playlist__control { text-align: center; margin-top: 120rem; }

.lptv-playlist__banner { margin-bottom: 160rem; }
.lptv-playlist__banner .jt-lazyload { padding-top: 40%; border-radius: 20rem; overflow: hidden; }
.lptv-playlist__banner p { margin-top: 40rem; text-align: center; }

.jt-yt-list-wrap { margin-top: 40rem; }
.jt-yt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50rem 36rem; }
.jt-yt-list__thumb { position: relative; border-radius: 20rem; overflow: hidden; }
.jt-yt-list__thumb:after { content: ''; display: block; width: 100%; 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 .jt-icon { width: 14rem; }
.jt-yt-list__hover-txt svg path { fill: var(--color-white); }
.jt-yt-list__title { display: block; margin-top: 16rem; }

/* SHARE */
.lptv-share { margin-top: 200rem; position: relative; background: var(--color-gray-100); }
.lptv-share__screen { position: relative; height: 676rem; display: grid; grid-template-columns: 1fr 1fr; }

.lptv-share__content { display: grid; align-items: center; align-content: center; gap: 40rem; }
.lptv-share__desc { display: block; }

.lptv-share__mockup-outer { position: relative; }
.lptv-share__mockup { width: 373rem; position: absolute; bottom: 0; left: 134rem; }
.lptv-share__mockup .jt-lazyload { padding-top: 159.78%; }



/* **************************************** *
 * ORIENTATION
 * **************************************** */
@media (orientation: portrait) {

    /* TRIBES */
    .tribes-intro__screen-mockup { max-height: 54vw; }

}



/* **************************************** *
* HOVER
* **************************************** */
@media (hover: hover) and (pointer: fine) {
    
    /* TRIBES */
    .tribes-share__mockup-btn .jt-share__item:hover:before { transform: scale(1.2); }
    
    /* LPTV */
    .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; }

}