*{
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    word-break: keep-all;
}

:root{
    --maincolor: #5BC4BF;
    --fontmaincolor: #191919;
    --fontsub1color: #366664;
    --disablecolor: #f2f2f2;
}

/* 기본 설정 */
html{
    overflow-x: clip;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body.mainpage{
    overflow-x: clip;
    max-width: 100%;
}

#wrapper{background:#fff;}
#container{width:100%;}

.page-main #wrapper,
.page-main #container,
.page-main main{
    overflow-x: clip;
    max-width: 100%;
}

/* 모바일 뷰포트 — vh 폴백 + dvh(주소창·하단 툴바 리사이즈 대응) */
.page-main{
    --paz-vh: 1vh;
    --paz-vh: 1dvh;
    --paz-vh-full: 100vh;
    --paz-vh-full: 100dvh;
    --paz-header-h: 84px;
    background-color: #F9F9F9;
}

html.page-main body{
    background-color: #F9F9F9;
}
#container .is_index{margin-left:0;}
#hd, #wrapper, #ft {min-width:initial; width: 100%;}
#container .shop-content{padding: 0 0;}

/* 메인 공통 세팅 (promp sub__contents__wr 결 — 메인은 main__ 접두) */
.main__contents__wr{
    padding: 160px 0;
    position: relative;
    width: 100%;
}




/* 인트로 진행 중 — 페이지 스크롤 잠금 (완료 시 html/body에서 is-intro-lock 제거) */
html.is-intro-lock,
body.is-intro-lock{
    overflow: hidden;
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
    /* viewport-fit=cover — 다이나믹 아일랜드 뒤 배경 = 인트로 상단 그레이 */
    background-color: #F9F9F9;
}

body.is-intro-lock #wrapper,
body.is-intro-lock #container{
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.title__wr{
    margin-bottom: 40px;
}

.section__title{
    font-family: "Montserrat", sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -2.5px;
    line-height: 60px;
}


.font-montserrat{
    font-family: "Montserrat", sans-serif;
}

.font-pretendard{
    font-family: "Pretendard", sans-serif;
}

.more__btn,
.categories__more__btn{
    display: block;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: #ffffff url('/images/btn_more.svg') center/28px no-repeat;
    border-radius: 50%;
    transition: box-shadow 0.35s ease, filter 0.35s ease;
}

.more__btn:hover,
.categories__more__btn:hover{
    box-shadow: 0 10px 24px rgba(25, 25, 25, 0.2);
    filter: invert(1);
}

.header{
    display: block;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}


/* intro start*/

#intro{
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    left: 0;
    width: 100%;
    height: calc(var(--paz-vh-full, 100dvh) + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    min-height: calc(100svh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    z-index: 10;
    background: linear-gradient(180deg, #F9F9F9 0%, #DDDDDD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.intro__top,
.intro__bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
}

.intro__top{
    z-index: 1;
}

.intro__top{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #F9F9F9 0%, #DDDDDD 100%);
}



.intro__bottom{
    z-index: 2;
    background: #5BC4BF;
}

.intro__bottom__bg{
    width: 100%;
    height: 100%;
    background: url('/images/bg01.jpg') center/cover no-repeat;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.intro__top .intro__title__wr,
.intro__bottom .intro__title__wr{
    position: relative;
    z-index: 2;
}

.intro__title__wr{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.intro__title__wr > span{
    display: flex;
    width: fit-content;
}

.intro__title{
    font-family: "Montserrat", sans-serif;
    font-size: 200px;
    line-height: 200px;
    font-weight: 700;
}

.intro__title:nth-of-type(2){
    /* 1920px → 200px, 570px → 68px 선형 보간 */
    font-size: clamp(68px, calc(68px + (100vw - 570px) * 132 / 1350), 200px);
    line-height: 1;
}

.intro__title:nth-of-type(3){
    /* 1920px → 200px, 570px → 48px 선형 보간 */
    font-size: clamp(42px, calc(42px + (100vw - 570px) * 152 / 1350), 200px);
    line-height: 1;
}

.intro__top .intro__title__subtitle{
    position: absolute;
    /* 1920px → 24px, 570px → 16px 선형 보간 */
    font-size: clamp(16px, calc(16px + (100vw - 570px) * 8 / 1350), 24px);
    font-weight: 500;
    line-height: 1.333;
    justify-self: flex-start;
    font-family: "Pretendard", sans-serif;

    top: 150px;
    left: 0;
}

.intro__bottom .intro__title__subtitle{
    position: absolute;
    font-size: clamp(16px, calc(16px + (100vw - 570px) * 8 / 1350), 24px);
    font-weight: 500;
    line-height: 32px;
    justify-self: flex-start;
    font-family: "Pretendard", sans-serif;

    bottom: 40px;
    right: -110px;
}



.intro__card{
    position: absolute;
    bottom: -25%;
    left: 50%;
    transform: translateX(-50%) rotate(-15deg);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    width: 396px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.13);
    z-index: 4;
}

.intro__card__bg__wr{
    width: 100%;
    height: 480px;
    padding: 25px 25px 0 25px;
}

.intro__card__bg{
    width: 100%;
    height: 100%;
    background: #0062CC;
    color: #ffffff;
    position: relative;
}


.intro__text__01{
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    white-space: nowrap;
}
.intro__text__02{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 26px;
    white-space: nowrap;
    /* 색상명 길이 변해도 박스 크기 고정 → 회전 후 위치 안 튐 */
    min-width: 13ch;
}


.intro__text__box__left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    bottom: 30px;
    left: 100px;
    transform: rotate(-90deg);
    transform-origin: left bottom;
}

.intro__text__box__right{
    font-size: 12px;
    font-family: "Pretendard", sans-serif;
    line-height: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0.6;
    position: absolute;
    bottom: 25px;
    right: 30px;
}

.intro__text__box__right span{
    white-space: nowrap;
    text-align: right;
    min-width: 16ch;
}


.intro__logo__box{
    display: flex;
    width: 396px;
    height: 84px;
    justify-content: center;
    align-items: center;
    background: #ffffff;
}


.intro__logo__box .intro__logo{
    width: 82px;
    height: 32px;
}


.scroll__text{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 500;
    font-family: "Pretendard", sans-serif;
    color: #fff;
    transition: opacity 0.25s ease-in;
    animation: scroll 0.75s infinite;
    z-index: 5;
}

@keyframes scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* 인트로 시작 시점 */

/* step 1 정중앙으로 이동 */

#intro.is-active-step1 .intro__card {
    /* bottom:-25% 유지 + dvh만큼 위로 → 모든 뷰포트에서 정중앙 */
    transform: translate(-50%, calc(-75vh + 50%)) rotate(0deg);
    transform: translate(-50%, calc(-75 * var(--paz-vh, 1dvh) + 50%)) rotate(0deg);
}

#intro.is-active-step1 .scroll__text {
    opacity: 0;
    animation:none;
    transition: opacity 0.25s ease-in;
    display: none;
}

#intro.is-active-step1 .intro__top .intro__title__wr {
    transition: color 0.25s ease-in;
    color: #cccccc;
}

