@charset "UTF-8";

.mainBusiness {
    --hero-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --hero-ease-in: cubic-bezier(0.4, 0, 0.2, 1);
    display: grid;
    grid-template-columns: 853fr 854fr 853fr;
    width: 100%;
    aspect-ratio: 2560 / 1260;
    min-height: 630px;
    container-type: inline-size;
    isolation: isolate;
    overflow: hidden;
}

.mainBusiness__item {
    --main-business-unit: 0.0390625cqw;
    --main-business-scale: calc(100cqw / 2560px);
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-black, #000);
    text-decoration: none;
}

.mainBusiness__image {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.7s var(--hero-ease-out);
    will-change: transform;
}

.mainBusiness__item--fashion {
    --main-business-shade: linear-gradient(180.0228deg, rgba(0, 0, 0, 0) 1.8892%, rgba(21, 21, 21, 0.7) 99.987%);
    --main-business-shade-active: linear-gradient(180.0228deg, rgba(0, 0, 0, 0) 1.8892%, #151515 99.987%);
}
.mainBusiness__item--fashion .mainBusiness__image {
    top: -9.91%;
    left: -11.21%;
    width: 141.52%;
    height: 140.3%;
    transform-origin: 43.25% 42.7%;
}

.mainBusiness__item--live {
    --main-business-shade: linear-gradient(178.0871deg, rgba(40, 39, 37, 0) 2.6278%, rgba(53, 46, 38, 0.4) 98.909%), linear-gradient(178.1155deg, rgba(40, 39, 37, 0) 2.6278%, rgba(53, 46, 38, 0.4) 98.909%);
    --main-business-shade-active: linear-gradient(178.0871deg, rgba(40, 39, 37, 0) 2.6278%, rgba(53, 46, 38, 0.7) 98.909%), linear-gradient(178.1155deg, rgba(40, 39, 37, 0) 2.6278%, rgba(53, 46, 38, 0.7) 98.909%);
}
.mainBusiness__item--live .mainBusiness__image {
    top: 0;
    left: -70.97%;
    width: 221.28%;
    height: 100%;
    transform-origin: 54.67% 50%;
}

.mainBusiness__item--beauty {
    --main-business-shade: linear-gradient(180deg, rgba(17, 81, 73, 0) 3.049%, rgba(17, 81, 73, 0.7));
    --main-business-shade-active: linear-gradient(180deg, rgba(17, 81, 73, 0) 3.049%, #115149);
}
.mainBusiness__item--beauty .mainBusiness__image {
    top: -8.26%;
    left: -34.57%;
    width: 171.8%;
    height: 145.51%;
    transform-origin: 49.22% 40.04%;
}

.mainBusiness__shade {
    position: absolute;
    inset: -1.50794% 0 0;
    pointer-events: none;
}
.mainBusiness__shade::before,
.mainBusiness__shade::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: opacity 420ms var(--hero-ease-in);
}
.mainBusiness__shade::before { background: var(--main-business-shade); }
.mainBusiness__shade::after { background: var(--main-business-shade-active); opacity: 0; }

.mainBusiness__content {
    position: absolute;
    bottom: calc(150 * var(--main-business-unit));
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(60 * var(--main-business-unit));
    text-align: center;
    transition: bottom 480ms var(--hero-ease-in);
}
.mainBusiness__title,
.mainBusiness__description {
    margin: 0;
    font-family: var(--font-latin-num, "noto-sans", "Noto Sans KR", sans-serif);
    color: inherit;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    letter-spacing: 0.01em;
}
.mainBusiness__title {
    font-size: calc(70 * var(--main-business-unit));
    font-weight: var(--font-weight-bold, 700);
    line-height: calc(100 * var(--main-business-unit));
    white-space: nowrap;
}
.mainBusiness__item--fashion .mainBusiness__title { line-height: calc(120 * var(--main-business-unit)); }
.mainBusiness__description {
    font-size: max(14px, calc(22 * var(--main-business-unit)));
    font-weight: var(--font-weight-medium, 500);
    line-height: calc(35 / 22);
    word-break: keep-all;
    overflow-wrap: normal;
}
.mainBusiness__details {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 520ms var(--hero-ease-in), visibility 0s 400ms;
}
.mainBusiness__detailClip { min-height: 0; overflow: hidden; }
.mainBusiness__detailContent { padding-top: calc(30 * var(--main-business-unit)); }
.mainBusiness__description,
.mainBusiness__more {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 280ms ease, transform 280ms var(--hero-ease-in);
}
.mainBusiness__more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(197 * var(--main-business-unit));
    height: calc(80 * var(--main-business-unit));
    min-height: 44px;
    margin-top: calc(50 * var(--main-business-unit));
    padding: 0 calc(15 * var(--main-business-unit)) 0 calc(30 * var(--main-business-unit));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: calc(10 * var(--main-business-unit));
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: "Pretendard", var(--font-sans, sans-serif);
    font-size: max(12px, calc(18 * var(--main-business-unit)));
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.01em;
    transition: opacity 280ms ease, transform 280ms var(--hero-ease-in), background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}
