@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * PLATFORM
 * SOLUTIONS
 * HOVER
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
.main-section { position: relative; background: var(--color-gray-100); }
.main-section__head { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20rem; margin-bottom: 60rem; z-index: 1; }
.main-section__title { flex: 1; }
.main-section__title p { margin-top: 20rem; }
.main-section__head-control { width: 445rem; text-align: center; }

/* BLACK */
.main-section--black { background: var(--color-black); }
.main-section--black .main-section__title { color: var(--color-white); }
.main-section--black .main-section__desc { color: var(--color-white); }

/* HEADER */
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) #logo path { fill: var(--color-white); }
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) #menu > li > a { color: var(--color-white); }
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) .header__extra-lang .jt-icon path { fill: var(--color-white); }
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) .header__extra-contact span { background: var(--color-white); color: var(--color-black); }
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) .header__extra-contact .jt-icon { background: var(--color-white); }
body.home #header:not(.minimize):not(:has(#menu > li:hover > ul)) .header__extra-contact .jt-icon path { fill: var(--color-black); }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual__item { height: 100svh; }
.main-visual__bg { position: absolute; inset: 0; }
.main-visual__bg:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); z-index: 1; }
.main-visual__image { position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-visual__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40rem 85rem; color: var(--color-white); z-index: 2; }
.main-visual__title { opacity: 0; }
.main-visual__desc { margin-top: 20rem; opacity: 0; }
.main-visual .swiper-control { left: 0; right: 0; bottom: 35rem; text-align: left; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { margin-left: -5rem; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 110rem; height: 15rem; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { width: 100rem; height: 5rem; border-radius: 0; background: var(--color-white); opacity: .3; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { opacity: 1; }




/* **************************************** *
 * PLATFORM
 * **************************************** */
.main-platform { padding: 120rem 0 0; height: 1275rem; }
.main-platform__webgl { position: absolute; inset: 0; }
.main-platform__webgl-bg {  position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-platform__webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.main-platform__webgl-anchor { position: absolute; top: 427rem; left: 50%; width: 856rem; aspect-ratio: 1 / 1; transform: translate(-50%, 0); }



/* **************************************** *
 * SOLUTIONS
 * **************************************** */
.main-solutions { padding: 60rem 0; background: var(--color-gray-900); overflow: hidden; }
.main-solutions__slider { overflow: visible; }
.main-solutions__item { margin-right: 40rem; width: 500rem; aspect-ratio: 1 / 1; }
.main-solutions__item:last-child { margin-right: 0; }
.main-solutions__item a { position: relative; display: block; width: 100%; height: 100%; }
.main-solutions__image { position: relative; width: 100%; height: 100%; transition: transform .3s; }
.main-solutions__image .jt-lazyload { height: 100%; }
.main-solutions__title { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--color-white); opacity: 0; transition: opacity .3s; }



/* **************************************** *
 * SOLUTIONS
 * **************************************** */
.main-technology { padding: 120rem 0; }
.main-technology__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 36rem; }
.main-technology__list a { display: flex; flex-direction: column; gap: 20rem; color: var(--color-black); }
.main-technology__category { background: var(--color-black); color: var(--color-white); padding: 8rem 10rem; border-radius: 2rem; }
.main-technology__image { border-radius: 2rem; overflow: hidden; }
.main-technology__image .jt-lazyload { padding-top: 55.88%; transition: transform 1s; }
.main-technology__more { display: inline-block; box-shadow: inset 0 -1px 0 0 currentColor; margin-top: 20rem; }



/* **************************************** *
 * FLOONE
 * **************************************** */
.main-floone { padding: 80rem 0; height: 1197rem; }
.main-floone .main-section__head { flex-direction: column; align-items: flex-start; z-index: 1; }
.main-floone .main-section__control { margin-top: 12rem; }
.main-floone__data { position: absolute; left: 0; right: 0; bottom: 80rem; z-index: 1; }
.main-floone__data-list { width: 433rem; }
.main-floone__data-list > li { color: var(--color-white); padding: 20rem 0; }
.main-floone__data-list > li + li { border-top: 1px solid var(--color-gray-800); }
.main-floone__data-count { display: flex; gap: 4rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.main-floone__webgl-bg { position: absolute; inset: 0; background: no-repeat center center / cover; }
.main-floone__webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.main-floone__webgl-anchor { position: absolute; top: 148rem; right: -136rem; width: 1256rem; aspect-ratio: 1 / 1; }



/* **************************************** *
 * STORIES
 * **************************************** */
.main-stories { padding: 120rem 0; }
.main-stories__list { display: grid; grid-template-columns: 1224rem auto; gap: 36rem; }
.main-stories__list a { display: block; position: relative; }
.main-stories__thumb { border-radius: 2rem; overflow: hidden; }
.main-stories__thumb:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.main-stories__thumb .jt-lazyload { padding-top: 56.2%; transition: transform 1s; }
.main-stories__content { position: absolute; left: 0; bottom: 0; right: 0; padding: 20rem; color: var(--color-white); }
.main-stories__category { display: block; margin-bottom: 10rem; }

/* FIRST */
.main-stories__list > li:first-child { grid-row: span 2; }
.main-stories__list > li:first-child .main-stories__content { padding: 40rem; }



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

    /* LAYOUT */
    body.home #header:not(.minimize) .header__extra-contact:hover span { background: rgba(255, 255, 255, .1); color: var(--color-white); }
    body.home #header:not(.minimize) .header__extra-contact:hover .jt-icon { background: rgba(255, 255, 255, .1); } 
    body.home #header:not(.minimize) .header__extra-contact:hover .jt-icon path { fill: var(--color-white); }

    /* SOLUTIONS */
    .main-solutions__item a:hover .main-solutions__title { opacity: 1; }
    .main-solutions__item a:hover .main-solutions__image { transform: translate(0, -20rem); }

    /* TECHNOLOGY */
    .main-technology__list a:hover .main-technology__image .jt-lazyload { transform: scale(1.05); }

    /* STORIES */
    .main-stories__list a:hover .main-stories__thumb .jt-lazyload { transform: scale(1.05); }

}