@media (max-width: 1024px) {
    /* 1024 미만: step1에서 카드/텍스트를 정중앙이 아닌 "1/3 정도만" 위로 */
    #intro.is-active-step1 .intro__card {
        transform: translate(-50%, calc(-65vh + 50%)) rotate(0deg);
        transform: translate(-50%, calc(-65 * var(--paz-vh, 1dvh) + 50%)) rotate(0deg);
    }

    #intro.is-active-step1 .intro__top .intro__title__wr {
        transform: translateY(-25vh);
        transform: translateY(calc(-25 * var(--paz-vh, 1dvh)));
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease-in;
    }
}

#intro.is-card-dock .intro__card{
    transition: none !important;
}






/* intro end*/

/* main start*/
#hero__section{
    position: relative;
    padding: 0;
    height: var(--paz-vh-full, 100dvh);
}

.hero__section{
    width: 100%;
}

#hero__section .hero__swiper{
    width: 100%;
    height: 100%;
}

#hero__section .hero__swiper .swiper-slide{
    height: 100%;
}

.hero__slide{
    position: relative;
    height: 100%;
    min-height: var(--paz-vh-full, 100dvh);
    overflow: hidden;
}

.hero__box__01{
    background: #E8EDF1;
}

.hero__box__02{
    background: #FCEDED;
}

.hero__box__03{
    background: #FFFFDF;
}

#hero__section .hero__slide .inner__cen1680{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 150px);
    min-height: calc(var(--paz-vh-full, 100dvh) - 150px);
}

