<style type="text/css">
		html{font-family: 'Noto Sans KR', sans-serif; font-family: 'Noto Serif KR', serif;}
		@font-face {
    	font-family: 'HSBombaram3_Regular';
    	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.1/HSBombaram3_Regular.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
}
	html{}
		body, h1, h2, h3, img, p{margin:0 auto; letter-spacing: -0.06rem}
		header, section, footer{margin:0;}
		h1{font-family: 'HSBombaram3_Regular'; font-weight: 100;
			line-height: 1.1}
		p{font-family: 'Noto Serif KR'; font-weight: 300}
		h2{font-family: 'Noto Serif KR'; font-weight: 700}
		h3{font-family: 'Noto Serif KR'; font-weight: 400;
			line-height: 1.8;}

		img{max-width: 100%}

@media (max-width: 768px) {
     section, h1, h2, h3, h4, h5, p {word-break: keep-all; text-align: center;}
      
      p {font-size: 14px; }
      img { max-width: 100%;
        height: auto;}
    }
 @media screen and (max-width: 480px) {   section, div {
    width: 100%;}
}

	/* 메뉴 */
	.header {display:flex;
			flex-direction: column;
			align-items: center;
			background: var(--bgbrown); 		}
	.logo img{margin-top: 50px;
			max-width: 80px;
			display: flex; justify-content: center	}
	.menu { text-align: center;
			color: navy;
			justify-content: center;
			height: 110px;
			width: 100%; 			}
	.menu ul {display: inline-block;
  			list-style: none;
  			padding: 0;
  			margin: 30px;
  			font-family: 'Noto Serif KR'}
	.menu li {
			display: inline-block;
			margin: 0 10px; 			}
	.menu li a {
			display: inline-block;
			padding: 15px;
			text-decoration: none;
			color: var(--navy);
			font-size: 1.1rem;
			font-weight: bold ; 		}		
	.menu li a:hover {color: gold;}

	.background01{
		width: 100%;
		height: 85vh;
		background-image: url("../img/back01.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding: 0;
		text-align: center;
		align-items: center; 	}
	
	.background01 h1{font-family: 'HSBombaram3_Regular';
					font-weight: 100;
					font-size: 6rem;
					position: relative; top:25vh;}
	.background01 p{font-size: 2rem;
					position: relative; top: 35vh}

	section {background: var(--bgbrown)}
	
	div .header, .category1, .category2, .pa2, .hand .title .bag1 .b1-1button .b1-2 .b2-1 .b2-3 .b3-12{width:100%; width: 1100px; margin:0 auto}
	.pa1 {height: 79vh;
		background: var(--bgbrown);
		background-size: 100%;
		color: var(--textbrown);}
	.pa1 h2{font-size: 2.8rem;
			position: relative; top:33vh;
			text-align: center;
			font-weight: 500}


	.category1 {height: 140vh;
			padding-lef: 15vw; background: white; position: relative;
			color: var(--textbrown)}

	.category1 img {width: 100%; 
		margin-top: 10vh;
		max-width: 70%; height: auto;
				position: absolute; left: 75.5vh ; top: 15vh; right: 0;animation: moveUpDown 1s ease-in-out alternate infinite;
				}
	.category1-pa h1{font-size: 6rem; 
					position: relative; top: 18vh}
	.category1-pa p {font-size: 1.4rem;					position: relative; top: 19vh}
	.category1-pa h2{font-size: 2.3rem;					position: relative; top: 28vh}
	.category1-pa h3{font-size: 1.5rem;					position: relative; top: 41vh}


	.category2 {height: 140vh;
			padding-righ: 15vw;
			position: relative;
			color: var(--textbrown)}
	.category2 img {max-width: 80%; height: auto;
				position: absolute; ; top: 0vh; left: -17vw;
				animation: slide-in 2s running forwards alternate infinite cubic-bezier(.11,.38,.52,1.02);} 
		.category2 img:hover {animation-play-state: paused;}

		@keyframes slide-in {
  		0% {
   		transform: translateX(-60%);
 		 }
 		100% {
  		transform: translateX(0);
  		}
		}


	.pa2back {width: 100%; box-sizing: border-box; background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,0.6139705882352942) 0%, rgba(188,206,221,1) 38%, rgba(255,255,255,1) 100%);}
	.pa2 {height: 170vh; color: var(--textbrown);
		}
	.pa2 h3{font-size: 2.4rem;
			position: relative; top:vh;
			text-align: center;
			line-height: 3.2rem
			;font-weight: 500;}
	.pa2 h4{font-size: 2.2rem;
			position: relative; top:30vh;
			text-align: center;
			font-family: "Noto Serif KR"
			;font-weight: 500; opacity: 0.66}

	.title {height: 45vh; color:var(--textbrown)}
	.title h1{font-size: 7rem;
			text-align: center;position: relative; top:5vh;}
	
	.title-1 {width:1000px; margin: 0 auto;  padding: 5vh; color:var(--textbrown)}
	.title-1 h2{font-size: 2.3rem;
			position: relative; top:23vh;
			text-align: center;}
	.title-1 img{width: 160px; position: relative; top: 18vh;transition: transform 1s linear;animation: pulse 1.5s infinite alternate;}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}

	.title-1 h3{font-size: 1.5rem;
			position: relative; top:30vh;
			text-align: center;}

	.box3 {height: 100vh;display:flex; flex-wrap: wrap; justify-content: center; position: relative; top: 35vh;
		color:var(--textbrown)}
	.box {background-color: white;
		border-radius: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
		padding:9px;
		margin-right: 40px; 
		width:230px; height: 52.5vh;
		text-align: center;
		transition: transform 0.5s ease-in-out;}
	.box:hover {transform: scale(1.1);}

