/* 드래그 색상 */
::-moz-selection {
  background: deeppink;
  color: white;
}

::selection {
  background: deeppink;
  color: white;
}
/* 스크롤바 제거 */
body {
  overflow: hidden; /* 또는 auto */
  scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
  display: none !important;  /* Chrome, Safari */
}

body {
	font-family: "Futura-Pt", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	text-align: justify;
	height: 100vh;
}

[lang="ko"] {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  color: black;
  text-align: justify;
}

p {
	margin: 0;
	padding: 0;
}

a {
	color: black;
	text-decoration: none;
	padding: 0;
}
a:hover {
	color: deeppink;
	text-decoration: underline;
}

/* 헤더 */
header {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 2fr 2fr 2fr;
	border-bottom: 1px solid #000;
}

/* 마퀴 */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  padding: 5px 0;
  border-bottom: 1px solid #000;
}
.marquee-text,
.marquee-text-en {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 80s linear infinite;
  color: black;
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee-text:hover, 
.marquee-text-en:hover {
	color: deeppink;
}

/*컨테이너1 이미지*/
.container2 {
	position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 하단 정렬 */
  align-items: center;       /* 가운데 정렬 (필요 시) */
  position: relative;         /* 캔버스 넘침 방지 */
  overflow: hidden;
}
.image1 {
	position: absolute;
	margin: 0 !important;
	padding: 0 !important;
	width: 65%;
	text-align: center;
	object-fit: contain;
}
#myCanvas {
	width: 100%;
	height: 100%;
	background: transparent;
  display: block;
}


/* 한국어+공통 */
.container-kr {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 2fr 4fr;
	height: calc(100vh - 66px) !important;
}
@media (max-width:1024px) {
	.container-kr {
	display: grid;
	grid-template-columns: 2fr 2fr 4fr;
}
	.container1,
	.container2 {
		display: none;
	}
}

.header1,
.header2,
.header3,
.header4,
.container1,
.container2,
.container3,
.container4 {
	border-right: 1px solid #000;
	padding: 5px;
}

.header4 {
	border: none;
}

.text-container {
	margin-top: 15px;
}

.container5 {
	position: relative;
	padding: 5px;
}

.fly-text {
	position: absolute;
}
#fly-text1 {
	margin-top: 150px;
	margin-left: 0;
}
#fly-text2 {
	margin-top: 180px;
	margin-left: 15px;
}
#fly-text3 {
	margin-top: 190px;
	margin-left: 30px;
}
#fly-m1 {
  transform: rotate(340deg);
	margin-top: 190px;
	margin-left: 50px;
}
#fly-text4 {
	margin-top: 175px;
	margin-left: 70px;
}
#fly-text5 {
	margin-top: 100px;
	margin-left: 115px;
}
#fly-text6 {
	margin-top: 75px;
	margin-left: 125px;
}
#fly-text7 {
	margin-top: 55px;
	margin-left: 160px;
}
#fly-m2 {

  transform: rotate(0deg);
	margin-top: 55px;
	margin-left: 175px;
}
#fly-m3 {
  transform: rotate(5deg);
	margin-top: 56px;
	margin-left: 187px;
}
#fly-m4 {
  transform: rotate(25deg);
	margin-top: 60px;
	margin-left: 201.5px;
}
#fly-text11 {
	margin-top: 110px;
	margin-left: 240px;
}
#fly-text12 {
	margin-top: 140px;
	margin-left: 255px;
}
#fly-text13 {
	margin-top: 255px;
	margin-left: 300px;
}
#fly-text14 {
	margin-top: 275px;
	margin-left: 335px;
}
#fly-m5 {
	margin-top: 275px;
	margin-left: 350px;
}
#fly-m6 {
	transform: rotate(347deg);
	margin-top: 273px;
	margin-left: 365px;
}
#fly-text15 {
	margin-top: 250px;
	margin-left: 405px;
}
#fly-text16 {
	margin-top: 230px;
	margin-left: 430px;
}
#fly-text17 {
	margin-top: 180px;
	margin-left: 465px;
}
#fly-text18 {
	margin-top: 25px;
	margin-left: 515px;
}
#fly-text19 {
	margin-top: 0px;
	margin-left: 520px;
}

#fly-text20 {
  position: absolute;
  top: 430px;
  right: 5px;
}
#fly-text21 {
  position: absolute;
  top: 455px;
  right: 10px;
}
#fly-text22 {
  position: absolute;
  top: 485px;
  right: 35px;
}
#fly-m7 {
  position: absolute;
  top: 505px;
  right: 52px;
  transform: rotate(135deg);
}
#fly-m8 {
  position: absolute;
  top: 520px;
  right: 70px;
  transform: rotate(145deg);
}
#fly-m9 {
  position: absolute;
  top: 535px;
  right: 135px;
  transform: rotate(180deg);
}

#fly-text23 {
  position: absolute;
  top: 530px;
  right: 175px;
}
#fly-text24 {
  position: absolute;
  top: 525px;
  right: 215px;
}
#fly-text25 {
  position: absolute;
  top: 465px;
  right: 275px;
}
#fly-text26 {
  position: absolute;
  top: 390px;
  right: 255px;
}
#fly-text27 {
  position: absolute;
  top: 370px;
  right: 235px;
}
#fly-m10 {
  position: absolute;
  top: 358px;
  right: 210px;
  transform: rotate(345deg);
}
#fly-m11 {
  position: absolute;
  top: 355px;
  right: 195px;
  transform: rotate(355deg);
}
#fly-m12 {
  position: absolute;
  top: 360px;
  right: 145px;
  transform: rotate(17deg);
}
#fly-text28 {
  position: absolute;
  top: 395px;
  right: 110px;
}
#fly-text29 {
  position: absolute;
  top: 433px;
  right: 95px;
}
#fly-text30 {
  position: absolute;
  top: 510px;
  right: 120px;
}
#fly-m13 {
  position: absolute;
  top: 535px;
  right: 129px;
  transform: rotate(112deg);
}
#fly-text31 {
  position: absolute;
  top: 565px;
  right: 145px;
}
#fly-m14 {
  position: absolute;
  top: 590px;
  right: 165px;
  transform: rotate(135deg);
}
#fly-m15 {
  position: absolute;
  top: 600px;
  right: 175px;
  transform: rotate(135deg);
}
#fly-text32 {
  position: absolute;
  top: 650px;
  right: 225px;
}
#fly-text33 {
  position: absolute;
  top: 675px;
  right: 255px;
}
#fly-text34 {
  position: absolute;
  top: 685px;
  right: 270px;
}
#fly-m16 {
  position: absolute;
  top: 699px;
  right: 370px;
  transform: rotate(355deg);
}
#fly-m17 {
  position: absolute;
  top: 700px;
  right: 385px;
  transform: rotate(0deg);
}
#fly-text35 {
  position: absolute;
  top: 700px;
  right: 405px;
}

.fly-text.highlight {
  background-color: deeppink;
  color: white;
}

/* 영어만 */
.container-en {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 2fr 2fr 2fr;
	height: calc(100dvh - 80px);
}



.no-mobile {
  display: none;
}

@media (max-width: 767px) {
  .main-content {
    display: none;
  }
  .no-mobile {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: black;
  }
}