/* 기본 스타일 */
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Nanum Gothic', sans-serif;
            overflow-x: hidden; /* 가로 스크롤 제거 */
        }

        /* 블럭1 스타일 (모바일 전용) */
        .block1 {
            background-color: #FFA500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 14%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            padding: 0 10px;
            box-sizing: border-box;
            z-index: 10;
            display: none; /* 기본적으로 숨김 */
        }

        .block1 img {
            height: 100%;
        }

        .menu-button {
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .menu-button i {
            margin-left: 5px;
            margin-right: 5px;
        }

        /* 블럭2 스타일 (모바일 팝업) */
        .block2 {
            background-color: #FFA500;
            display: none;
            position: fixed;
            top: 0;
            right: -90%;
            height: 100%;
            width: 90%;
            box-sizing: border-box;
            padding: 10px;
            transition: right 0.3s ease;
            z-index: 20;
            color: black;
        }

        .block2.active {
            right: 0;
        }

        /* 닫기 버튼 (모바일 팝업) */
        .close-btn {
            display: none;
            position: absolute;
            top: 10px;
            left: -10px;
            font-size: 20px;
            cursor: pointer;
            color: black;
        }

        .block2.active .close-btn {
            display: block;
        }

        /* 미디어 쿼리 - 모바일 버전 */
        @media only screen and (max-width: 1201px) {
            .block1 {
                display: flex;
            }

            .block2 {
                display: block;
            }
        }

        /* 미디어 쿼리 - 피씨 버전 */
        @media only screen and (min-width: 1201px) {
            .block1 {
                display: none;
            }

            .block2 {
                display: block;
                position: fixed;
                top: 0;
                right: 0;
                height: 100%;
                width: 20%;
                z-index: 20;
                transition: none;
            }

            .close-btn {
                display: none;
            }
        }

        /* 블럭3 스타일 */
        .block3 {
            width: 100%;
            height: 610px;
            position: relative;
            overflow: hidden;
            margin-top: 14%;
        }

        /* 피씨 버전에서 블럭3 스타일 */
        @media only screen and (min-width: 1201px) {
            .block3 {
                width: 80%;
                height: 700px;
                float: left;
                margin-top: 0;
								margin-bottom: 30px; /* 블럭3의 하단 여백 설정 */
            }
        }

        /* 슬라이드 박스 스타일 */
        .slide-box {
            display: flex;
            width: 300%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        /* 각 박스 스타일 */
        .box {
            width: 33.3333%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            position: relative;
        }

        /* 포켓 스타일 */
        .pocket {
            box-sizing: border-box;
            position: relative;
        }

        /* 포켓1, 포켓3, 포켓5 이미지 스타일 */
        .pocket img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 포켓1, 포켓3, 포켓5 기본 스타일 (모바일) */
        .pocket1, .pocket3, .pocket5 {
            width: 100%;
            height: 50%;
        }

      /* 포켓2 스타일 */
.pocket2 {
    background-color: #ffd700; /* 포켓2의 배경색 */
    width: 100%;
    height: 50%;
    color: black;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
}

/* 포켓4 스타일 */
.pocket4 {
    background-color: #daa520; /* 포켓4의 배경색 */
    width: 100%;
    height: 50%;
    color: black;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
}

/* 포켓6 스타일 */
.pocket6 {
    background-color: #00FA9A; /* 포켓6의 배경색 */
    width: 100%;
    height: 50%;
    color: black;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
}

        /* 포켓2, 포켓4, 포켓6 텍스트 초기 상태 */
        .pocket2 p, .pocket4 p, .pocket6 p {
            opacity: 0;
            transform: translateY(-30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
            margin: 10px 0;
        }

        /* 활성화 상태에서 텍스트 보이도록 설정 */
        .pocket2.active p, .pocket4.active p, .pocket6.active p {
            opacity: 1;
            transform: translateY(0);
        }

        /* 포켓2, 포켓4, 포켓6 버튼 스타일 */
        .shop-btn {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border-radius: 50%;
            margin-top: 20px;
            text-decoration: none;
        }

        /* 피씨 버전 포켓 레이아웃 */
        @media only screen and (min-width: 1201px) {
            .pocket1, .pocket3, .pocket5 {
                width: 50%;
                height: 100%;
                float: right;
            }
            .pocket2, .pocket4, .pocket6 {
                width: 50%;
                height: 100%;
                float: left;
            }

            /* PC 버전에서 box2의 포켓 위치 좌우 반전 */
            .box:nth-child(2) .pocket3 {
                float: left; /* pocket3를 왼쪽 정렬 */
            }
            .box:nth-child(2) .pocket4 {
                float: right; /* pocket4를 오른쪽 정렬 */
            }
        }

        /* 네비게이션 점 스타일 */
        .nav-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 5;
        }

        .dot {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: width 0.3s ease;
        }

        .dot.active {
            width: 20px;
            background-color: white;
        }

        /* 화살표 스타일 */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            z-index: 10;
        }

        .arrow.left {
            left: 10px;
        }

        .arrow.right {
            right: 10px;
        }
				
				/* 블럭4 스타일 */
        .block4 {
            width: 80%;
            height: 50px;
            margin-top: 20px; /* 블럭3 아래에 위치 */
            position: relative;
            overflow: hidden; /* 텍스트가 박스를 넘지 않도록 숨김 */
        }
				
				   /* 피씨 버전에서 블럭3과 블럭4 사이 여백 추가 */
        @media only screen and (min-width: 1201px) {
            .block4 {
                margin-top: 0; /* 블럭3과 블럭4 사이에 10px 여백 추가 */
            }
        }

        /* 모바일 페이지에서 가로 100% */
        @media only screen and (max-width: 1200px) {
            .block4 {
                width: 100%; /* 모바일 페이지에서 가로 100% */
            }
        }

        /* stream1 스타일 */
        .stream1 {
            width: 100%;
            height: 40px;
            line-height: 40px; /* 텍스트가 박스 안에서 중앙에 위치 */
            color: brown;
            font-size: 25px;
            white-space: nowrap; /* 텍스트 줄바꿈 방지 */
            position: absolute;
            top: 0;
            animation: marquee 25s linear infinite; /* 텍스트가 무한히 움직이는 애니메이션 */
        }

        /* 텍스트 이동 애니메이션 */
        @keyframes marquee {
            0% {
                transform: translateX(20%); /* 텍스트가 오른쪽에서 시작 */
            }
            100% {
                transform: translateX(-100%); /* 텍스트가 왼쪽으로 사라짐 */
            }
        }

        /* 텍스트 멈춤 효과 (애니메이션 일시 정지) */
        .stream1.pause {
            animation-play-state: paused;
        }


		/* menu */
        h1 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 20px;
        }
        /* 대분류 스타일 */
        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu-list > li {
            background: linear-gradient(to right, #6a11cb, #2575fc); /* 그라데이션 배경 */
            color: white; /* 텍스트 색상 */
            padding: 15px;
            margin: 5px 0;
            font-size: 1.2em;
            cursor: pointer;
            border-radius: 8px; /* 둥근 모서리 */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 추가로 버튼 효과 */
            transition: transform 0.2s, box-shadow 0.2s; /* 클릭 시 애니메이션 효과 */
        }
        .menu-list > li a {
            text-decoration: none;
            color: white; /* 링크 텍스트 색상 */
            display: block;
        }
        .menu-list > li:hover {
            transform: translateY(-3px); /* 호버 시 버튼이 올라오는 효과 */
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 호버 시 그림자 강도 증가 */
        }
        /* 소분류 리스트 숨김 및 스타일 */
        .sub-list {
            display: none; /* 기본적으로 숨김 */
            list-style: none; /* 불릿 제거 */
            margin: 10px 0; /* 상하 마진 */
            padding: 0 20px; /* 좌우 패딩 */
        }
        .sub-list li {
            background-color: #f1f1f1; /* 서브 메뉴 배경색 */
            color: #333; /* 서브 메뉴 텍스트 색상 */
            padding: 10px;
            margin: 3px 0;
            font-size: 1em;
            border-radius: 5px;
            transition: background-color 0.2s;
        }
        .sub-list li a {
            text-decoration: none;
            color: #555;
        }
        .sub-list li:hover {
            background-color: #e2e2e2; /* 서브 메뉴 호버 시 색상 변화 */
        }





				
/* 블럭5 스타일 */
.block5 {
    width: 80%;
    margin: 20px auto; /* 가운데 정렬 및 상단 여백 */
    background-color: #fff; /* 배경색을 흰색으로 변경 */
    border-radius: 10px; /* 모서리 둥글게 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
    overflow: hidden; /* 넘치는 부분 숨김 */
}

/* 데스크톱에서 오른쪽 메뉴와 간격 조정 */
@media only screen and (min-width: 1201px) {
    .block5 {
        margin-right: 20%; /* block2(메뉴) 너비(20%)만큼 여백 */
    }
}

/* 모바일에서 너비 100% */
@media only screen and (max-width: 1200px) {
    .block5 {
        width: 100%;
        margin: 20px 0; /* 모바일에서 좌우 여백 제거 */
    }
}

/* foodlist 스타일 */
.foodlist {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* 첫 번째 줄 (타이틀) */
.foodlist-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    color: #333;
    border-bottom: 2px solid #ff6f61; /* 타이틀 아래 선 추가 */
}

/* foodlist-container (슬라이드 그룹) */
.foodlist-container {
    display: flex;
    width: max-content;
    gap: 20px; /* 박스 간 간격 넓힘 */
    padding: 20px 0;
    transition: transform 0.5s linear;
    overflow-x: auto; /* 가로 스크롤 가능 */
    -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 */
}

/* foodbox 스타일 */
.foodbox {
    width: 200px; /* 너비 조정 */
    border: none; /* 빨간 테두리 제거 */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
    transition: transform 0.3s ease; /* 호버 효과 */
}

.foodbox:hover {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
}

/* foodbox 안의 이미지 컨테이너 */
.foodbox-image {
    width: 100%;
    height: 150px; /* 고정 높이 설정 */
    overflow: hidden;
    border-radius: 8px;
}

/* foodbox 안의 이미지 */
.foodbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 채우기 */
}

