@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * TECHNOLOGY
 * STRENGTH
 * PRODUCT
 * FAMILY
 * AWARD
 * NEWS
 * TRUST
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 0; padding-bottom: 0; }
.main-section { padding: 200rem 0 240rem; }
.main-section__head { text-align: center; margin-bottom: 80rem; }
.main-section__title { position: relative; }
.main-section__title i { position: absolute; top: -29rem; margin-left: -4rem; width: 66rem; height: 66rem; }
.main-section__title i svg { width: 100%; height: 100%; vertical-align: top; }
.main-section__desc { margin-top: 32rem; color: var(--color-gray-800); }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { position: relative; height: var(--fit-height, 100svh); }
.main-visual__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.main-visual__bg--mobile { display: none; }
.main-visual__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.main-visual__content { position: absolute; left: 0; width: 100%; bottom: 60rem; }
.main-visual__title { opacity: 0; }
.main-visual__desc { margin-top: 24rem; opacity: 0; }



/* **************************************** *
 * TECHNOLOGY
 * **************************************** */
.main-technology { padding-bottom: 200rem; }
.main-technology__video { position: relative; padding-top: 52.7%; border-radius: 32rem; overflow: hidden; }
.main-technology__video:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; border: 10rem solid var(--color-black); z-index: 1; box-sizing: border-box; pointer-events: none; }
.main-technology__video--mobile { display: none; }



/* **************************************** *
 * STRENGTH
 * **************************************** */
.main-strength { background: #C5E2FF; overflow: hidden; }
.main-strength__head { text-align: center; background: var(--color-white); padding: 127rem 40rem; margin: 0 70rem; border-radius: 32rem 32rem 0 0; }
.main-strength__container { position: relative; height: var(--full-height, 100vh); }
.main-strength__container:after { content: ''; position: absolute; left: 70rem; right: 70rem; height: 100%; background: var(--color-white); border-radius: 0 0 32rem 32rem; }
.main-strength__section { position: absolute; display: flex; width: 100%; height: 100%; border-radius: 32rem; overflow: hidden; transform: translate(0, 100%); z-index: 1; }
.main-strength__section:nth-child(even) { flex-direction: row-reverse; }
.main-strength__image { width: 38.55%; max-width: 740rem; height: 100%; }
.main-strength__image .jt-lazyload { height: 100%; }
.main-strength__image .jt-lazyload img { height: 100%; object-fit: cover; }
.main-strength__image--mobile { display: none; }
.main-strength__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 160rem 0 174rem; gap: 32rem; }
.main-strength__title { color: var(--color-white); }
.main-strength__desc { color: var(--color-white); }

.main-strength__section:nth-child(even) .main-strength__content { padding: 0 80rem 0 160rem; }