.hero__text__box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: max-content;
    height: fit-content;
    color:#191919;
}

.hero__text__box > span{
    width: fit-content;
}

.hero__subtitle{
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.hero__title{
    font-size: 60px;
    font-weight: 600;
    line-height: 68px;
    margin:40px 0 24px 0;
}

.hero__description{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.hero__image__box{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
}

.hero__image__box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#hero__section .hero__pagination__wr{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: #ffffff;
    z-index: 2;
}

#hero__section .hero__pagination__wr .inner__cen1680{
    display: flex;
    align-items: center;
    height: 100%;
}

.hero__pagination{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.hero__pagination .swiper-pagination-bullet{
    flex: 1;
    height: 100%;
    border-radius: 0;
    margin: 0 !important;
    background: transparent;
    opacity: 1;
    position: relative;
    display: flex;
    align-items: center;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #DDDDDD;
}

.hero__pagination .swiper-pagination-bullet::after{
    width: 100%;
}

.hero__pagination .swiper-pagination-bullet:nth-child(1)::after{
    content: '바라봄VOM';
    text-align: left;
}

.hero__pagination .swiper-pagination-bullet:nth-child(2)::after{
    content: '마주봄VOM';
    text-align: center;
}

.hero__pagination .swiper-pagination-bullet:nth-child(3)::after{
    content: '해봄VOM';
    text-align: right;
}

.hero__pagination .swiper-pagination-bullet-active{
    color: #5BC4BF;
}
/* hero__section end*/

/* categories__section start*/

#categories__section{
    background-color: #F9F9F9;
}

#categories__section .categories__swiper{
    width: 100%;
    overflow: hidden;
}

#categories__section .categories__swiper .swiper-slide{
    height: auto;
}

.categories__section{
    width: 100%;
}

.categories__title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.categories__product__box{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 480px;
    background-color: #eeeeee;
    overflow: hidden;
    cursor: pointer;
}

.categories__product__box > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.categories__product__link{
    position: absolute;
    inset: 0;
    z-index: 2;
}

.categories__product__wr{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 40px 32px;
}

.categories__product__title{
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #191919;
    transition: letter-spacing 0.35s ease;
}

.categories__more__btn{
    width: 44px;
    height: 44px;
}

.categories__product__box:hover > img,
.categories__product__box:focus-within > img{
    transform: scale(1.04);
    filter: brightness(0.92);
}

.categories__product__box:hover .categories__product__title,
.categories__product__box:focus-within .categories__product__title{
    letter-spacing: 0.02em;
}

.categories__product__box:hover .categories__more__btn,
.categories__product__box:focus-within .categories__more__btn{
    filter: invert(1);
    box-shadow: 0 10px 24px rgba(25, 25, 25, 0.2);
}

/* categories__section end*/

/* highlight__section start*/

.highlight__button__wr{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.highlight__button__box{
    display: flex;
    gap: 12px;
    align-items: center;
}

.highlight__button__item{
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #999999;
    background-color: #F5F5F5;
    padding: 16px 24px;
    border-radius: 9999px;
    border: none;
    font-family: "Montserrat", sans-serif;
}

.highlight__button__item.is-active{
    background-color: #5BC4BF;
    color: #ffffff;
    font-weight: 500;
}

.highlight__swiper{
    margin-top: 60px;
    width: 100%;
    overflow: hidden;
}

#highlight__section .highlight__swiper .swiper-wrapper{
    align-items: stretch;
}

#highlight__section .highlight__swiper .swiper-slide{
    height: auto;
    display: flex;
}

.highlight__product__box > a{
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    color: var(--fontmaincolor);
    text-decoration: none;
    background: #F9F9F9;
    padding: 24px 24px 40px 24px;
    transition: color 0.4s, background-color 0.4s;
    isolation: isolate;
}

.highlight__product__box > a > img,
.highlight__product__box > a > .highlight__product__wr{
    position: relative;
    z-index: 1;
}

.highlight__product__box > a::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease;
    background-color: var(--maincolor);
}

/* PC(호버 가능)만 민트 오버레이 — 터치/스크롤 :hover 고착 방지 */
@media (hover: hover) and (pointer: fine) {
    .highlight__product__box > a:hover{
        background-color: transparent;
        color: #ffffff;
    }

    .highlight__product__box > a:hover::before{
        transform: translateY(0);
    }
}

