/*font-face*/
		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
		    font-weight: 100;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
		    font-weight: 200;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
		    font-weight: 300;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
		    font-weight: 400;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
		    font-weight: 500;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
		    font-weight: 600;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
		    font-weight: 700;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
		    font-weight: 800;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Pretendard';
		    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
		    font-weight: 900;
		    font-display: swap;
		}

		@font-face {
		    font-family: "HeinzLabel";
		    src: url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.eot");
		    src: url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.eot?#iefix")format("embedded-opentype"),
		    url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.woff2")format("woff2"),
		    url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.woff")format("woff"),
		    url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.ttf")format("truetype"),
		    url("https://db.onlinewebfonts.com/t/9dca2288b90eab8574bac33e55a45220.svg#HeinzLabel")format("svg");
		}

		@font-face {
		  font-family: "Gothic A1", sans-serif;
		  font-weight: 400;
		  font-style: normal;
		}

	/*섹션 스타일*/
		html {font-family: Pretendard; font-weight: 400; 
			line-height: 1.4705882353; word-break: keep-all; scroll-behavior: smooth;}
		body, h1, h2, h3, h4, p, ol, ul {margin: 0; padding: 0; overflow-x: hidden; }
		img {display: block; width: 100%}

		
		nav {font-family: HeinzLabel; color:white; 
			padding: 4px 0px; background: rgb(236, 45, 1);}
		nav h4 {cursor: pointer; display: block;}
		ul,il {list-style: none;}
		ul li a {text-decoration: none; display: block;
				padding: 8px 12px; color: white;
				transition: all 1s;
				font-size: 16px;}
		ul li a:hover {color: rgb(236, 45, 1); background: white;}

		section {padding-top: 160px;}
		header {padding-top:100px; padding-bottom:160px }
		header img {width:300px;  display: block; padding: 40px 40px 80px 40px; overflow: hidden;
			object-fit: contain;}
		h1 {font-family: HeinzLabel; font-size: 180px;
			color: rgb(236, 45, 1); text-align: center; line-height: 1;
			padding-top: 32px;
			}
		h2 {font-weight: 700; font-size: 60px; 
			color:rgb(87, 61, 27); text-align: center; line-height: 1.4705882353 ;}
		h3 {font-weight: 700; font-size: 40px; line-height: 1.4705882353;}
		h4 {font-weight: 600; font-size: 32px; line-height: 1.25;}
		p {font-family: Pretendard; font-weight: 400; font-size: 17px;
			padding-top: 16px;}
		footer {background: rgb(236, 45, 1); color: white;
			font-size: 13px;font-weight: 200;
			padding: 32px 0px 16px 0px; margin-top: 120px;}
		footer p {font-size: 13px; font-weight: 200;padding: 0px;}
		footer a {text-decoration: none; color: white;
				display: block; padding-right: 32px}
		footer img {width: 32px; padding : 0px 8px 8px 0px;}
		
		::selection {background-color:rgb(87, 61, 27,0.3) ; color:rgb(236, 45, 1)}

		.footer-padding-top {padding-top:45px;}

		.bg-tomato {background: url(img/bg.tomato); margin:0; padding-top: 160px; padding-bottom: 160px; background-attachment: fixed; background-size: cover;
			color: white;}
		.bg-factory {background: url(img/factory-bg.jpg) ;margin-top0; padding-top: 160px; padding-bottom: 160px;
			background-attachment:  fixed; background-size: cover; color: white}
		.center {align-content: center;}

		.bg-ketchup {background: url(img/ketchup-bg.jpg); margin: 0; padding-top: 160px; padding-bottom: 120px;  background-size: cover; color: rgb(236, 45, 1);}

	/*top버튼*/
		.page-top {position: fixed; bottom: 32px; right: 32px; 
					width: 50px; height: 50px; 
					z-index: 11000;}

	/*1-question page*/
		.margin-160 {margin-top:160px; padding-bottom:48px ;padding-top: 48px;}
		.border {border-bottom: 4px solid rgb(236, 45, 1);}
		.border-white {border-bottom: 4px solid white;}



	/*fish*/
		.section-50 {width: 50%;}
		.padding-32 {padding-left: 32px;}

		.split-container {
		    display: flex;
		    width: 100%;
		    position: relative;}


		.left-image-area {
		    width: 50%;
		    position: relative;}

		.china-fixed {
		    position: sticky; /* 화면에 고정 */
		    top: 0;
		    width: 100%;
		    height: 100vh;    /* 뷰포트 꽉 차게 */
		    object-fit: cover;
		    z-index: 10000;
		    display: block;}

		.fish-scroll {
		    position: relative; 
		    z-index: 9999;
		    width: 100%;
		    height: 100vh;
		    object-fit: cover;
		    display: block;}

		.right-text-area {
		    width: 50%;}

		.text-sticky-wrapper {
		    position: sticky; 
		    top: 0;
		    height: 100vh; 
		    display: flex;
		    flex-direction: column;
		    justify-content:flex-start; padding-top: 200px;
		    padding-left: 32px;
		    box-sizing: border-box;	}

		.text-sticky-wrapper h4, 
		.text-sticky-wrapper p { max-width: 468px;}

		
		.floating-fish {
		    position: absolute;
		    top: 75%;           
		    right: 70%;        
		    width: 300px;      
		    z-index: 10100; 
		    animation: floatAround 8s ease-in-out infinite;
		    pointer-events: none; }

		 .floating-fish2 {
			   position: absolute;
			   top: 65%;           
			   right: 60%;        
			   width: 230px;      
			   z-index: 10100; 
			   animation: floatAround 8s ease-in-out infinite;
			   pointer-events: none; }

		 .floating-fish3 {
			   position: absolute;
			   top: 70%;           
			   right: 50%;        
			   width: 200px;      
			   z-index: 10100; 
			   animation: floatAround2 8s ease-in-out infinite;
			   pointer-events: none; }

		@keyframes floatAround {
		    0%, 100% {transform: translateY(0) translateX(0) rotate(0deg);}
		    25% {transform: translateY(-30px) translateX(20px) rotate(5deg);}
		    50% {transform: translateY(20px) translateX(-10px) rotate(0deg);}
		    75% {transform: translateY(-15px) translateX(15px) rotate(-5deg); }}

		@keyframes floatAround2 {
		    0%, 100% {transform: translateY(0) translateX(0) rotate(0deg);}
		    25% {transform: translateY(30px) translateX(-20px) rotate(-5deg);}
		    50% {transform: translateY(-20px) translateX(10px) rotate(0deg);}
		    75% {transform: translateY(15px) translateX(-15px) rotate(5deg); }}
		

	/*MUSHROOM*/
	.left-text-area {
	    width: 50%;
	    background-color: white;
	    padding-right: 32px; 
	    padding-left: 310px;
	    box-sizing: border-box;}

	.right-image-area {
	    width: 50%;
	    position: relative;}

	.mushroom-fixed {
	    position: sticky;
	    top: 0;
	    height: 100vh;
	    object-fit: cover;
	    z-index: 10000;
	    display: block;}

	.mushroom-scroll {
		 position: relative; 
		    z-index: 9999;
		    width: 100%;
		    height: 100vh;
		    object-fit: cover;
		    display: block;
	       }


