@charset "utf-8";

/*
 * File    : sub-careers.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * CAREERS
 * HOVER
 */

 

/* **************************************** *
 * CAREERS
 * **************************************** */
.careers-banner__container .jt-lazyload { padding-top: 43.3%; }

.careers-ideal .article__section-head .article__section-desc { margin-top: 20rem; }
.careers-ideal__diagram { position: relative; }
.careers-ideal__circle { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; justify-content: center; align-items: center; width: 572rem; height: 572rem; }
.careers-ideal__circle:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 116rem solid var(--color-gray-200); border-radius: 50%; box-sizing: border-box; }
.careers-ideal__logo { position: relative; left: 10rem; width: 220rem; }
.careers-ideal__logo .jt-icon { width: 100%; }
.careers-ideal__logo .jt-icon svg path { fill: var(--color-primary); }
.careers-ideal__keypoint { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 232rem; }
.careers-ideal__keypoint-item { display: flex; align-items: center; gap: 30rem; }
.careers-ideal__keypoint-item:nth-child(1), .careers-ideal__keypoint-item:nth-child(3) { text-align: right; flex-flow: row-reverse; }
.careers-ideal__keypoint-key { width: 200rem; height: 200rem; display: flex; flex-direction: column; justify-content: center; text-align: center; border-radius: 50%; background: var(--color-primary); border-radius: 50%; color: var(--color-white); padding-bottom: 10rem; }
.careers-ideal__keypoint-value { display: flex; flex-direction: column; gap: 12rem; flex: 1; }
.careers-ideal__keypoint-value p { color: var(--color-gray-900); }
.careers-ideal__content { display: none; }

.careers-welfare .article__section-head .article__section-desc { margin-top: 20rem; }
.careers-welfare__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32rem; }
.careers-welfare__content { display: flex; gap: 20rem; flex-direction: column; align-items: center; height: 100%; text-align: center; padding: 60rem 30rem; border: 1px solid var(--color-gray-400); }
.careers-welfare__content .jt-icon { width: 120rem; }
.careers-welfare__content .jt-icon svg { overflow: visible; }
.careers-welfare__content .jt-icon svg path { fill: none; stroke: var(--color-primary); }
.careers-welfare__content-title { min-height: calc(var(--font-lineheight-ko-06) + (var(--font-lineheight-ko-08) * 2) + 12rem); }
.careers-welfare__content-title b { display: block; }
.careers-welfare__content-title span { display: block; color: var(--color-gray-900); margin-top: 12rem; }
.careers-welfare__explain { color: var(--color-primary); margin-top: 32rem; }

.careers-family__image { position: relative; }
.careers-family__image-bg { padding-top: 54.42%; background: no-repeat center center / cover; }
.careers-family__content { margin-top: 30rem; padding-bottom: 30rem; opacity: 0; transition: opacity .3s; }
.careers-family__content b { display: block; }
.careers-family__content p { color: var(--color-gray-900); margin-top: 12rem; }

.careers-family__slider .swiper-navigation .swiper-button { top: 280rem; width: 68rem; height: 68rem; margin-top: 0; }
.careers-family__slider .swiper-navigation .swiper-button:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--color-white); opacity: .7; box-sizing: border-box; transition: opacity .3s; }
.careers-family__slider .swiper-navigation .swiper-button .jt-icon { width: 36rem; height: 36rem; }
.careers-family__slider .swiper-navigation .swiper-button .jt-icon path { fill: var(--color-gray-700) }
.careers-family__slider .swiper-navigation .swiper-button-prev { margin-right: 60rem; }
.careers-family__slider .swiper-navigation .swiper-button-next { margin-left: 60rem; }

.careers-family__slider.swiper-initialized .careers-family__item { margin: 0 16rem; }
.careers-family__slider.swiper-initialized .careers-family__image:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-white); opacity: .5; transition: opacity .3s; }
.careers-family__slider.swiper-initialized .careers-family__item.swiper-slide-active .careers-family__image:before { opacity: 0; }

.careers-family__item.swiper-slide-active .careers-family__content, .careers-family__item.swiper-slide-duplicate-active .careers-family__content { opacity: 1; }

.careers-people .article__section-head .article__section-desc { margin-top: 20rem; }
.careers-people__slider { margin: 0 -16rem; }
.careers-people__item { width: 471rem; margin: 0 16rem; }
.careers-people__item > a { display: block; }
.careers-people__item .jt-lazyload { padding-top: 100%; }
.careers-people__image { overflow: hidden; }
.careers-people__image .jt-lazyload { transition: scale .3s ease-out; }
.careers-people__content { margin-top: 30rem; }
.careers-people__content > b { display: block; color: var(--color-black); }
.careers-people__data { display: flex; gap: 25rem; color: var(--color-gray-900); margin-top: 8rem; }
.careers-people__data > span { position: relative; }
.careers-people__data > span + span:before { content: ''; position: absolute; top: 8rem; left: -13rem; width: 1px; height: 14rem; background: var(--color-gray-500); }
.careers-people__icon { position: relative; margin-top: 20rem; opacity: 0; transition: opacity .3s; }
.careers-people__icon .jt-icon { width: 38rem; vertical-align: top; }

.careers-process .article__section-head .article__section-desc { margin-top: 20rem; }
.careers-process__container { background: var(--color-gray-200); padding: 80rem 80rem 120rem; }
.careers-process__step { display: flex; justify-content: space-between; }
.careers-process__step-list { display: flex; flex: 1; }
.careers-process__step-item { position: relative; flex: 1; }
.careers-process__step-item + .careers-process__step-item { margin-left: -20rem; }
.careers-process__step-content { padding-top: 100%; }
.careers-process__step-content-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4rem; background: var(--color-white); border: 1px solid var(--color-gray-400); border-radius: 50%; }
.careers-process__step-content-inner span { color: var(--color-gray-800); }
.careers-process__step-arrow { text-align: center; width: 27.8%; }
.careers-process__step-arrow .jt-icon { width: 52.1%; }
.careers-process__step-arrow .jt-icon svg path { fill: var(--color-primary); }
.careers-process__step-last { display: flex; align-items: center; width: 32.47%; }
.careers-process__step-last .careers-process__step-content-inner { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.careers-process__step-last .careers-process__step-content-inner span { color: var(--color-white); opacity: .8; }
.careers-process__controls { text-align: center; margin-top: 60rem; }
.careers-process__controls p { color: var(--color-gray-900); margin-bottom: 40rem; }



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

    /* CAREERS */
    .careers-family__slider .swiper-navigation .swiper-button:hover:before { opacity: 1; }
    .careers-family__slider .swiper-navigation .swiper-button:hover .jt-icon path { fill: var(--color-black); }

    .careers-people__item > a:hover .careers-people__image .jt-lazyload { scale: 1.05; }
    .careers-people__item > a:hover .careers-people__icon { opacity: 1; }

}