.highlight__product__box img{
    display: block;
    width: 100%;
    height: auto;
    background-color: #ffffff;
}

.highlight__product__box{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    background: transparent;
    padding: 0;
}

.highlight__product__wr{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 40px 16px 0 16px;
}

.highlight__product__title{
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.highlight__product__description{
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    margin: 12px 0 24px 0;
}

.highlight__product__price{
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 24px;
}

.highlight__product__card{
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.highlight__product__card > div{
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    background-color: #ffffff;
    border-radius: 9999px;
    color:#505050;
    text-wrap: nowrap;
}


/* highlight__section end*/

/* visualize__section start*/

#visualize__section{
    position: relative;
    padding: 0;
    height: var(--paz-vh-full, 100dvh);
    box-sizing: border-box;
    background-color: #5BC4BF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 1024px) {
    #visualize__section{
        padding-top: var(--paz-header-h, 84px);
    }
}

#visualize__section .inner__full{
    position: relative;
}

.visualize__img__box{
    display: flex;
    position: absolute;
    left: 50%;
    flex-direction: column;
    gap: 500px;
    align-items: center;
    z-index: 2;
    width: max-content;
    pointer-events: none;
}

.visualize__img__box img{
    display: block;
    height: 440px;
    width: auto;
}

.visualize__title{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
}

.visualize__title .section__title{
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    font-size: 240px;
    line-height: 1;
    position: relative;
    color: #ffffff;
}

.visualize__title .section__title > span:first-child{
    position: relative;
    z-index: 1;
    width: max-content;
}

.visualize__title .section__title > span:last-child{
    position: relative;
    z-index: 3;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.visualize__title .section__title span{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}



/* visualize__section end*/

/* equipment__section start*/

#equipment__section{
    overflow: hidden;
    padding: 0;
}

/* pin 래퍼 — equipment + knowhow 오버레이 */
.equipment__cover-pin{
    position: relative;
    width: 100%;
    padding-top: var(--paz-header-h, 84px);
    height: var(--paz-vh-full, 100dvh);
    box-sizing: border-box;
    overflow: hidden;
}

.equipment__pin{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.equipment__title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.equipment__body{
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;

    position: relative;
    min-height: 600px;
}

.equipment__img__box{
    position: absolute;
    top: 0;
    left: 0;
    width: 56.8% ;
    height: 100%;
    z-index: 0;
}

.equipment__img__box img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    will-change: opacity, transform;
}

.equipment__img__box img.is-active{
    opacity: 1;
}

.equipment__body > .inner__cen1680{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 600px;
}

.equipment__contents__box{
    width: 35%;
    min-width: 320px;
}

.equipment__contents__list{
    width: 100%;
}

.equipment__contents__item{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 40px 0;
    border-top: 1px solid #cccccc;
}

.equipment__contents__item:last-child{
    border-bottom: 1px solid #cccccc;
}

.equipment__contents__item__title{
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: #e5e5e5;
}

.equipment__contents__item.is-active .equipment__contents__item__title{
    color: #5BC4BF;
}

.equipment__contents__item__description{
    display: block;
    height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    font-size: clamp(16px, 1.4vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    color: #191919;
}

/* JS 없을 때: 활성 항목만 설명 노출 */
.equipment__contents__item.is-active .equipment__contents__item__description{
    height: auto;
    margin-top: 12px;
    opacity: 1;
}

.equipment__contents__item:not(.is-active) .equipment__contents__item__description{
    display: none;
}

/* ScrollTrigger: display 유지 + 높이·색상은 GSAP만 제어 */
#equipment__section.is-scroll-driven .equipment__contents__item:not(.is-active) .equipment__contents__item__description,
#equipment__section.is-scroll-driven .equipment__contents__item.is-active .equipment__contents__item__description{
    display: block;
    height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#equipment__section.is-scroll-driven .equipment__contents__item__title{
    color: #e5e5e5;
}

/* 스크롤 구간: is-active 클래스가 GSAP opacity·height와 충돌하지 않도록 */
#equipment__section.is-scroll-driven .equipment__img__box img.is-active{
    opacity: unset;
}

#equipment__section.is-scroll-driven .equipment__contents__item.is-active .equipment__contents__item__title{
    color: unset;
}

