@font-face {font-family: "Gasoek One";
	    src: url("./GasoekOne-Regular.ttf") format("truetype");}

		@font-face {font-family: "Song Myung";
		    src: url("./font/SongMyung-Regular.ttf") format("truetype");}

		@font-face {font-family: "Noto Sans KR";
	    font-style: normal;
	    font-weight: 100 900;
	    src: url("./font/NotoSansKR-VariableFont_wght.ttf") format("truetype");}

		.stitle{font-family: "Song Myung", serif;font-weight: 200;font-style: normal; padding: 25px 35px; margin:10px;font-size: 40px; width: 60%;line-height: 1.2}
		.btitle{font-family: "Song Myung", serif;font-weight: 200;font-style: normal;padding: 15px 20px;font-size: 45px;line-height: 1.2;background: red;margin: 0;}
		.wtitle{font-family: "Noto Sans KR", serif;font-weight: 800;font-style: normal;padding: 40px 20px;font-size: 80px;line-height: 1.2;background: black;margin: 0; text-align: center;}
		.b{font-family: "Noto Sans KR"serif;font-weight: 400;font-style: normal;font-size: 14px; }
		.title{font-family: "Song Myung", serif;font-weight: 200;font-style: normal;text-align: center; min-width: 600px; font-size: 40px; margin: 20px 100px; padding: 10px;}
		.title1{text-align: center; margin: 0px; padding: 40px; width: auto; min-width: 600px; max-width: 700px; line-height: 1.6;}
		.sstitle{font-family: "Song Myung", serif;font-weight: 200;font-style: norma; font-size: 26px;  line-height: 1.2;}
		.warp{width: auto; margin: 0px; padding: 20px 20px 80px 20px; background-color: black; color: white; overflow: hidden;}
		.content{width: auto; margin: 0px; padding: 100px 20px 200px 20px; color: white; overflow: hidden;}
		.content1{width: auto; margin: 0px; padding: 100px 20px; color: white; overflow: hidden; max-width: 800px}
		.content2{width: auto; margin: 0px; padding: 400px 20px; color: white; overflow: hidden;}
		.img{margin: 0; padding: 0; width: 125%;overflow: hidden;}
		.c {text-align: center; margin: 0 auto;}
		.pp {padding: 100px 400px 100px 100px}
		.r {width: 800px; margin-left: auto; margin-right: 0; text-align: right;}
		@keyframes wiggle {
		  0%   { transform: rotate(0deg); }
		  15%  { transform: rotate(1.6deg); }
		  25%  { transform: rotate(3.2deg); }
		  50%  { transform: rotate(0deg); }
		  65%  { transform: rotate(-1.6deg); }
		  75%  { transform: rotate(-3.2deg); }
		  100% { transform: rotate(0deg); }}
		.decoration {
		  width: 400px;
		  animation: wiggle 1.2s ease-in-out infinite;}
		.center{margin: 80px 100px; width: 600px;overflow: hidden; padding: 0px;}
		.flex{display: flex; gap: 50px; overflow: hidden;}
		.flex p{width: auto;}
		.right{text-align: right;}
		.high{overflow: hidden; position: relative;}
		.line{border: solid 2px white; margin:0;}
		.w{background: white;}
		.img2{width: 460px; padding: 100px 0px}
	    .section1 {
	    display:flex;
	    justify-content:center;
	    align-items:center;
	    height:90vh;}
	    .circle-text {
	    font-family: "Song Myung", serif;font-weight: 200;font-style: normal;font-size: 24px;
	    text-transform: uppercase;
	    letter-spacing: 0.7px;}
	    .rotate {
	    animation: spin 12s linear infinite;
	    transform-origin: 50% 50%;}

	    .scroll-img {
	      position: absolute; right: 30px;top: 900px;
		  display: block;
		  margin: 0 auto;
		  width: 300px;


		  opacity: 0;
		  transform: translateX(-30px);

		  transition: all 1.2s ease-out;}

		.scroll-img.active {
		  opacity: 1;
		  transform: translateX(0);}

	    .image-wrap {
		  display: flex;
		  justify-content: center;
		  gap: 24px;}

		.image-wrap img {
		  width: 200px;
		  height: 600px;

		  object-fit: cover;}

		 .image-wrap {
		  display: flex;
		  justify-content: center;
		  gap: 24px;
		  padding: 30px;}
		.card {
		  position: relative;
		  width: 380px;
		  height: 400px;
		  overflow: hidden;
		  border-radius: 12px;

		  transition: transform 0.35s ease;}
		.card img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;

		  transition: opacity 0.35s ease;}

		.card-text {
		  position: absolute;
		  inset: 0;

		  background: rgba(0, 0, 0, 0.7);
		  color: white;

		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;

		  text-align: center;
		  padding: 16px;

		  opacity: 0;
		  transition: opacity 0.35s ease;}
		.card:hover {transform: scale(1.08);}
		.card:hover img {opacity: 0.3;filter: blur(2px);}
		.card:hover 
		.card-text {opacity: 1;}
		.lock-section {
		  position: relative;
		  overflow: hidden;
		  scroll-margin-top: 0;}

		.panel {
		  position: absolute;
		  inset: 0;

		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.6s ease;}

		.panel.active {
		  opacity: 1;
		  pointer-events: auto;}



	    @keyframes spin {
	    from { transform: rotate(360deg); }
	    to { transform: rotate(0deg); }}

	    html{scroll-behavior: smooth;}
		h1, h2, p, body, img{margin: 0; color: white;min-width: 550px;}
		body{background-color: #EF3E3E;}
		footer{margin: 50px 20px 200px 20px; padding: 0px 20px; border: 30px; border-color: red;font-family: "Noto Sans KR", sans-serif; font-weight: 400;
			font-style: normal; }
		p{font-size: 18px;padding: 10px 35px 50px 35px; max-width: 820px; width: 100%; line-height: 1.6; font-family: "Noto Sans KR", sans-serif; font-weight: 430; letter-spacing: -0.03rem;
			font-style: normal; }
		a{font-size: 1.5em; color: white; line-height: 1.6;text-decoration: none;transition: all 0.2s;}
		a:hover{font-size: 1.7em;color: red;}		
		
		h1{width: auto;height: 300px; position: relative;}
		svg{width: 100%; height: 100%;}