@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * INTRO
 * LAYOUT
 * VISUAL
 * ABOUT
 * ESG
 * BRAND
 * POWER
 * FACTORY
 * BANNER
 * STORY
 * HOVER
 */



/* **************************************** *
 * INTRO
 * **************************************** */
#intro { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg); overflow: hidden; z-index: 9999; }
body.home #intro { display: block; }

.intro__illust { display: none; width: 104.68%; min-width: 2010rem; height: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: .1; overflow: hidden; }
.intro__illust svg { display: block; width: 100%; height: auto; position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.intro__illust--portrait { display: none; }

.intro__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; opacity: 0; visibility: hidden; }
.intro__logo svg { display: block; width: 491rem; height: auto; }



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 0; }

/* SECTION */
.main-section { --section-fvh: 100vh; margin: 300rem 0; }
.main-section:last-child { margin-bottom: 0; }

html.mobile .main-section { --section-fvh: 100svh; }

/* HEAD */
.main-section__head { margin-bottom: 80rem; text-align: center; }
.main-section__desc { margin-top: 32rem; color: var(--color-gray-900); }

.main-section__head.main-section__head--secondary { margin-bottom: 28rem; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { --visual-fvh: 100vh; width: 100%; height: 100%; height: calc(var(--visual-fvh) + 120rem); position: relative; background: var(--color-gray-200); }

.main-visual__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); }
.main-visual__picture { width: 100%; height: 100%; position: relative; background: no-repeat center center; background-size: cover; }

.main-visual__bg [class^="main-visual__bg-poster--"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: no-repeat center / cover; }
.main-visual__bg-poster--small { display: none; }

.main-visual__content { width: 100%; padding-bottom: 120rem; position: absolute; top: 50%; left: 0; text-align: center; color: var(--color-white); translate: 0 -50%; }
.main-visual__title { display: block; opacity: 0; }
.main-visual__desc { margin-top: 16rem; opacity: 0; }

.main-visual .swiper-control { width: auto; left: 52rem; bottom: 165rem; opacity: 0; }
.main-visual .scroll-down { bottom: 155rem; }

/* MOBILE */
html.mobile .main-visual { --visual-fvh: 100svh; }



/* **************************************** *
 * ABOUT
 * **************************************** */
.main-about.main-section { margin-top: -120rem; margin-bottom: 0; }
.main-about { padding-top: 220rem; position: relative; background: var(--color-bg); border-radius: var(--round-07) var(--round-07) 0 0; z-index: 2; }

.main-about__content { position: relative; }
.main-about__content-inner { position: sticky; top: 0; }

.main-about__bg { width: 100%; height: var(--section-fvh); position: absolute; top: 0; background: url(../images/layout/sanc-illust.svg) no-repeat center / 104.68% 100%; opacity: 0.08; }
html.mobile .main-about__bg { height: 100lvh; }

/* INTRO */
.main-about__intro { height: 400vh; position: relative; }
.main-about__intro-inner { width: 100%; height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }
html.mobile .main-about__intro-inner { height: 100lvh; }

.main-about__intro-typo { width: 100%; height: 100%; position: absolute; top: 0; }
.main-about__intro-typo-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; }
.main-about__intro-typo-item > * { width: 460rem; text-align: center; }
.main-about__intro-typo-item:not(:first-child) > p { opacity: 0; }

.main-about__intro-pic { width: 720rem; height: 720rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.main-about__intro-pic .jt-lazyload { width: 100%; height: 100%; }
.main-about__intro-pic > * { position: absolute; width: 100%; height: 100%; }
.main-about__intro--bowl-top { transform: scale(.86) translateY(-133rem) translateX(14rem) rotate(11deg); }
.main-about__intro--bowl-set { display: none; }

/* GALLERY */
.main-about__gallery { padding-top: 120rem; padding-bottom: 120rem; position: relative; }

.main-about__gallery-image { display: flex; flex-direction: column; gap: 215rem; }
.main-about__gallery-image .jt-lazyload { padding-top: 100%; }
.main-about__gallery-image > li { width: 430rem; position: relative; border-radius: var(--round-03); overflow: hidden; }
.main-about__gallery-image > li:nth-child(odd) { align-self: flex-end; }
.main-about__gallery-image > li:nth-child(2),
.main-about__gallery-image > li:nth-child(5) { width: 586rem; }
.main-about__gallery-image > li:nth-child(2) .jt-lazyload,
.main-about__gallery-image > li:nth-child(5) .jt-lazyload { padding-top: 78.49%; }
.main-about__gallery-image > li:nth-child(6) { width: 480rem; }

.main-about__gallery-typo { width: 100%; height: var(--section-fvh); position: absolute; top: 0; left: 0; }
.main-about__gallery-typo-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 40rem; width: 100%; position: absolute; top: 50%; left: 50%; text-align: center; transform: translate3d(-50%, -50%, 0); }
.main-about__gallery-typo-item:not(:first-child) { opacity: 0; visibility: hidden; }