/* equipment__section end*/

/* knowhow__section start*/

/* knowhow — equipment 위를 덮는 오버레이 */
.knowhow__overlay{
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}

.knowhow__overlay.is-active{
    pointer-events: auto;
}

.knowhow__stage{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

.effect_layers,
.knowhow__layer__main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.layer01{
    z-index: 1;
    background: url('/images/bg04.jpg') center/cover no-repeat;
}

.layer02{
    z-index: 2;
    background: url('/images/bg03.jpg') center/cover no-repeat;
}

.layer03{
    z-index: 3;
    background: url('/images/bg02.jpg') center/cover no-repeat;
}

.knowhow__layer__main{
    z-index: 4;
    max-width: none;
    margin: 0;
    background: url('/images/bg01.jpg') center/cover no-repeat;
}

.knowhow__layer__main .inner__cen1180{
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    /* 헤더·safe-area 제외 영역에서 시각적 중앙 정렬 */
    padding: var(--paz-header-h, 84px) clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.knowhow__title__wr{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 581px;
}

.knowhow__subtitle{
    margin: 0;
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    color: #ffffff;
}

.knowhow__title{
    margin: 24px 0 0;
    font-family: "Pretendard", sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 72px;
    color: #ffffff;
}

.knowhow__description{
    margin: 40px 0 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

.knowhow__specs__wr{
    width: 100%;
    max-width: 1178px;
    margin-top: 80px;
}

.knowhow__specs__list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.knowhow__specs__item{
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.knowhow__specs__item__number,
.knowhow__specs__item__number .spec__digit,
.knowhow__specs__item__number .spec__char,
.knowhow__specs__item__number .spec__roll__track,
.knowhow__specs__item__number .spec__roll__track > span{
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 600;
    line-height: 90px;
    color: #ffffff;
}

.knowhow__specs__item__number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    font-variant-numeric: tabular-nums;
}

.knowhow__specs__item__number.is-count-complete .spec__roll__track{
    will-change: auto;
}

.spec__digit{
    display: inline-block;
    height: 90px;
    overflow: hidden;
}

.spec__char{
    display: inline-block;
    height: 90px;
}

.spec__roll__track{
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.spec__roll__track > span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    box-sizing: border-box;
}

.knowhow__specs__item__text{
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.knowhow__overview__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 318px;
    min-height: 72px;
    margin: 40px 0 0;
    padding: 0 48px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #000000;
    border-radius: 77px;
    background: #ffffff;
    text-decoration: none;
    transition: color 0.35s ease, background-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .knowhow__overview__btn:hover{
        color: #ffffff;
        background-color: #000000;
    }
}
/* knowhow__section end*/




/* 반응형 start*/

/* 공통 반응형 start*/

@media (max-width: 1800px) {}

@media (max-width: 1024px) {
    .main__contents__wr {
        padding: 100px 0;
    }
    .title__wr{
        margin-bottom: 30px;
        align-items: center;
    }
    .section__title{
        font-size: 40px;
        line-height: 80px;
        letter-spacing: -2.5px;
    }

    .more__btn,
    .categories__more__btn {
        width: 30px;
        height: 30px;
        background-size: 20px;
    }
}

@media (max-width: 768px) {}

@media (max-width: 570px) {
    .main__contents__wr {
        padding: 80px 0;
    }
    .title__wr{
        margin-bottom: 24px;
        align-items: center;
    }
    .section__title{
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -1.5px;
    }

    .more__btn,
    .categories__more__btn {
        width: 24px;
        height: 24px;
        background-size: 14px;
        background-color: #ffffff;
    }

}

/* 공통 반응형 end*/

/* 1800 / 1024 / 768 / 570 */

/* intro 반응형 */
@media (max-width: 1800px) {
    .intro__top .intro__title__subtitle{
        position: static;
    }

    .intro__bottom .intro__title__subtitle{
        position: static;
    }
}

@media (max-width: 1024px) {
    .intro__card{
        width: 340px;
    }

    .intro__card__bg__wr {
        width: 100%;
        height: 430px;
        padding: 20px 20px 0 20px;
    }

    /* 헤더 css 확인할것 (주의) */
    .intro__logo__box {
        width: 340px;
    }

    .intro__text__box__right {
        right: 20px;
    }
    .intro__text__box__left {
        left: 90px;
    }
}

@media (max-width: 768px) {}

@media (max-width: 570px) {
    .intro__card{
        width: 219px;
    }

    .intro__card__bg__wr {
        width: 100%;
        height: 320px;
        padding: 15px 15px 0 15px;
    }

    /* 헤더 css 확인할것 (주의) */
    .intro__logo__box {
        width: 219px;
        height: 56px;
    }

    .intro__text__01{
        font-size: 24px;
        line-height: 1;
    }

    .intro__text__02{
        font-size: 12px;
        line-height: 1;
    }

    .intro__text__box__left {
        left: 60px;
    }

    .intro__text__box__right {
        font-size: 10px;
    }

    .intro__logo__box .intro__logo {
        width: 62px;
        height: 24px;
    }

    .intro__logo__box .intro__logo img{
        display: block;
        width: 100%;
        height: 100%;
    }

}

/* intro 반응형 end*/


/* hero__section 반응형 start*/

@media (max-width: 1400px) {
    .hero__subtitle {
        font-size: 18px;
        line-height: 1;
    }

    .hero__title {
        font-size: 40px;
        margin: 40px 0 24px 0;
        line-height: 1.2;
    }

    .hero__description {
        font-size: 18px;
        line-height: 1.5;
    }
}
@media (max-width: 1024px) {

    #hero__section .hero__pagination__wr {
        height: 90px;
    }

    #hero__section .hero__slide .inner__cen1680 {
        min-height: calc(100vh - 50%);
        min-height: calc(var(--paz-vh-full, 100dvh) - 50%);
    }
    
    .hero__image__box {
        bottom: 50px;
        top: auto;
        width: 100%;
        height: 50%;
    }

}

@media (max-width: 768px) {
    .hero__subtitle {
        font-size: 16px;
    }

    .hero__title {
        font-size: 32px;
    }

    .hero__description {
        font-size: 16px;
    }
}

@media (max-width: 570px) {
    .hero__subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .hero__title {
        font-size: 28px;
        margin: 24px 0 12px 0;
        line-height: 36px;
    }

    .hero__description {
        font-size: 14px;
        line-height: 20px;
    }

    #hero__section .hero__pagination__wr {
        height: 62px;
    }
    .hero__pagination .swiper-pagination-bullet {
        font-size: 12px;
    }

}