/* foodbox 안의 텍스트 */
.foodbox-text {
    text-align: center;
    margin: 5px 0;
}

.foodbox-text.title {
    font-size: 16px; /* 제목 크기 조정 */
    font-weight: bold;
    color: #333;
}

.foodbox-text.subtitle {
    font-size: 14px; /* 부제목 크기 조정 */
    color: #666;
}

.foodbox-text.price {
    font-size: 16px;
    font-weight: bold;
    color: #ff6f61; /* 가격 강조 색상 */
}









	/* 블럭6 스타일 */
        .block6 {
            width: 80%;
            height: 50px;
            margin-top: 20px; /* 블럭5 아래 위치 */
            position: relative;
            overflow: hidden;
        }

        /* 모바일 페이지에서 블럭6 너비 100% */
        @media only screen and (max-width: 1200px) {
            .block6 {
                width: 100%; /* 모바일 페이지에서는 너비 100% */
            }
        }

        /* stream2 스타일 (블럭6용) */
        .stream2 {
            width: 100%;
            height: 45px;
            line-height: 50px;
            color: brown;
            font-size: 25px;
            white-space: nowrap; /* 텍스트 줄바꿈 방지 */
            position: absolute;
            top: 0;
            animation: marquee2 25s linear infinite;
        }

        /* 텍스트 이동 애니메이션 (블럭6용) */
        @keyframes marquee2 {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        /* 텍스트 멈춤 효과 (블럭6용) */
        .stream2.pause {
            animation-play-state: paused;
        }
				
				
				
				/* 블럭7 스타일 */
       /* 블럭7 스타일 (피씨 버전에서 80% 너비) */
        /* 블럭7 스타일 (피씨 버전에서 80% 너비) */
        .block7 {
            width: 80%; /* 피씨 버전에서 너비 80% */
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            margin-left: 0;
            height: 500px; /* 총 높이 */
            box-sizing: border-box;
        }

        /* jeilbox1, jeilbox2 스타일 */
        .jeilbox1, .jeilbox2 {
            width: 50%; /* 피씨 버전에서 각각 50% 너비 */
            height: 100%; /* 피씨 버전에서 높이 100% */
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        /* jeilbox1 (로고) */
        .jeilbox1 img {
            width: auto;
            height: 80%;
        }

        /* jeilbox2 (텍스트 및 버튼) */
        .jeilbox2 {
            flex-direction: column;
            text-align: center;
            background-color: pink; /* jeilbox2의 배경색을 분홍색으로 설정 */
        }

        .jeilbox2 p {
            font-size: 20px;
            margin: 10px 0;
        }

        .jeilbox2 button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #5CFFD1;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .jeilbox2 button:hover {
            background-color: #FFA500;
        }

        /* 모바일 버전 설정 (위아래로 배치, 각 높이 50%) */
        @media only screen and (max-width: 1200px) {
              .block7 {
        display: flex;
        flex-direction: column; /* 위아래 배치 */
        width: 100%; /* 모바일에서 너비 100% */
        height: 100vh; /* 모바일에서 전체 화면 높이로 설정 */
    }

    .jeilbox1, .jeilbox2 {
        width: 100%; /* 모바일에서 각각 너비 100% */
        flex: 1; /* 각각 높이 50%로 설정 (화면을 2등분) */
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
		
		/* jeilbox1의 로고 사이즈를 50%로 줄이기 */
    .jeilbox1 img {
        width: 70%; /* 모바일 페이지에서 로고 사이즈를 50%로 줄임 */
        height: auto;
    }

    .jeilbox2 {
        background-color: #8C92AC; /* jeilbox2의 배경색을 분홍색으로 설정 */
    }

    .jeilbox2 button {
        font-size: 14px;
    }
        }
				

/* 피씨 버전 설정 */
        .footer {
            display: flex;
            justify-content: space-between; /* 피씨 버전에서 한 줄에 nemo1, nemo2, nemo3 배치 */
            width: 80%; /* 피씨 버전에서 너비 80% */
            height: 200px; /* 고정된 높이 */
            background-color: skyblue; /* 배경색 하늘색 */
            padding: 20px;
            box-sizing: border-box;
   margin-left: 0; /* 왼쪽 여백 없음 */
    margin-right: auto; /* 오른쪽 여백이 자동으로 설정됨 */
        }

        .nemo {
            width: 30%; /* 각 박스 너비를 30%로 설정 */
            display: flex;
            flex-direction: column; /* 각 박스 내부 콘텐츠를 세로로 배치 */
            justify-content: center; /* 박스 안의 콘텐츠를 가운데 정렬 */
            align-items: flex-start;
            box-sizing: border-box;
        }

        .nemo a {
            text-decoration: none;
            color: black;
            font-size: 16px;
            margin-bottom: 10px;
        }

        /* 이메일과 전화번호 아이콘 */
        .nemo3-icons a {
            display: flex;
            align-items: center;
            gap: 5px;
            color: black;
            text-decoration: none;
        }

        .email-icon::before {
            content: "📧"; /* 이메일 이모티콘 */
        }

        .phone-icon::before {
            content: "📞"; /* 전화기 이모티콘 */
        }

        /* 모바일 버전 설정 */
@media only screen and (max-width: 1200px) {
    .footer {
        display: flex;
        flex-direction: column; /* 상하로 배치 */
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    /* nemo1과 nemo2를 한 줄에 배치 */
    .nemo-container {
        display: flex;
        flex-direction: row; /* 좌우로 배치 */
        justify-content: space-between; /* 좌우로 간격 확보 */
        align-items: flex-start; /* 상단에 정렬 */
        width: 100%;
				        flex-wrap: nowrap;
    }

    .nemo1, .nemo2 {
        width: 100%; /* 좌우 배치를 위해 너비 48% 설정 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
				text-align: center; /* 텍스트 중앙 정렬 */
        box-sizing: border-box;
    }

    /* nemo3은 그 아래에 배치 */
    .nemo3 {
        width: 100%; /* 전체 너비 */
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }
}


/* 회사소개 버튼 스타일 */
/* 부모 요소 스타일 */
.jeilbox2 {
    position: relative; /* 버튼을 부모 기준으로 배치하기 위한 설정 */
    max-width: 600px;
    margin: 0 auto; /* 가운데 정렬 */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.jeilbox2 p {
    margin: 10px 0;
    font-size: 18px;
    color: #333;
}

/* 버튼 스타일 */
#navigateButton {
    position: absolute; /* 부모 요소 내부에서 고정 */
    bottom: 20px; /* 부모 요소의 아래에서 20px */
    left: 50%; /* 가로 중앙 정렬 */
    transform: translateX(-50%); /* 중앙 정렬 */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

#navigateButton:hover {
    background-color: #45a049;
}



/* 유튜브 섹션 전체 스타일 */
.youtube-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
}

/* 컨테이너: 기본 스타일 */
.youtube-container {
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: flex-start; /* 상단 정렬 */
}

/* 유튜브 영상 스타일 (왼쪽) */
.youtube-video {
    width: 100%;
}

/* 유튜브 영상 크기 조정 */
.youtube-video iframe {
    width: 100%;
    height: 315px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 제품 설명 스타일 (오른쪽) */
.product-description {
    padding: 20px;
}

.product-description h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

.product-description p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.product-description ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.product-description ul li {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

.product-description ul li strong {
    color: #333;
}

.product-description .shop-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff6f61;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.product-description .shop-btn:hover {
    background-color: #e65b50;
}

/* 미디어 쿼리 - 모바일 버전 (1201px 이하) */
@media only screen and (max-width: 1201px) {
    .youtube-container {
        max-width: 100%;
        flex-direction: column; /* 세로 배치 */
        gap: 20px;
    }

    .youtube-video {
        max-width: 100%;
    }

    .youtube-video iframe {
        height: auto;
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }

    .product-description {
        text-align: center;
        padding: 10px;
    }
}

/* 미디어 쿼리 - 데스크톱 버전 (1201px 이상) */
@media only screen and (min-width: 1201px) {
    .youtube-container {
        max-width: calc(80% - 40px); /* 전체 너비의 80%에서 패딩 고려 */
        flex-direction: row; /* 가로 배치 */
        justify-content: space-between; /* 좌우 균등 배치 */
    }

    .youtube-video {
        flex: 0 0 50%; /* 영상 너비 50% 고정 */
        max-width: 560px; /* 최대 너비 제한 */
    }

    .product-description {
        flex: 0 0 45%; /* 설명 너비 45% 고정 */
        max-width: 500px; /* 최대 너비 제한 */
    }

    /* block2(메뉴)가 오른쪽에 고정되어 있으므로 여백 확보 */
    .youtube-section {
        margin-right: 20%; /* block2 너비(20%)만큼 여백 */
    }
}