@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * INTRO
 * TECHNOLOGY
 * NEWS
 * HOVER
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 0; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; background: var(--color-black); }
html.android .main-visual { height: 100svh; }

.main-visual__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0, 15, 23, 0.05) 0%, rgba(0, 15, 23, 0.05) 55%, #000F17 100%); }
.main-visual__bg .jt-background-video__poster--small { display: none; }
.main-visual__picture { width: 100%; height: 100%; position: relative; background: no-repeat center center; background-size: cover; }
.main-visual__picture--small { display: none; }

.main-visual__content { width: 100%; position: absolute; left: 0; bottom: 120rem; }
.main-visual__typo { font-size: 0; color: var(--color-white); }
.main-visual__typo-dot { display: inline-block; vertical-align: baseline; width: 12rem; height: 12rem; margin-left: 10rem; position: relative; top: -3rem; background: var(--color-primary); }
.main-visual__content .jt-btn__text { margin-top: 15rem; margin-bottom: -5rem; }
.main-visual__typo--small { display: none; }

/* SWIPER OVERRIDE */
.main-visual .swiper-control { width: 100%; max-width: 1760rem; position: absolute; left: 50%; bottom: 57rem; transform: translate(-50%, 0); }

.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { width: calc(100% - 21rem); height: 40rem; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets:has(> :only-child) { width: 100%; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { flex: 1 1 0; min-width: 0; width: auto; height: 100%; background: transparent; opacity: 1; }

.main-visual .swiper-control .swiper-pagination-bullet__progress { width: 100%; height: 3rem; position: absolute; top: 50%; left: 0; background: color-mix(in srgb, var(--color-white) 10%, transparent 90%); transform: translate(0, -50%); overflow: hidden; }
.main-visual .swiper-control .swiper-pagination-bullet__progress > span { display: block; width: 0; height: 100%; background: var(--color-primary); }

.main-visual .swiper-control .swiper-pagination-bullet__label { width: 100%; padding: 0 10rem; margin-top: -2rem; position: absolute; top: 50%; text-align: left; background: var(--color-white); overflow: hidden; opacity: 0; visibility: hidden; }
.main-visual .swiper-control .swiper-pagination-bullet__label > span { display: block; padding: 10rem 0 12rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.main-visual .swiper-control .swiper-pagination-bullet__label > span br { display: none; }

.main-visual .swiper-pagination-bullet:only-child { display: block !important; }

/* FIX JS LOADING TIME */
.main-visual .swiper-control { opacity: 0; }

/* MOTION */
.main-visual__typo-dot { opacity: 0; }
.main-visual__content .jt-btn__text { opacity: 0; }



/* **************************************** *
 * INTRO
 * **************************************** */
.main-intro { height: 1000vh; position: relative; overflow: hidden; --intro-height: 100vh; }
.main-intro__inner { width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; }

html.mobile .main-intro { --intro-height: 100lvh; }
html.ios.chrome .main-intro { --intro-height: 100svh; }

html.kakao .main-intro { height: calc(var(--js-vheight) * 10); --intro-height: var(--js-vheight); }
html.kakao .main-intro__inner { height: var(--js-vheight); }

.main-intro__background { width: 100%; height: var(--intro-height); position: absolute; top: 0; left: 0; overflow: hidden; }

.main-intro__content { width: 100%; height: var(--intro-height); position: relative; overflow: hidden; }
.main-intro__content-item { width: 100%; height: 100%; padding: 80rem 0; position: absolute; top: 0; left: 0; }
.main-intro__content-item:not(:first-child) { opacity: 0; }

.main-intro__content-item :is(b, p) span { color: var(--color-primary); }
.main-intro__content-item h2 + p { margin-top: 40rem; }
.main-intro__content-item b + p { max-width: 576rem; margin-top: 30rem; }



/* **************************************** *
 * TECHNOLOGY
 * **************************************** */
.main-technology { position: relative; background: var(--color-black); }

.main-technology__title { width: calc(100% - 160rem); position: absolute; top: 60rem; left: calc((100vw - 1760rem) / 2); font-size: 0; color: var(--color-white); z-index: 2; }
.main-technology__title-dot { display: inline-block; vertical-align: baseline; width: 12rem; height: 12rem; margin-left: 10rem; position: relative; top: 5rem; background: var(--color-primary); }

.main-technology__bg { padding-top: 49.688%; position: relative; }
.main-technology__bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.main-technology__content { width: 872rem; position: absolute; left: calc((100vw - 1760rem) / 2); bottom: 75rem; }
.main-technology__content-title { color: var(--color-white); }
.main-technology__content-desc { margin-top: 20rem; margin-bottom: 25rem; color: var(--color-white); }

.main-technology__item--ufm .main-technology__bg:after { background: linear-gradient(180deg, rgba(54, 54, 54, 0.9) 0%, rgba(54, 54, 54, 0) 35%, rgba(54, 54, 54, 0) 65.38%, rgba(54, 54, 54, 0.9) 100%); }
.main-technology__item--ix .main-technology__bg:after { background: linear-gradient(180deg, rgba(56, 20, 7, 0.9) 0%, rgba(56, 20, 7, 0) 35%, rgba(56, 20, 7, 0) 65%, rgba(56, 20, 7, 0.9) 100%); }



/* **************************************** *
 * NEWS
 * **************************************** */
.main-news { padding-top: 120rem; }

.main-news__title { margin-bottom: 90rem; text-align: center; }

/* COLUMN */
.main-news__column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 76rem; }
.main-news__column + .main-news__column { margin-top: 80rem; }
.main-news__column-item { min-width: 0; }
.main-news__column-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rem; }
.main-news__column-title { color: var(--color-primary); }

.main-news__column:has(.main-news__column-item:only-child) { grid-template-columns: 1fr; }

/* LIST */
.main-news__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 46rem; position: relative; border-top: 1px solid var(--color-black); }

.main-news__list-link { display: block; color: inherit; }

.main-news__list-content { display: flex; flex-direction: column; gap: 20rem; padding: 35rem 0; }
.main-news__list-title { height: calc(var(--font-size-primary-07) * var(--font-lineheight-primary-09) * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.main-news__list-thumb { position: relative; background: var(--color-gray-100); }
.main-news__list-thumb .jt-lazyload { padding-top: 62.94%; }
.main-news__list-thumb .jt-lazyload img { top: 50%; transform: translateY(-50%); }

.main-news__list-play { width: 52rem; height: 52rem; position: absolute; top: 50%; left: 50%; background: color-mix(in srgb, var(--color-white) 70%, transparent 30%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); border-radius: 50%; transform: translate3d(-50%, -50%, 0); }
.main-news__list-play svg { display: block; width: 21rem; height: auto; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.main-news__list-play svg path { fill: var(--color-black); }

.main-news__list-icon { display: flex; align-items: center; justify-content: center; width: 80rem; height: 80rem; position: absolute; right: 0; bottom: 0; background: var(--color-white); transition: background-color .3s; }
.main-news__list-icon .jt-accent-icon { width: 28rem; }



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

    /* NEWS */
    .main-news__list-link:hover .main-news__list-icon { background: var(--color-primary); }

}