.mainBusiness__more img {
    transition: filter 280ms ease;
}
.mainBusiness__more:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
}
.mainBusiness__more:hover img {
    filter: invert(1);
}
.mainBusiness__arrow {
    position: relative;
    flex: 0 0 calc(50 * var(--main-business-unit));
    min-width: 0;
    height: calc(50 * var(--main-business-unit));
}
.mainBusiness__arrow img {
    display: block;
    width: 50px;
    height: 50px;
    max-width: none;
    transform: scale(var(--main-business-scale));
    transform-origin: top left;
}

.mainBusiness__item:focus-visible {
    outline: 3px solid var(--color-text-inverse, #fff);
    outline-offset: -6px;
}
.mainBusiness__item:hover .mainBusiness__image,
.mainBusiness__item:focus-visible .mainBusiness__image { transform: scale(1.14); }
.mainBusiness__item:focus-visible .mainBusiness__content { bottom: calc(250 * var(--main-business-unit)); transition: bottom 760ms var(--hero-ease-out); }
.mainBusiness__item:focus-visible .mainBusiness__details { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 780ms var(--hero-ease-out), visibility 0s; }
.mainBusiness__item:focus-visible .mainBusiness__description { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 640ms ease 90ms, transform 760ms var(--hero-ease-out) 70ms; }
.mainBusiness__item:focus-visible .mainBusiness__more { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 640ms ease 160ms, transform 760ms var(--hero-ease-out) 140ms, background-color 280ms ease, color 280ms ease, border-color 280ms ease; }
.mainBusiness__item:focus-visible .mainBusiness__shade::before { opacity: 0; }
.mainBusiness__item:focus-visible .mainBusiness__shade::after { opacity: 1; }
.mainBusiness__item:focus-visible .mainBusiness__shade::before,
.mainBusiness__item:focus-visible .mainBusiness__shade::after { transition: opacity 720ms var(--hero-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .mainBusiness__item:hover .mainBusiness__image { transform: scale(1.14); }
    .mainBusiness__item:hover .mainBusiness__content { bottom: calc(250 * var(--main-business-unit)); transition: bottom 760ms var(--hero-ease-out); }
    .mainBusiness__item:hover .mainBusiness__details { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 780ms var(--hero-ease-out), visibility 0s; }
    .mainBusiness__item:hover .mainBusiness__description { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 640ms ease 90ms, transform 760ms var(--hero-ease-out) 70ms; }
    .mainBusiness__item:hover .mainBusiness__more { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 640ms ease 160ms, transform 760ms var(--hero-ease-out) 140ms, background-color 280ms ease, color 280ms ease, border-color 280ms ease; }
    .mainBusiness__item:hover .mainBusiness__shade::before { opacity: 0; }
    .mainBusiness__item:hover .mainBusiness__shade::after { opacity: 1; }
    .mainBusiness__item:hover .mainBusiness__shade::before,
    .mainBusiness__item:hover .mainBusiness__shade::after { transition: opacity 720ms var(--hero-ease-out); }
}

@media (hover: none) {
    .mainBusiness__content { bottom: calc(250 * var(--main-business-unit)); }
    .mainBusiness__details { grid-template-rows: 1fr; visibility: visible; }
    .mainBusiness__description,
    .mainBusiness__more { opacity: 1; transform: none; }
    .mainBusiness__shade::before { opacity: 0; }
    .mainBusiness__shade::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mainBusiness__content,
    .mainBusiness__details,
    .mainBusiness__description,
    .mainBusiness__more,
    .mainBusiness__shade::before,
    .mainBusiness__shade::after { transition: none; }
    .mainBusiness__description,
    .mainBusiness__more { transform: none; }
}