/*global*/
html,body{
    font-size: 16px;
    width: 100%;
}
body{
    overflow: hidden;
}
body.is-ready{
    overflow-y: auto;
    overflow-x: hidden;
}
/*변수*/

    /*폰트,컬러 변수*/
:root {
    /*폰트 변수*/
    --inter-font : 'Inter', 'Pretendard', sans-serif;
    --manrope-font : 'Manrope', 'Spoqa Han Sans Neo', sans-serif;

    /*폰트 사이즈 변수*/
    --title-size : calc((var(--spacing-fix-3rem)) + (var(--spacing-fix-half1rem)));
    --text-effect-size : calc((var(--spacing-fix-2rem)) + (var(--spacing-fix-half1rem)));
    --text-size : var(--spacing-fix-1rem);

    /*컬러 변수*/
    --point-clr : #C4A88A;
    --extra-point-clr : #005D66;
    --extra-extra-point-clr : #fbcccd;
    --body-clr: #222222;
    --body-bg-clr: #F8F6F4;
    --logo-clr: #222222;
    --warm-gray: #5C5C5C;
}

    /* 간격 변수 */
:root {
    --spacing-xs: 0.5rem;  /* 작은 간격 */
    --spacing-sm: 1rem;    /* 기본 간격 */
    --spacing-md: 2rem;    /* 중간 간격 */
    --spacing-lg: 3.5rem;  /* 넉넉한 간격 (데스크탑 기준) */
    --spacing-xl: 5rem;    /* 아주 큰 간격 */
    --spacing-fix-half1rem: .5rem; /*변하지 않는 .5rem*/
    --spacing-fix-1rem: 1rem; /*변하지 않는 1rem*/
    --spacing-fix-2rem: 2rem; /*변하지 않는 2rem*/
    --spacing-fix-3rem: 3rem; /*변하지 않는 3rem*/
    --spacing-fix-4rem: 4rem; /*변하지 않는 4rem*/
    --spacing-fix-5rem: 5rem; /*변하지 않는 5rem*/
}

    /*cubic bezier, 그 외 가변값*/
:root {
    --cubic-x1: 0.215;
    --cubic-y1: 0.61;
    --cubic-x2: 0.355;
    --cubic-y2: 1;
    /*cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));*/
    --progress: 0;
}

/*grid 정의*/
:root {
    --dl-columns: calc(1 / 3 * 100% - 2 / 3 * var(--grid-gutter)) auto;
    --grid-gutter: 1rem; /* 여백 값 설정 */
    --grid-gutter-half: calc(1rem * 0.5);
}

/*미디어쿼리*/
/* 기본적으로 두 개의 이미지 모두 표시 */
/* 세로 모드 (Portrait) */
@media (orientation: portrait) {
    .person{
        object-fit: contain !important;
    }
    .personA {
        display: none;
    }
    .intro-video-landscape{
        display: none;
    }
    .footer-video-landscape{
        display: none;
    }
    .sticky-one{
        min-height: 280px;
    }
    .big_products_swiper_wrapper{
        height: 280px;
    }
    #swiper_products_section .swiper-slide{
        height: 280px;
    } /*swiper.css에서 관리중인 class*/
}

/* 가로 모드 (Landscape) */
@media (orientation: landscape) {
    .person{
        object-fit: cover !important;
    }
    .personB {
        display: none;
    }
    .intro-video-portrait{
        display: none;
    }
    .footer-video-portrait{
        display: none;
    }
    .sticky-one{
        min-height: 506px;
    }
    .big_products_swiper_wrapper{
        height: 506px;
    }
    #swiper_products_section .swiper-slide{
        height: 506px;
    } /*swiper.css에서 관리중인 class*/
}
.o {
    --dl-columns: calc(1 / 3 * 100% - 2 / 3 * var(--grid-gutter)) auto;
}
.o-dl {
    display: grid;
    grid-template-columns: var(--dl-columns);
}


/*전역 스타일*/
.uppercase{
    text-transform: uppercase;
}
.header_fixed{
    position: fixed;
    z-index: 99900;
    top: calc(var(--spacing-fix-1rem) + .75rem);
}
.text_balance{
    text-wrap: balance;
    word-break: keep-all;
}
.section_top_mg_gutter{
    margin-top: var(--spacing-fix-2rem);
}
.article_margin_top{
    margin-top: calc(var(--spacing-fix-1rem) + var(--spacing-fix-half1rem));
}
.large_top_mg_gutter{
    margin-top: var(--spacing-fix-3rem);
    margin-bottom: 1rem;
}
.element_gutter{
    left: 50%;
    transform: translateX(-50%);
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
    position: absolute;
    top: 0;
}
.lookup{
    padding-top: 110px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: var(--spacing-fix-3rem);
}



/*애니메이션*/
@keyframes text-scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes img-marquee1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes img-marquee2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes fadePlaceholder{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}