a{text-decoration: none; color: inherit}

	.box h1,h5,p{margin:0}
	.box h1{font-size: 1.6rem;margin-top: 4vh; font-weight:}
	.box h5{font-family: "Noto Serif KR";font-size: 0.8rem; margin-top: 4vh; font-weight:200}
	.box p{font-size: 0.9rem; margin-top: 4vh; font-weight:400}
	.box img {width: 150px; margin-top: 2.5vh;}

	@media (max-width: 480px) {
  		.box3 {
   		 flex-direction: column;
   		 align-items: center;
  		}
  
  		.box {
    		width: 100%;
  			margin-top: vh
  			}
  		.box h4, h5 {display: none;
			}
  		}

	.hand {width: 1100px; height: 150vh; position: relative; margin:0 auto; color:var(--textbrown)}
	.hand h3 {font-size: 2.2rem;
					margin-left: vw;
					font-weight: 500;
					line-height: 1.6; margin-top: 10vh}
	.hand h2 {font-size: 4.5rem;
						text-align: center;
						line-height: 5rem;
						margin-top: 28vh;
		text-shadow: 0 0 50px rgba(255, 255, 255, 1),0 0 60px rgba(255, 255, 255, 1),0 0 70px rgba(255, 255, 255, 1);; color:var(--navy)}
	.hand h1 {font-size: 6rem; margin-righ: 15vw; text-align: right; margin-top: 20vh}
  	.hand {
		  background-image: url("../img/hand.PNG");
		  background-repeat: no-repeat;
		  background-position: center center;
		  
		  padding: 40px;
		  animation: background-pulse 2s linear infinite;
			}

@keyframes background-pulse {
  0% {
    background-size: 65% auto;
  }
  50% {
    background-size: 70% auto;
  }
  100% {
    background-size: 65% auto;
  }
}

