@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * ABOUT
 * PRODUCT
 * HOVER
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home:not(.jt-intro--visited) #header { visibility: hidden; opacity: 0; }
body.home .main-container { padding-top: 0; padding-bottom: 0; }

.main-section { position: relative; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { position: relative; height: 100svh; overflow: hidden; }
html.kakao .main-visual { height: var(--fit-height); }
.main-visual__section { position: relative; overflow: hidden; }
.main-visual__logo { position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: 0; visibility: hidden; }
.main-visual__logo svg { width: 160rem; height: auto; }

.main-visual__container { position: absolute; top: 84rem; left: 70rem; right: 70rem; bottom: 60rem; }
.main-visual__inner { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; translate: -50% -50%; clip-path: inset(0% 0% round 30rem); overflow: hidden; }
.main-visual__item { position: relative; height: 100%; }
.main-visual__image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }

body.home:not(.jt-intro--visited) .main-visual { opacity: 0; visibility: hidden; }
body.home:not(.jt-intro--visited) .main-visual__logo { opacity: 1; visibility: visible; }



/* **************************************** *
 * ABOUT
 * **************************************** */
.main-about { padding: 140rem 0 260rem; }
.main-about__head { text-align: center; }
.main-about__desc { color: var(--color-gray-900); margin-top: 20rem; }
.main-about__content { position: relative; text-align: center; margin-top: 60rem; }
.main-about__stroke { position: absolute; top: 50%; left: 0; width: 100%; height: 2rem; margin-top: -1rem; background: var(--color-gray-400); }
.main-about__list { position: relative; display: inline-flex; justify-content: center; align-items: center; background: var(--color-white); vertical-align: top; }
.main-about__item { position: relative; display: flex; align-items: center; justify-content: center; width: 340rem; }
.main-about__item:nth-child(1) { margin-right: -40rem; }
.main-about__item:nth-child(2) { margin-right: -20rem; }
.main-about__item:nth-child(3) { margin-left: -20rem; }
.main-about__item:nth-child(4) { margin-left: -40rem; }
.main-about__circle { padding-top: 100%; }
.main-about__circle svg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; translate: -50% -50%; overflow: visible; }
.main-about__circle path { stroke: var(--color-gray-400); stroke-width: 2; }
.main-about__text span { color: var(--color-primary); }



/* **************************************** *
 * PRODUCT
 * **************************************** */
.main-product { background: var(--color-black); padding-bottom: 240rem; }
.main-product__inner { display: flex; align-items: stretch; justify-content: space-between; position: relative; margin: 0 70rem; gap: 20rem; }

.main-product__sticky { flex: 1; }
.main-product__sticky-list { position: sticky; top: 0; padding-top: 160rem; }
.main-product__sticky-list > li + li { margin-top: 40rem; }
.main-product__sticky-list a { display: inline-block; opacity: .4; transition: opacity .3s; }
.main-product__sticky-list a.jt-anchor--active { opacity: 1; }
.main-product__sticky-list .jt-icon { vertical-align: top; }
.main-product__sticky-list svg path { fill: var(--color-primary); }

.main-product__sticky-list > li:nth-child(1) .jt-icon { width: 101rem; }
.main-product__sticky-list > li:nth-child(2) .jt-icon { width: 93rem; }
.main-product__sticky-list > li:nth-child(3) .jt-icon { width: 86rem; }
.main-product__sticky-list > li:nth-child(4) .jt-icon { width: 91rem; }

.main-product__section { padding: 160rem 0 40rem; }
.main-product__section:last-child { padding-bottom: 0; }
.main-product__list { width: 83.03%; }
.main-product__image { position: relative; }
.main-product__image:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-black); opacity: .2; }
.main-product__bg { padding-top: 33.82%; background: no-repeat center center / cover; }
.main-product__bg--mobile { display: none; }
.main-product__content { display: flex; gap: 40rem; justify-content: space-between; margin-top: 80rem; color: var(--color-white); }
.main-product__title { flex: 1; }
.main-product__title b { display: block; margin-top: 8rem; }
.main-product__title b:empty { display: none; }
.main-product__info { width: 50%; }
.main-product__category { margin-top: 60rem; }
.main-product__category-section + .main-product__category-section { margin-top: 60rem; }
.main-product__category-list { margin-top: 20rem; }
.main-product__category-list > li { padding: 18rem 0; border-bottom: 1px solid rgba(255, 255, 255, .3); }



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

    /* PRODUCT */
    .main-product__sticky-list a:hover { opacity: 1; }

}