@charset "utf-8";

.page-fade {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0s linear 1s; 
  pointer-events: none;
}
.page-fade.hidden {
  opacity: 0;
  visibility: hidden; /* opacity transition 끝난 후 비활성화 */
}

body{
    position: relative;
}

/* ===== layer popup ===== */
.intro-popup{
  position:fixed;
  inset:0;

  width:100%;
  height:100vh;

  z-index:99999;

  background:url('../images/intro_bg.webp') no-repeat center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.intro-popup.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}
.popup-wrap{
    width: max(700px, min(36.4583vw, 64.8148vh));        /* 700px — ≤1920 원본 유지, 2560↑ 확대 */
    min-height: max(550px, min(28.6458vw, 50.9259vh));   /* 550px */
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-large);
}
.popup-logo{
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
    width: max(200px, min(10.4167vw, 18.5186vh));   /* 200px */
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-logo::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height:65%;
    background-color: #fff;
    z-index: -1;
}
.popup-inner{
    width: max(660px, min(34.375vw, 61.1111vh));        /* 660px */
    min-height: max(510px, min(26.5625vw, 47.2222vh));  /* 510px */
    border-radius: max(15px, min(0.7813vw, 1.389vh)); /* 15px */
    border: 2px solid #0076cb;
    padding: max(40px, min(2.0833vw, 3.7036vh)) max(20px, min(1.0417vw, 1.8519vh));   /* 40px 20px */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.popup-text-wrap{
    text-align: center;
}
.popup-text-wrap p{
    font-size: var(--font-title-lg);
    font-weight: 300;
    margin-bottom: var(--margin-bottom-24);
    line-height: 1.2;
}
.popup-text-wrap p span{
    font-weight: 700;
    color: var(--primary-color);
}
.popup-text-wrap strong{
    font-size: var(--font-title-xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--margin-bottom-50);
    display: block;
}
.popup-btn-wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: max(13px, min(1.0417vw, 1.8519vh));   /* 20px */
}
.popup-btn-wrap a{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-large);
    font-size: var(--font-title-lg2);
    font-weight: 700;
    color: #fff;
    width: max(200px, min(10.4167vw, 18.5186vh));   /* 200px */
    height: max(80px, min(4.1667vw, 7.4075vh));    /* 80px */
}
.popup-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-large);
    font-size: var(--font-title-lg2);
    font-weight: 700;
    color: #fff;
    width: max(200px, min(10.4167vw, 18.5186vh));   /* 200px */
    height: max(80px, min(4.1667vw, 7.4075vh));    /* 80px */
}
a.btn-gray{
    background-color: #707070;   /* 흰 글자 대비 약 4.95:1 (WCAG AA 충족) */
}
a.btn-primary{
    background-color: var(--btn-color);
}

