@charset "utf-8";

/*
 * File    : sub-etc.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * CONTACT
 * PRIVACY
 * TAG SEARCH
 * CAREERS
 * LIFE
 * 404
 * HOVER
 */

 

/* **************************************** *
 * CONTACT
 * **************************************** */
.contact-inquiry { padding: 60rem 0 160rem; }
.contact-inquiry__container { display: flex; }
.contact-inquiry__content { flex: 1; }
.contact-inquiry__content-sticky { position: sticky; top: 100rem; }
.contact-inquiry__info { margin-top: 80rem; }
.contact-inquiry__info > li + li { margin-top: 8rem; }
.contact-inquiry__info > li > b { display: block; color: var(--color-gray-700); }
.contact-inquiry__info > li > a { display: inline-block; color: var(--color-gray-900); transition: box-shadow .3s; }
.contact-inquiry__form { padding: 0 40rem 0 80rem; }
.contact-inquiry__form .jt-form { max-width: 800rem; }
.contact-inquiry__form .jt-form__action { width: 100%; }

.contact-location { background: var(--color-gray-200); padding: 160rem 0; }



/* **************************************** *
 * PRIVACY
 * **************************************** */
body.privacy-policy .main-container { padding-top: 224rem; padding-bottom: 160rem; }
body.privacy-policy .jt-single__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 100rem; border: 0; }

.jt-privacy { max-width: 1200rem; margin: 0 auto; }
.jt-privacy__revison { min-width: 240rem; }
.jt-privacy .jt-blocks > * { max-width: inherit; }



/* **************************************** *
 * TAG SEARCH
 * **************************************** */
.article.tag-search .article__header { height: 516rem; }



/* **************************************** *
 * CAREERS
 * **************************************** */
/* WHY */
.careers-why { padding: 160rem 0 0; }
.careers-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20rem; }
.careers-why__thumb { border-radius: 2rem; overflow: hidden; }
.careers-why__thumb .jt-lazyload { padding-top: 73.33%; }
.careers-why__content { margin-top: 40rem; }
.careers-why__title { display: block; }
.careers-why__desc { margin-top: 10rem; }

/* LIFE */
.careers-life { padding: 160rem 0; }
.careers-life__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20rem; }
.careers-life__list a { display: flex; align-items: center; gap: 40rem 32rem; padding: 40rem; height: 100%; background: var(--color-white); color: var(--color-black); }
.careers-life__thumb { width: 382rem; overflow: hidden; }
.careers-life__thumb .jt-lazyload { padding-top: 56.38%; transition: transform 1s; }
.careers-life__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.careers-life__content { flex: 1; }
.careers-life__date { display: block; margin-bottom: 8rem; }
.careers-life__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.careers-life__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 24rem; }
.careers-life__more { display: inline-block; box-shadow: inset 0 -1px 0 0 var(--color-black); margin-top: 40rem; }

.careers-life__list li:first-child { grid-row: span 3; }
.careers-life__list li:first-child a { flex-direction: column; }
.careers-life__list li:first-child .careers-life__thumb { width: 100%; }
.careers-life__list li:first-child .careers-life__date { margin-bottom: 10rem; }
.careers-life__list li:first-child .careers-life__desc { -webkit-line-clamp: 3; margin-top: 40rem; }

/* TEAMS */
.careers-teams { padding: 160rem 0; }
.careers-teams__viewer { display: flex; gap: 40rem; }
.careers-teams__viewer-images { flex: 1; position: relative; aspect-ratio: 1 / .7877; border-radius: 2rem; overflow: hidden; }
.careers-teams__viewer-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.careers-teams__viewer-image:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.careers-teams__viewer-image .jt-lazyload { height: 100%; }
.careers-teams__viewer-content { flex: 1; }
.careers-teams__viewer-list { position: relative; height: 100%; }
.careers-teams__viewer-list:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--color-gray-700); opacity: .5; }
.careers-teams__viewer-list li { height: 25%; border-top: 1px solid var(--color-gray-700); opacity: .5; transition: opacity .3s; }
.careers-teams__viewer-list a { display: flex; gap: 100rem; padding: 40rem 60rem 40rem 0; color: var(--color-white); } 
.careers-teams__viewer-number { width: 40rem; }
.careers-teams__viewer-title { width: 240rem; }
.careers-teams__viewer-desc { flex: 1; }

.careers-teams__viewer-image.careers-teams__viewer--active { opacity: 1; visibility: visible; }
.careers-teams__viewer li.careers-teams__viewer--active { opacity: 1; }

/* APPLY */
.careers-recruit { padding: 160rem 0 100rem; }
.careers-recruit__list > li { display: flex; align-items: center; gap: 200rem; padding: 40rem 80rem; min-height: 140rem; border-top: 1px solid var(--color-gray-700); }
.careers-recruit__title { width: 240rem; }
.careers-recruit__desc { flex: 1; }
.careers-recruit__apply { display: flex; align-items: center; gap: 8rem; color: var(--color-black); }
.careers-recruit__apply span { display: inline-block; transition: box-shadow .3s; }
.careers-recruit__apply .jt-icon { width: 20rem; }
.careers-recruit__apply .jt-icon path { fill: currentColor; }



/* **************************************** *
 * 404
 * **************************************** */



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

    /* CONTACT */
    .contact-inquiry__info > li > a:hover { box-shadow: inset 0 -2px 0 0 currentColor; }

    /* CAREERS */
    .careers-life__list a:hover .careers-life__thumb .jt-lazyload { transform: scale(1.05); }
    .careers-teams__viewer-list li:has(a:hover) { opacity: 1; }
    .careers-recruit__apply:hover span { box-shadow: inset 0 -2px 0 0 currentColor; }

}