/* hero__section 반응형 end*/

/* categories__section 반응형 start*/

@media (max-width: 1799px) {
    #categories__section{
        overflow: visible;
    }

    #categories__section > .inner__cen1680{
        overflow: visible;
    }

    #categories__section .categories__swiper{
        width: calc(100% + (100vw - 100%) / 2);
        max-width: none;
        overflow: visible;
    }
}

@media (max-width: 1024px) {
    .categories__product__box {
        height: 360px;
    }

    .categories__product__wr {
        padding: 0 20px 20px;
    }

    .categories__product__title {
        font-size: 20px;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .more__btn,
    .categories__more__btn {
        width: 32px;
        height: 32px;
        background-size: 14px;
    }
}

@media (max-width: 570px) {
    .categories__product__box {
        width: 100%;
        height: 287px;
    }

    .categories__product__title {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* categories__section 반응형 end*/

/* highlight__section 반응형 start*/

@media (max-width: 1800px) {

    .highlight__product__title {
        font-size: 20px;
        line-height: 1.5;
    }

    .highlight__product__description {
        font-size: 16px;
        line-height: 1.5;
    }

    .highlight__product__price {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .highlight__product__card > div {
        font-size: 14px;
        padding: 6px 10px;
    }


}



@media (max-width: 1024px) {
    #highlight__section{
        overflow: visible;
    }

    #highlight__section > .inner__cen1680{
        overflow: visible;
    }

    #highlight__section .highlight__swiper{
        touch-action: pan-y;
        overscroll-behavior: contain;
        width: calc(100% + (100vw - 100%) / 2);
        max-width: none;
        overflow: visible;
    }

    .highlight__button__item {
        font-size: 16px;
        line-height: 1.5;
        padding: 12px 16px;
    }


    .highlight__product__description {
        line-height: 1.5;
        margin: 8px 0 16px 0;
    }

    .highlight__product__price {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .highlight__product__card > div {
        font-size: 12px;
        padding: 6px 10px;
    }

}
@media (max-width: 768px) {
    .highlight__button__item {
        font-size: 14px;
        line-height: 1.5;
        padding: 10px 14px;
    }

    .highlight__product__title {
        font-size: 18px;
        line-height: 1.5;
    }

    .highlight__product__description {
        line-height: 1.5;
        margin: 8px 0 16px 0;
    }

    .highlight__product__price {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
    }


}
@media (max-width: 570px) {
    .highlight__button__item {
        font-size: 12px;
        line-height: 1.5;
        padding: 8px 12px;
    }

    .highlight__swiper {
        margin-top: 40px;
        width: calc(100% + (100vw - 100%) / 2);
        max-width: none;
        overflow: visible;
    }

    .highlight__product__title {
        font-size: 16px;
        line-height: 1.5;
    }

    .highlight__product__description {
        font-size: 14px;
        line-height: 1.5;
        margin: 8px 0 16px 0;
    }

    .highlight__product__price {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .highlight__product__card > div {
        font-size: 12px;
        padding: 6px 10px;
    }

    .highlight__product__box > a {
        padding: 12px 12px 24px 12px;
    }

    .highlight__product__wr {
        margin: 24px 12px 0 10px;
    }

}
/* highlight__section 반응형 end*/

/* visualize__section 반응형 start*/

@media (max-width: 1800px) {
    .visualize__title .section__title {
        /* 1800px → 240px · 570px → 60px / line-height 1(PC 비율 유지) */
        font-size: clamp(60px, calc(60px + (100vw - 570px) * 180 / 1230), 240px);
        line-height: 1.2;
    }

    .visualize__title .section__title > span {
        line-height: 1.2;
    }
}

@media (max-width: 1024px) {
    .visualize__img__box {
        gap: 320px;
        will-change: transform;
    }

    .visualize__img__box img {
        height: 300px;
    }

    #visualize__section{
        touch-action: pan-y;
    }
}

@media (max-width: 570px) {
    .visualize__img__box {
        gap: 200px;
    }

    .visualize__img__box img {
        height: 220px;
    }
}

/* visualize__section 반응형 end*/

/* equipment__section 반응형 start*/

@media (max-width: 768px) {

    .equipment__cover-pin,
    #equipment__section{
        touch-action: pan-y;
    }
    
    .equipment__body > .inner__cen1680 {
        min-height: 0;
        display: block;
    }

    .equipment__img__box {
        position: relative;
        width: 100%;
        height: 300px;
        flex-shrink: 0;
    }
    .equipment__contents__box {
        width: 100%;
        min-width: 0;
        margin-top: 80px;
    }
    
    .equipment__body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .equipment__img__box {
        height: 300px;
    }



    .equipment__contents__item {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 24px 0;
    }
}

@media (max-width: 570px) {

    .equipment__title{
        align-items: flex-end;
    }

    .equipment__img__box {
        height: 210px;
    }

    .equipment__contents__box {
        margin-top: 24px;
    }


    .equipment__contents__item {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}




/* equipment__section 반응형 end*/

/* knowhow__section 반응형 start*/

@media (max-width: 1024px) {
    .knowhow__layer__main .inner__cen1180{
        /* 헤더 아래 가용 높이에서 중앙 — dvh 리듬 */
        padding-top: var(--paz-header-h, 84px);
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
        gap: clamp(12px, 2.5dvh, 28px);
    }

    .knowhow__title__wr {
        max-width: 100%;
        flex: 0 1 auto;
    }

    .knowhow__specs__item {
        gap: 12px;
    }

    .knowhow__specs__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .knowhow__subtitle {
        font-size: 17px;
        line-height: 26px;
        font-weight: 500;
        color: #ffffff;
    }

    .knowhow__title {
        margin-top: clamp(12px, 2dvh, 20px);
        font-size: clamp(22px, 3.2dvh, 28px);
        line-height: 1.3;
        letter-spacing: -1.5px;
        font-weight: 500;
        color: #ffffff;
    }

    .knowhow__description {
        margin-top: clamp(12px, 2.5dvh, 32px);
        font-size: 16px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
    }

    .knowhow__specs__wr {
        margin-top: clamp(20px, 4.5dvh, 64px);
        flex: 0 1 auto;
        width: 100%;
    }

    .knowhow__specs__item__number,
    .knowhow__specs__item__number .spec__digit,
    .knowhow__specs__item__number .spec__char,
    .knowhow__specs__item__number .spec__roll__track,
    .knowhow__specs__item__number .spec__roll__track > span {
        font-size: clamp(36px, 6dvh, 48px);
        line-height: 1.15;
    }

    .knowhow__specs__item__number,
    .knowhow__specs__item__number .spec__digit,
    .knowhow__specs__item__number .spec__char,
    .knowhow__specs__item__number .spec__roll__track > span {
        height: clamp(42px, 6.5dvh, 54px);
    }

    .knowhow__specs__item__text {
        font-size: 16px;
        line-height: 22px;
        color: rgba(255, 255, 255, 0.6);
    }

    .knowhow__overview__btn {
        margin-top: clamp(12px, 2.5dvh, 32px);
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    /* consult__btn 모바일과 동일 — Figma: 14px / padding 16·28 / radius 50 */
    .knowhow__overview__btn {
        min-width: 0;
        min-height: auto;
        width: auto;
        height: auto;
        padding: 16px 28px;
        border-radius: 50px;
        font-size: 14px;
        line-height: 1.1;
    }

    .knowhow__layer__main .inner__cen1180{
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 570px) {
    .knowhow__layer__main .inner__cen1180{
        padding-top: var(--paz-header-h, 56px);
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
        gap: clamp(8px, 2dvh, 20px);
    }

    .knowhow__specs__list {
        grid-template-columns: 1fr;
        gap: clamp(12px, 2.5dvh, 24px);
    }

    .knowhow__subtitle {
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        color: #ffffff;
    }

    .knowhow__title {
        margin-top: clamp(8px, 1.5dvh, 16px);
        font-size: clamp(18px, 2.8dvh, 20px);
        font-weight: 500;
        letter-spacing: -1px;
        line-height: 1.4;
        color: #ffffff;
    }

    .knowhow__description {
        margin-top: clamp(10px, 2dvh, 24px);
        font-size: 14px;
        line-height: 22px;
        color: rgba(255, 255, 255, 0.8);
    }

    .knowhow__specs__wr {
        margin-top: clamp(16px, 3.5dvh, 48px);
    }

    .knowhow__specs__item {
        gap: 8px;
    }

    .knowhow__specs__item__number, .knowhow__specs__item__number .spec__digit, .knowhow__specs__item__number .spec__char, .knowhow__specs__item__number .spec__roll__track, .knowhow__specs__item__number .spec__roll__track > span {
        font-size: clamp(28px, 5.5dvh, 36px);
        line-height: 1.2;
    }

    .knowhow__specs__item__number,
    .knowhow__specs__item__number .spec__digit,
    .knowhow__specs__item__number .spec__char,
    .knowhow__specs__item__number .spec__roll__track > span {
        height: clamp(34px, 5.5dvh, 46px);
    }

    .knowhow__specs__item__text {
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }

    .knowhow__overview__btn {
        margin-top: clamp(10px, 2dvh, 28px);
    }
}

@media (max-width: 375px) {
    .knowhow__specs__wr {
        margin-top: clamp(12px, 3dvh, 36px);
    }

    .knowhow__specs__list {
        gap: 16px;
    }
}

/* 짧은 뷰포트 — 스펙 1열·간격 축소로 중앙 유지 */
@media (max-width: 1024px) and (max-height: 720px) {
    .knowhow__specs__list {
        grid-template-columns: 1fr;
        gap: clamp(8px, 2dvh, 16px);
    }

    .knowhow__specs__wr {
        margin-top: clamp(12px, 2.5dvh, 32px);
    }

    .knowhow__description br {
        display: none;
    }
}

/* knowhow__section 반응형 end*/

/* 모바일 뷰포트 안정화 — safe-area · 하단 툴바(홈 인디케이터) */
@media (max-width: 1024px) {
    .page-main #intro,
    .page-main #hero__section,
    .page-main #visualize__section,
    .page-main .equipment__cover-pin{
        height: var(--paz-vh-full, 100dvh);
        min-height: var(--paz-vh-full, 100dvh);
    }

    .page-main #hero__section .hero__pagination__wr{
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .page-main #footer{
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 768px) {
    .page-main #footer{
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 570px) {
    .page-main{
        --paz-header-h: 56px;
    }

    .page-main #footer{
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }
}