@charset "utf-8";

/*
 * File       : home.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * GLOBAL
 * VISUAL
 * MARQUEE
 * BRAND STORY
 * SOLUTION
 * ACTIVITY
 * HOVER
 * TOUCH DEVICE
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
.main-title { text-align: center; }
.main-title h2 { transition: color .3s; }
.main-title p { margin-top: 16rem; color: var(--color-gray-700); transition: color .3s, opacity .3s; }

body.jt-background--dark .main-title h2,
body.jt-background--dark .main-title p,
body.jt-background--dark .main-solution__data-title,
body.jt-background--dark .main-solution__data-desc { color: var(--color-white); } 
body.jt-background--dark .main-solution__data-item > a:after { background: var(--color-white); }
body.jt-background--dark .main-solution__data-title .jt-icon { background: var(--color-white); }
body.jt-background--dark .main-solution__data-title .jt-icon path { fill: var(--color-gray-700); }

body.jt-background--dark .main-title p { opacity: .8; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { position: relative; padding-top: 166rem; overflow: hidden; z-index: 1; }
.main-visual__title { text-align: center; }
.main-visual__title P { color: var(--color-gray-700); }
.main-visual__title b { display: block; letter-spacing: .17em; margin-top: 16rem; margin-right: -.17em; font-weight: 700; }

.main-visual__screen { position: relative; height: 100vh; margin-top: 80rem; }
html.kakao .main-visual__screen { height: var(--full-height); }
.main-visual__screen-inner { position: relative; margin: 0 auto; width: 100%; height: 100%; clip-path: inset(0 calc((100% - 580rem) / 2) round 20rem); }



/* **************************************** *
 * MARQUEE
 * **************************************** */
.main-marquee { position: relative; padding: 12rem 0; border-bottom: 1px solid var(--color-gray-300); overflow: hidden; opacity: 0; transition: opacity .3s; }
.main-marquee.jt-marquee { opacity: 1; }
.main-marquee__text { font-size: 36rem; line-height: 60rem; letter-spacing: .1em; font-weight: 700; margin-right: 30rem; color: var(--color-gray-500); }



/* **************************************** *
 * BRAND STORY
 * **************************************** */
.main-brand-story { position: relative; padding-top: 160rem; }
.main-brand-story .wrap { z-index: 1; }
.main-brand-story__more { text-align: center; margin-top: 40rem; }
.main-brand-story__stage { position: relative; }
.main-brand-story__webgl { position: relative; height: 600vh; }
.main-brand-story__webgl canvas { pointer-events: none; }
.main-brand-story__webgl-inner { position: sticky; top: 0; overflow: hidden; }
.main-brand-story__webgl-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1244rem; height: 600rem; }
.main-brand-story__webgl-area > span { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; width: 180rem; height: 180rem; position: absolute; transform: translate(-50%, -50%) scale(0); background: rgba(0, 0, 0, .85); color: var(--color-white); }



/* **************************************** *
 * SOLUTION
 * **************************************** */
.main-solution { position: relative; padding: 160rem 0; }

.main-solution__tab { margin-top: 64rem; }

.main-solution__tab-list { text-align: center; margin-bottom: 64rem; }
.main-solution__tab-list a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-white); min-width: 134rem; text-align: center; padding: 6rem 16rem; transition: color .3s, opacity .3s; } 
.main-solution__tab-list a.main-solution--active { color: var(--color-black); }
.main-solution__tab-list-inner { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8rem; background: #262626; border-radius: 99rem; }

.main-solution__tab-train { display: block; position: absolute; top: 8rem; bottom: 8rem; left: 8rem; min-width: 134rem; background: var(--color-white); border-radius: 99rem; }

.main-solution__tab-content-inner { position: relative; }

.main-solution__data { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; opacity: 0; }
.main-solution__data.main-solution--active { visibility: visible; opacity: 1; }

.main-solution__data-item { position: relative; }
.main-solution__data-item > a { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-content: space-between; padding: 64rem 0; gap: 64rem; }
.main-solution__data-item > a:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-black); transition: background .3s, opacity .3s; opacity: .4; }
.main-solution__data-item > a > * { opacity: .4; transition: opacity .3s, color .3s; }

.main-solution__data-thumb { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 352rem; border-radius: 20rem; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; display: none; }
.main-solution__data-thumb .jt-lazyload { padding-top: 100%; }

.main-solution__data-thumb--square { border-radius: 20rem; }
.main-solution__data-thumb--circle { border-radius: 50%; }

.main-solution__data-title { display: block; }

.main-solution__data-title { font-size: 0; }
.main-solution__data-title > span { vertical-align: middle; }
.main-solution__data-title .jt-icon { display: inline-flex; align-items: center; justify-content: center; width: 32rem; height: 32rem; margin-left: 20rem; border-radius: 50%; background: var(--color-black); opacity: 0; transition: opacity .3s, background .3s; }
.main-solution__data-title .jt-icon svg path { fill: var(--color-white); }

.main-solution__data-desc { text-align: right; }



/* **************************************** *
 * ACTIVITY
 * **************************************** */
.main-activity { position: relative; padding: 160rem 0 300rem; overflow: hidden; }

.main-activity__stage { position: relative; margin-top: 80rem; pointer-events: none; }
.main-activity__stage.main-activity--complete { pointer-events: all; }