/* KAKAO */
html.kakao .main-about__intro { height: auto; }
html.kakao .main-about__intro-inner { height: auto; }
html.kakao .main-about__intro-pic { position: relative; top: 0; left: 50%; translate: -50% 0; }
html.kakao .main-about__intro--bowl-top, 
html.kakao .main-about__intro--bowl-bottom { display: none; }
html.kakao .main-about__intro--bowl-set { display: block; }
html.kakao .main-about__intro--flower > .jt-lazyload { animation: whirlpool-spin 20s linear 0s infinite; }
html.kakao .main-about__intro-typo-item { height: 720rem; position: relative; }
html.kakao .main-about__intro-typo-item:not(:first-child) > p { opacity: 1; }
html.kakao .main-about__intro-pic ~ .main-about__intro-pic,
html.kakao .main-about__intro-typo-item ~ .main-about__intro-typo-item { margin-top: 220rem; }



/* **************************************** *
 * ESG
 * **************************************** */
.main-esg.main-section { margin-top: 128rem; }

.main-esg__card-content { width: 100%; height: 100%; padding: 0 36rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40rem; position: relative; text-align: center; color: var(--color-white); border-radius: var(--round-07); overflow: hidden; }
.main-esg__card-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: no-repeat center / cover; z-index: -1; }

.main-esg__division { width: 2rem; height: 260rem; position: absolute; bottom: -228rem; left: calc(50% - 1px); background: var(--color-gray-400); }

/* KAKAO */
html.kakao .main-esg__division { display: none; }



/* **************************************** *
 * BRAND
 * **************************************** */
.main-brand__info { display: flex; height: 100%; align-items: center; border-radius: var(--round-07); overflow: hidden; }
.main-brand__info > * { width: 50%; position: relative; }

.main-brand__product { padding: 0 52rem; text-align: center; }
.main-brand__desc { margin-top: 16rem; color: var(--color-gray-800); }
.main-brand__picture { width: 438rem; margin: 38rem auto 36rem; }
.main-brand__picture .jt-lazyload { padding-top: 95.89%; }
.main-brand__slide { display: none; }

.main-brand__sensation { height: 100%; }
.main-brand__sensation > span { display: block; width: 100%; height: 100%; background: no-repeat center / cover; }

/* KAKAO */
html.kakao .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 80rem; }



/* **************************************** *
 * POWER
 * **************************************** */
.main-power__cards { --cards-fvh: 100vh; --cards-margin: 52rem; display: flex; flex-direction: column; position: relative; }
.main-power__card { display: flex; align-items: center; height: var(--cards-fvh); padding-top: var(--cards-margin); padding-bottom: var(--cards-margin); }
.main-power__card-inner { width: 100%; height: 100%; position: relative; background: no-repeat center / cover; border-radius: var(--round-07); overflow: hidden; }

.main-power__rolling { --clip-space: 34.6%; width: 100%; height: 100%; position: relative; background: no-repeat center / cover; border-radius: var(--round-07); overflow: hidden; clip-path: inset(0 var(--clip-space) 0 round var(--round-07)); will-change: clip-path; }
.main-power__rolling-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 36rem; text-align: center; color: var(--color-white); opacity: 0; }
.main-power__rolling-key { font-size: 200rem; line-height: 1.1; font-weight: 600; }

.main-power__instruct { width: 100%; height: 100%; padding: 0 36rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--color-white); background: rgba(0, 0, 0, 0.2); }
.main-power__instruct-desc { margin-top: 10rem; }
.main-power__instruct-btn { margin-top: 40rem; }

/* MOBILE */
html.mobile .main-power { padding-bottom: 40px; }
html.mobile .main-power__cards { --cards-fvh: 100lvh; }

/* KAKAO */
html.kakao .main-power .main-section__head.main-section__head--secondary { margin-bottom: 80rem; }

html.kakao .main-power__cards { gap: var(--cards-margin); }
html.kakao .main-power__card { height: auto; padding: 0; aspect-ratio: 16 / 9; }
html.kakao .main-power__card:nth-child(2),
html.kakao .main-power__card:nth-child(3) { display: none; }

html.kakao .main-power__rolling { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30rem; clip-path: none; }
html.kakao .main-power__rolling-inner { display: block; height: auto; opacity: 1; }



/* **************************************** *
 * FACTORY
 * **************************************** */
.main-factory__list { height: 600vh; position: relative; }
.main-factory__list-inner { width: 100%; height: 100vh; display: flex; justify-content: flex-end; position: sticky; top: 0; overflow: hidden; }
.main-factory__list-content { display: grid; justify-items: start; grid-template-rows: 90vh 90vh; grid-template-columns: 90vh 90vh 90vh; grid-auto-columns: 1fr; width: 270vh; height: 180vh; margin-top: 5vh; position: relative; right: -175vh; }
.main-factory__list-item { width: 90vh; height: 90vh; padding: 64rem; position: relative; border: 1px solid var(--color-point-03); border-radius: 100%; overflow: hidden; transform: scale(0); }
.main-factory__list-item:nth-child(4){ grid-column: 3; grid-row: 2; }
.main-factory__list-item:nth-child(5){ grid-column: 2; grid-row: 2; }
.main-factory__list-item-inner { --clip-space: 18%; width: 100%; height: 100%; background: no-repeat center / cover; border-radius: inherit; clip-path: circle(var(--clip-space)); }
.main-factory__list-link { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; color: var(--color-white); border-radius: inherit; }
.main-factory__list-txt { position: relative; border-bottom: 2px solid currentColor; z-index: 2; opacity: 0; }



