@charset "utf-8";

/*
 * File    : sub-solutions.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * SOLUTIIONS
 * FLOONE AI SUITE
 * HOVER
 */

 

/* **************************************** *
 * SOLUTIIONS
 * **************************************** */
/* SLOGAN */
.solutions-slogan { display: flex; align-items: center; justify-content: center; height: 100vh; text-align: center; background: var(--color-black); color: var(--color-gray-200); }
.solutions-slogan__head { display: flex; flex-direction: column; align-items: center; gap: 32rem; }
.solutions-slogan__title { display: inline-block; position: relative; }
.solutions-slogan__line { position: absolute; left: 0; top: calc(100% + 10rem); width: 100%; height: 5rem; background: currentColor; }
.solutions-slogan__desc { margin-top: 67rem; }
.solutions-slogan__control { display: flex; justify-content: center; margin-top: 48rem; }
.solutions-slogan__control a { display: inline-flex; gap: 1px; color: var(--color-white); border-radius: 2rem; overflow: hidden; backdrop-filter: blur(25rem); transition: background-color .3s; }
.solutions-slogan__control span { position: relative; display: flex; align-items: center; justify-content: center; padding: 10rem 20rem; }
.solutions-slogan__control span:before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); }
.solutions-slogan__control .jt-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 46rem; transition: background-color .3s; }
.solutions-slogan__control .jt-icon:before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); }
.solutions-slogan__control .jt-icon svg { width: 24rem; }
.solutions-slogan__control .jt-icon path { fill: currentColor; }

/* PRODUCT */
.solutions-product { height: 100vh; background: var(--color-black); }
.solutions-product__container { height: 100%; }
.solutions-product__content { position: relative; height: 100%; }
.solutions-product__video { position: absolute; inset: 0; overflow: hidden; }
.solutions-product__video video { object-fit: contain; }
.solutions-product__video .jt-background-video__poster { background-size: contain; }
.solutions-product__tabs { position: absolute; left: 50%; bottom: 60rem; display: flex; gap: 10rem; transform: translate(-50%, 0); }
.solutions-product__tabs a { display: flex; align-items: center; padding: 10rem 20rem; gap: 10rem; white-space: nowrap; color: var(--color-white); background: var(--color-gray-900); border-radius: 99rem; transition: background .3s, color .3s; }
.solutions-product__tabs a:before { content: ''; display: block; width: 10rem; aspect-ratio: 1 / 1; background: currentColor; border-radius: 50%; }
.solutions-product__tabs a.jt-tab--active { color: var(--color-black); background: var(--color-gray-200); }

/* FEATURE */
.solutions-feature { padding: 120rem 0; }

