@charset "utf-8";

/*
 * File    : sub-innovation.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 개발혁신
 * 제조혁신
 * 디지털혁신
 */

 

/* **************************************** *
 * 개발혁신
 * **************************************** */
body.page-template-rnd .main-container { padding-bottom: 0; }

/* SEQUENCE */
.rnd-sequence { padding: 231rem 0 230rem; position: relative; background: var(--color-white); overflow: hidden; }

.rnd-sequence__list { display: flex; flex-direction: column; gap: 8rem; }
.rnd-sequence__list > li { display: flex; align-items: center; justify-content: center; gap: 12rem; height: 159rem; color: var(--color-primary); }
.rnd-sequence__video { width: 0rem; height: 100%; flex-shrink: 0; }
.rnd-sequence__video-inner { width: 100%; height: 100%; padding: 0 12rem; position: relative; }
.rnd-sequence__video-inner .jt-background-video { width: calc(100% - 24rem); left: 12rem; border-radius: var(--border-radius-04); }

/* FUTURE */
.rnd-future__card { height: calc(var(--section-fvh) * 3.5); position: relative; }
.rnd-future__card-inner { height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }

.rnd-future__card .wrap-full { height: 100%; }

.rnd-future__card-bg { --clip-top: 66.5%; --clip-bottom: 0%; --clip-horizontal: 33.3%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip-path: inset(var(--clip-top) var(--clip-horizontal) var(--clip-bottom) var(--clip-horizontal)); }

.rnd-future__card-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 60rem 0; text-align: center; }
.rnd-future__card-title { display: flex; flex-direction: column; gap: 40rem; color: var(--color-white); transition: color .3s; }
.rnd-future__card-desc { color: var(--color-white); }

.rnd-future--innovation { background: var(--color-quaternary); }
.rnd-future--innovation .rnd-future__card-title { color: var(--color-primary); }

.rnd-future--development { background: var(--color-secondary); }

.rnd-future--intelligence { background: var(--color-tertiary); }

/* SHOWCASE */
.rnd-showcase { height: calc(var(--section-fvh) * 4.2); position: relative; background: var(--color-primary); }
.rnd-showcase__inner { height: var(--section-fvh); position: sticky; top: 0; }

.rnd-showcase__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }

.rnd-showcase__content { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; text-align: center; color: var(--color-white); }
.rnd-showcase__content p { margin-top: 40rem; }



/* **************************************** *
 * 제조혁신
 * **************************************** */
body.page-template-production .main-container { padding-bottom: 0; }

/* MAKING */
.production-making { padding: 160rem 0; background: var(--color-bg-200); }

.production-making__title { margin-bottom: 80rem; text-align: center; color: var(--color-primary); }

.production-making__gallery-item { width: 400rem; padding: 0 10rem; position: relative; }
.production-making__gallery-item > b { display: block; width: calc(100% - 20rem); padding: 40rem 35rem 40rem 40rem; position: absolute; top: 0; left: 10rem; color: var(--color-white); box-sizing: border-box; z-index: 2; }
.production-making__gallery-item .jt-lazyload { padding-top: 126.31%; border-radius: var(--border-radius-04); overflow: hidden; }

/* BANNER */
.production-banner { padding-top: 49.68%; position: relative; }

.production-banner__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.production-banner__slider { width: 100%; position: absolute; left: 0; top: 50%; transform: translate3d(0, -50%, 0); }
.production-banner__item { height: 100%; padding-top: 92rem; }
.production-banner__content > * { display: block; text-align: center; color: var(--color-white); }
.production-banner__content > b { margin-top: 32rem; }
.production-banner__content > p { margin-top: 20rem; color: rgba(255, 255, 255, .8) }

.production-banner .swiper-control { margin-top: 75rem; }



/* **************************************** *
 * 디지털혁신
 * **************************************** */
body.page-template-digital .main-container { padding-bottom: 0; }

.digital-section { padding: 160rem 0; position: relative; }
.digital-section__title { text-align: center; margin-bottom: 80rem; }

/* ROADMAP */
.digital-roadmap { background: var(--color-white); }
.digital-roadmap .digital-section__title { text-align: left; }

.digital-roadmap__chart { --roadmap-gap: 24rem; position: relative; }