.rolling-mushroom2 {
    position: absolute;
    top: 15%;          
    left: 30px;      
    width: 100px;        
    z-index: 10100;
    pointer-events: none;
    transform: rotate(45deg);
    animation: shake-shroom 3s ease-in-out infinite;
}

.rolling-mushroom3 {
    position: absolute;
    bottom: 20%;       
    right: 20px;      
    width: 130px;       
    z-index: 10100;
    pointer-events: none;
    animation: shake-shroom 4s ease-in-out infinite alternate;
}



@keyframes shake-shroom {
    0% {
        transform: rotate(-10deg) translateY(0); /* 왼쪽으로 살짝 기울기 */
    }
    50% {
        transform: rotate(10deg) translateY(-10px); /* 오른쪽으로 기울며 위로 살짝 둥실 */
    }
    100% {
        transform: rotate(-10deg) translateY(0); /* 다시 원위치 */
    }
}



	/*footer style*/
		.title {font-size: 20px; font-weight: 600; }
		.padding-footer {padding: 8px 0px 0px 0px;}
		.contact-padding {padding-top: 8px;}

		.footer-left {width: 200px; margin: 0; padding: 0px 24px 0px 0px;}
		.footer-center {width: 582px; margin: 0;padding: 0px 24px 16px 0px;}
		.footer-right {width: 170px; margin: 0;}
		.footer-center2 {width: 784px; padding:16px 0px 80px 0px; }
		.footer-center3 {width: 160px;}

		.a {font-weight: 500; padding-top: 4px;}
		.padding-bottom-80 {padding-bottom: 88px;}
	

	/*color*/
		.text-red {color: rgb(236, 45, 1);}
		.text-brown {color:rgb(87, 61, 27);}
		.text-white {color: white;}
		.bg-red {background-color: rgb(236, 45, 1); color: white;}	

	/*font*/
		.colon {font-family:Gothic A1}
		.heinz {font-family: HeinzLabel; color: rgb(236, 45, 1); text-align: center;}

		.font-heinz {font-family: HeinzLabel;font-size: 80px; text-align: center}
		.bold {font-weight: 800;}
		
		.text-center {text-align: center;}
		.text-right {text-align: right;}

		.line-height {line-height:1.25; }

	/*여백 조절*/
		.width-750 {width: 750px;}
		
		.flex {display: flex; justify-content: space-between;}
		.flex2 {display: flex;}
		.wrap {width: 1000px; margin: auto;}
		.wrap2 {width: 1670px; margin: auto; }
		.text-center {text-align: center;}

		.margin-auto {margin: auto;}
		.margin-top40 {margin-top: 40px;}
		.margin-bottom32 {margin-bottom: 32px;}
		.margin-left0 {margin-left: 0px;}
		.margin-right0 {margin-right: 0px}
		.margin-bottom160 {margin-bottom: 160px;}
		.margin-auto {margin: auto;}


		.padding-top112{padding-top: 112px;}
		.padding-bottom-160 {padding-bottom: 160px}
		.padding-bottom-400 {padding-bottom: 400px}
		.img-padding-32 {padding: 32px 0px;}
		.padding-bottom-8 {padding-bottom: 8px;}
		.padding-fastfood {padding: 480px 0px 0px 0px;}
		.padding-top120 {padding-top: 120px;}
		.padding-top-8 {padding-top: 8px;}
		.padding-top100 {padding-top: 100px;}
		.padding-top50 {padding-top: 50px;}
		.padding-top200 {padding-top: 200px;}
		.padding-top300 {padding-top: 424px;}
		.padding-top0 {padding-top: 0px;}
		.padding-bottom40 {padding-bottom: 40px;padding-top: 32px;}
		

