/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    min-width: 128rem;
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'AktivGrotesk', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 1rem */
    font-weight: 600;
    letter-spacing: -.02em;
    color: #000000;
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    transition: color .6s, background-color .6s;
}

@media screen and (max-width: 767px) {
    html, body {
        min-width: initial;
    }
}

html {
    background-color: #FFFFFF;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'AktivGrotesk', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    letter-spacing: -.02em;
    font-weight: 600;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
    margin: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: #000000;
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:active {
    color: #000000;
    text-decoration: none;
}

a:focus {
    color: #000000;
    text-decoration: none;
}

button {width: 22rem; height: 3.2rem; padding: 0 1.5rem; font-size: 1.4rem; font-weight: 600; color: #ffffff; background-color: #F2F2F2; border: 0; border-radius: 2rem; display: flex; align-items: center; justify-content: center; column-gap: .6rem; text-transform: uppercase; cursor: pointer; white-space: nowrap; backdrop-filter: blur(30px) brightness(80%); -webkit-backdrop-filter: blur(30px) brightness(80%); background-color: transparent;}

@media screen and (max-width: 767px) {
    button {width: 20rem; height: 2.8rem; font-size: 1.3rem;}
}

/* index 인덱스 ----------------------- */
.index-wrap {width: 100vw; height: 100vh; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr);}
.index-wrap > div {background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 2.5rem; cursor: pointer;}
.index-wrap > div .background {width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;}

.index-wrap > div .title {position: absolute; top: 6rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.index-wrap > div .title > h2 {font-size: 3.6rem; color: #FFFFFF; text-shadow: 0 0 10px rgba(0, 0, 0, .58);}
.index-wrap > div .title > ul {display: flex; align-items: center; justify-content: center; grid-gap: 1rem; flex-wrap: wrap; width: 45rem;}
.index-wrap > div .title > ul button {width: fit-content; /*backdrop-filter: none; background-color: rgba(85,85,85,.5);*/}

.index-wrap > div > lottie-player {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.index-wrap > div > img {position: relative;}

.index-wrap .leeum-wrap {background-image: url(/img/index/leeum-index-img-bda16717ef6a4972467c0bb9071da8a3.jpg);}
.index-wrap .leeum-wrap > lottie-player {width: 22rem; height: auto;}

.index-wrap .hoam-wrap {background-image: url(/img/index/hoam-index-img-fc8995ab98f66d3a573ea84c8d854795.jpg);}
.index-wrap .hoam-wrap .title > ul > li > button {border-radius: 0;}
.index-wrap .hoam-wrap .motion-img {width: 30rem; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.index-wrap .hoam-wrap > lottie-player {width: 30rem; height: auto;}
.index-wrap .hoam-wrap:hover .motion-img {display: none;}

@media screen and (max-width: 767px) {
    .index-wrap {grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(2, 1fr);}
    .index-wrap > div {padding: 2rem;}

    .index-wrap > div .title {top: 3rem; row-gap: 1.6rem;}
    .index-wrap > div .title > h2 {font-size: 2.6rem;}
    .index-wrap > div .title > ul {flex-flow: column; row-gap: .6rem;}

    .index-wrap > div > img {height: 1.1rem;}

    .index-wrap .hoam-wrap .motion-img {display: none;}
    .index-wrap .leeum-wrap > lottie-player {width: 10rem; height: auto; margin-top: 6.8rem;}
    .index-wrap .hoam-wrap > lottie-player {width: auto; height: 2rem; margin-top: 6.8rem;}

    .index-wrap .leeum-wrap {background-image: url(/img/index/leeum-index-img-mobile-a9ddbf68c5f330de2d4775afdcad3c25.jpg);}
    .index-wrap .hoam-wrap {background-image: url(/img/index/hoam-index-img-mobile-8ca1501d3830dd59ab7c16a5c8736950.jpg);}

}