.digital-roadmap__chart-list { display: flex; align-items: flex-end; gap: var(--roadmap-gap); }
.digital-roadmap__chart-list > li { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 24rem; position: relative; color: var(--color-white); }
.digital-roadmap__chart-list > li > p { padding-top: 12rem; border-top: 1px solid rgba(255, 255, 255, .5); }
.digital-roadmap__chart-list > li.digital-roadmap__chart--manage { height: 280rem; background: var(--color-quaternary); }
.digital-roadmap__chart-list > li.digital-roadmap__chart--capture { height: 380rem; background: var(--color-tertiary); }
.digital-roadmap__chart-list > li.digital-roadmap__chart--chain { height: 520rem; background: var(--color-secondary); }
.digital-roadmap__chart-list > li.digital-roadmap__chart--eco { height: 660rem; background: var(--color-primary); }

.digital-roadmap__chart-indicator { width: 100%; position: absolute; top: 0; left: 0; }
.digital-roadmap__chart-indicator > li { display: flex; align-items: center; width: calc((100% - (var(--roadmap-gap) / 2)) / 2); position: absolute; }
.digital-roadmap__chart-indicator > li > span { flex-shrink: 0; padding: 8rem 24rem; color: var(--color-white); background: var(--color-secondary); border-radius: var(--border-radius-06); }
.digital-roadmap__chart-indicator > li > i { flex: 1; width: 100%; height: 2rem; position: relative; }
.digital-roadmap__chart-indicator > li > i:after { content: ''; display: block; width: 100%; height: 12rem; position: absolute; right: 0; top: 50%; background: url(../images/sub/innovation/digital-roadmap-line.svg) no-repeat; background-position: center right; background-size: auto 100%; transform: translateY(-50%); }
.digital-roadmap__chart-indicator > li:nth-child(1) { left: 0; top: 237rem; }
.digital-roadmap__chart-indicator > li:nth-child(2) { left: 386rem; top: 97rem; }

.digital-roadmap__chart-foundation { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12rem var(--roadmap-gap); margin-top: 32rem; }
.digital-roadmap__chart-foundation > li { display: flex; align-items: center; gap: 15rem; background: var(--color-bg-200); border-radius: var(--border-radius-06); }
.digital-roadmap__chart-foundation > li > span { display: block; padding: 8rem 24rem; color: var(--color-white); background: var(--color-primary); border-radius: var(--border-radius-06); }
.digital-roadmap__chart-foundation > li > p { color: var(--color-gray-800); }
.digital-roadmap__chart-foundation > li:nth-child(1) { grid-column: 2 / 5; }
.digital-roadmap__chart-foundation > li:nth-child(2) { grid-column: 3 / 5; }
.digital-roadmap__chart-foundation > li:nth-child(3) { grid-column: 4 / 5; }

/* PLAN */
.digital-plan { background: var(--color-primary); overflow: hidden; }
.digital-plan .digital-section__title { color: var(--color-white); }

/* TIMELINE */
.digital-timeline.digital-section { padding-bottom: var(--main-container-pb); }

.digital-timeline__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-white); }
.digital-timeline__bg > span { width: 1px; height: 100%; position: absolute; top: 0; background: var(--color-gray-300); }
.digital-timeline__bg > span:nth-child(1) { left: 25%; }
.digital-timeline__bg > span:nth-child(2) { left: 50%; }
.digital-timeline__bg > span:nth-child(3) { left: 75%; }

.digital-timeline__list { display: flex; gap: 80rem; }
.digital-timeline__list > li { flex: 1; }
.digital-timeline__list-head { display: flex; flex-direction: column; gap: 8rem; color: var(--color-primary); }
.digital-timeline__list-head > strong { color: var(--color-gray-500); }
.digital-timeline__list-note { display: flex; flex-direction: column; gap: 12rem; margin-top: 48rem; }
.digital-timeline__list-note li { padding-left: 16rem; position: relative; }
.digital-timeline__list-note li:before { content: ''; position: absolute; left: 0; background: currentColor; }
.digital-timeline__list-note > li:before { width: 6rem; height: 6rem; top: 10rem; }
.digital-timeline__list-note > li > ul { display: flex; flex-direction: column; gap: 4rem; margin-left: -16rem; margin-top: 6rem; }
.digital-timeline__list-note > li > ul > li { color: var(--color-gray-800); }
.digital-timeline__list-note > li > ul > li:before { width: 6rem; height: 1px; top: 12rem; }