.main-strength__section:nth-child(1) .main-strength__content { background: var(--color-primary); }
.main-strength__section:nth-child(2) .main-strength__content { background: #166ACA; }
.main-strength__section:nth-child(3) .main-strength__content { background: #101E53; }



/* **************************************** *
 * PRODUCT
 * **************************************** */
.main-product { padding-top: 240rem; padding-bottom: 200rem; background: #F7F5F0; overflow: hidden; }
.main-product__section { position: relative; height: calc(var(--full-height, 100vh) * 2); }

.main-product__graphic { display: flex; justify-content: center; align-items: center; height: var(--full-height, 100vh); }
.main-product__graphic-image { width: 880rem; }
.main-product__graphic-image .jt-lazyload { padding-top: 100%; }
.main-product__graphic-image--mobile { display: none; }

.main-product__content { position: absolute; left: 0; width: 100%; top: 100%; background: #F7F5F0; }

.main-product__info { display: flex; align-items: stretch; gap: 170rem; background: var(--color-white); border-radius: 32rem; padding: 120rem 150rem 130rem; }
.main-product__info-data { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40rem; }
.main-product__info-title { display: flex; gap: 16rem; margin-top: 4rem; }
.main-product__info-title > b { position: relative; display: inline-block; padding: 4rem 20rem; border-radius: 10rem; background: linear-gradient(#6880E2, var(--color-primary)); color: var(--color-white); margin-top: -4rem; }
.main-product__info-title > b:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10rem; border: 1px solid var(--color-black); opacity: .1; box-sizing: border-box; }
.main-product__info-desc { margin-top: 32rem; }
.main-product__info-desc > b { display: block; margin-bottom: 8rem; }
.main-product__info-desc > span { display: block; color: var(--color-gray-800); margin-top: 10rem; }
.main-product__info-more { display: inline-flex; gap: 6rem; align-items: center; color: var(--color-primary); }
.main-product__info-more .jt-icon { width: 26rem; height: 26rem; }
.main-product__info-more .jt-icon path { fill: currentColor; }
.main-product__info-more > span { position: relative; }
.main-product__info-more > span:after { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: 0; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.main-product__info-example { width: 49.33%; max-width: 730rem; }
.main-product__info-example-inner { position: relative; }
.main-product__info-example-inner:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 6rem solid var(--color-black); border-radius: 16rem; box-sizing: border-box; }
.main-product__info-example-inner:after { content: ''; position: absolute; top: 8rem; left: 8rem; right: 8rem; bottom: 8rem; background: rgba(0, 0, 0, .8); filter: blur(20rem); clip-path: polygon(0 0, 100% 0, calc(100% + 50rem) 50rem, calc(100% + 50rem) calc(100% + 50rem), 50rem calc(100% + 50rem), 0 100%); box-sizing: border-box; }
.main-product__info-example-inner .jt-lazyload { padding-top: 56.16%; }
.main-product__info-example-slider { background: var(--color-black); border-radius: 16rem; overflow: hidden; }
.main-product__info-example-item { position: relative }
.main-product__info-example-explain { position: absolute; left: 35rem; bottom: 24rem; font-size: 10rem; line-height: 24rem; letter-spacing: var(--letter-spacing); font-weight: 500; color: #FFA34A; }

.main-product__public { display: flex; gap: 80rem; justify-content: space-between; padding: 48rem 150rem 38rem; }
.main-product__public-label { white-space: nowrap;; }
.main-product__public-data { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80rem; width: 1040rem; }
.main-product__public-item { display: block; }
.main-product__public-item p { color: var(--color-gray-800); text-decoration: underline; text-underline-offset: 6rem; text-decoration-color: transparent; transition: color .3s, text-decoration-color .3s; }
.main-product__public-item cite { display: block; margin-top: 16rem; color: var(--color-gray-700); transition: color .3s; }



/* **************************************** *
 * CUSTOMER
 * **************************************** */
.main-customer { overflow: hidden; }
.main-customer__list .jt-marquee__wrap { padding-top: 20rem; }
.main-customer__list .jt-marquee__item { position: relative; width: 280rem; border-radius: 24rem; margin-left: 20rem; }
.main-customer__list .jt-marquee__item:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #D9D9D9; border-radius: inherit; box-sizing: border-box; }
.main-customer__list .jt-marquee__item .jt-lazyload { padding-top: 50%; }

.main-customer__interview { margin-top: 160rem; }
.main-customer__slider { border-radius: 32rem; padding: 80rem 137rem; background: var(--color-gray-100); border-radius: 32rem; padding: 80rem 137rem; background: var(--color-gray-100); }
.main-customer__item { display: flex; gap: 120rem; align-items: center; height: auto; }
.main-customer__logo { width: 23.91%; max-width: 360rem; }
.main-customer__logo .jt-lazyload { padding-top: 60.55%; }
.main-customer__content { flex: 1; }
.main-customer__source { display: block; margin-top: 24rem; color: var(--color-gray-800); }

.main-customer__slider.swiper-initialized + .swiper-control { display: block; }



/* **************************************** *
 * AWARD
 * **************************************** */
.main-award { background: #E8EAF7; overflow: hidden; }
.main-award__slider { margin: 0 -10rem; }
.main-award__item { width: 25%; height: auto; padding: 0 10rem; }
.main-award__content { position: relative; height: 100%; background: rgba(255, 255, 255, .5); border-radius: 32rem; padding: 35rem 40rem 180rem; }
.main-award__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.main-award__desc { margin-top: 12rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.main-award__logo { position: absolute; bottom: 40rem; right: 40rem; width: 120rem; height: 120rem; background: var(--color-white); border-radius: 50%; }
.main-award__logo-image { position: relative; padding-top: 100%; }
.main-award__logo-image img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }



/* **************************************** *
 * NEWS
 * **************************************** */
.main-news { background: var(--color-gray-100); }
.main-news .jt-board-list { border-top-width: 1px; border-top-color: var(--color-gray-400); }



/* **************************************** *
 * TRUST
 * **************************************** */
.main-trust { padding-bottom: 200rem; }
.main-trust__list { display: flex; gap: 20rem; justify-content: center; }
.main-trust__list > li { flex: 1; max-width: 280rem; }
.main-trust__list .jt-lazyload { padding-top: 100%; }
.main-trust__list .jt-lazyload img { height: 100%; object-fit: cover; }



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

    /* PRODUCT */
    .main-product__info-more:hover > span:after { width: 100%; left: 0; right: auto; }
    .main-product__public-item:hover p { color: var(--color-black); text-decoration-color: currentColor; }
    .main-product__public-item:hover cite { color: var(--color-gray-800); }

}