.background02{
		width: 100%;
		height: 100vh;
		background-image: url("../img/back02.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding: 0;
		text-align: right;
		align-items: right;

	}

	.background02-1 {width:1100px; margin: 0 auto; position: relative;}
	.background02-1 h1{font-family: 'HSBombaram3_Regular';
					font-weight: 100;
					font-size: 6rem;
					position: relative; top:25vh;}
	.background02-1 p{font-size: 2rem;
					position: relative; top: 35vh;
					opacity: 0.88;}

	.background02 img { width: 30%; position: relative; left: -60vw; top: -15vh}

div.b10 {height: 80vh;text-align: center;padding-top: 30vh; position: relative;
	overflow: hidden; color:var(--textbrown)}
.b10 h1 {font-size:7em; margin-top: }
.b10 img {width: 50%;}
/* 모든 이미지 */
.b4-1box img {
  position: absolute;
 
  left: 0;
  opacity: 0;
  transition: opacity 1s linear; /* opacity 값이 변경될 때 1초간 부드러운 전환 효과를 지정합니다. */
}

/* 활성 이미지 */
.b10 img.active {
  opacity: 1;
}

/* 이미지 전환 */
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 애니메이션을 이미지에 적용 */
.b10 img:nth-child(1) {
  animation: fade 2s alternate infinite;
}

.b10 img:nth-child(2) {
  animation: fade 2s  alternate infinite;
  animation-delay: 1s;
}

.b10 img:nth-child(3) {
  animation: fade 2s alternate infinite;
}

.b10 img:nth-child(4) {
  animation: fade 2s  alternate infinite;
  animation-delay: 1s;
}

/* 자동으로 다음 이미지로 전환하기 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.b10 img.active {
  animation-name: rotate;
  animation-duration: infinite; 
  animation-iteration-count: infinite;
}



.b1-1{
		width: 100%;
		height: 150vh;
		background-image: url("../img/back02.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding-top: 15vh;
		text-align: center;
		align-items: center;
		}
.b1-1 h1{	font-weight: 100;
					font-size: 4.5rem;
					color: orange ;}
.b1-1 h3{	font-size: 2rem; margin-top: 1vh}
.b1-1 p{font-size: 1.3rem; opacity: 0.66; margin-top: 5vh}
.b1-1 img{width: 50%}

.b1-container {width: 800px; margin:0 auto;
  text-align: center;
}

.b1-1button { width:100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  
}

.b1 { font-family: 'Noto Serif KR';  font-size: 1.3rem;font-weight: 700;
	width: 140px; height: 50px;
  margin: 10px;
  background-color: white;
  color: var(--navy);
  border-radius: 25px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  border:none;
}

.b1:hover {
  background-color: orange;
  color: white;}


.b1-2button { width:100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.b12{ font-family: 'HSBombaram3_Regular'; font-weight: 100; font-size: 2.4rem;
	width: 320px; height: 75px;
  margin-top: 8vh;
  background-color: orange;
  color: white;
  border-radius: 50px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  border: none;
}

.b12:hover {
  background-color: ;
  color: var(--navy);}


div.b1-2 {height: 70vh;text-align: center;padding-top: 30vh; position: relative;
	overflow: hidden;
	background-color: var(--skyblue);
	margin-top: 10vh;
color: var(--navy); }
.b1-2 h2 {font-size: 2.8rem; margin-top: 10vh;
	text-shadow: 0px 0px 50px rgba(255, 255, 255, 1),0px 0px 50px rgba(255, 255, 255, 1),0px 0px 20px rgba(255, 255, 255, 1),0px 0px 15px rgba(255, 255, 255, 1);font-weight: 600}
.b1-2 img {width: 40%; animation: move 2.5s ease-in-out infinite alternate; }

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0, 0);
  }
}


div .b2-1 {text-align: center;
			width: 100%; height: vh; display: flex;
  justify-content: center;
  position: relative;
  background: #f1f0ee;
	 }
	.b2-1 h3 {text-align: center;font-size: 2rem; font-weight: 500;margin-top: 20vh; color: var(--textbrown); margin-bottom: 10vh;
		line-height: 2.75rem}
	.b2-1 h2 {text-align: center;
		font-size: 2.3rem; margin-top: 50vh; }
	.b2-1 img {width: 15%;display: flex; margin-top: 20vh;
  justify-content: center;
	animation: move 3s ease-in-out infinite alternate; }

.b2-2{
		width: 100%;
		height: 110vh;
		background-image: url("../img/back05.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding-top: 15vh;
		text-align: center;
		align-items: center; 
		position: relative;
		margin: 0 auto;
		}
.b2-2 h1{	font-weight: 100;
					font-size: 4.5rem;color: gold;}
.b2-2 h3{	font-size: 2rem; margin-top: 1vh}
.b2-2 p{font-size: 1.3rem; opacity: 0.66; margin-top: 75vh}
.b2-2 img{width: 45%; position: absolute; top: 40vh;left:15vw}

.b2-wrapper {position:relative;
				width:1200px; margin:0 auto; margin-top: 5vh}
.b2-container {width: 400px; 
  text-align: center; 
  position: absolute; right:0;
}

.b2 { font-family: 'Noto Serif KR';  font-size: 1.3rem;font-weight: 700;
	width: 140px; height: 50px;
  margin: 10px;
  background-color: white;
  color: var(--navy);
  border-radius: 25px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  border:none;
}

.b2:hover {
  background-color: gold;
  ;}

.b22{ font-family: 'HSBombaram3_Regular'; font-weight: 100; font-size: 2.4rem;
	width: 320px; height: 75px;
  margin-top: 8vh;
  background-color: gold;
  color: white;
  border-radius: 50px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  position: absolute; top: 45vh;right:2vw;
  border:none;
}

.b22:hover {
  background-color: gold;
  color: navy;}


div.b2-3{height: 80vh; width: ;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	text-align: center;
	margin-top: 15vh;
	color: var(--textbrown)}
.b2-3 h2 {font-size: 1.8rem; margin-top: 10vh;
	}
.b2-3 h1 {font-size: 4rem}
.b2-3 h3 {font-family: "HSBombaram3_Regular";
	font-size: 2.2rem}
.b2-3 p{margin-top: 4vh; font-weight: 600; font-size: 1.5rem;
	color: var(--yellow)}

.b2-1box {width:333px;}

.b2-3boxwrapper {display: flex;
			justify-content: space-between;width:1100px; margin:0 auto}
.b2-3box {margin-top: 7vh;

	border-radius: 50px;
  box-shadow: 0px 0px 20px rgba(80, 80, 70, 0.33);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}
.b2-3box:hover {
  transform: scale(1.1);
}

.b2-3box img {
  display: block;
  max-width: 100%;
  height: auto;
}
.b2-3box h1 {font-size: 2rem; font-weight: 100; margin-top: 1.3vh}

div.b3-1{
	text-align: center;
	width: 100%;
	background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,0.6139705882352942) 0%, rgba(188,206,221,1) 38%, rgba(255,255,255,1) 100%);
		height: 65vh;
		}

	.b3-1 h2{font-family:'HSBombaram3_Regular'; font-weight: 100;
		font-size: 3rem;
		margin-top: 40vh;
		text-align: center;}
	.b3-1 h1{font-size: 5rem;
			position: relative;
			top:7vh;
			text-align: center;}

.background03{
		width: 100%;
		height: 100vh;
		background-image: url("../img/back04.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding: 0;
		text-align: right;
		align-items: right; 	}

	.background03-1 {width:1100px; margin: 0 auto; position: relative;}
	.background03-1 h1{font-family: 'HSBombaram3_Regular';
					font-weight: 100;
					font-size: 4rem;
					position: relative; top:50vh;}
	.background03-1 p{font-size: 1.8rem; position: relative; top: 55vh; color:white; font-weight: 400}
	

.b3-2 {height: 100vh;
			background: white; position: relative; text-align: left; color: var(--navy)}
	.b3-2 img {height: auto; width:40%;
				position: absolute; top: 3vh
				; left: 10vw;				}
	{ width: 30%; position: relative; left: -60vw; top: -15vh}

		.b32p {width: 400px; margin:0 auto; position: relative; left: 20vw}
	div.b32p h1{font-size: 4rem; 
					position: relative; top: 23vh}
	div.b32p p {font-size: 1.4rem;
					position: relative; top: 19vh; left:0.3vw; color:var(--navy)}
	div.b32p h2{font-size: 2.5rem;
					position: relative; top: 43vh; font-weight: 600;
					opacity: 0.66}

.b3-3{
			width: 100%;
		height: 110vh;
		background-image: url("../img/back04.png");
		background-size: 100%;
		background-position: center;
		color: white;
		padding-top: 15vh;
		text-align: center;
		align-items: center; 
		position: relative;
		margin: 0 auto}
.b3-3 h1{	font-weight: 100;
					font-size: 4.5rem;
					color: lightblue}
.b3-3 h3{	font-size: 2rem; margin-top: 1vh; font-family: "Noto Serif KR"}
.b3-3 p{font-size: 1.3rem; opacity: 0.66; margin-top: 75vh; color: white; position: absolute; left:19vw}
.b3-3 img {width: 30%; position: absolute; top: 32vh;right:20vw}}

.b3-wrapper {position:relative;
				width:1100px; margin:0 auto}

.b3-container {width: 400px; 
  text-align: center; 
  position: absolute; left:17.5vw; top: 40vh;
}

.b3-1button { width:100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
}
.b31 { font-family: 'Noto Serif KR';  font-size: 1.1rem;font-weight: 700;
	width: 140px; height: 50px;
  margin: 10px;
  padding: 
  background-color: white;
  color: navy;
  border-radius: 25px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  border: none;
}

.b31:hover {
  background-color: lightblue;
  color: white;}

.b3-2button { width:100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.b32{ font-family: 'HSBombaram3_Regular'; font-weight: 100; font-size: 2.4rem;
	width: 320px; height: 75px;
  margin-top: 8vh;
  background-color: lightblue;
  color: white;
  border-radius: 50px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  position: absolute; top: 85vh;
  left:20vw;
  border:none;
}

.b32:hover { background-color: lightblue; 
  color: var(--navy);}


.b3-4box1 { width: 600px;height: 200px;
	margin-top: 10px; 
	border-radius: 50px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); background-color: white;
	}

.b3-4box2 {width: 560px;height: 200px;
	margin-top: 7vh; border-radius: 50px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); position: absolute;
  left: 30vw; top: 10vw;
  background-color: white;
}

.b3-4box3 {width: 600px;height: 180px;
	margin-top: 7vh; border-radius: 50px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);background-color: white;
   position: absolute;
  top: 15vw; left: 10vw;
}

.b3-4 h2 {font-family: 'HSBombaram3_Regular';font-size: 1.6rem; font-weight: 100;
	position: absolute; left: 50px; top: -40px
	}
p.b3-4p {font-size: 1.3rem; position: absolute; left: 50px; top: 55px; font-weight: 500; color: var(--textbrown);}


.b3-4 {position: relative; text-align: left; margin-top: 10vh}
.b3-4:nth-of-type(1) {
  top: 0;
  animation: moveUpDown 1s ease-in-out infinite alternate;
}
.b3-4box2:nth-of-type(2) {
  top: 50px;
  animation: moveUpDown 1s ease-in-out infinite alternate
  ; animation-delay: 0.5s;
}
.b3-4:nth-of-type(3) {
  top: 100px;
  animation: moveUpDown 1s ease-in-out infinite alternate;
}
@keyframes moveUpDown {
  from {
    top: 0;
  }
  to {
    top: 10px;
  }
}

div.b3-41{height: 100vh; width: 1100px;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	text-align: center;
	
	margin-top: 15vh}
.b3-41 h2 {font-size: 2rem; margin-top: 10vh;
	}
.b3-41 h1 {font-size: 4rem}



div.b4-1{height: 120vh; width: 1100px;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	text-align: center;
	background: ;
	margin-top: 15vh}

.b4-1 h1 {font-size: 3rem; margin-top: 25vh;
	}

.b4-1boxwrapper {display: flex;
			justify-content: space-between; }
.b4-1box {margin-top: 10vh; border-radius: 20px;
	width: 333px; height: 333px; margin:;
  box-shadow: 0px 0px 20px rgba(60, 120, 200, 0.33); position: relative;
}

.b4-1box img {
  display: flex; position: absolute;
  top:7.5vh;
  width: 110%;}

/* 모든 이미지 */
.b4-1box img {
  position: absolute;
 
  left: 0;
  opacity: 0;
  transition: opacity 1s linear; /* opacity 값이 변경될 때 1초간 부드러운 전환 효과를 지정합니다. */
}

/* 활성 이미지 */
.b4-1box img.active {
  opacity: 1;
}

/* 이미지 전환 */
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 애니메이션을 이미지에 적용 */
.b4-1box img:nth-child(1) {
  animation: fade 5s alternate infinite;
}

.b4-1box img:nth-child(2) {
  animation: fade 5s  alternate infinite;
  animation-delay: 2.5s;
}

/* 자동으로 다음 이미지로 전환하기 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.b4-1box img.active {
  animation-name: rotate;
  animation-duration: infinite; 
  animation-iteration-count: infinite;
}


div.b4-1boxwrapper h2 {
	font-family: 'HSBombaram3_Regular';
	font-size: 1.8rem;
	font-weight: 100; margin-top: 5vh}

div.b4-1boxwrapper h4 { color: var(--navy);
	font-size: 2rem;
	font-weight: 800;margin-top: 2vh}

.b4button {font-family: "Noto Serif KR"; font-weight: 800; font-size: 1.4rem;
	width: 200px; height: 75px;
  
  background-color: white;
  color: var(--navy);
  border-radius: 50px;
  box-shadow: 0 0px 10px rgba(60, 120, 200, 0.5);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
 
  border:none;
}

.b4button:hover { background-color: lightblue}



div.b5-1{margin:0 auto;
	text-align: center;
	margin-top: 20vh;
	width: 100%;
	background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,0.6139705882352942) 0%, rgba(188,206,221,1) 38%, rgba(255,255,255,1) 100%);
		height: 100vh;
		position: relative;
		}

	.b5-1 h2{font-family:'HSBombaram3_Regular'; font-weight: 100;
		font-size: 3rem;
		text-align: center}
	.b5-1 h1{font-size: 5rem;
			position: relative;
			top:; color: var(--navy);
			text-align: center;}
	.b5-1 p{font-size: 1.7rem;
		font-weight: 400;
			position: relative;
			top:2vh; color: white;
			text-align: center;
			color:var(--textbrown)}

	.b5-1 img {width: 35%; margin-top: 5vh;
		margin-left:auto;
		animation:  move 3s ease-in-out alternate infinite;}


.b6{margin: 0 auto; align-items: center; width: 1100px; height: 50vh;}
.b6wrapper{display: flex;
				justify-content: center;}
.b61 {margin: auto; font-family: 'HSBombaram3_Regular'; font-weight: 100; font-size: 2.4rem;
	width: 320px; height: 75px;
  margin-top: 15vh;
  background-color: white;
  color: var(--textbrown);
  border-radius: 50px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  border: none;
}
.b61:hover { background-color: lightblue;
  color: var(--navy);}

.logo2 {position: relative;}
.logo2 img{position: fixed; bottom:10vh;right:10vh; width:10%}


.footer h3 {color: var(--textbrown); font-size: 2rem; padding-top: 20vh}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  border-top: 1px solid #ccc;
  padding: 20px 0;
  text-align: left;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.footer-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0;
 
}

.footer-row img {
  max-width: 100px;
  margin-left: 20px;
}

.footer-row h1 {
  margin: 0;
  margin-left: 1.5vw;
  font-size: 2rem;
}
.footerh6{
  margin: 2vw;
  font-size: 1rem;
  font-weight: 500;
}


ul {
  margin: 0;
  margin-left: 6vw;
  padding: 0;
  list-style: none;
  display: flex;
}

ul li {
  margin-right: 4vw;
}

.footer-row ul li a {
  text-decoration: none;
  color: #666;
  font-size: 1rem;
  line-height: 2rem;
  font-family: "Noto Sans KR";
}

ul li a:hover {
  color: #333;
}


.bluetext {color:var(--navy);}
.orange {color:var(--orange);}
.yellow {color:var(--yellow)}
.highlight {background-color:gold;}

:root {
	 --navy:  #0d4c89;
	 --bgbrown: #dddcd9;
	 --textbrown: #4c4542;
	 --orange: #cc6600;
	 --skyblue: #cbdbe8;
	 --yellow: #cc9933;
	}

.main{width:100%; background-color: #dddcd9; animation: color-change 8s infinite;}

@keyframes color-change {
  0% {
    background-color: #dddcd9;
  }
  50% {
    background-color: var(--navy);
  }
  100% {
    background-color: #dddcd9;
  }
}

.main1 {width: 1100px; height: 100vh;margin: 0 auto; position:relative; overflow: hidden;
	font-size: 4rem; overflow: ;

}

.left {position: absolute; top: 40vh
; left:2vw
; color: white
; text-shadow: 0 0 15px rgba(0,0,0,0.5)}

.right {position: absolute;
	top: 40vh
; right:2vw
; color: white;text-shadow: 0 0 15px rgba(0,0,0,0.5)}

.main1 img {width: %; margin: 0 auto; }


.mainb {position: absolute; top:75vh; right: 380px;
	width: 333px; height: 70px; border:none;
font-family: 'HSBombaram3_Regular'
; font-weight: 100
; font-size: 2.5rem
; border-radius: 50px
; background: white
; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
.mainb:hover{
	background: var(--textbrown);
	color: white;
}



	</style>