.img-pair2 {
		    position: relative; 
		    width: 300px;
		    height: auto;
		    cursor: pointer; }

	/*케첩재료*/
		.question-padding {padding-top: 80px; padding-bottom: 160px;}

		.img-pair {
		    position: relative; 
		    width: 200px;
		    height: auto;
		    cursor: pointer; }
	
		.question-img {
		    width: 200px; padding: ; 
		    display: block;   
		    transition: opacity 0.5s ease;}

		.reveal-img {
		    position: absolute; top: 50%; left: 50%; transform :translate(-50%,-50%); 
		    width: 100%;
		    z-index: 9999;}

		.cover-img {
		    position: relative; display: block;
		    top: 0;            
		    left: 0;
		    z-index: 10000;   
		    opacity: 1;
			transition: opacity 0.5s ease;}
		
		.img-pair:hover .cover-img {
		    opacity: 0;}

	/*이미지 패딩, 사이즈*/
		.heinz-size {width: 500px; justify-content: center; margin: auto;
					padding: 32px 0px;}

		.z-9999 {z-index: 9999;}
		.z-10000 {z-index: 10000;}

	/*첫번째 플레이트 애니메이션*/
		.plate-wrapper {
		    position: relative;
		    width: 360px;
		    height: 359px;}

		.ketchup-z {position: absolute; z-index: 10000;
					top: 50%; left: 50%; transform: translate(-50%, -50%);}
		.ketchup-z img {height: 440px;width: 440px;}

		.plate-text {width: 608px; height: 359px; margin:0;}
		.plate-animation {
			position: absolute; top: 0; left: 0;
			width: 360px; height: 359px;
			margin: 0px 32px 0px 0px; 
			animation: plate-animation 6s linear infinite;
			z-index: 9999;}

		@keyframes plate-animation {
			0% {background-image:url(img/frenchfries.png);transform: rotateZ(0deg);}
			33% {background-image:url(img/frenchfries.png);transform: rotateZ(360deg);}
			34% {background-image:url(img/omurice.png);transform: rotateZ(361deg);}
			66% {background-image:url(img/omurice.png);transform: rotateZ(720deg);}
			67% {background-image:url(img/hotdog.png);transform: rotateZ(721deg);}
			100% {background-image:url(img/hotdog.png);transform: rotateZ(1080deg);}
			}
	
	/*국기 애니메이션*/
		#slider {
		   overflow:hidden;
		   position:absolute;
		   width:100vw;
		   height:100px;
			z-index: 9999;}

		.image-box {
			width:7500px;
			height:100px;
			display:flex;
			flex-wrap:nowrap;
			animation: bannermove 5s linear infinite;}

		.image-box div {
			width: 150px;
			height: 100px;}

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

		@keyframes bannermove {
		  0% {transform: translateX(0);}
		  100% {transform: translateX(-1500px);}}

	/*패스푸드*/

		.fastfood-section {
		    position: relative; 
		    width: 100%;
		    height: 100vh;     
		    overflow: hidden;  
		    background-color: #fff; 
		    display: flex;     
		    justify-content: center;
		    align-items: center;
		}

		.bg-slider {
		    position: absolute; 
		    top: 50%;          
		    left: 0;
		    width: 100%;
		    height: 100px;    
		    transform: translateY(-50%); 
		    z-index: 9999;         
		    opacity: 1;     

		.image-box {
		    display: flex;
		    flex-wrap: nowrap;
		    width: max-content; 
		    animation: bannermove 20s linear infinite;
		}
		.image-box div { width: 150px; height: 100px; flex-shrink: 0; }
		.image-box img { width: 100%; height: 100%; object-fit: contain; }

		@keyframes bannermove {
		    0% { transform: translateX(0); }
		    100% { transform: translateX(-50%); }
		}

		.content-layer {
		    position: relative; 
		    z-index: 10000;       
		    width: 100%;
		    height: 100%;      
		    display: flex;
		    flex-direction: column; 
		    justify-content: center; 
		    align-items: center;    
		}


		.grow-burger {
		    display: block;
		    width: 800px;         
		    max-width: 90vw;    
		    margin-bottom: 20px;  
		    animation: grow-effect linear both;
		    animation-timeline: view();
		    animation-range: entry 0% contain 50%;
		}

		@keyframes grow-effect {
		    from {
		        transform: scale(0); 
		        opacity: 0;  
		    }
		    to {
		        transform: scale(1);
		        opacity: 1;         
		    }
		}

		.text-box {
		    text-align: center;
		    z-index: 11; /* 햄버거보다도 위에 */
		    /* 배경 슬라이더 위에서도 글씨가 잘 보이게 배경색 추가 (선택사항) */
		    background-color: rgba(255, 255, 255, 0.8); 
		    padding: 20px;
		    border-radius: 15px;
		}


	/*마지막페이지 애니메이션*/