/* ===== header ===== */
header.header{
    width: 100%;
    height: max(60px, min(4.1667vw, 7.4075vh));   /* 80px (헤더 사용성 하한 60px) */
    padding: max(7px, min(0.5208vw, 0.9259vh)) min(2.6042vw, 4.6297vh);   /* 10px 50px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.3s ease;
}
header.header.scroll-down{
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* 사파리 브라우저 호환성용 */
}
.mobile-menu-wrap{
    display: none;
}
.mobile-gnb-group{
    display: none;
}
.header-logo a{
    display: block;
    width: max(150px, min(11.25vw, 20vh));   /* 216px */
    height: max(20px, min(1.5104vw, 2.6852vh));   /* 29px */
    position: relative;
    aspect-ratio: 100/13;
}
.header-logo a img{
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .4s ease;
}
.header-logo a img.logo-color{
    opacity: 0;
}
header.header.header-color .header-logo a img.logo-color{
    opacity: 1;
}
header.header.header-color .header-logo a img.logo-white{
    opacity: 0;
}
.gnb-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.gnb-wrap ul{
    font-size: var(--font-body);
    font-weight: 300;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.gnb-wrap ul.gnb-point{
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: min(10.4167vw, 18.5186vh);   /* 200px (pill) */
}
.gnb-wrap ul li{
    transition: all 0.3s ease;
}
.gnb-wrap ul li a{
    color: #fff;
    padding: max(10px, min(0.7813vw, 1.389vh)) max(13px, min(1.0417vw, 1.8519vh));   /* 15px 20px */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: min(15.625vw, 27.7778vh);   /* 300px (pill) */
    transition: all 0.3s ease;
}
.gnb-wrap .gnb-point li:nth-child(1) a{
    font-weight:700;
}
.gnb-wrap .gnb-point li:nth-child(1).active a{
    background:#00406e;
    font-weight: 500;
}
.gnb-wrap .gnb-point li:nth-child(2).active a, .gnb-wrap .gnb-other li:nth-child(1).active a, .gnb-wrap .gnb-other li:nth-child(2).active a, .gnb-wrap .gnb-other li:nth-child(6).active a{
    background:#fff;
    color: #0077cd;
    font-weight: 500;
}
.gnb-wrap .gnb-point li:nth-child(3).active a, .gnb-wrap .gnb-point li:nth-child(4).active a, .gnb-wrap .gnb-other li:nth-child(3).active a, .gnb-wrap .gnb-other li:nth-child(4).active a, .gnb-wrap .gnb-other li:nth-child(5).active a{
    background:#0076cb;
    font-weight: 500;
}

/* ===== main ===== */
main{
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

/*메인 첫번째 섹션 첫번째 단락*/
section.main-kv{
    width: 100%;
}
.main-keyvisual-first{
    padding-top: 140px;
    min-height: 100vh;
    background: url('../images/section_bg1.webp') no-repeat bottom center / cover;
}
.kv-text-bg{
    width: 100%;
    text-align: center;
    font-size: min(14.58vw, 25.926vh); /* 280px — 폭/높이 중 좁은 쪽(세로 짧은 1920 화면에서 줄어 안 잘림) */
    color: var(--primary-color-bold);
    font-family: 'SCHABO';
    font-weight: 500;
    line-height: 1;
    letter-spacing:0.025em;
}
.kv-text-bg-mo{
    display: none;
}
.kv-product-wrap{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    max-width: min(75vw, 133.3333vh);          /* 1440px@1920 — 뷰포트에 비례(고정 캡 제거) */
    margin: 0 auto;
    padding: 0 min(1.04vw, 1.8489vh);        /* 20px */
    padding-bottom: min(10.42vw, 18.519vh);  /* 200px — 폭/높이 중 좁은 쪽 */
}
.kv-product{
    position: absolute;
    bottom: 11%;
    left: 50%;
    transform: translateX(-50%);
    width: min(20.679vw, 36.763vh);   /* 397px@1920 — 폭/높이 중 좁은 쪽(세로 짧은 화면서 캔 축소) */
}
.kv-product img{
    width: 100%;
    height: auto;
}
.kv-product-text{
    margin-top: var(--margin-bottom-50);
    color: #fff;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left:11%;
    gap: 40%;
}
.text-left-top{
    font-size: var(--font-title-lg);
    line-height: 1.2;
    margin-bottom: var(--margin-bottom-30);
}
.kv-product-text strong{
    font-size: var(--font-title-big2);
    font-weight: 700;
    line-height: 1.2;
    display: block;
}
.kv-product-text strong span{
    color: var(--primary-color-bold);
    display: block;
}
.kv-product-text-left{
    text-align: right;
}
.kv-product-text-right-mo{
    display: none;
}
.kv-product-text-right strong{
    margin-bottom: var(--margin-bottom-30);
    display: block;
}
.kv-product-text-right ul{
    font-size: var(--font-title-lg);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.kv-product-text-right ul li{
    display: flex;
    gap: 15px;
}
.kv-product-text-right ul li::before{
    content: '';
    width: 26px;
    height: 30px;
    background: url('../images/check_icon.svg') no-repeat center / 100% auto;
    display: block;
}
/*메인 첫번째 섹션 두번째 단락*/
.main-keyvisual-second{
    background-color: var(--primary-color);
    width: 100%;
    height: 100vh;
    min-height: 1080px;
    position: relative;
    overflow:hidden;
}
.kv-product-area{
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.kv-product-area img{
    width: 100%;
    height: auto;
    max-width: 422px;
}
.kv-second-vegetable-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.kv-second-vegetable-wrap img:nth-child(1){
    position: absolute;
    top: 5%;
    left: 40%;
    width: 6.25%;
}
.kv-second-vegetable-wrap img:nth-child(2){
    position: absolute;
    top: 25%;
    left: 20%;
    width: 4.95%;
}
.kv-second-vegetable-wrap img:nth-child(3){
    position: absolute;
    top: 40%;
    left: 23%;
    width: 12.5%;
}
.kv-second-vegetable-wrap img:nth-child(4){
    position: absolute;
    top: 80%;
    left: 30%;
    width: 2.65%;
}
.kv-second-vegetable-wrap img:nth-child(5){
    position: absolute;
    top: 15%;
    right: 15%;
    width: 20%;
}
.kv-second-vegetable-wrap img:nth-child(6){
    position: absolute;
    top: 70%;
    right: 17%;
    width: 5.1%;
}
.kv-second-vegetable-wrap img:nth-child(7){
    position: absolute;
    top: 75%;
    right: 23%;
    width: 12.29%;
}
.kv-second-text{
    position: absolute;
    /*js 삽입 후 fixed로 변경해야함*/
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.kv-second-text .marquee-track{
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
    gap: 55px;
}
.kv-second-text .marquee-track .track{
    display:flex;
    flex-shrink:0;
    gap: 55px;
}
.kv-second-text .marquee-track .track span{
    font-size: 100px;
    font-weight: 500;
    font-family: 'SCHABO';
    line-height: 1;
    color: #001829;
    /* margin-right: 55px; */
    position: relative;
    flex-shrink: 0;
    white-space: nowrap;
}

.kv-second-text .marquee-track .track span::after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #001829;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.bubble-float-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
}
.bubble-float{
    position: absolute;
}
.bubble-float img{
    width: 100%;
    height: auto;
    opacity: 0.3;
}
.bubble-float:nth-child(1){
    width: 35px;
    height: 35px;
    top: 15%;
    left: 25%;
}
.bubble-float:nth-child(2){
    width: 35px;
    height: 35px;
    top: 30%;
    left: 5%;
}
.bubble-float:nth-child(3){
    width: 69px;
    height: 69px;
    top: 70%;
    left: 20%;
}
.bubble-float:nth-child(4){
    width: 21px;
    height: 21px;
    top: 50%;
    left: 22%;
}
.bubble-float:nth-child(5){
    width: 35px;
    height: 35px;
    top: 42%;
    right: 28%;
}
.bubble-float:nth-child(6){
    width: 69px;
    height: 69px;
    top: 50%;
    right: 35%;
}
.bubble-float:nth-child(7){
    width: 69px;
    height: 69px;
    top: 55%;
    right: 8%;
}
.bubble-float:nth-child(8){
    width: 21px;
    height: 21px;
    top: 10%;
    right: 15%;
}
.bubble-float:nth-child(9){
    width: 21px;
    height: 21px;
    top: 80%;
    right: 25%;
}

/* ===== KV 스크롤 시네마 (회전 캔 + KV1 텍스트 + KV2 홉/물방울 레이어) ===== */
.main-kv-scroll{
    position: relative;
    height: 400vh;            /* 스크롤(연출) 길이 — 줄이면 빨라짐 */
}
.main-kv-scene{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.kv-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.kv-bg-first{
    background: url('../images/section_bg1.webp') no-repeat bottom center / cover;
}
.kv-bg-second{
    background-color: var(--primary-color);
    opacity: 0;              /* JS 로 KV1→블루 크로스페이드 */
}
.kv-layer{
    position: absolute;
    inset: 0;
}
.main-keyvisual-first.kv-layer{
    min-height: 0;
    background: none;        /* 배경은 .kv-bg-first 가 담당 */
    padding-top: 140px;
    z-index: 2;
}
.main-keyvisual-second.kv-layer{
    height: 100%;
    min-height: 0;
    background: none;        /* 블루 배경은 .kv-bg-second 가 담당 */
    opacity: 0;              /* JS 등장 전 숨김(FOUC 방지) */
    z-index: 1;
}
/* 회전 캔 스테이지 */
.can-anchor{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}
.can-stage{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform, opacity;
}
.can-frames{
    position: relative;
}
.can-frame:first-child{
    display: block;
    position: relative;
    width: auto;
    height: auto;
    max-height: 68vh;
    max-width: min(52vw, 92.4444vh);
    object-fit: contain;
}
.can-frame:not(:first-child){
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}
/* 캔 회전은 캔버스 1장에 현재 프레임만 그린다(레이어 깜빡임 제거).
   img는 프레임 소스 + 첫 프레임이 박스 크기를 잡는 역할만 하고 화면엔 안 그려짐. */
.can-frame{
    visibility: hidden;
}
.can-canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 유휴 플로팅: 물방울 */
@keyframes kvBubbleFloat{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}
.bubble-float{
    animation: kvBubbleFloat 6s ease-in-out infinite;
}
.bubble-float:nth-child(2n){ animation-duration: 7.5s; animation-delay: -2s; }
.bubble-float:nth-child(3n){ animation-duration: 5.2s; animation-delay: -1s; }
/* 유휴 플로팅: 홉·맥아 */
@keyframes kvHopFloat{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(2.5deg); }
}
.kv-second-vegetable-wrap img{
    animation: kvHopFloat 7s ease-in-out infinite;
}
.kv-second-vegetable-wrap img:nth-child(2n){ animation-duration: 9s; animation-delay: -3s; }
.kv-second-vegetable-wrap img:nth-child(3n){ animation-duration: 6s; animation-delay: -1.5s; }

/* === KV 유동 비율: 폭/높이 중 '좁은 쪽' 기준 min(vw, vh)로 스케일 ===
   · vw=px/1920, vh=px/1080 → 16:9보다 세로가 넉넉하면 vw가 이겨 그대로(노트북 16:10 유지),
     세로가 짧으면(1920 모니터·툴바) vh가 이겨 같이 축소 → 100vh 안에 들어와 안 잘림. */
.main-kv{
    --font-title-big2: min(3.75vw,   6.6667vh); /* 72px */
    --font-title-lg:   min(1.5625vw, 2.7778vh); /* 30px */
    --font-title-lg2:  min(1.4583vw, 2.5926vh); /* 28px */
    --font-title-36:   min(1.875vw,  3.3333vh); /* 36px */
    --margin-bottom-50: min(2.604vw, 4.6296vh); /* 50px */
    --margin-bottom-40: min(2.083vw, 3.7037vh); /* 40px */
    --margin-bottom-30: min(1.5625vw,2.7778vh); /* 30px */
    --margin-bottom-20: min(1.04vw,  1.8519vh); /* 20px */
}
.main-kv .main-keyvisual-first.kv-layer{
    padding-top: min(7.29vw, 12.963vh);          /* 140px — 폭/높이 중 좁은 쪽 */
}
.main-kv .kv-second-text .marquee-track .track span{
    font-size: min(5.21vw, 9.2622vh);            /* 100px */
}
/* 체크리스트 간격·아이콘 vw화 */
.main-kv .kv-product-text-right ul{ gap: min(1.04vw, 1.8489vh); }            /* 20px */
.main-kv .kv-product-text-right ul li{ gap: min(0.78vw, 1.3867vh); }         /* 15px */
.main-kv .kv-product-text-right ul li::before{
    width: min(1.354vw, 2.4071vh);    /* 26px */
    height: min(1.5625vw, 2.7778vh);  /* 30px */
}
/* 좌/우 텍스트를 '폭이 같은 두 컬럼'으로 만들어 중앙 캔 기준 완전 대칭 보장.
   - 부모 padding-left(비대칭 원인) 제거
   - 좌/우 컬럼 flex:1 1 0 → 항상 동일 폭(콘텐츠 길이와 무관하게 대칭)
   - 각 컬럼 안쪽 padding(캔 반폭 + 여유)으로 캔을 가리지 않게 좌우 동일 간격 확보 */
.main-kv .kv-product-text{
    gap: 0;
    padding-left: 0;
    margin-top: var(--margin-bottom-50);
}
.main-kv .kv-product-text-left,
.main-kv .kv-product-text-right{
    flex: 1 1 0;
    min-width: 0;
}
.main-kv .kv-product-text-left{
    text-align: right;
    padding-right: min(12vw, 21.3333vh);   /* 캔 반폭(~min(9.5vw, 16.8889vh)) + 여유 */
}
.main-kv .kv-product-text-right{
    text-align: left;
    padding-left: min(12vw, 21.3333vh);
}

/*메인 두번째 섹션 캐러셀*/
section.section2{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec-carousel-wrap{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
}
.carousel-area{
    width: 50%;
    /* height: 100%; */
}
/* .carousel-area .swiper-slide:not(:first-child){
    display: none;
} */
.carousel-left-top, .carousel-left-bottom{
    width: 100%;
    height: 50%;
}
.carousel-left-top{
    background-color: var(--primary-color);
    color: #fff;
    padding: min(2.6042vw, 4.6297vh);            /* 50px */
    /* 1440 고정폭 → min(75vw, 133.3333vh) 비율 컬럼: (100-75)/2 = min(12.5vw, 22.2222vh) (1920에서 240px로 동일) */
    padding-left: min(12.5vw, 22.2222vh);
    display: flex;
    align-items: flex-end;
}
.carousel-left-top p{
    font-size: var(--font-title-lg2);
    font-weight: 300;
    line-height: 1.2;
    padding-left: min(1.0417vw, 1.8519vh);       /* 20px */
}
.carousel-left-top p span{
    font-weight: 700;
}
.carousel-left-bottom{
    background-color: #fff;
    padding: min(2.6042vw, 4.6297vh);            /* 50px */
    padding-left: min(12.5vw, 22.2222vh);

}
.bottom-text-wrap{
    padding-left: min(1.0417vw, 1.8519vh);       /* 20px */
}
.carousel-left-bottom .carousel-num{
    font-size: var(--font-title-24);
    font-weight: 700;
    margin-bottom: var(--margin-bottom-20);
}
.carousel-left-bottom strong{
    font-size: var(--font-title-xl);
    font-weight: 700;
    line-height: 1.2;
    display: block;
     margin-bottom: var(--margin-bottom-40);
}
.carousel-left-bottom p{
    font-size: var(--font-title-22);
    font-weight: 300;
    line-height: 1.2;
}
.carousel-right-area{
    position: relative;
    border-radius: var(--radius-large) 0 0 var(--radius-large);
}
.carousel-right-area .swiper{
    width: 100%;
    height: 100%;
}
.carousel-right-area::before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    width: 100%;
    height: 20%;
    z-index: -1;
}
.carousel-right-area .swiper-slide{
    width: 100%;
    position: relative;
    border-radius: var(--radius-large) 0 0 var(--radius-large);
    overflow: hidden;
    cursor: pointer;
}
.carousel-left-area .swiper-slide{
    cursor: pointer;

}

.carousel-right-area .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.carousel-right-area .swiper-slide img.ai_label{
    position: absolute;
    bottom: min(0.5208vw, 0.9259vh);            /* 10px */
    right: min(0.5208vw, 0.9259vh);
    width: max(80px, min(5.677vw, 10.0924vh));   /* 109px */
    height: max(18px, min(1.25vw, 2.2222vh));   /* 24px */
}
.left-copy, .left-copy .swiper, .left-copy .swiper-wrapper, .left-copy .swiper-slide{
    height: 100%;
}
.left-copy{
    position: relative;
    overflow: hidden;
    width: 100%;
}
br.mo-visible{
    display: none!important;
}
.left-copy .swiper-pagination{
    position: absolute;
    top: 80%;
    left: min(12.5vw, 22.2222vh);                 /* 콘텐츠 컬럼 좌측(텍스트와 동일 기준) */
    margin-left: min(1.0417vw, 1.8519vh);        /* 20px */
}
.left-copy .swiper-pagination ul{
    display: flex;
    gap: min(1.0417vw, 1.8519vh);               /* 20px */
    align-items: center;
}
.left-copy .swiper-pagination ul li a{
    display: block;
    width: max(8px, min(0.5208vw, 0.9259vh));   /* 10px (클릭영역 하한) */
    height: max(8px, min(0.5208vw, 0.9259vh));
    border-radius: max(8px, min(0.5208vw, 0.9259vh));
    background-color: rgba(0, 0, 0, 0.2);
    text-indent: -9999px;
}
.left-copy .swiper-pagination ul li.active a{
    background-color: rgba(0, 0, 0, 1);
    width: max(32px, min(2.0833vw, 3.7036vh));  /* 40px */
    border-radius: max(32px, min(2.0833vw, 3.7036vh));
}

.text-marquee{
    position: absolute;
    /*js 삽입 후 fixed로 변경해야함*/
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    height: min(5.2083vw, 9.2592vh);            /* 100px */

    display: flex;
    width: max-content;
    animation: marquee 20s linear infinite;
}


.text-marquee.visible{
    opacity: 1;
    visibility: visible;
}
.text-marquee span{
    font-size: min(5.2083vw, 9.2592vh);        /* 100px */
    font-weight: 500;
    font-family: 'SCHABO';
    line-height: 1;
    color: var(--primary-color);
    margin-right: min(2.8646vw, 5.0926vh);     /* 55px */
    position: relative;

    flex-shrink: 0;
    white-space: nowrap;
}
.text-marquee span::after{
    content: '';
    width: min(1.0417vw, 1.8519vh);            /* 20px */
    height: min(1.0417vw, 1.8519vh);
    border-radius: min(1.0417vw, 1.8519vh);
    background-color: var(--primary-color);
    position: absolute;
    top: 40%;
    right: -min(2.0833vw, 3.7036vh);           /* -40px */
    transform: translateY(-50%);
}
/*메인 세번째 섹션*/
section.section3, section.section9, section.section10{
    width: 100%;
    position: relative;
    padding: min(8.3333vw, 14.8148vh) min(1.0417vw, 1.8519vh) 0;   /* 160px 20px 0 */
}
section.section3{
    /* 스티키 스크롤: 배경(.sec7-bg)·콘텐츠(.sec3-inner)를 뷰포트에 고정하고
       하단 스페이서(::after)만큼 스크롤하는 동안 타이틀이 스크롤에 1:1로 떠오른다. */
    overflow: visible;
    padding: 0;
    position: relative;
}
section.section3 .sec7-bg{
    position: sticky;
    top: 0;
    height: 100vh;
}
.sec3-inner{
    width: 100%;
    position: sticky;
    top: 0;
	left: 0;
    z-index: 2;
    margin-top: -100vh;   /* 콘텐츠를 sticky 배경 위로 올려 겹쳐 고정 */
    min-height: 100vh;
    padding: 0 20px;
    padding-bottom: var(--margin-bottom-50);
}
/* 스크롤 거리: 앞 70vh는 타이틀 리빌(scrub end +=70%), 뒤 70vh는 완성된 비교표 감상 버퍼
   → 점프 지점(섹션 끝)과 리빌 완료 지점을 분리해 '다 나오기 전 이탈'을 방지 */
section.section3::after{
    content: '';
    display: block;
    height: 180vh;
}
/* PC(769px+): 비교표 콘텐츠의 상단 고정(pin) 해제.
   기존엔 .sec3-inner가 sticky top:0으로 뷰포트 최상단(GNB 뒤)에 잠겨 '섹션이동' 같은 UI가 됐다.
   relative로 바꿔 sticky 배경(.sec7-bg) 위로 자연 스크롤되게 하고(섹션7·8과 동일),
   핀 스크롤 거리용 스페이서(::after 180vh)도 제거한다. 타이틀 리빌은 진입 스크롤에 1:1로 유지. */
@media (min-width: 769px){
    .sec3-inner{
        position: relative;
        top: auto;
    }
    section.section3::after{
        display: none;
    }
}
.sec-title{
    font-size: var(--font-title-xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    width: 100%;
    text-align: center;
    display: block;
    margin-top: min(8.3333vw, 14.8148vh);   /* 160px */
    margin-bottom: var(--margin-bottom-40);
}
.sec-body-wrap{
    width: 100%;
    max-width: min(72.917vw, 129.63vh);   /* 1400px@1920 — 단일배율(폭/높이 중 좁은 쪽) */
    margin: 0 auto;
}
.sec3-table-top{
    width: 100%;
    display: flex;
    background-color: rgba(0, 119, 205, 0.9);
    border-radius: var(--radius-large);
    margin-bottom: var(--margin-bottom-20);
}
.sec3-table-left{
    width: min(10.4167vw, 18.5186vh);   /* 200px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sec3-table-left{
    background: rgba(0, 0, 0, 0.15);
    border-radius: min(1.0417vw, 1.8519vh) 0 0 min(1.0417vw, 1.8519vh);   /* 20px */
    
}
.sec3-table-top .sec3-table-left strong{
    font-size: var(--font-title-lg);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.sec3-table-body{
    width: calc(100% - min(10.4167vw, 18.5186vh));   /* 200px */
    padding: min(2.0833vw, 3.7036vh) min(1.0417vw, 1.8519vh) min(1.0417vw, 1.8519vh);   /* 40px 20px 20px */
}


.table-body-top{
    display: flex;
    margin-bottom: min(1.8229vw, 3.2407vh);   /* 35px */
}
.table-space{
    width: calc(100% / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 min(0.5208vw, 0.9259vh);   /* 0 10px */
}
.table-space:last-child{
    border-right: none;
}
.sec3-table-body .table-title-area{
    margin-bottom: var(--margin-bottom-30);
    color: #fff;
    font-size: var(--font-title-20);
    font-weight: 500;
    line-height: 1;
    padding: max(7px, min(0.5208vw, 0.9259vh)) max(13px, min(1.0417vw, 1.8519vh));   /* 10px 20px */
    border-radius: min(10.4167vw, 18.5186vh);   /* 200px (pill) */
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec3-table-body .table-body-text{
    color: #fff;
    font-size: var(--font-title-24);
    font-weight: 500;
    line-height: 1.5;   /* 가독성: 본문 행간 ↑ */
    text-align: center;
}
.table-body-bottom{
    width: 100%;
    padding: max(16px, min(1.25vw, 2.2222vh));   /* 24px */
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-align: center;
    font-weight: 500;
    border-radius: var(--radius-small);
}
.table-body-bottom p:nth-child(1){
    font-size: var(--font-title-22);
    line-height: 1.5;   /* 가독성: 본문 행간 ↑ */
    margin-bottom: max(10px, min(0.7813vw, 1.389vh));   /* 15px */
}
.table-body-bottom p:nth-child(2){
    font-size: var(--font-title-18);
}
.sec3-accordion-wrap{
    margin-bottom: var(--margin-bottom-20);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: max(13px, min(1.0417vw, 1.8519vh));   /* 20px */
}
.accordion-area{
    width: 100%;
    border-radius: var(--radius-large);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* 사파리 브라우저 호환성용 */
    display: flex;
}
.sec3-title-area{
    width: 100%;
    height: min(5.2083vw, 9.2592vh);   /* 100px */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
    cursor: pointer;
}
.accordion-area .product-small-image{
    width: max(20px, min(1.6146vw, 2.8704vh));   /* 31px */
    height: max(34px, min(2.7083vw, 4.8148vh));  /* 52px */
    margin-bottom: var(--margin-bottom-20);
}
.accordion-area .product-small-image img{
    width: 100%;
    height: auto;
}
/* 닫힌 상태 헤더(가로 정렬)에선 아이콘 하단 마진 제거 — margin-bottom은 펼친 세로 라벨용 */
.accordion-area .sec3-title-area .product-small-image{
    margin-bottom: 0;
}
.sec3-title-area strong{
    font-size: var(--font-title-24);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.accordion-area .sec3-table-left strong{
    font-size: var(--font-title-24);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.accordion-area .table-body-top{
    margin-bottom: 0;
}
.accordion-area  .sec3-table-body{
    padding: min(2.0833vw, 3.7036vh) min(1.0417vw, 1.8519vh);   /* 40px 20px */
}
/* 타사 논알코올 맥주 비교표 아코디언:
   기본은 접힘 → .sec3-title-area(아이콘+제품명 바)만 노출.
   헤더 클릭 시 .active 가 붙으면 좌측 라벨 + 비교표 본문을 펼친다.
   클라우드 논알콜릭 제품(.sec3-table-top)은 아코디언이 아니라 항상 노출. */
.accordion-area .sec3-table-left,
.accordion-area .sec3-table-body{
    display: none;
}
.accordion-area.active .sec3-title-area{
    display: none;
}
.accordion-area.active .sec3-table-left{
    display: flex;
    cursor: pointer;
}
.accordion-area.active .sec3-table-body{
    display: block;
}
/* 데스크탑 아코디언 펼침 어포던스: 접힘 헤더(.sec3-title-area) 우측에 아래 셰브론으로
   "클릭하면 펼쳐짐"을 표시한다. 펼치면 .sec3-title-area 가 숨겨지므로 회전 상태는 불필요.
   (모바일은 .sec3-table-left::after 이미지 화살표를 쓰고 .sec3-title-area 는 display:none 이라
    이 규칙의 영향을 받지 않는다.) 어두운 반투명 배경+흰 글자에 맞춰 이미지 대신 흰색 CSS 셰브론 사용. */
.sec3-title-area{
    position: relative;
}
.sec3-title-area::after{
    content: '';
    position: absolute;
    top: 50%;
    right: min(2.0833vw, 3.7036vh);   /* 40px */
    width: max(8px, min(0.5208vw, 0.9259vh));
    height: max(8px, min(0.5208vw, 0.9259vh));
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.sec3-info-bottom{
    width: 100%;
    background-color: #fff;
    font-size: var(--font-title-24);
    font-weight: 500;
    border-radius: var(--radius-large);
    display: flex;
    padding: min(2.3438vw, 4.1668vh) 0;   /* 45px 0 */
}
.sec3-info-bottom .sec3-table-left{
    width: 18.643%; /*121px*/
    padding: max(7px, min(0.5208vw, 0.9259vh)) min(3.6458vw, 6.4814vh);   /* 10px 70px */
    background-color: initial;
    border-radius: 0;
    flex: 0 0 auto;
}
.sec3-info-bottom .sec3-table-left img{
    width: 100%;
    height: auto;
}
.sec3-info-body{
    width: 81.357%;
    margin-right: max(10px, min(0.7813vw, 1.389vh));   /* 15px */
}
.sec3-info-body p{
    line-height: 1.5;   /* 가독성: 본문 행간 ↑ */
}

/*메인 네번째 섹션*/
section.section4{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능(고정 100vh+overflow 클리핑 방지) */
    background: url('../images/section4_bg.webp') no-repeat center / cover;
    padding: min(8.3333vw, 14.8148vh) min(1.0417vw, 1.8519vh) min(6.7708vw, 12.037vh);   /* 160px 20px 130px */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section4 .sec-title{
    color: #000;
    margin-top: 0;
    margin-bottom: var(--margin-bottom-50);
}
.section4 .sec-body-wrap{
    display: flex;
    justify-content: space-between;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
    align-items: stretch;
}
.sec4-left{
    width: min(26.0417vw, 46.2964vh);   /* 500px */
    border-radius: var(--radius-large);
    background-color: #fff;
    padding: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    padding-bottom: min(2.0833vw, 3.7036vh);   /* 40px */
}
.sec4-right{
    width: calc(100% - min(27.6042vw, 49.0741vh));   /* 530px */
    display: flex;
}
.sec4-right-div{
    width: calc(100% - min(26.0417vw, 46.2964vh));   /* 500px */
    border-radius: var(--radius-large);
    background-color: #fff;
    padding: max(10px, min(0.7813vw, 1.389vh)) min(1.5625vw, 2.7778vh) min(2.6042vw, 4.6297vh);   /* 15px 30px 50px */
}
.sec4-inner-img{
    width: 100%;
    border-radius: var(--radius-large);
    overflow: hidden;
    aspect-ratio: 480/280;
    margin-bottom: var(--margin-bottom-40);
}
.sec4-inner-img img{
    width: 100%;
    height: auto;
}
.sec4-inner-text{
    margin: 0 min(1.3542vw, 2.4075vh);   /* 0 26px */
}
.sec4-inner-text strong{
    font-size: var(--font-title-lg2);
    font-weight: 700;
    line-height: 1;
    display: block;
    margin-bottom: var(--margin-bottom-30);
}
.sec4-text-hash{
    display: flex;
    gap: max(4px, min(0.2604vw, 0.4629vh));   /* 5px */
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--margin-bottom-30);
}
.sec4-text-hash li{
    border-radius: var(--radius-small);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: var(--font-title-18);
    font-weight: 500;
    line-height: 1;
    padding: max(6px, min(0.4688vw, 0.8334vh)) max(10px, min(0.7813vw, 1.389vh));   /* 9px 15px */
}
.sec4-inner-text p{
    font-size: var(--font-title-22);
    font-weight: 500;
    line-height: 1.2;
}
.sec4-right-top{
    display: flex;
    gap: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    justify-content: space-between;
    align-items: center;
    padding-bottom: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    border-bottom: var(--border-default);
}
.sec4-right-top p{
    font-size: var(--font-title-26);
    font-weight: 500;
    line-height: 1.2;
}
.sec4-right-top p span{
    font-weight: 700;
}
.sec4-right-top-img{
    width: min(5.5729vw, 9.9074vh);   /* 107px */
    max-width: 40%;
}
.sec4-right-top-img img{
    width: 100%;
    height: auto;
}
.sec4-right-body{
    margin-top: var(--margin-bottom-40);
}
.sec4-right-body li{
    display: flex;
    gap: max(13px, min(0.9896vw, 1.7593vh));   /* 19px */
    align-items: center;
}
.sec4-right-body li:not(:last-child){
    padding-bottom: min(4.3229vw, 7.6852vh);   /* 83px */
    position: relative;
}
.sec4-right-body li:not(:last-child)::after{
    content: '';
    width: min(2.4479vw, 4.3518vh);   /* 47px */
    height: min(1.875vw, 3.3333vh);   /* 36px */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../images/section4_arrow.svg') no-repeat center / 100% auto;
}
.sec4-right-icon{
    width: min(4.1667vw, 7.4075vh);   /* 80px */
    aspect-ratio: 1;
    border-radius: min(4.1667vw, 7.4075vh);   /* 80px */
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}
.sec4-right-icon img{
    height: max(21px, min(1.6667vw, 2.963vh));   /* 32px */
    width: auto;
}
.sec4-right-body li p{
    font-size: var(--font-title-20);
    font-weight: 500;
    line-height: 1.2;
}

/*메인 다섯번째 섹션*/
section.section5{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능 */
    background: url('../images/section5_bg.webp') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section5 .sec-title{
    color: #000;
    margin-top: 0;   /* 풀페이지(중앙정렬) 섹션 — 상단여백 제거해 100vh 내에 라벨까지 들어오게 */
}
.section5 .sec-title span{
    font-weight: 300;
    color: var(--primary-color);
}
.sec5-product-area{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 5%;
    margin-bottom: var(--margin-bottom-50);
}
.sec5-vs-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:4%;
    width: 21%;
}
.sec5-vs-wrap img{
    width: 100%;
    height: auto;
}
.sec5-product-img{
    margin-bottom: max(8px, min(0.625vw, 1.1111vh));   /* 12px */
}
.sec5-product-wrap:nth-child(1){
    width: 26.36%;
}
.sec5-product-wrap:nth-child(1) .sec5-product-img img{
    width: 80%;
    height: auto;
    margin: 0 auto;
}
.sec5-product-wrap:nth-child(3){
    width: 19.78%;
}
.sec5-product-text{
    width: 100%;
    text-align: center;
    font-weight: 500;
}
.sec5-product-wrap:first-child .sec5-product-text{
    margin-left: 5%;
}
.sec5-product-text p:nth-child(1) span{
    font-size: var(--font-title-lg);
    white-space: nowrap;
}
.sec5-product-text p:nth-child(1){
    font-size: var(--font-title-22);
    margin-bottom: var(--margin-bottom-20);
    line-height: 1;
    white-space: nowrap;
}
.sec5-product-wrap:nth-child(3) .sec5-product-text p:nth-child(1){
    margin-left:-10%;
}
.sec5-product-text p:nth-child(2){
    font-size: var(--font-title-xl);
    line-height: 1;
}
.sec5-product-wrap{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.sec5-product-wrap:last-child .sec5-product-img{
    position: relative;
}
.sec5-product-wrap:last-child .sec5-product-img::before{
    content: '';
    /* width: 510px; */
    width: 184.78%;
    aspect-ratio: 510/489;
    /* height: 489px; */
    background: url('../images/section5_product2_bg.webp') no-repeat center / 100% auto;
    position: absolute;
    top: -25%;
    left: 60%;
    transform: translateX(-50%);
    z-index: 1;
}
.sec5-product-wrap:last-child .sec5-product-img img{
    position: relative;
    z-index: 2;
}
.sec5-product-wrap:last-child .sec5-product-text{
    color: var(--primary-color);
}
.sec5-product-wrap:last-child .sec5-product-text p:nth-child(2){
    font-weight: 700;
}
.sec5-product-info{
    position: absolute;
    /* 캔을 가리지 않도록 우측 빈 공간으로 빼고 살짝 위로(PC).
       right 를 더 음수로 = 더 오른쪽, top 을 더 음수로 = 더 위로. */
    top: -18%;
    right: -62%;
    /* width: 190px; */
    width: 68.84%;
    aspect-ratio: 1;
    border-radius: min(9.8958vw, 17.5925vh);   /* 190px */
    background-color: rgba(0, 91, 220, 0.8);
    /* background-color: rgba(31, 111, 255, 0.8); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 3;
}
.sec5-product-info::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    inset:0;
	background:
		linear-gradient(
			180deg,
			#4ca2ea 0%,
			#00267a 100%
		);
    border-radius: min(9.8958vw, 17.5925vh);   /* 190px */
    z-index: -1;
    opacity: 0.5;
    
}
.sec5-product-info p:nth-child(1){
    font-weight: 500;
    font-size: var(--font-title-20);
    margin-bottom: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    line-height: 1.2;
}
.sec5-product-info strong{
    font-weight: 700;
    font-size: var(--font-title-36);
}
.sec5-product-info p:nth-child(3){
    font-size: var(--font-title-24);
    font-weight: 700;
}
.sec5-button-wrap{
    display: flex!important;
    justify-content: center;
    align-items: center;
    gap: min(1.0417vw, 1.8519vh);   /* 20px */
}
.sec5-button-wrap.pc{
    display: flex!important;
}
.sec5-button-wrap li{
    width: min(13.0208vw, 23.1481vh);   /* 250px */
    height: min(4.1667vw, 7.4075vh);   /* 80px */
    border-radius: min(13.0208vw, 23.1481vh);   /* 250px */
    border: 1px solid transparent;
    background:
		linear-gradient(#eef4fb, #eef4fb) padding-box,
		linear-gradient(90deg,
	#5fb3ff 0%,
	#d8ecff 60%,
	#dfe8f3 100%) border-box;
    box-shadow: 0px 8px 20px #b6d9f7;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: max(12px, min(0.9375vw, 1.6667vh));   /* 18px */
    padding: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.sec5-button-wrap li strong{
    font-size: var(--font-title-lg2);
    font-weight: 700;
    line-height: 1;

}
.sec5-button-wrap li .sec5-button-icon img{
    width: 100%;
    height: auto;
}
.sec5-button-wrap li:nth-child(1) .sec5-button-icon{
    width: min(2.5521vw, 4.5371vh);   /* 49px */
}
.sec5-button-wrap li:nth-child(2) .sec5-button-icon{
    width: min(1.9271vw, 3.426vh);   /* 37px */
}

/*메인 여섯번째 섹션*/
section.section6{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능 */
    background: url('../images/section6_bg.webp') no-repeat center / cover;
    padding-top: min(6.8229vw, 12.1296vh);   /* 131px */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section.section6 .sec-body-wrap{
    max-width: min(75vw, 133.3333vh);   /* 1440px@1920 — 뷰포트 비례(2560+ 확대) */
    padding: 0 min(1.0417vw, 1.8519vh);   /* 0 20px */
}
.sec6-text-top{
    color: #fff;
    font-size: clamp(12px, min(1.145vw, 2.0356vh), 22px);
    font-weight: 300;
    letter-spacing: 0.7em;
    width: 100%;
    text-align: center;
    margin-bottom: min(5.8854vw, 10.4629vh);   /* 113px */
}
.sec6-inner-wrap{
    display: flex;
    max-width: min(72.917vw, 129.6302vh);   /* 1400px@1920 — 뷰포트 비례(2560+ 확대) */
}
.sec6-inner-div{
    color: #fff;
}
.monde-logo{
    width: 43.9%;
    height: auto;
    margin-bottom: var(--margin-bottom-40);
}
.monde-logo img{
    width: 100%;
    height: auto;
}
.sec6-left strong{
    font-size: var(--font-title-lg);
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin-bottom: var(--margin-bottom-50);
}
.sec6-left p{
    font-size: var(--font-title-22);
    font-weight: 300;
    line-height: 1.2;
}
.sec6-left p:nth-child(2){
    font-weight: 700;
    margin: var(--margin-bottom-30) 0;
    line-height: 1.2;
}
.sec6-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 26%;
}
.sec6-right .goldbar-img{
    width: 51.83%;
    margin-bottom: var(--margin-bottom-50);
}
.sec6-right .goldbar-img img{
    width: 100%;
    height: auto;
}
.sec6-right p{
    font-size: var(--font-body);
    font-weight: 300;
    line-height: 1.2;
    text-align: right;
}
.sec6-left{
    width: 36%;
}
.sec6-center{
    display: flex;
    align-items: center;
    margin-left:3%;
    width: 38%;
}

/*메인 일곱번째 섹션*/
section.section7{
    width: 100%;
    position: relative;
    overflow:visible;
}
.section7 .sec-body-wrap{
    max-width: min(75vw, 133.3333vh);   /* 1440px@1920 — 뷰포트 비례(2560+ 확대) */
    padding: 0 min(1.0417vw, 1.8519vh);   /* 0 20px */
}
.sec7-bg{
    width: 100%;
    position: sticky;
    height: 100vh;
    top: 0;
}

.sec7-bg div{
	position: absolute;
	inset: 0;
}
.sec7-bg div img{
    width: 100%;
	height: 100%;
	object-fit: cover;
	display:block;
}
.sec7-inner{
    width: 100%;
    /* height: 200vh; */
    position: relative;
	top: 0;
	left: 0;
    z-index: 2;
    margin-top: -100vh;
}
.sec7-inner .sec-title{
    position: sticky;
    top: min(8.3333vw, 14.8148vh);   /* 160px */
    left: 0;
    text-align: center;
    margin-top: min(8.3333vw, 14.8148vh);   /* 160px */
}
.sec-scroll-first{
    padding-top: min(2.6042vw, 4.6297vh);   /* 50px */
    position: relative;
}
.sec-scroll-second{
    padding-top: 50%;
}
.scroll-first-text-group{
    width: 100%;
    position:sticky;
    top: 0;
    height: 100vh;
    pointer-events: none;
}
.scroll-first-text{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: min(10.4167vw, 18.5186vh);   /* 200px */
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top:12%;
}
.scroll-first-text.copy01{
    left:50%;
    top:22%;
    transform: translateX(-50%);
    margin-top: 0;
    opacity: 1;
}
.scroll-first-text.copy02{
    left:50%;
    top:22%;
    transform:translateX(-50%);
    margin-top: 0;
    opacity:0;
    text-align: center;
}
.scroll-first-text.active{
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-first-text:last-child{
    margin-top: 0;
    margin-bottom: min(10.4167vw, 18.5186vh);   /* 200px */
}
.sec-scroll-second .scroll-first-text{
    transform:initial;
    top: min(15.1042vw, 26.8519vh);   /* 290px */
    margin-bottom: min(4.1667vw, 7.4075vh);   /* 80px */
}
.scroll-first-title{
    text-align: center;
    font-size: var(--font-title-36);
    font-weight: 300;
    line-height: 1.2;
}
.scroll-first-title span{
    font-weight: 500;
}
.scroll-first-num{
    font-size: var(--font-title-24);
    font-weight: 500;
    margin-bottom: var(--margin-bottom-30);
}
.scroll-first-list{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: max(6px, min(0.5208vw, 0.9259vh));   /* 10px */
    width: 100%;
    /* margin-top:-45%;
    margin-bottom: 500px; */
}
.scroll-list-div{
    width: min(23.4375vw, 41.6667vh);   /* 450px */
    border-radius: var(--radius-large);
    background-color: #fff;
    padding: max(6px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.scroll-list-div-img{
    width: 100%;
    aspect-ratio: 430/280;
    border-radius: var(--radius-large);
    overflow: hidden;
    margin-bottom: var(--margin-bottom-40);
    position: relative;
}
.scroll-list-div-img img{
    width: 100%;
    height: auto;
}
.scroll-list-div-img img.ai_label{
    position: absolute;
    bottom: max(6px, min(0.5208vw, 0.9259vh));   /* 10px */
    right: max(6px, min(0.5208vw, 0.9259vh));
    width: min(1.25vw, 2.2222vh);   /* 24px */
    height: min(1.25vw, 2.2222vh);
}
.scroll-list-div-text{
    margin: 0 min(1.5625vw, 2.7778vh) min(2.0833vw, 3.7036vh);   /* 0 30px 40px */
}

.scroll-list-div-text strong{
    display: block;
    font-size: var(--font-title-lg2);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: max(10px, min(0.7813vw, 1.389vh));   /* 15px */
}
.scroll-list-div-text strong span{
    font-size: var(--font-title-22);
}
.scroll-list-div-text p{
    font-size: var(--font-title-22);
    font-weight: 500;
    color: #000;
}

.scroll-right-list .scroll-list-div{
    margin-top: min(10.4167vw, 18.5186vh);   /* 200px */
}
.scroll-left-list .scroll-list-div.pc{
    margin-top: min(26.0417vw, 46.2964vh);   /* 500px */
    margin-bottom: min(5.2083vw, 9.2592vh);   /* 100px */
}
.scroll-second-slider{
    padding-bottom: min(6.7708vw, 12.037vh);   /* 130px */
}
.scroll-second-slider-list{
    position: relative;
    /* 두 번째 카드가 고정된 채 머무는 거리.
       값이 클수록 두 번째 카드가 더 오래 보인 뒤 다음 섹션으로 넘어간다. */
    padding-bottom: min(26.0417vw, 46.2964vh);   /* 500px */
}
.scroll-second-slider-list > li{
    z-index:1;
}

.scroll-second-slider-list > li:nth-child(2){
    z-index:2;
    /* [올라오는 거리] 두 번째 카드가 첫 카드 위로 도킹하기까지 올라오는 거리.
       작을수록 덜 올라오고 빨리 도킹한다. (= 첫 카드 바로 아래에서 출발) */
    margin-top: 0;
}
.scroll-second-slider-list > li{
    width: 100%;
    display: flex;
    gap: min(2.0833vw, 3.7036vh);   /* 40px */
    border-radius: var(--radius-large);
    background-color: #fff;
    padding: max(6px, min(0.5208vw, 0.9259vh));   /* 10px */
    padding-right: min(2.0833vw, 3.7036vh);   /* 40px */
    align-items: stretch;
    position: sticky;
    top: min(26.0417vw, 46.2964vh);   /* 500px */
}
.second-slider-text-wrap{
    margin: min(2.0833vw, 3.7036vh) 0 0;   /* 40px */
    width: calc(55.555% - min(2.0833vw, 3.7036vh));   /* 40px */
}
.second-slider-text-top strong{
    font-size: var(--font-title-xl);
    font-weight: 300;
    line-height: 1;
    display: block;
    margin-bottom: var(--margin-bottom-40);
}
.second-text-title{
    font-size: var(--font-title-lg2);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: max(10px, min(0.7813vw, 1.389vh));   /* 15px */
}
.second-text-body{
    font-size: var(--font-title-22);
    font-weight: 500;
    line-height: 1.2;
}
.second-slider-text-bottom{
    margin-top: min(2.8646vw, 5.0926vh);   /* 55px */
}
.second-slider-text-bottom .second-text-title{
    width: 100%;
    position: relative;
}
.second-slider-text-bottom .second-text-title::after{
    content: '';
    width: 80%;
    height: 1px;
    background-color: var(--primary-color);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.second-slider-img{
    width: 44.445%;
    /* aspect-ratio: 600/430; */
    border-radius: var(--radius-large);
    overflow: hidden;
    position: relative;
}
.second-slider-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.second-slider-img img.ai_label{
    position: absolute;
    bottom: max(6px, min(0.5208vw, 0.9259vh));   /* 10px */
    right: max(6px, min(0.5208vw, 0.9259vh));
    width: min(1.25vw, 2.2222vh);   /* 24px */
    height: min(1.25vw, 2.2222vh);
}

/*메인 여덟번째 섹션*/
section.section8{
    width: 100%;
    position: relative;
    overflow: visible;
    /* 배경(.sec7-bg)을 sticky 100vh로 고정하고 콘텐츠가 그 위로 스크롤되는
       '스티키 스크롤' 구조 — 레시피 섹션(.section7)과 동일. (콘텐츠가 높이 결정) */
}
section.section8 .sec-body-wrap{
    padding: 0 min(1.0417vw, 1.8519vh);   /* 0 20px */
}
.sec8-inner .sec-title{
    position: static;
    color: #000;
}
section.section8 .sec7-bg div{
    position: relative;
    width: 100%;
    height: 100%;
}
section.section8 .sec7-bg{
    position: sticky;
    top: 0;
    height: 100vh;     /* 항상 뷰포트 크기 → 배경이 늘어나지 않고 온전히 보임 */
}
.sec7-inner.sec8-inner{
    margin-top: -100vh;   /* 콘텐츠를 sticky 배경 위로 끌어올려 겹쳐 스크롤 */
}
section.section8 .sec7-bg div img.ai_label{
    position: absolute;
    bottom: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
    right: max(7px, min(0.5208vw, 0.9259vh));
    width: min(5.6771vw, 10.0926vh);   /* 109px */
    height: max(16px, min(1.25vw, 2.2222vh));   /* 24px */
}
.sec8-inner-wrap{
    width: 100%;
    max-width: min(72.917vw, 129.6302vh);   /* 1400px@1920 — 뷰포트 비례(2560+ 확대) */
    display: flex;
    justify-content: space-between;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
    padding-bottom: min(6.7708vw, 12.037vh);   /* 130px */
}
.sec8-inner-div{
    display: flex;
    flex-direction: column;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
    width: calc(50% - min(0.7813vw, 1.389vh));   /* 15px (gap 절반) */
}
.sec8-title-wrap{
    padding: min(0.7813vw, 1.389vh) min(1.5104vw, 2.6852vh);   /* 15px 29px */
    width: fit-content;
    background-color: var(--primary-color);
    color: #fff;
    font-size: var(--font-title-32);
    font-weight: 700;
    line-height: 1;
    border-radius: min(15.625vw, 27.7778vh);   /* 300px (pill) */
}
.sec8-text-wrap{
    display: flex;
    flex-direction: column;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
}
.sec8-text-wrap dl{
    width: 100%;
    min-height: min(15.625vw, 27.7778vh);   /* 300px */
    border-radius: var(--radius-large);
    background-color: #fff;
    padding: min(1.8229vw, 3.2407vh);   /* 35px */
}
.sec8-text-wrap dl dt{
    font-size: var(--font-title-26);
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    margin-bottom: var(--margin-bottom-40);
    line-height: 1.2;
}
.sec8-text-wrap dl dd{
    font-size: var(--font-title-22);
    font-weight: 500;
    line-height: 1.2;
    color: #000;
}
/* FAQ 뱃지(컬럼 제목) 고정 — PC 전용.
   section8은 Q&A 카드가 길어 스크롤되는 스티키 섹션이라, 뱃지를 sticky로 두면
   항목만 스크롤되는 동안 뱃지는 상단(헤더 아래)에 고정된다. (모바일은 미적용) */
@media (min-width: 769px){
    .sec8-title-wrap{
        position: sticky;
        top: max(70px, min(4.6875vw, 8.3333vh));   /* 고정 헤더(80px) 살짝 아래 ≈ 90px */
        z-index: 5;
    }
}

/*메인 아홉번째 섹션*/
section.section9{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능(내부 .sec9-inner-top overflow는 유지) */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section9 .sec-body-wrap{
    background-color: initial;
    width: 100%;
    max-width: min(72.917vw, 129.6302vh);   /* 1400px@1920 — 뷰포트 비례(2560+ 확대) */
}
.sec9-inner{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
}
.sec9-inner-top{
    width: 100%;
    height: min(23.9583vw, 42.5925vh);   /* 460px */
    background-color: var(--primary-color);
    border-radius: var(--radius-large);
    display: flex;
    justify-content: space-between;
    padding: min(3.2813vw, 5.8334vh) min(2.6042vw, 4.6297vh) min(3.6458vw, 6.4814vh);   /* 63px 50px 70px */
    position: relative;
    overflow: hidden;
    gap: min(1.0417vw, 1.8519vh);   /* 20px */
}
.sec9-inner-top::before{
    content: '';
    width: 45%;
    aspect-ratio: 1;
    position: absolute;
    bottom: -45%;
    right: -11%;
    background: url('../images/section9_logo_big.webp') no-repeat center / 100% auto;
    z-index: 1;
    opacity:0.5;
}
.sec9-top-title{
    color: #fff;
}
.sec9-top-title div{
    font-size: var(--font-title-30);
    font-weight: 500;
    margin-bottom: var(--margin-bottom-20);
}
.sec9-top-title strong{
    font-size: var(--font-title-xl);
    font-weight: 700;
    margin-bottom: var(--margin-bottom-50);
    display: block;
}
.sec9-top-left{
    position: relative;
    z-index: 2;
    width: 50%;
}

.sec9-top-left p{
    font-size: var(--font-title-22);
    font-weight: 300;
    line-height: 1.2;
    color: #fff;
}

.sec9-top-right.pc{
    display: flex!important;
    gap: min(3.9063vw, 6.9445vh);   /* 75px */
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    width: calc(50% - min(1.0417vw, 1.8519vh));   /* 20px (gap) */
}
.sec9-top-img{
    margin-bottom: max(11px, min(0.8333vw, 1.4814vh));   /* 16px */
}
.sec9-top-img-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}
.sec9-top-img-wrap:nth-child(1){
    width: 40%;
}
.sec9-top-img-wrap:nth-child(2){
    width: 60%;
}
.sec9-top-img-wrap p{
    font-size: var(--font-title-20);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-align: center;
}
.sec9-top-img-wrap:nth-child(2) .sec9-top-img{
    margin-right:-20%;
    margin-bottom: 0;
}

.sec9-inner-bottom{
    width: 100%;
    display: flex;
    align-items: center;
    gap: min(1.0417vw, 1.8519vh);   /* 20px */
}
.sec9-bottom-div{
    width: calc((100% / 4) - min(0.7813vw, 1.389vh));   /* 15px */
    border-radius: var(--radius-large);
}
.sec9-bottom-div img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/*메인 열번째 섹션*/
section.section10{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능 */
    background-color: #efefef;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec10-inner{
    width: 100%;
    max-width: min(72.917vw, 129.63vh);   /* 1400px@1920 — 단일배율 */
    display: flex;
    align-items: stretch;
    gap: min(3.4375vw, 6.1111vh);   /* 66px */
    margin: 0 auto;
}
.sec-body-div{
    width: calc(50% - min(1.7188vw, 3.0556vh));   /* 33px (gap 절반) */
}
.sec10-info-text{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: var(--radius-large);
    padding: min(1.5625vw, 2.7778vh) min(2.0833vw, 3.7036vh);   /* 30px 40px */
    display: none;
    gap: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.sec10-info-text.sec10-tab1.active{
    display: flex;
}
.sec10-info-text.sec10-tab2.active{
    display: flex;
}
.sec10-info-left{
    width: 65%;
}
.sec10-info-right{
    width: 35%;
}
.sec10-info-div{
    display: flex;
    flex-direction: column;
    gap: min(0.8333vw, 1.4814vh);   /* 30→16px (100vh 내 수용) */
}
.sec10-info-div dl dt{
    margin-bottom: max(6px, min(0.4167vw, 0.7408vh));   /* 15→8px */
    line-height: 1;
    font-size: var(--font-title-18);
    font-weight: 700;
    color: var(--primary-color);
}
.sec10-info-div dl dd{
    line-height: 1.2;
    font-size: var(--font-title-18);
    font-weight: 300;
    color: #000;
}
.sec10-tab-wrap{
    display: flex;
    gap: max(13px, min(1.0417vw, 1.8519vh));   /* 20px */
    align-items: center;
    margin-bottom: min(2.0833vw, 3.7036vh);   /* 90→40px (100vh 내 수용) */
}
.sec10-tab-wrap a{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: var(--font-title-lg2);
    font-weight: 700;
    line-height: 1;
    width: min(10.4167vw, 18.5186vh);   /* 200px */
    height: min(4.1667vw, 7.4075vh);   /* 80px */
    border-radius: var(--radius-large);
}
.sec10-tab-wrap a.sec10-tab1.active{
    color: #fff;
    background-color: var(--primary-color);
}
.sec10-tab-wrap a.sec10-tab2.active{
    color: #fff;
    background-color: var(--primary-color);
}
.sec10-title-wrap{
    font-size: var(--font-title-xl);
    font-weight: 700;
    line-height: 1;
    color: #000;
    display: block;
    margin-bottom: var(--margin-bottom-30);   /* 50→30px (100vh 내 수용) */
}
.sec10-img{
    display: none;
}
.sec10-img.sec10-tab1.active{
    display: block;
}
.sec10-img.sec10-tab2.active{
    display: block;
}
/* 제품정보(섹션10) PC 제품 이미지(350ml/tab1): 기존 615px의 80%(≈492px)로 축소.
   max-width:80%로 좁은 PC에서도 컨테이너 대비 80% 비율 유지. 모바일(.mo)·tab2는 영향 없음. */
@media (min-width: 769px){
    .sec10-img.sec10-tab1 img.pc{
        width: 492px;
        max-width: 80%;
    }
}

/*메인 열한번째 섹션*/
section.section11{
    width: 100%;
    min-height: 100vh;   /* 콘텐츠가 100vh를 넘으면 섹션이 늘어나 스크롤로 확인 가능 */
    background: url('../images/section11_bg.webp') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec11-inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section11 .sec-body-wrap{
    display: flex;
    flex-direction: column;
    gap: min(1.5625vw, 2.7778vh);   /* 30px */
    align-items: center;
    width: 100%;
    max-width: min(75vw, 133.3333vh);   /* 1440px@1920 — 뷰포트 비례(2560+ 확대) */
    padding: 0 min(1.0417vw, 1.8519vh);   /* 0 20px */
}
.section11 .sec-title{
    margin-top: 0;
}
.sec11-inner-div{
    width: 100%;
    min-height: min(13.5417vw, 24.0741vh);   /* 260px */
    background-color: #fff;
    border-radius: var(--radius-large);
}
.sec11-inner-title{
    display: flex;
    gap: max(13px, min(1.0417vw, 1.8519vh));   /* 20px */
    align-items: center;
    margin: min(2.0833vw, 3.7036vh) 0 min(1.7708vw, 3.1481vh) min(2.0833vw, 3.7036vh);   /* 40px 0 34px 40px */
}
.sec11-logo-wrap{
    width: 100%;
    display: flex;
    align-items: stretch;
    margin-bottom: min(2.0833vw, 3.7036vh);   /* 40px */
}
.sec11-logo{
    width: calc(100% / 6);
    min-height: min(5.2083vw, 9.2592vh);   /* 100px */
    border-right: var(--border-default);
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec11-logo:last-child{
    border-right: none;
}
.sec11-logo a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec11-logo img{
    max-width: 90%;
    max-height: min(2.8646vw, 5.0926vh);   /* 55px@1920 — 로고 높이 통일(정사각 아이콘이 과대해지지 않게) */
    width: auto;
    object-fit: contain;
}
/* PC 전용: 네이버·지마켓·CU 제외한 구매처 로고를 현재 기준 80%로 축소(폭·높이 비례).
   모바일(≤768)은 그대로 — min-width:769px로 스코프. src 기준 타겟. */
@media (min-width: 769px){
    .section11 .sec11-logo img[src$="section11_chilsung.svg"],
    .section11 .sec11-logo img[src$="section11_11st.webp"],
    .section11 .sec11-logo img[src$="section11_bm.webp"],
    .section11 .sec11-logo img[src$="section11_k.webp"],
    .section11 .sec11-logo img[src$="section11_cp.webp"],
    .section11 .sec11-logo img[src$="section11_7.webp"],
    .section11 .sec11-logo img[src$="section11_gs.webp"],
    .section11 .sec11-logo img[src$="section11_lotte.webp"],
    .section11 .sec11-logo img[src$="section11_emart.webp"]{
        max-width: 72%;                          /* 90% → 80% */
        max-height: min(2.2917vw, 4.0741vh);     /* 55px → 44px (80%) */
    }
}
/* 온라인 구매처: 칠성몰 추가로 로고 7개 → 폭 1/7로 균등 분할 */
.sec11-inner-div.online .sec11-logo{
    width: calc(100% / 7);
}
/* 7개로 늘어난 만큼 온라인 정사각 아이콘(네이버·지마켓)도 한 단계 축소 */
@media (min-width: 769px){
    .sec11-inner-div.online .sec11-logo img{
        max-height: min(2.5vw, 4.4444vh);        /* 55px → 48px */
    }
}
.sec11-title-badge{
    font-size: var(--font-title-26);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    padding: max(7px, min(0.5208vw, 0.9259vh)) max(13px, min(1.0417vw, 1.8519vh));   /* 10px 20px */
    border-radius: min(10.4167vw, 18.5186vh);   /* 200px (pill) */
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec11-title{
    font-size: var(--font-title-lg2);
    font-weight: 500;
}
.sec11-title span{
    font-weight: 700;
}

/* ===== footer ===== */
footer.footer{
    width: 100%;
    background-color: var(--primary-color);
    padding: min(2.6042vw, 4.6297vh) min(2.0833vw, 3.7036vh) min(4.0104vw, 7.1296vh);   /* 50px 40px 77px */
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.footer-inner{
    max-width: min(72.917vw, 129.6302vh);   /* 1400px@1920 — 뷰포트 비례(2560+ 확대) */
    width: 100%;
    color: #fff;
    font-size: var(--font-body);
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
}
.footer-inner a{
    color: #fff;
}
.footer-left div:not(:last-child){
    margin-bottom: var(--margin-bottom-50);
}
.footer-information p:first-child, .footer-warning p:first-child{
    margin-bottom: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.footer-information p span{
    padding-right: max(13px, min(1.0417vw, 1.8519vh));   /* 20px */
    position: relative;
}
.footer-information p span::after{
    content: '';
    width: 2px;
    height: max(11px, min(0.8333vw, 1.4814vh));   /* 16px */
    background-color: #fff;
    position: absolute;
    top: 0;
    right: max(7px, min(0.5208vw, 0.9259vh));   /* 10px */
}
.footer-information p span:last-child::after{
    content: none;
}
.footer-copy{
    font-size: var(--font-body-small);
}
.footer-logo{
    margin-bottom: min(2.2917vw, 4.0741vh);   /* 44px */
}
.footer-logo a{
    display: block;
    width: min(5vw, 8.8889vh);   /* 96px */
    height: min(7.0313vw, 12.5001vh);   /* 135px */
}
.footer-logo a img{
    width: 100%;
    height: auto;
}
.familysite{
    width: min(10.4167vw, 18.5186vh);   /* 200px */
    height: min(2.3438vw, 4.1668vh);   /* 45px */
    border-radius: var(--radius-small);
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    padding: max(7px, min(0.5208vw, 0.9259vh)) max(13px, min(1.0417vw, 1.8519vh));   /* 10px 20px */
}
.familysite .familysite-btn{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.familysite .familysite-btn::after{
    content: '';
    width: max(8px, min(0.625vw, 1.1111vh));   /* 12px */
    height: max(5px, min(0.3646vw, 0.6482vh));   /* 7px */
    background: url('../images/arrow_small_down.webp') no-repeat center / 100% auto;
}
.familysite ul{
    display: none;
}
.footer-left{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.footer-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.pc{
    display: block!important;
}
.mo{
    display: none!important;
}

@media (max-width: 1730px){
    header.header{
        padding: 15px 20px 15px;
        justify-content:center;
        flex-wrap: wrap;
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    .header-logo a{
        margin: 10px 0;
        height: 24px;
        width: auto;
    }
    .header-logo a img{
        height: 100%;
        width: auto;
    }
    .gnb-wrap ul{
        font-size: 14px;
    }
    .gnb-wrap ul li a{
        padding: 12px 15px;
    }
    section.section2 br:not(.visible){
        display: none;
    }

}

@media (max-width: 1440px) {
    .section4 .sec-body-wrap{
        gap: 2%;
    }
    .sec-body-wrap > .sec4-left{
        width: 35%;
    }
    .sec4-right{
        width: 63%;
    }
    .sec4-right .sec4-left{
        width: 55.557%;
    }
    .sec4-right-div{
        width: 44.443%;
    }
    section.section4 br:not(.visible){
        display: none;
    }
    .sec4-right-icon{
        width: 60px;
    }
    .sec4-right-icon img{
        height: 24px;
    }
    .sec4-right-body li:not(:last-child)::after{
        width: 34px;
        height: 27px;
    }
    .sec4-right-body li:not(:last-child){
        padding-bottom: 60px;
    }
    .sec4-text-hash li{
        padding: 7px 12px;
    }
    .sec4-inner-text{
        margin: 0 20px;
    }
    .scroll-left-list, .scroll-right-list{
        width: 30%;
    }
    .scroll-list-div{
        width: 100%;
    }
    .scroll-list-div-text{
        margin: 0 20px 30px;
    }
    section.section7 br:not(.visible){
        display: none;
    }
    .second-slider-text-bottom{
        margin-top:40px;
    }
    .second-slider-text-wrap{
        margin: 30px 0 0;
    }
    .sec9-inner-top{
        padding: 50px 40px 60px;
        height: auto;
    }
    .sec9-inner{
        gap: 20px;
    }
    .sec9-inner-bottom{
        gap: 15px;
    }
    .sec9-bottom-div{
        width: calc((100% / 4) - 11.25px);
    }
    .sec10-tab-wrap a{
        width: 180px;
        height: 70px;
    }
    .sec10-tab-wrap{
        margin-bottom:70px;
    }
    .kv-product{
        width: 23%;
    }
    .kv-product-text{
        gap: 35%;
        padding-left: 12%;
        margin-top:20px;
    }
    /* (pagination left:0 제거 — 이제 min(12.5vw, 22.2222vh) 비율 컬럼으로 텍스트와 정렬 유지) */
    .main-keyvisual-second{
        min-height: 100vh;
    }
}

@media (max-width: 1280px) {
    .popup-wrap{
        width:600px;
        min-height:1px;
        height:480px;
        padding: 15px;
    }
    .popup-logo{
        top: -12%;
        width: 150px;
    }
    .popup-logo img{
        width:90%;
    }
    .popup-inner{
        width:100%;
        height:100%;
        min-height: 1px;
    }
    footer.footer{
        padding: 30px 20px 50px;
    }
    section.section3 br:not(.visible){
        display: none;
    }
    section.section6 br{
        display: none;
    }
    .second-slider-text-bottom{
        margin-top: 30px;
    }
    .second-slider-text-bottom .second-text-title::after{
        width: 75%;
    }
    .second-slider-text-wrap{
        margin: 20px 0 0;
    }
    .sec8-text-wrap dl{
        padding: 30px;
    }
    .sec8-inner-wrap{
        gap: 20px;
    }
    .sec8-inner-div{
        gap: 20px;
        width: calc(50% - 10px);
    }
    .sec8-text-wrap{
        gap: 20px;
    }
    .section9 br:not(.visible){
        display: none;
    }
    .sec10-info-text{
        padding: 25px 30px;
    }
    .sec10-info-div{
        gap: 20px;
    }
    .section11 .sec-body-wrap{
        gap: 20px;
    }
    .sec11-inner-title{
        gap: 10px;
        margin: 30px 0 24px 30px;
    }
    .sec11-logo-wrap{
        margin-bottom: 30px;
    }
    .sec11-inner-div{
        min-height: 1px;
    }
    .kv-product{
        bottom: 20%;
    }
    .sec5-product-info p:nth-child(1){
        font-size: 14px;
        margin-bottom:5px;
    }
    .sec5-product-info strong{
        font-size: 24px;
    }
    .sec5-product-info p:nth-child(3){
        font-size: 16px;
    }
    .sec5-product-wrap:nth-child(3) .sec5-product-text p:nth-child(1){
        margin-left:-20%;
    }
    .sec3-info-bottom .sec3-table-left{
        padding: 10px 50px;
    }
}

@media (max-width:1210px){
    .mobile-menu-wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }
    .header-logo{
        display: none;
    }
    .header-logo-mo a img.logo-color{
        display: none;
    }
    nav.gnb-wrap{
        display: none;
    }
    .header-logo-mo a{
        display: block;
        height: 23px;
        width: auto;
    }
    .header-logo-mo a img{
        height: 100%;
        width: auto;
    }
    .mobile-menu i{
        display: block;
        width: 35px;
        height: 23px;
        background: url('../images/menu_icon_mo.webp') no-repeat center / 100% auto;
        text-indent: -9999px;
        cursor: pointer;
    }
    .mobile-gnb-group{
        display: flex;
        flex-direction: column;   /* 헤더(고정) + 메뉴(스크롤) 세로 배치 */
        position: absolute;
        top: -15px;
        left: -20px;
        width: 100vw;
        height: 100vh;
        height: 100dvh;           /* 모바일 주소창 고려 */
        overflow: hidden;         /* 내부 메뉴 영역만 스크롤 */
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px); /* 사파리 브라우저 호환성용 */
        margin-right: -100vw;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .mobile-gnb-group.active{
        opacity: 1;
        visibility: visible;
        pointer-events:initial;
        margin-right: 0;
    }
    .mobile-gnb-wrap{
        display: none;
    }
    .main-keyvisual-first{
        padding-top: 80px;
    }
    .mobile-gnb-top{
        width: 100%;
        display: flex;
        padding: 0 20px;
        height: 55px;
        flex-shrink: 0;           /* 헤더 고정 — 스크롤되지 않음 */
        justify-content: space-between;
        align-items: center;
    }
    .mobile-gnb-close a{
        width: 27px;
        height: 27px;
        display: block;
        text-indent: -9999px;
        background: url('../images/close_icon.webp') no-repeat center / 100% auto;
    }
    .mobile-gnb-wrap{
        display: flex;
        flex-direction: column;
        margin-top: 60px;
        align-items: center;
        padding: 0 20px 40px;
        gap: 10px;
        flex: 1;                          /* 남은 공간 채움 */
        overflow-y: auto;                 /* 메뉴 영역만 스크롤 */
        -webkit-overflow-scrolling: touch;
    }

    .mobile-gnb-wrap .gnb-point{
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 40px;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .mobile-gnb-wrap ul{
        text-align: center;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .mobile-gnb-wrap ul li{
        width: 100%;
        transition: background-color 0.3s ease;
    }
    .mobile-gnb-wrap ul li a{
        font-size: var(--font-title-32);
        font-weight: 500;
        color: #fff;
        padding: 15px 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 300px;
        transition: background-color 0.3s ease;
    }
    .mobile-gnb-wrap ul li.active a{
        background-color: var(--primary-color);
        font-weight: 700;
    }
}

@media (max-width: 1024px) {

    .popup-inner{
        padding: 30px 10px;
        border: 1px solid #0076cb;
    }
    .popup-logo{
        width: 130px;
    }
    .popup-wrap{
        width: 550px;
        height: 430px;
    }
    .popup-btn{
        width: 180px;
        height: 70px;
    }
    .popup-btn-wrap{
        gap: 10px;
    }
    .second-slider-text-bottom .second-text-title::after{
        width: 70%;
    }
    .sec8-title-wrap{
        line-height: 1.2;
    }
    .sec10-tab-wrap a{
        width: 160px;
        height: 60px;
    }
    .sec10-tab-wrap{
        gap: 10px;
    }
    .kv-product-text-right ul li{
        gap: 10px;
    }
    .kv-product-text-right ul li::before{
        width: 20px;
        height: 25px;
    }
    .kv-product{
        bottom: 35%;
    }
    .kv-product-text-right ul{
        gap: 10px;
    }
    .sec3-info-bottom .sec3-table-left{
        padding: 10px 40px;
    }
}

@media (max-width:880px){
    .sec5-product-info{
        width: 120px;
        right: -45%;
    }
    .sec5-product-wrap:nth-child(3) .sec5-product-text p:nth-child(1){
        margin-left:-25%;
    }
    .sec3-info-bottom .sec3-table-left{
        padding: 10px 30px;
    }
}

/* (이전 section5/10 전용 clamp 블록 제거 — 이제 :root 단일배율 + base 리터럴이
   전 페이지에서 동일한 min(vw,vh)를 적용하므로 불필요) */

/* 4. 768px 이하 구간 (태블릿 세로 / 모바일 진입) */
@media (max-width: 768px) {
    .pc{
        display: none!important;
    }
    .mo{
        display: block!important;
    }
    .sec5-button-wrap.pc{
        display: none!important;
    }
    header.header{
        height: 55px;
    }
    .scroll-first-text-group{
        position: static;
        height: auto;
    }
    .scroll-first-text.copy01{
        transform:translate(0, 0);
    }
    .popup-wrap{
        width: 80%;
        height: auto;
        padding: 10px;
    }
    .popup-logo{
        width: 15%;
        top: -8%;
    }
    .popup-logo::after{
        height: 70%;
    }
    .popup-inner{
        padding: 17% 10px 25px;
    }
    .popup-btn{
        height: 55px;
    }
    .popup-text-wrap p{
        font-size: 16px;
    }
    .popup-btn-wrap a{
        font-size: 16px;
        height: 50px;
        width: calc(40% - 5px);
    }
    .popup-text-wrap strong{
        margin-bottom: 25px;
    }
    .text-left-top{
        text-align: center;
        font-size: 20px;
    }
    .kv-product-text strong{
        display: flex;
        flex-wrap: wrap;            /* 한 줄 초과 시 줄바꿈(가로 넘침 방지) */
        justify-content: center;
        gap: 0 10px;
    }
    .kv-product-text{
        flex-direction: column;
        padding-left: 0;
        margin-top: 0;
        gap: 0;
        margin-bottom: 25px;
        text-align: center;
    }
    /* 데스크탑 2컬럼 규칙(flex:1 1 0 / 안쪽 padding / 우측정렬)이 모바일로 새지 않게 무력화 */
    .main-kv .kv-product-text-left{
        flex: initial;
        text-align: center;
        padding-right: 0;
    }
    .kv-product-text-right{
        display: none;
    }
    .kv-product-text-right-mo{
        display: flex;
        color: #fff;
        flex-direction: column;
        margin: 25px 0 40px;
    }
    .kv-product-text-right-mo strong{
        font-size: var(--font-title-big2);
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: var(--margin-bottom-30);
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .kv-product-text-right-mo strong p{
        color: var(--primary-color-bold);
    }
    .kv-product-text-right-mo ul{
        font-size: 20px;
        color: #fff;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .kv-product-text-right-mo ul li{
        display: flex;
        gap: 10px;
    }
    .kv-product-text-right-mo ul li::before{
        content: '';
        width: 15px;
        height: 20px;
        background: url('../images/check_icon.svg') no-repeat center / 100% auto;
        display: block;
    }
    .kv-product{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }
    .kv-product-wrap{
        flex-direction: column;
        padding-bottom: 0;
        align-items: center;
    }
    .kv-text-bg{
        display: none;
    }
    .kv-text-bg-mo{
        display: block;
        font-size: 200px;
        position: absolute;
        top: 46%;          /* 캔 상단과 겹치되 글자 윗부분이 보이도록 위로 */
        left: 0;
        right: 0;
        transform: translateY(-50%);
        text-align: center;
        color: var(--primary-color-bold);
        font-family: 'SCHABO';
        font-weight: 500;
        line-height: 1;
        letter-spacing:0.025em;
        z-index: 1;
    }
    .kv-product img{
        position: relative;
        z-index: 2;
        width: 50%;
        margin: 0 auto;
    }
    .main-keyvisual-first{
        padding-top: 120px;
        background: url('../images/section_bg1_mo.webp') no-repeat bottom center / cover;
    }
    .kv-product-area{
        width: 50%;
        bottom: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    .kv-product-area img{
        width: 100%;
    }
    /* ── KV 스크롤 시네마: 모바일 조정 ── */
    .kv-bg-first{
        background-image: url('../images/section_bg1_mo.webp');
    }
    /* KV1 텍스트 배치:
       상단 = 헤딩(완성형 논알코올 맥주) + 브랜드(클라우드 논알콜릭),
       체크리스트(오리지널 발효공법~무감미료)는 약 70% 높이로 분리 배치. */
    .main-keyvisual-first.kv-layer{
        display: flex;
        flex-direction: column;
        padding-top: 80px;
        padding-bottom: 36px;
        box-sizing: border-box;
    }
    .main-keyvisual-first.kv-layer .kv-product-wrap{
        flex: 1;
        justify-content: flex-start;   /* 헤딩 → 브랜드 상단부터 쌓기 */
        position: relative;
    }
    /* 헤딩과 브랜드는 거의 붙게 (헤딩 하단여백 제거 + 브랜드 상단여백 0) */
    .main-keyvisual-first.kv-layer .kv-product-text{
        margin-bottom: 0;
    }
    .main-keyvisual-first.kv-layer .kv-product-text-right-mo{
        margin: 0;
    }
    /* 헤딩(완성형 논알코올 맥주)·브랜드(클라우드 논알콜릭) 줄간격 압축 → 상단부 컴팩트 */
    .main-keyvisual-first.kv-layer .kv-product-text strong,
    .main-keyvisual-first.kv-layer .kv-product-text-right-mo strong{
        line-height: 1.08;
    }
    /* 체크리스트만 아래(약 82%)로 분리 — 캔 하단보다 아래 */
    .main-keyvisual-first.kv-layer .kv-product-text-right-mo ul{
        position: absolute;
        top: 82%;
        left: 0;
        right: 0;
        align-items: center;
    }
    /* 캔: 상단 텍스트/하단 체크리스트 사이, 사이즈 확대 */
    .can-frame:first-child{
        max-height: 40vh;
        max-width: 86vw;
    }
    .can-anchor{
        top: 57%;
    }
    /* 모바일: KV 연출 스크롤 길이 단축 → 인터랙션 끝나면 다음 섹션으로 빠르게 전환 */
    .main-kv-scroll{
        height: 260vh;
    }
    /* === KV 유동 비율(모바일, 375px 기준) → 폰별 동일 비율 ===
       환산식: vw = px / 375 * 100 */
    .main-kv{
        /* 헤딩: '완성형 논알코올 맥주'가 한 줄에 들어오도록 더 낮춤(어색한 줄바꿈 제거). */
        --font-title-big2: clamp(22px, 8.8vw, 36px);  /* 33px@375 */
        --font-title-lg:   7.467vw;  /* 28px */
        --font-title-lg2:  6.933vw;  /* 26px */
        --font-title-36:   8.533vw;  /* 32px */
        --margin-bottom-50: 10.67vw; /* 40px */
        --margin-bottom-40: 8vw;     /* 30px */
        --margin-bottom-30: 6.67vw;  /* 25px */
        --margin-bottom-20: 4vw;     /* 15px */
    }
    /* 작은 화면(≤380)에서 px로 덮던 규칙을 이겨 끊김 없이 유동 유지 */
    .main-kv .kv-product-text strong,
    .main-kv .kv-product-text-right-mo strong{
        font-size: var(--font-title-big2);
    }
    /* 데스크탑용 75vw 캡·작은 좌우패딩이 모바일로 새지 않게 복원 */
    .main-kv .kv-product-wrap{
        max-width: none;
        padding-left: 5.33vw;        /* 20px */
        padding-right: 5.33vw;
    }
    .main-kv .text-left-top{
        font-size: 5.33vw;           /* 20px */
    }
    .main-kv .kv-product-text-right-mo ul{
        font-size: 5.33vw;           /* 20px */
    }
    .main-kv .kv-text-bg-mo{
        line-height: 0.9;            /* 2줄 간격 압축 */
    }
    /* 줄별 폰트: KLOUD 너비 ≈ NON ALCOHOLIC 너비의 70%
       (글자수 5 vs 13 → 같은 폰트면 KLOUD를 약 1.8배 키워야 70% 너비) */
    .kv-text-bg-mo .kv-bg-l1,
    .kv-text-bg-mo .kv-bg-l2{
        display: block;
    }
    .main-kv .kv-text-bg-mo .kv-bg-l1{
        font-size: 38vw;             /* KLOUD */
    }
    .main-kv .kv-text-bg-mo .kv-bg-l2{
        font-size: 21vw;             /* NON ALCOHOLIC (키움, +약11px@375) */
    }
    .main-kv .main-keyvisual-first.kv-layer{
        padding-top: 21.33vw;        /* 80px */
    }
    .kv-second-vegetable-wrap img:nth-child(1){
        top: 10%;
        left: 30%;
        width: 15%;
    }
    .kv-second-vegetable-wrap img:nth-child(2){
        top: 25%;
        left: 5%;
        width: 12%;
    }
    .kv-second-vegetable-wrap img:nth-child(3){
        top: 40%;
        left: 6%;
        width: 30%;
    }
    .kv-second-vegetable-wrap img:nth-child(4){
        top: 78%;
        left: 25%;
        width: 7%;
    }
    .kv-second-vegetable-wrap img:nth-child(5){
        top: 15%;
        right: -5%;
        width: 45%;
    }
    .kv-second-vegetable-wrap img:nth-child(6){
        top: 60%;
        right: 8%;
        width: 12%;
    }
    .kv-second-vegetable-wrap img:nth-child(7){
        top: 68%;
        right: 15%;
        width: 30%;
    }
    .bubble-float:nth-child(1){
        width: 20px;
        height: 20px;
    }
    .bubble-float:nth-child(2){
        width: 20px;
        height: 20px;
    }
    .bubble-float:nth-child(3){
        width: 40px;
        height: 40px;
        top: 86%;
        left: 10%;
    }
    .bubble-float:nth-child(4){
        width: 14px;
        height: 14px;
        top: 60%;
    }
    .bubble-float:nth-child(5){
        width: 24px;
        height: 24px;
        right: 5%;
    }
    .bubble-float:nth-child(6){
        width: 40px;
        height: 40px;
        top: 4%;
        right: 30%;
    }
    .bubble-float:nth-child(7){
        width: 36px;
        height: 36px;
        top: 70%;
    }
    .bubble-float:nth-child(8){
        width: 14px;
        height: 14px;
        top: 10%;
        right: 5%;
    }
    .bubble-float:nth-child(9){
        width: 12px;
        height: 12px;
        top: 82%;
        right: 25%;
    }
    .kv-second-text .marquee-track{
        gap: 25px;
    }
    .kv-second-text .marquee-track .track{
        gap: 25px;
    }
    .kv-second-text .marquee-track .track span{
        font-size: 50px;
    }
    .kv-second-text .marquee-track .track span::after{
        width: 10px;
        height: 10px;
        border-radius: 10px;
        right: -18px;
    }
    .text-marquee{
        height: auto;
        bottom: 10px;
    }
    .text-marquee span{
        font-size: 50px;
        margin-right: 25px;
    }
    .text-marquee span::after{
        width: 10px;
        height: 10px;
        border-radius: 10px;
        right: -18px;
    }
    .sec-carousel-wrap{
        position: relative;
        min-height: 920px;
    }
    .carousel-right-area{
        position: absolute;
        top: 33%;
        right: 0;
        width: calc(100% - 20px);
        aspect-ratio: 740/600;
        max-width: 440px;
    }
    .carousel-left-area{
        width: 100%;
    }
    /* 데스크탑 컨테이너 max-width(72.917/75vw)가 모바일에서 ~281px로 콘텐츠를
       좁히던 문제 복원 → 모바일은 풀폭 사용(각 섹션 자체 패딩으로 여백 처리) */
    .sec-body-wrap,
    .sec6-inner-wrap,
    .sec8-inner-wrap,
    .sec10-inner,
    .footer-inner{
        max-width: 100%;
    }
    .carousel-left-top{
        align-items: flex-start;
        padding: 120px 24px 0;   /* 좌우 24px (마퀴·이미지 영역 제외) */
    }
    .carousel-left-bottom{
        padding: 230px 24px 0;   /* 좌우 24px */
    }
    .left-copy .swiper-pagination{
        top: 89%;
    }
    br.mo-visible{
        display: block!important;
    }
    .carousel-left-bottom .carousel-num{
        font-size: 14px;
    }
    .carousel-left-bottom strong{
        font-size: 30px;
        margin-bottom:15px;
    }
    .left-copy .swiper-pagination ul li a{
        width: 5px;
        height: 5px;
        border-radius: 5px;
    }
    .left-copy .swiper-pagination ul li.active a{
        width: 20px;
    }
    .left-copy .swiper-pagination ul{
        gap: 10px;
    }
    .sec-title{
        margin-top: 95px;
        margin-bottom: 40px;
        font-size: 30px;
    }
    .sec3-table-top{
        flex-direction: column;
    }

    .sec3-table-left, .sec3-table-body{
        width: 100%;
    }
    .sec3-table-left{
        border-radius: 12px 12px 0 0;
    }
    .sec3-table-body{
        padding: 0 0 20px;
    }
    .table-body-top{
        flex-wrap: wrap;
        position: relative;
    }
    .table-space{
        width: 50%;
        padding: 20px;
        
    }
    /* 2×2 그리드 십자선 — 셀 경계 기반으로 항상 정확히 교차.
       좌측 셀(1,3)의 border-right = 세로선(50%), 상단 셀(1,2)의 border-bottom = 가로선(행 경계).
       (기존 ::before 방식은 행 높이가 달라 세로·가로선이 어긋났음) */
    .table-space:nth-child(even){
        border-right: none;
    }
    .table-space:nth-child(1),
    .table-space:nth-child(2){
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .sec3-table-left{
        flex-direction: row;
        height: 50px;
        position: relative;
        align-items:flex-end;
    }
    .sec3-table-body .table-title-area{
        padding: 10px 18px;
    }
    .sec3-table-top .sec3-table-left strong br.visible{
        display: none;
    }
    .product-small-image{
        height: 60px;
        width: auto;
    }
    .product-small-image img{
        height: 100%;
        width: auto;
    }
    .sec3-table-top .sec3-table-left strong{
        display: block;
        line-height: 50px;
        font-size: 18px;
        margin-left: -10px;
    }
    .sec3-table-body .table-body-text{
        font-size: 16px;
    }
    .table-body-bottom{
        width: calc(100% - 40px);
        margin: 0 20px;
        padding: 20px;
    }
    .table-body-bottom p:nth-child(1){
        font-size: 15px;
    }
    .table-body-bottom p:nth-child(2){
        font-size: 14px;
    }
    .accordion-area{
        flex-direction: column;
    }
    .accordion-area .sec3-table-body{
        padding: 0;
    }
    .accordion-area .product-small-image{
        display: none;
    }
    .accordion-area .sec3-table-left strong br.visible{
        display: none;
    }
    .accordion-area .sec3-table-left{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sec3-info-bottom{
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }
    .sec3-info-bottom .sec3-table-left{
        padding: 0;
        height: auto;
        width: 90px;
        margin-bottom: 20px;
    }

    .sec3-info-body p{
        text-align: center;
        font-size: 16px;
    }
    .sec3-inner{
        padding-bottom: 95px;
    }
    .accordion-area .sec3-table-left{
        position: relative;
        cursor: pointer;
    }
    .accordion-area .sec3-table-left::after{
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 15px;
        height: 10px;
        background: url('../images/arrow_small_down.webp') no-repeat center / 100% auto;
        transition: transform 0.3s ease;
    }
    /* 타사 제품 드롭다운: 기본 접힘. 헤더(.sec3-table-left) 탭 시 .active 로 펼침 */
    .accordion-area .sec3-table-body{
        display: none;
    }
    .accordion-area:not(.active) .sec3-table-left{
        border-radius: 12px;
    }
    .accordion-area.active .sec3-table-body{
        display: block;
    }
    .accordion-area.active .sec3-table-left{
        border-radius: 12px 12px 0 0;
    }
    .accordion-area.active .sec3-table-left::after{
        transform: translateY(-50%) rotate(180deg);
    }
    /* 모바일은 .sec3-table-left(화살표 헤더)를 쓰므로 데스크탑용 접힘 헤더는 숨김 */
    .sec3-title-area{
        display: none;
    }
    .accordion-area .sec3-table-left{
        display: flex;
    }
    section.section4{
        padding: 95px 20px;
        height: auto;
    }
    .section4 .sec-title{
        margin-bottom: 40px;
    }
    .section4 .sec-body-wrap{
        flex-direction: column;
        gap: 10px;
    }
    .sec-body-wrap > .sec4-left{
        width: 100%;
        padding-bottom: 20px;
    }
    .sec4-right{
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .sec4-right .sec4-left, .sec4-right-div{
        width: 100%;
    }
    .sec4-inner-text{
        margin: 0 10px;
    }
    .sec4-text-hash li{
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 6px;
    }
    .sec4-right-div{
        padding: 0;

    }
    .sec4-right-top{
        padding-bottom: 0;
        height: 100px;
        justify-content: center;
        gap: 20px;
        border-bottom: none;
        background: url('../images/sec4_box_bg.webp') no-repeat center / cover;
        border-radius: 12px 12px 0 0;
    }
    .sec4-right-top p{
        order: 2;
    }
    .sec4-right-top-img{
        order: 1;
        width: 10%;
    }
    .sec4-right-top p{
        font-size: 20px;
        color: #fff;
    }
    .sec4-right-body{
        padding: 0 20px;
        padding-bottom: 20px;
    }
    .sec4-right-body li{
        gap: 20px;
    }
    .sec4-right-icon{
        width: 80px;
    }
    .sec4-right-icon img{
        height: 30px;
    }
    .sec4-right-body li p{
        font-size: 16px;
    }
    .sec4-right-body li:first-child::after{
        bottom: 25px;
        transform: translateX(-50%);
    }
    .sec4-right-body li:nth-child(2)::after{
        bottom: 10px;
        transform: translateX(-50%);
    }
    section.section5{
        height: auto;
    }
    .section5 .sec-title{
        font-size: 28px;
        margin-top: 95px;   /* PC용 margin-top:0이 모바일로 새던 것 복원(상단 공간) */
    }
    .sec5-product-wrap:nth-child(1){
        order: 3;
        width: 100%;
        margin-top: 40px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .sec5-vs-wrap{
        order: 2;
        width: 100%;
    }
    .sec5-product-wrap:nth-child(3){
        order: 1;
        width: 100%;
        justify-content:center;
        align-items: center;
    }
    .sec5-product-area{
        flex-direction: column;
        align-items: center;
    }
    .sec5-product-img{
        display: flex;
        flex-direction: column;
        align-items:center;
    }
    .sec5-product-wrap:last-child .sec5-product-img img{
        width: 60%;
    }
    .sec5-product-info{
        right: 20px;
        top: -30px;
    }
    .sec5-product-wrap:nth-child(3) .sec5-product-text p:nth-child(1){
        margin-left: 0;
        font-size: 18px;
    }
    .sec5-product-text p:nth-child(2){
        font-size: 34px;   /* 라벨 박스 안에 들어오도록 축소 */
    }
    .sec5-product-wrap .sec5-button-wrap{
        padding: 0 20px;
        display: flex!important;
        gap: 10px;
        margin-top: 25px;
        width: 100%;
    }
    .sec5-button-wrap li{
        width: fit-content;       /* 허그 — 내용 폭에 맞춤 */
        height: 50px;
        gap: 10px;
        padding: 0 18px;          /* 좌우 패딩 */
        white-space: nowrap;      /* 줄바꿈 방지 */
    }
    .sec5-button-wrap li:nth-child(1) .sec5-button-icon{
        width: 30px;
    }
    .sec5-button-wrap li:nth-child(2) .sec5-button-icon{
        width: 23px;
    }
    .sec5-button-wrap li strong{
        font-size: 18px;
        white-space: nowrap;
    }
    .sec5-vs-wrap{
        width: 30%;
        margin-top: 40px;
    }
    .sec5-product-wrap:nth-child(1) .sec5-product-img{
        width: 140px;
        margin-bottom:0;
        position: relative;
        z-index: 1;
    }
    .sec5-product-wrap:nth-child(1) .sec5-product-img img{
        width: 100%;
        height: auto;
    }
    .sec5-product-text{
        margin-left: 0;
        width: fit-content;
    }
    .sec5-product-wrap:first-child .sec5-product-text{
        height: fit-content;
        margin-left: -25px;
        padding: 20px;
        background-color: #c0d9ef;
        border-radius: 0 100px 100px 0;
        width: calc(100% - 140px);
        padding-left:5px;

        border: 1px solid transparent;
        background:
            linear-gradient(#eef4fb, #eef4fb) padding-box,
            linear-gradient(90deg,
        #888888 0%,
        #c9c8c8 60%,
        #fff 100%) border-box;
        box-shadow: 0px 8px 20px #b6d9f7;
        border-left: none;
    }
    section.section2{
        min-height: 1px;
    }
    .sec6-inner-wrap{
        flex-direction: column;
    }
    .sec6-left, .sec6-right{
        width: 100%;
    }
    .sec6-right{
        align-items: center;
    }
    .sec6-mobile-image.mo{
        display: flex!important;
        justify-content: flex-end;
        align-items: center;
    }
    .sec6-mobile-image.mo img{
        width: 90%;
    }
    .sec6-text-top{
        margin-bottom: 38px;
        font-size: 14px;
        line-height: 1.8;
    }
    section.section6{
        padding: 95px 0;
        height: auto;

    }
    .sec6-left br{
        display: block!important;
    }
    .sec6-left strong{
        font-size: 24px;
        margin-bottom: 30px;
    }
    .sec6-right{
        margin-top: 40px;
    }
    .monde-logo{
        width: 35%;
    }
    .sec6-right p{
        text-align: center;
        font-size: 12px;
        line-height: 1.3;
    }
    .sec7-inner .sec-title{
        position: static;
        margin-top: 95px;
    }
    .scroll-first-text{
        position: static;
        margin-bottom:0;
        transform: initial;
        margin-top: 50px;
    }
    .scroll-first-text.active{
        transform: initial;
    }
    .scroll-first-text:last-child{
        margin-bottom: 0;
        margin-top: 0;
    }
    .sec-scroll-second .scroll-first-text.mo{
        opacity: 1;
        visibility: visible;
        margin-top: 0;
        display: flex!important;
        margin-bottom: 50px;
    }
    .scroll-first-list{
        flex-direction: column;
    }
    .scroll-left-list, .scroll-right-list{
        width: 100%;
    }
    .scroll-left-list .scroll-list-div.mo{
        margin-bottom: 0;
        margin-top: 50px;
    }
    .scroll-right-list .scroll-list-div{
        margin-top: 50px;
    }
    .scroll-list-div{
        width: 80%;
    }
    .scroll-left-list .scroll-list-div.mo{
        justify-self: flex-end;
    }
    .sec-scroll-second{
        padding-top: 50px;
    }
    .scroll-first-num{
        font-size: 16px;
    }
    .scroll-first-title{
        font-size: 24px;
    }
    .scroll-list-div-text{
        margin: 0 10px 20px;
    }
    .scroll-second-slider-list > li{
        width: 80%;
        justify-self: flex-end;
        flex-direction: column;
        padding-right: 10px;
        gap: 0;
        position: relative;
        top:0;
    }
    .second-slider-img{
        width: 100%;
    }
    .second-slider-text-wrap{
        width: calc(100% - 20px);
        margin: 20px 10px;
    }
    .scroll-second-slider-list > li:nth-child(2){
        justify-self: flex-start;
        margin-top: 185px;
    }
    .second-slider-text-bottom.mo{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: 10px;
        background-color: #efefef;
        margin-top: 0;
        padding: 20px;
    }
    .section7 .sec-body-wrap{
        padding-bottom: 95px;
    }
    .sec8-inner-wrap{
        flex-direction: column;
        gap: 50px;
        padding-bottom: 0;
    }
    .sec8-inner-div{
        width: 100%;
        align-items: center;
        gap: 25px;
    }
    .sec8-text-wrap dl{
        padding: 20px;
        min-height: 1px;
    }
    .sec8-text-wrap dl dt{
        font-size: 18px;
        margin-bottom: 15px;
    }
    .sec8-text-wrap{
        gap: 10px;
    }
    .sec8-title-wrap{
        padding: 10px 25px;
    }
    .sec7-inner.sec8-inner{
        margin-top: 0;

    }
    section.section8{
        background-color: #d9ebf7;
    }
    section.section8 .sec-body-wrap{
        padding: 0 24px;   /* FAQ 좌우 24px (다른 카드와 동일 폭) */
    }
    section.section8 .sec7-inner .sec-title{
        margin-top: 0;
        padding-top: 95px;
    }
    .sec9-inner-top{
        background-color: #fff;
        border-radius: 0;
        padding: 0;
    }
    .sec9-inner-top::before{
        content: none;
    }
    .sec9-top-title{
        color: #000;
    }
    .sec9-top-left p{
        color: #000;
    }
    .sec9-top-left{
        width: 100%;
        text-align: center;
    }
    section.section9{
        height: auto;
        padding: 95px 20px;
    }
    .sec9-inner-bottom{
        flex-wrap: wrap;
        gap: 10px;
    }
    .sec9-bottom-div{
        width: calc(50% - 5px);
    }
    .sec9-top-right.pc{
        display: none!important;
    }
    .sec9-top-right.mo{
        width: 100%;
        background-color: #0077cd;
        border-radius: 10px;
        display: flex!important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 40px 20px;
        position: relative;
        overflow: hidden;
        gap: 40px;
    }
    .sec9-top-right.mo::before{
        content: '';
        width: 70%;
        aspect-ratio: 1;
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        background: url('../images/section9_logo_big.webp') no-repeat center / 100% auto;
        z-index: 1;
        opacity:0.5;
    }
    .sec9-top-img-wrap{
        width: 100%!important;
        position: relative;
        z-index: 2;
    }
    .sec9-top-img{
        width: 60%;
        display: flex;
        justify-content: center;
    }
    .sec9-top-img-wrap p{
        font-size: 18px;
    }
    .sec9-top-img-wrap:nth-child(2) .sec9-top-img{
        width: 75%;
        margin-right:-10%;
    }
    .sec9-top-img-wrap:nth-child(2) p{
        margin-top: -5%;
    }
    section.section10{
        height: auto;
        padding: 95px 20px;
    }
    .sec10-inner{
        flex-direction: column;
        gap: 20px;
    }
    .sec-body-div{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec10-image-wrap{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sec10-img{
        width: 80%;
    }
    .sec10-title-wrap{
        font-size: 30px;
        margin-bottom:40px;
    }
    .sec10-tab-wrap a{
        width: 130px;
        height: 55px;
        font-size: 18px;
    }
    .sec10-tab-wrap{
        margin-bottom: 50px;
    }
    .sec10-info-text{
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .sec10-info-left, .sec10-info-right{
        width: 100%;
    }
    .sec10-info-div{
        gap: 18px;
    }
    .sec10-info-div dl{
        display: flex;
        gap: 16px;
    }
    .sec10-info-div dl dd, .sec10-info-div dl dt{
        font-size: 16px;
    }
    .sec10-info-div dl dt{
        width: 73.78px;
    }
    .sec10-info-div dl dd{
        width: calc(100% - 88.78px);
    }
    .sec10-info-div dl dd br{
        display: none;
    }
    section.section11{
        height: auto;
        background: url('../images/section11_bg_mo.webp') no-repeat bottom center / cover;
        padding: 95px 0px;
    }
    .section11 .sec-body-wrap{
        max-width: 100%;   /* 75vw 제약 제거 — 다른 카드와 동일 폭 */
        padding: 0 24px;   /* 카드 영역과 동일한 좌우 24px */
    }
    .sec11-inner-title{
        margin: 25px 20px;
        flex-direction: column;
        gap: 15px;
    }
    .sec11-logo-wrap{
        margin-bottom: 0;
        flex-wrap: wrap;
        padding: 0 20px;
        position: relative;
    }
    .sec11-logo-wrap::before{
        content: '';
        width: 90%;
        height: 1px;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        top: 0;
        left: 5%;
    }
    .sec11-logo-wrap::after{
        content: '';
        width: 90%;
        height: 1px;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        top: 50%;
        left: 5%;
    }
    .sec11-logo{
        width: calc(100% / 3);
        border-right: none;
        min-height: 84px;   /* base가 vw로 바뀌며 모바일 20px로 줄던 것 복원 */
    }
    .sec11-logo img{
        max-height: none;   /* base의 max-height(모바일서 ~10px로 찌부)를 모바일선 해제 */
    }
    .sec11-logo:nth-child(1) img, .sec11-logo:nth-child(2) img{
        width: 44px;
    }
    .sec11-logo:nth-child(3) img{
        width: 74px;
    }
    .sec11-logo:nth-child(4) img{
        width: 85px;
    }
    .sec11-logo:nth-child(5) img{
        width: 75px;
    }
    .sec11-logo:nth-child(6) img{
        width: 85px;
    }
    /* 온라인: 칠성몰(1번) 추가로 순서가 한 칸씩 밀림 → 브랜드별 크기 재매핑 */
    .sec11-inner-div.online .sec11-logo:nth-child(1) img{   /* 칠성몰 */
        width: 80px;
    }
    .sec11-inner-div.online .sec11-logo:nth-child(2) img,   /* 네이버 */
    .sec11-inner-div.online .sec11-logo:nth-child(3) img{   /* 지마켓 */
        width: 44px;
    }
    .sec11-inner-div.online .sec11-logo:nth-child(4) img{   /* 11번가 */
        width: 74px;
    }
    .sec11-inner-div.online .sec11-logo:nth-child(5) img{   /* 배민 */
        width: 85px;
    }
    .sec11-inner-div.online .sec11-logo:nth-child(6) img{   /* 컬리 */
        width: 75px;
    }
    .sec11-inner-div.online .sec11-logo:nth-child(7) img{   /* 쿠팡 */
        width: 85px;
    }
    .sec11-title-badge{
        font-size: 20px;
        padding: 10px 25px;
    }
    .sec11-title{
        text-align: center;
        line-height: 1.2;
    }
    .sec11-inner-div.offline .sec11-logo:nth-child(1) img{
        width: 85px;
    }
    .sec11-inner-div.offline .sec11-logo:nth-child(2) img{
        width: 67px;
    }
    .sec11-inner-div.offline .sec11-logo:nth-child(3) img{
        width: 71px;
    }
    .sec11-inner-div.offline .sec11-logo:nth-child(4) img{
        width: 85px;
    }
    .sec11-inner-div.offline .sec11-logo:nth-child(5) img{
        width: 85px;
    }
    .footer-information p span{
        display: block;
        margin-bottom:10px;
        line-height: 1.3;
    }
    .footer-information p span:not(.tel-info)::after{
        content:none;
    }
    .footer-information p:last-child span:nth-child(2), .footer-information p:last-child span:nth-child(3){
        display: inline-block;
        margin-bottom:0;
    }
    .footer-inner{
        flex-direction: column;
    }
    .footer-right{
        align-items: center;
        flex-direction: row;
        margin-bottom: 28px;
    }
    footer.footer{
        padding: 40px 20px;
    }
    .footer-left div:not(:last-child){
        margin-bottom: 40px;
    }
    .footer-information p:first-child, .footer-warning p:first-child{
        margin-bottom:10px;
    }
    .footer-warning{
        padding-top: 40px;
        border-top: 1px solid rgba(255,255,255,0.2);
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 0;
        padding-bottom: 40px;
    }
    .footer-warning p{
        line-height: 1.3;
    }
    .footer-logo a{
        width: 48px;
        height: auto;
        aspect-ratio: 96/135;
    }
    .familysite{
        border-radius: 4px;
        width: 150px;          /* base의 vw값(모바일서 ~39px)로 쪼그라들던 것 고정 */
        height: 38px;
        padding: 10px 14px;
    }
    .familysite .familysite-btn{
        font-size: 13px;
    }
    .familysite .familysite-btn::after{
        width: 10px;
        height: 6px;
    }
    .footer-copy.mo{
        font-size: 12px;
    }
    .footer-logo{
        margin-bottom:0;
    }
    .sec8-bg-mo.mo{
        position: relative;
    }
    .sec8-bg-mo.mo img.ai_label{
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .sec5-product-wrap:last-child .sec5-product-img::before{
        content: none;
    }
}

@media (max-width:580px) {
    .left-copy .swiper-pagination{
        top:91%;
    }
}

@media (max-width: 500px) {
    
    .popup-logo{
        width: 25%;
    }
    .popup-inner{
        padding: 28% 10px 25px;
    }
    .kv-text-bg-mo{
        font-size: 100px;
    }
    .sec9-top-img-wrap:nth-child(2) .sec9-top-img{
        margin-right:-20%;
    }
    .sec9-top-img-wrap:nth-child(2) p{
        margin-top:-8%;
    }
    .sec9-top-right.mo::before{
        width: 110%;
    }
    .sec4-right-top-img{
        width: 17%;
    }

}

@media (max-width: 430px) {
    .carousel-left-bottom{
        padding-top: 45%;
    }
    .carousel-left-top p br.mo-visible{
        display: none!important;
    }
    .left-copy .swiper-pagination{
        top:88%;
    }
}

@media (max-width:380px){
    .kv-product-text strong{
        font-size: 36px;
    }
    .kv-product-text-right-mo strong{
        font-size: 36px;
    }
    .carousel-right-area{
        top: 35%;
    }
}

/* ===== 터치 영역 최소 크기 보정 (WCAG 2.5.8 / Lighthouse 터치 영역) =====
   시각 디자인은 유지하고 클릭/탭 히트영역(앵커 박스)만 24px 이상 확보한다. */
/* 1) 슬라이더 페이지네이션 점(1·2·3): 앵커 박스를 24px로, 점 모양은 ::before로 유지.
      (가상요소 히트영역 대신 앵커 자체를 키워 Lighthouse 측정도 통과) */
.left-copy .swiper-pagination ul li a{
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 0;
    font-size: 0;
    overflow: hidden;
}
.left-copy .swiper-pagination ul li a::before{
    content: '';
    flex: 0 0 auto;
    width: max(8px, min(0.5208vw, 0.9259vh));   /* 점 10px */
    height: max(8px, min(0.5208vw, 0.9259vh));
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}
.left-copy .swiper-pagination ul li.active a{
    width: max(40px, min(2.6042vw, 4.6297vh));   /* 활성 알약 ~50px */
    background-color: transparent;
}
.left-copy .swiper-pagination ul li.active a::before{
    width: 100%;
    border-radius: 999px;
    background-color: #000;
}
@media (max-width: 768px) {
    .left-copy .swiper-pagination ul li a{ width: 24px; height: 24px; }
    .left-copy .swiper-pagination ul li a::before{ width: 5px; height: 5px; }
    .left-copy .swiper-pagination ul li.active a{ width: 24px; }
    .left-copy .swiper-pagination ul li.active a::before{ width: 20px; }
}
/* 2) 패밀리사이트 버튼: 링크 높이 24px 이상(박스 내부 중앙 정렬) */
.familysite .familysite-btn{ min-height: 24px; }
/* 3) 푸터 전화 링크: 인라인 유지하며 세로 히트영역 확보 */
.tel-info a{ display: inline-block; padding: 5px 2px; }
/* 4) 헤더 로고 앵커: 로고 크기 변화 없이 박스 높이만 24px 이상(border-box 대응) */
.header-logo a, .header-logo-mo a{ min-height: 24px; }