.main-activity__marquee { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); opacity: 0; transition: opacity .3s; }
.main-activity__marquee.jt-marquee { opacity: 1; }
.main-activity__marquee-text { font-size: 100rem; line-height: 1; color: var(--color-gray-400); font-weight: 500; }

.main-activity__list { text-align: center; font-size: 0; white-space: nowrap; }

.main-activity__item { position: relative; display: inline-block; max-width: 400rem; width: calc(25% - 14.66rem); perspective: 1000rem; }
.main-activity__item + .main-activity__item { margin-left: 22rem; }
.main-activity__item-inner { position: relative; display: block; padding-top: 135%; text-align: left; white-space: normal; transform-style: preserve-3d; transition: transform .5s; }
.main-activity__item-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 32rem; border-radius: 20rem; overflow: hidden; background: no-repeat center center / cover; transform: translateZ(.1px); transition: box-shadow 1s; }
.main-activity__item-content:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 160rem; background: linear-gradient(#000, transparent); opacity: .4; z-index: -1; }
.main-activity__item-reverse { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 32rem; border-radius: 20rem; overflow: hidden; transform: rotateY(180deg) translateZ(.1px); clip-path: inset(1px); }
.main-activity__item-reverse:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 160rem; background: linear-gradient(#000, transparent); opacity: .1; z-index: -1; }
.main-activity__item-category { display: block; color: var(--color-white); margin-bottom: 4rem; }
.main-activity__item-title { display: block; color: var(--color-white); margin-bottom: 24rem; }
.main-activity__item-desc { color: var(--color-white); opacity: .7; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.main-activity__item-btn { position: absolute; bottom: 32rem; }

.main-activity__item.swiper-slide-active .main-activity__item-inner,
.main-activity__item.swiper-slide-duplicate-active .main-activity__item-inner { transform: scale(1); }
.main-activity__item.main-activity__item--active .main-activity__item-inner { transform: rotateY(180deg); }
.main-activity__item.main-activity__item--active .main-activity__item-reverse { clip-path: none; }

.main-activity__item--02 { z-index: 1; }

.main-activity__item--01 .main-activity__item-reverse { background: #001c77; }
.main-activity__item--02 .main-activity__item-reverse { background: #f37321; }
.main-activity__item--03 .main-activity__item-reverse { background: #0b3b60; }

.main-activity__slider-control { position: absolute; width: 100%; left: 0; top: 100%; padding-top: 30rem; display: flex; align-items: center; justify-content: center; gap: 18rem; text-align: center;  opacity: 0; transition: opacity .3s; }
.main-activity__slider-pagination { display: flex; align-items: center; justify-content: center; flex-flow: row wrap; }
.main-activity__slider-pagination.swiper-pagination-bullets .swiper-pagination-bullet { display: inline-flex; align-items: center; justify-content: center; margin: 0; width: 20rem; height: 20rem; background: none; opacity: 1; }
.main-activity__slider-pagination .swiper-pagination-bullet:after { content: ''; display: block; width: 8rem; height: 8rem; border-radius: 50%; background: var(--color-gray-500); transition: background .3s, transform .3s; }
.main-activity__slider-pagination .swiper-pagination-bullet-active { pointer-events: none; }
.main-activity__slider-pagination .swiper-pagination-bullet-active:after { background: var(--color-black); }
.main-activity__slider-navigator-btn { display: inline-flex; width: 40rem; height: 40rem; align-items: center; justify-content: center; cursor: pointer; visibility: hidden; opacity: 0; }
.main-activity__slider-navigator-btn .jt-icon { width: 20rem; height: 20rem; }
.main-activity__slider-navigator-btn .jt-icon path { fill: var(--color-gray-500); }
.main-activity__slider-navigator-btn.swiper-button-disabled { pointer-events: none; }

.main-activity__stage:not(.main-activity--complete) .main-activity__slide:nth-child(n+2) { opacity: 0; }
.main-activity__slider:not(.main-activity__slider--init) .main-activity__slider-control { visibility: hidden; }

.main-activity--complete .main-activity__item-content { box-shadow: 0 0 60rem 0 rgba(0, 0, 0, 0.13); }
.main-activity__slider--init .main-activity__slider-control { opacity: 1; visibility: visible; }

.main-activity__slider-mobile { display: none; }



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

    /* SOLUTION */
    .main-solution__tab-list a:not(.main-solution--active):hover { opacity: .8; }

    .main-solution__data-item > a:hover:after { opacity: 1; }
    .main-solution__data-item > a:hover > * { opacity: 1; }
    .main-solution__data-item > a:hover .main-solution__data-title .jt-icon { opacity: 1; }

    /* ACTIVITY */
    .main-activity__item:hover .main-activity__item-inner { transform: rotateY(180deg); }
    .main-activity__item:hover .main-activity__item-reverse { clip-path: none; }

    .main-activity__slider-navigator-btn:hover .jt-icon path { fill: var(--color-black); }

}



/* **************************************** *
 * TOUCH DEVICE
 * **************************************** */
@media (pointer: coarse) {
     
    /* SOLUTION */
    .main-solution__data-item > a > * { opacity: 1; }
    .main-solution__data-title .jt-icon { opacity: 1; }
    .main-solution__data-desc { color: var(--color-gray-600); }
    body.jt-background--dark .main-solution__data-desc { color: var(--color-gray-500); }

}