/* **************************************** *
 * BANNER
 * **************************************** */
/* BANNER */
.main-banner__area { padding-top: 47.35%; position: relative; border-radius: var(--round-07); overflow: hidden; }

.main-banner__area-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-banner__area-bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(19, 57, 55, 0.2); }

.main-banner__area-content { width: 100%; padding: 0 36rem; position: absolute; top: 50%; left: 50%; text-align: center; color: var(--color-white); translate: -50% -50%; }

/* BUTTON */
.main-banner__control { display: flex; gap: 32rem; margin-top: 60rem; }
.main-banner__control > * { width: 100%; }



/* **************************************** *
 * STORY
 * **************************************** */
.main-story { overflow: hidden; }

.main-story__horizontal { display: flex; position: relative; z-index: 1; overflow: hidden; }

.main-story__list { display: flex; align-items: center; gap: 24rem; padding: 0 52rem; position: relative; overflow: visible; }

/* ITEM */
.main-story__list-item { width: 520rem; height: 672rem; position: relative; color: var(--color-white); border-radius: var(--round-06); overflow: hidden; }

.main-story__list-link { display: block; height: 100%; color: inherit; }
.main-story__list-link:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity .3s; }

.main-story__list-meta > * { position: absolute; top: 50rem; }
.main-story__list-separation { display: flex; align-items: center; gap: 16rem; left: 50rem; }
.main-story__list-label { display: block; padding: 5rem 16rem; color: var(--color-black); background: var(--color-point-03); border-radius: var(--round-01); pointer-events: none; }
.main-story__list-type { display: block; width: fit-content; padding: 3rem 0; color: inherit; border-bottom: 1px solid transparent; transition: border .3s; }
.main-story__list-date { right: 50rem; opacity: .5; pointer-events: none; }

.main-story__list-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.main-story__list-desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 20rem; }
.main-story__list-more { display: block; padding: 8rem; position: absolute; left: 42rem; bottom: 42rem; color: inherit; }
.main-story__list-more > span:not(.sr-only) { display: block; position: relative; }
.main-story__list-more > span:not(.sr-only):after { content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: -3rem; background: var(--color-white); opacity: 0; transition: opacity .3s; }
.main-story__list-more .jt-icon { display: block; width: 18rem; transition: opacity .3s; }
.main-story__list-more .jt-icon svg path { fill: var(--color-white); }

.main-story__list-icon { width: 32rem; position: absolute; pointer-events: none; }
.main-story__list-icon .jt-icon { display: block; width: 100%; }
.main-story__list-icon .jt-icon svg path { fill: var(--color-white); }
.main-story__list-icon--sns { top: 50rem; right: 50rem; }
.main-story__list-icon--outlink { bottom: 50rem; left: 50rem; opacity: 0; transition: opacity .3s; }

.main-story__list-item--primary { background: var(--color-secondary); transition: background-color .3s; }
.main-story__list-item--primary .main-story__list-link { padding: 143rem 50rem 122rem; }
.main-story__list-item--primary .main-story__list-link:after { display: none; }

.main-story__list-item--secondary .jt-lazyload { height: 100%; transition: scale 1s cubic-bezier(0.19, 1, 0.22, 1), rotate 1s cubic-bezier(0.19, 1, 0.22, 1); }
.main-story__list-item--secondary .jt-lazyload img { height: 100%; object-fit: cover; }
.main-story__list-item--secondary .main-story__list-type { position: absolute; top: 50rem; left: 50rem; }

.main-story__list-item--etc { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 8rem; color: var(--color-black); border: 2px solid #D2C9BF; }
.main-story__list-item--etc a { display: block; padding: 8rem; color: inherit; }
.main-story__list-item--etc a > span { display: inline-block; position: relative; }
.main-story__list-item--etc a > span:after { content: ''; display: block; width: 100%; position: absolute; left: 0; bottom: 1px; border-bottom: 1px solid var(--color-black); }

/* MORE */
.main-story__button { display: none; }



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

    /* STORY */
    .main-story__list-type:hover { border-color: currentColor; }
    .main-story__list-more:hover > span:after { opacity: 1; }
    .main-story__list-more:hover .jt-icon { opacity: .8; }

    .main-story__list-item:hover .main-story__list-icon--outlink { opacity: 1; }

    .main-story__list-item--primary:hover { background-color: #0D2F2D; }

    .main-story__list-item:has(.main-story__list-icon--sns):hover .main-story__list-link:after { opacity: 1; }
    .main-story__list-item--secondary:not(:has(.main-story__list-icon--sns)):hover .jt-lazyload { scale: 1.1; rotate: 0.01deg; }

    .main-story__list-item--etc a:hover > span:after { border-bottom-style: dashed; }

}