/* LINE UP */
.solutions-lineup { background: var(--color-black); padding: 120rem 0 0; }
.solutions-lineup .article__section-title { color: var(--color-white); }
.solutions-lineup__container { height: 100vh; padding-top: 40rem; }
.solutions-lineup__links { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); display: flex; gap: 20rem; width: 920rem; justify-content: space-between; }
.solutions-lineup__links a { color: var(--color-gray-400); transition: color .3s; }
.solutions-lineup__list { position: relative; height: 638rem; }
.solutions-lineup__list > li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top: 1px solid var(--color-gray-400); }
.solutions-lineup__inner { display: flex; justify-content: space-between; gap: 120rem; height: 100%; color: var(--color-white); background: var(--color-black); padding: 60rem 0; }
.solutions-lineup__content { flex: 1; display: flex; flex-direction: column; gap: 60rem; }
.solutions-lineup__content-title { margin-bottom: 14rem; }
.solutions-lineup__content-subject { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.solutions-lineup__content-desc { margin-top: 20rem; }
.solutions-lineup__content-more { display: inline-block; box-shadow: inset 0 -1px 0 0 currentColor; }
.solutions-lineup__thumb { width: 920rem; border-radius: 2rem; overflow: hidden; }
.solutions-lineup__thumb .jt-lazyload { padding-top: 56.19%; transition: transform 1s; }
.solutions-lineup__thumb .jt-lazyload__color-preview { background: var(--color-gray-900); }
.solutions-lineup__thumb .jt-lazyload img { height: 100%; object-fit: cover; }

/* INDUSTRY */
.solutions-industry { padding: 160rem 0 140rem; }
.solutions-industry__list { margin-top: 100rem; border-top: 1px solid var(--color-gray-500); }
.solutions-industry__list > li { display: flex; gap: 100rem; padding: 32rem 120rem 32rem 50rem; border-bottom: 1px solid var(--color-gray-500); }
.solutions-industry__number { width: 138rem; }
.solutions-industry__thumb { width: 532rem; border-radius: 2rem; overflow: hidden; }
.solutions-industry__thumb .jt-lazyload { padding-top: 56.39%; transition: transform 1s; }
.solutions-industry__content { flex: 1; }
.solutions-industry__title { margin-bottom: 32rem; }

/* INTRO */
.solutions-intro { background: var(--color-black); text-align: center; padding: 160rem 0; }
.solutions-intro__title { display: block; color: var(--color-gray-200); margin-bottom: 20rem; }
.solutions-intro__desc { color: var(--color-gray-200) }

/* SPECIFICATIONS */
.solutions-specifications { padding: 40rem 0; }
.solutions-specifications__container { display: flex; align-items: center; justify-content: space-between; gap: 40rem; }
.solutions-specifications__image { flex: 1; }
.solutions-specifications__image .jt-lazyload { padding-top: 88.88%; }
.solutions-specifications__image .jt-lazyload img { height: 100%; object-fit: cover; }
.solutions-specifications__content { flex: 1; display: flex; flex-direction: column; gap: 32rem; }
.solutions-specifications__list { border-top: 2px solid var(--color-gray-400); }
.solutions-specifications__list li { display: flex; gap: 20rem; padding: 20rem 0; border-bottom: 1px solid var(--color-gray-400); }
.solutions-specifications__list b { width: 240rem; }
.solutions-specifications__list span { flex: 1; }
.solutions-specifications__list em { font-weight: 700; }
.solutions-specifications__source { display: flex; align-items: center; gap: 20rem; }
.solutions-specifications__source-title { flex: 1; }

/* PACKAGE */
.solutions-package { padding: 160rem 0; }
.solutions-package + .solutions-package { padding-top: 0; }

/* SERVICE */
.solutions-service { background: var(--color-gray-200); padding: 120rem 0; }
.solutions-service__list { border-top: 1px solid var(--color-gray-700); }
.solutions-service__list > li { display: flex; align-items: center; justify-content: space-between; gap: 20rem; padding: 32rem 20rem; min-height: 123rem; border-bottom: 1px solid var(--color-gray-700); }
.solutions-service__column:first-child { width: 400rem; }
.solutions-service__column:not(:first-child) { flex: 1; }

/* BANNER */
.solution-banner { position: relative;}
.solution-banner__bg { position: relative; padding-top: 35.32%; }
.solution-banner__bg:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.solution-banner__content { position: absolute; left: 0; bottom: 0; right: 0; padding: 60rem 80rem; color: var(--color-white); }
.solution-banner__desc { margin-top: 10rem; }

/* PREVIEW */
.solution-preview { display: flex; gap: 80rem; background: var(--color-gray-200); padding: 90rem 80rem; margin-top: 40rem; }
.solution-preview__images { position: relative; width: 1200rem; aspect-ratio: 1 / 0.5626; background: var(--color-black); background: rgba(255, 255, 255, .5); border-radius: 8rem; }
.solution-preview__image { position: absolute; inset: 8rem; opacity: 0; border-radius: 4rem; overflow: hidden; visibility: hidden; transition: opacity .3s, visibility .3s; }
.solution-preview__image .jt-lazyload { height: 100%; }
.solution-preview__image .jt-lazyload__color-preview { background: var(--color-gray-400); }
.solution-preview__content { flex: 1; }
.solution-preview__list > li + li { border-top: 1px solid var(--color-gray-500); }
.solution-preview__list a { display: block; padding: 20rem 0; color: var(--color-gray-500); padding: 20rem 0; transition: color .3s; }

.solution-preview__image.solution-preview--active { opacity: 1; visibility: visible; }
.solution-preview__list > li.solution-preview--active a { color: var(--color-black); }

/* SOLUTION FEATURE */
.solution-feature .jt-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40rem; }
.solution-feature .jt-feature > li { position: relative; }
.solution-feature .jt-feature__content-title { position: absolute; top: 40rem; left: 40rem; padding-right: 100rem; }
.solution-feature .jt-feature__icon { text-align: right; }

 

/* **************************************** *
 * FLOONE AI SUITE
 * **************************************** */
body.page-template-floone-ai-suite .article__section:has(.jt-cta) { background: var(--color-gray-200); }



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

    /* VISUAL */
    .solutions-visual .swiper-control .swiper-pagination-bullet:hover .swiper-pagination-bullet__label { opacity: 1; }

    /* SLOGAN */
    .solutions-slogan__control a:hover { background: var(--color-gray-900); }

    /* PRODUCT */
    .solutions-product__tabs a:not(.jt-tab--active):hover { background: var(--color-gray-800); }

    /* LINE UP */
    .solutions-lineup__links a:hover { color: var(--color-white); }
    .solutions-lineup__list > li > a:hover .solutions-lineup__thumb .jt-lazyload { transform: scale(1.05); }

    /* FORM */
    .solution-preview__list a:hover { color: var(--color-black); }

}