<template>
	
    <HomeButton />

	<div class="reveal" ref="revealRef">
      <div class="slides">




		<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 천자문 초급</h1>
	<!-- </p> -->

	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>(초등 저학년) 한자를 처음 접해보는 학생</caption>
  <thead>
    <tr class="border-bottom">
      <th>
          <span class="ml-2"># 주차</span>
      </th>
      <th>
          <span class="ml-2">주제</span>
      </th>
      <th>
          <span class="ml-4">Action</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">1주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">숫자</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">요일과 시간</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(15)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">2주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">신체</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">가족</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(26)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(36)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">3주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">방향</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">색깔과 계절</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(49)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(61)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">4주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">자연</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">사물</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">부록. 안배운 8급 한자</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">퀴즈. 단어 맞추기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(72)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(83)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(94)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(110)"></i>
			</div>
		</td>
	</tr>
	
  </tbody>
</table>

</section>


		<section>
			<h2 class="pb-5">1. 숫자 </h2>
			<p>
				<h3>1~10, 백, 천, 만 한자를 알아봅시다.</h3>
			</p>
		</section>
		<section>
			<h2>💻 하나 일</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="one_il"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="one_il_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="one_il_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">1일</span> : 양력의 매 월 첫 날</h3>
						<div>매월 1일에는 용돈을 받는다</div> 
						<div>(초하루 : 음력의 매월 첫 날)</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무일푼</span> : 돈이 하나도 없음</h3>
						<div>지갑에 돈이 한푼도 없어. 지금 무일푼이야.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일렬</span> : 한 줄로 늘어섬</h3>
						<div>달리기 시합을 위해 6명씩 일렬로 섰다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일석이조</span> : 돌 하나로 새 2마리. 동시에 2개를 얻다.</h3>
						<div>심부름을 했더니 칭찬도 듣고 용돈도 받고 일석이조다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일사천리</span> : 어떤 일이 척척 잘 진행됨</h3>
						<div>생일파티 준비가 일사천리로 진행되고 있다.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 둘 이</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="two_i"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="two_i_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="two_i_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">2세</span> : 자녀세대</h3>
						<div>저번 달에 이모가 2세를 낳았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이류</span> : 최고보다는 조금 못한 부류</h3>
						<div>최고로 잘하는 사람을 일류, 그 다음을 이류라고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이중</span> : 두 겹, 두 번 겹침</h3>
						<div>선물이 깨질까봐 포장지와 튼튼한 상자을 써서 이중으로 포장했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">유일무이</span> : 오직 하나 뿐, 둘은 없음</h3>
						<div>우리 반에서 한자를 아는 사람은 내가 유일무이하다.</div>
					</div>
				</div>	
			</div>


		</section>


		<section>
			<h2>💻 석 삼</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="three_sam"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="three_sam_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="three_sam_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼총사</span> : 친하게 지내는 세 사람(프랑스 소설에 등장)</h3>
						<div>나랑 길동이랑 영수는 곤충채집을 좋아하는 채집 삼총사다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼각주</span> : 강과 바다가 만나는 곳에, 강물이 운반한 모래나 흙이 쌓여 이루어진 지형</h3>
						<div>강과 바다가 만나는 곳에는 크든 작든 삼각주가 이루어져있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼년상</span> : 부모의 상을 3년 동안 치르는 옛 전통</h3>
						<div>옛날에는 부모가 돌아가시면 무덤 근처에서 삼년상을 치렀다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼삼오오</span> : 여럿이 (3~5명)이 무리지어 다님</h3>
						<div>운동장에 학생들이 삼삼오오 모여 줄넘기를 하고 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">작심삼일</span> : 마음 먹은 게 3일 감. 결심이 굳지 못함.</h3>
						<div>놀기 전에 숙제부터 해야지 마음먹어도 늘 작심삼일이다.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 넉 사</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="four_sa"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="four_sa_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="four_sa_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사계</span> : 네 계절</h3>
						<div>우리나라는 봄, 여름, 가을, 겨울 사계가 뚜렷하다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사군자</span> : 매화, 난초, 국화, 대나무</h3>
						<div>옛날 선비들은 사군자를 치며 마음을 다스렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사칙연산</span> : 덧셈, 뺄셈, 곱셉, 나눗셈을 이용한 셈</h3>
						<div>3( )2( )5 = 13 사칙연산을 사용해 ( )안의 부호를 맞혀보세요!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼한사온</span> : 3일은 춥고 4일은 따뜻하다. 동북아시아의 겨울 기온 특징.</h3>
						<div>요즘은 삼한사온이 잘 나타나지 않는다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">조삼모사</span> : 결과가 같은데 눈 앞의 차이에만 급급함</h3>
						<div>아침에 돈가스 저녁에 오이를 먹나, 아침에 오이 저녁에 돈가스를 먹나 조삼모사다.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 다섯 오</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="five_o"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="five_o_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="five_o_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오대양</span> : 지구에 있는 5개 큰 바다</h3>
						<div>지구에는 태평양, 대서양, 인도양, 남빙양, 북빙양 이라는 오대양이 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오륜기</span> : 올림픽을 상징하는 기. 5개 색깔의 고리가 겹쳐있다.</h3>
						<div>올림픽 경기장 입구에 평화를 상징하는 오륜기가 펄럭였다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오십보백보</span> : 차이가 거의 없고 거의 비슷함</h3>
						<div>만점맞은 내가 보기에는 30점이나 40점이나 오십보백보다.</div>
						<div>유의어 : 도찐개찐, 도긴개긴, 거기서 거기</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오장육부</span> : 내장을 통틀어 이름</h3>
						<div>내가 열심히 한 것을 자기가 한 것이라고 우기다니 오장육부가 뒤집힌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오리무중</span> : 다섯 리가 안개 속. 방향이나 갈피가 안 잡힘</h3>
						<div>앞 날이 어떻게 될지 오리무중이다.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 여섯 육</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="six_yuk"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="six_yuk_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="six_yuk_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">육면체</span> : 6개의 평면으로 둘러싸인 입체</h3>
						<div>주사위는 정육면체다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오뉴월</span> : 5 ~ 6월 (육이 뉴로 읽힘)</h3>
						<div>"여자가 한이 맺히면 오뉴월에도 서리가 내린다" 는 속담이 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">육하원칙</span> : 문장을 쓸 때에 지켜야 하는 6가지 원칙</h3>
						<div>문장을 쓸 때는 ‘누가, 언제, 어디서, 무엇을, 어떻게, 왜’를 확실히 하면 좋다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">삼십육계줄행랑</span> : 매우 급하게 도망을 침</h3>
						<div>경찰을 부르자 도둑들이 삼십육계줄행랑을 쳤다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 일곱 칠</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="seven_chil"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="seven_chil_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="seven_chil_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">북두칠성</span> : 큰곰자리의 가장 빛나는 국자모양 일곱 개 별</h3>
						<div>그 북두칠성 앞에 딴 별들보다 좀 크고 빛나는 별. 그건 북극성이었다. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">칠석</span> : 음력 7월 7일</h3>
						<div>칠석날은 견우와 직녀가 만나는 날이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">칠순</span> : 70세 생신 (한국 나이는 71세)</h3>
						<div>저번 토요일은 할머니의 칠순 잔치였다. </div>
						<div>(유의어 : 고희) </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남녀칠세부동석</span> : 7세가 되면 남녀가 한 자리에 같이 앉지 않음</h3>
						<div>옛날에는 남녀칠세부동석 이라고 하여 남녀를 엄격하게 구별했다</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">칠전팔기</span> : 일곱 번 넘어지고 여덟 번 일어난다. 여러 번 실패하여도 꾸준히 노력함.</h3>
						<div>여러 번 실패해도 칠전팔기의 마음으로 다시 도전할거야.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 여덟 팔</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="eight_pal"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="eight_pal_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="eight_pal_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사방팔방</span> : 여기 저기 모든 방향</h3>
						<div>가출한 고양이를 찾으려고 사방팔방으로 수소문했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">초파일</span> : 음력 4월 8일. 석가모니의 탄생일</h3>
						<div>초파일이 다가오자 거리에는 다양한 색깔의 연등이 걸렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">십중팔구</span> : 열 가운데 여덟이나 아홉, 거의 대부분</h3>
						<div>내가 어제 남겨논 케잌은 십중팔구 동생이 다 먹었을거야.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">팔방미인</span> : 어느 것이든 다 잘함</h3>
						<div>노래도 잘하고, 피아노도 잘치고, 공부도 잘하고, 철수는 팔방미인이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">팔불출</span> : 가까운 사람을 지나치게 칭찬함</h3>
						<div>우리 아빠는 어디에서나 엄마 자랑, 내 자랑을 많이하는 팔불출이다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 아홉 구</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="nine_gu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="nine_gu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="nine_gu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">구미호</span> : 꼬리가 9개인 여우.</h3>
						<div>전래동화에 구미호에 대한 무서운 이야기가 나왔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">주먹구구</span> : 일을 대충 함.</h3>
						<div>숙제를 주먹구구식으로 했다가 혼났다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">구사일생</span> : 죽을 고비를 여러 번 넘기고 살아남음</h3>
						<div>교통사고가 났지만, 안전벨트 덕분에 구사일생으로 목숨을 건졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">구천을 떠돌다</span> : 죽은 자의 혼이 저승을 떠돌아다님</h3>
						<div>원한이 깊은 영혼은 구천을 떠돈다고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">앞길이 구만리</span> : 앞날이 길다. 해야할 일이 많다.</h3>
						<div>체육대회에서 1등하려면 앞길이 구만리인데 벌써 지치면 안돼.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 열 십</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="ten_sib"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="ten_sib_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="ten_sib_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">적십자</span> : 흰 바탕에 붉은 십자가. 구호 관련 일을 함.</h3>
						<div>재난이 발생하자 적십자 단체에서 구호활동을 벌였다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">십장생</span> : 열 가지 오래 사는 것들.</h3>
						<div>궁궐의 대전에는 십장생이 그려진 병풍이 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">십진법</span> : 0~9로 숫자를 표기하는 진법</h3>
						<div>우리는 보통 십진법을, 시계를 볼 때는 60진법을 사용한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">십이지</span> : 띠를 나타내는 12가지 동물</h3>
						<div>나는 십이지 중 토끼띠야.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">십상</span> : ~하기 쉽다. 거의 그럴 것이다.</h3>
						<div>겨울에 옷을 얇게 입으면 감기 걸리기 십상이다.</div>
					</div>
				</div>		
			</div>


		</section>


		<section>
			<h2>💻 일백 백</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="baek_baek"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="baek_baek_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="baek_baek_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백과사전</span> : 다양한 지식을 모아 정리한 사전</h3>
						<div>모르는 것은 백과사전에서 찾아보자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백만장자</span> : 돈이 아주 많은 갑부</h3>
						<div>로또에 당첨되어 하루아침에 백만장자가 되었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백발백중</span> : 백 번 쏘면 백 번 맞음. 반드시 맞음.</h3>
						<div>독서골든벨에 나가 백발백중으로 모든 문제를 맞췄다.</div>
						<div>유사어 : 백전백승. 지피지기면 백전백승이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백해무익</span> : 해만 되고 도무지 이로운 것이 없음.</h3>
						<div>모기는 백해무익한 곤충이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백문(이)불여일견</span> : 백 번 듣는 것이 한 번 보는 것보다 못함.</h3>
						<div>그동안 책으로만 봤는데, 천문대에 오니 직접 별을 볼 수 있다니, 역시 백문(이)불여일견이다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 일천 천</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="cheon_cheon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="cheon_cheon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="cheon_cheon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천자문</span> : 한자의 기본인 1000자 교재</h3>
						<div>하루에 10자씩 100일 공부해서 천자문을 모두 배웠다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천리마</span> : 하루에 천 리를 달린다는 전설의 빠른 말</h3>
						<div>천리마에게 소금수레를 끌게 하다니..</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천금</span> : 헤아릴 수 없을만큼 비싼 값</h3>
						<div>시간은 천금과 같으니 소중히 써야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천근만근</span> : 아주 무거움</h3>
						<div>어제 운동을 너무 열심히 했더니 몸이 천근만근이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천부당만부당</span> : 사리에 맞지 않고 말이 안됨</h3>
						<div>전~하! 천부당만부당한 말씀이옵니다. 통촉하여 주시옵소서~</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 일만 만</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="man_man"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="man_man_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="man_man_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만국기</span> : 세계 각국의 기</h3>
						<div>운동회 때에는 운동장에 만국기가 펄럭인다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만년설</span> : 높은 산에 1년 내내 녹지않는 눈</h3>
						<div>요즘 기온이 따뜻해지면서 만년설이 녹고있다고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만능</span> : 무엇이든 잘 함, 잘 됨.</h3>
						<div>돈이면 다 된다는 생각을 황금만능주의라고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만수무강</span> : 오래도록 건강하게 사는 것</h3>
						<div>할아버지 할머니, 만수무강하세요!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천차만별</span> : 서로 같지 않고 모두 다름</h3>
						<div>사람들의 생각과 취향은 천차만별이다.</div>
					</div>
				</div>		
			</div>


		</section>
		
		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			<p>
				<h3> 숫자를 차례대로 나열해 봅시다. </h3>
			</p>
			<div>
				<DragDropNxNHanjaBox :id="characters_0101_id" :characters="characters_0101" :dropZones="dropZones_0101"></DragDropNxNHanjaBox>
			</div>
		</section>

		<section>
			<div class="d-flex flex-column align-items-center">

				<div style="margin-bottom: 3rem;">
					<h2>퀴즈</h2>
					<h3>해석에 맞게 빈칸을 채워봅시다.</h3>
				</div>

				<div
					class="lineWord-quiz-box"
					v-for="(item, index) in lineWord_QuizItems_01"
					:key="item.svgId"
				>
					<p><strong>{{ item.sentence }}</strong></p>
					<RowWordBlank
					:svgId="item.svgId"
					:words="item.words"
					:term="item.term"
					:width="item.width"
					/>
				</div>
			</div>
		</section>






		<section>
			<h2 class="pb-5">2. 요일과 시간  </h2>
			<p>
				<h3>요일에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>
		<section>
			<h2>💻 달 월</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="moon_wueol"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="moon_wueol_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="moon_wueol_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">정월대보름</span> : 음력 1월 15일</h3>
						<div>정월대보름은 1년 중 보름달이 가장 큰 날이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만월</span> : 보름달</h3>
						<div>추석날 밤에 가족들과 같이 송편을 먹으며 만월을 보고 소원을 빌었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">월말</span> : 한 달의 끝무렵. 주로 20 ~ 30, 31일</h3>
						<div>월말에는 아빠가 용돈을 주신다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">매월</span> : 각각의 월</h3>
						<div>나는 매월 5만원씩 용돈을 받는다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">월식</span> : 달이 지구 그림자에 가려져 보이지 않는 천체현상.</h3>
						<div>오늘 밤은 개기월식이 있는 날이라, 달이 붉게 보인다고 한다.</div>
					</div>
				</div>	
			</div>


		</section>


		<section>
			<h2>💻 불 화</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="fire_hwoa"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="fire_hwoa_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="fire_hwoa_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">화성</span> : 태양계의 4번째 행성</h3>
						<div>화성에는 생명체가 살지 않는다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">화재</span> : 불이 남. 불에 의한 재난</h3>
						<div>화재가 발생했을 때는 빨리 119에 신고하자. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">화산</span> : 지구 내부의 마그마가 분출하여 만들어진 산</h3>
						<div>더이상 활동하지 않는 화산은 사화산, 계속 활동하는 화산은 활화산이라고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">방화문</span> : 불길을 막아주는 문.</h3>
						<div>화재에 대비하여 방화문은 항상 닫아두어야 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">방화</span> : 일부러 불을 지름</h3>
						<div>건물에 불을 낸 방화범이 붙잡혔다.</div>
					</div>
				</div>	
			</div>


		</section>


		<section>
			<h2>💻 물 수</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="water_su"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="water_su_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="water_su_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">수력발전소</span> : 물의 위치에너지를 이용하여 전기를 만드는 곳</h3>
						<div>이포보는 한국에서 가장 아름다운 수력발전소이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">상수도</span> : 먹는 물이나 사용하는 물을 보내주는 관</h3>
						<div>상수도가 없던 때에는 우물에서 물을 길어 썼다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">방수</span> : 물을 막음</h3>
						<div>요즘 스마트폰은 방수(처리)가 잘 되어있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">강수량</span> : 비 혹은 눈 등 물이 내린 총량</h3>
						<div>올 봄에는 강수량이 적어 가뭄이 걱정된다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">수심</span> : 물의 깊이</h3>
						<div>이 곳은 수심이 깊으니 들어가지 마세요.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 나무 목</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="tree_mok"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="tree_mok_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="tree_mok_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">목관악기</span> : 나무로 만든 관악기</h3>
						<div>단소는 대표적인 한국의 목관악기이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">묘목</span> : 어린 나무</h3>
						<div>식목일에 산에 올라가서 묘목을 심었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">목마</span> : 나무로 만든 말</h3>
						<div>놀이공원에 가서 회전목마를 탔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고목</span> : 오래된 나무, 말라죽은 나무</h3>
						<div>오래 전부터 자리를 지키던 고목도 가뭄이 계속되자 고목이 되었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">벌목</span> : 나무를 베어냄</h3>
						<div>벌목을 너무 많이하면 산사태가 자주 일어난다.</div>
					</div>
				</div>
			</div>


		</section>

		<section>
			<h2>💻 쇠 금</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="iron_geum"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="iron_geum_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="iron_geum_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>*성으로 읽을 때는 '김'이라고 읽어요.</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">저금통</span> : 돈을 모아두는 통</h3>
						<div>돼지저금통에 용돈으로 받은 동전을 모아두었더니 꽤 묵직해졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">현금</span> : 바로 사용할 수 있는 돈</h3>
						<div>현금이 100원 밖에 없어서 아이스크림은 못 사먹겠다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">벌금</span> : 벌로 내는 돈</h3>
						<div>다음 주부터 지각하는 학생들은 1000원씩 벌금을 낼거예요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">금박</span> : 금을 아주 얇게 만든 것</h3>
						<div>이 목걸이는 진짜 금이 아니라 금박을 입힌거야.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">금지옥엽</span> : 금 가지에 옥 잎사귀. 귀한 자식</h3>
						<div>부부는 외동딸을 금지옥엽으로 길렀다.</div>
					</div>
				</div>
			</div>


		</section>

		<section>
			<h2>💻 흙 토</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="soil_to"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="soil_to_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="soil_to_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">국토</span> : 나라의 땅</h3>
						<div>아빠와 함께 국토대장정을 했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">신토불이</span> : 몸과 땅은 둘이 아니다. 내 땅에서 난 것이 잘 맞다.</h3>
						<div>역시 신토불이가 최고지! (우리 땅에서 난 음식이 최고!)</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">토기</span> : 흙으로 만든 그릇</h3>
						<div>아주 옛날에는 토기를 만들어 사용했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">토양</span> : (간단히 말해) 흙</h3>
						<div>이 곳 토양은 기름져서 벼가 자라기 좋다.</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 날 일</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="day_il"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="day_il_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="day_il_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일기예보</span> : 날씨를 예측하여 알려줌</h3>
						<div>일기예보를 보니 이번 주말엔 비가 온대.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">평일</span> : 월요일 ~ 금요일 (공휴일 제외)</h3>
						<div>평일에는 늘 학교에 가야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일식</span> : 달이 태양을 가리는 현상</h3>
						<div>어제는 일식이 있어서 태양이 가려져 대낮인데도 어두컴컴했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일출</span> : 해가 뜸</h3>
						<div>부모님과 성산봉에 일출을 보러 갔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">작심삼일</span> : 결심한 것을 3일밖에 못지킴. 결심이 굳지 못함</h3>
						<div>계획을 세워서 뭐해! 어차피 작심삼일인데!</div>
					</div>
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 해 년</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="year_nyeon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="year_nyeon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="year_nyeon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">연대표</span> : 역사상의 사건을 일어난 연대순으로 벌여 적은 표.</h3>
						<div>연대표에 나와있는 순서대로 역사책을 읽어야겠어!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">연말연시</span> : 한 해의 마지막과 다음 해의 시작</h3>
						<div>연말연시라 거리에 사람이 많다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">근하신년</span> : 새해를 축하함</h3>
						<div>새해를 맞아 '근하신년' 이 적힌 엽서를 할머니께 드렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">연년생</span> : 한 살 터울의 형제자매</h3>
						<div>오빠와 나는 연년생이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">윤년</span> : 4년에 한 번 2월이 29일인 해</h3>
						<div>올 해는 윤년이라 1년이 365일이 아니라 366일이다.</div>
					</div>
				</div>	
			</div>


		</section>
		
		<section>
			<h2>💻 때 시</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="time_si"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="time_si_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="time_si_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">시간표</span> : 시간대별로 할 일을 적은 표</h3>
						<div>방학 때에도 시간표에 따라 열심히 공부해야지!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일시</span> : 날짜와 시간</h3>
						<div>소풍 출발 일시 : 5/8일 9시</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동시</span> : 같은 때</h3>
						<div>우리 누가 더 빠른지 보자! 동시에 출발하는거야!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일시불</span> : 한 번에 돈을 냄</h3>
						<div>할부로 해드릴까요 일시불로 해드릴까요? - 일시불로 해주세요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">금시초문</span> : 처음 들음</h3>
						<div>용이 나타났다니 금시초문이다.</div>
					</div>
				</div>	
			</div>


		</section>
		
		<section>
			<h2>💻 나눌 분</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="divide_bun"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="divide_bun_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="divide_bun_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">분리</span> : 나눔</h3>
						<div>색연필과 물감을 분리해놓자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">분단국가</span> : 나누어진 국가</h3>
						<div>우리나라는 휴전선이 있는 분단국가다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">분석하다</span> : 나누고 쪼개어 생각함</h3>
						<div>어제 우리가 진 이유를 분석해보자.</div>
					</div>
					
				</div>
			</div>


		</section>


		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			<p>
				<h3> 요일을 차례대로 나열해 봅시다. </h3>
			</p>
			<div>
				<DragDropNxNHanjaBox :id="characters_0201_id" :characters="characters_0201" :dropZones="dropZones_0201"></DragDropNxNHanjaBox>
			</div>
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<CrossWord :svgId="crossWord_0202_id" :problems="crossWord_0202_problems" :length="crossWord_0202_length" :width="crossWord_0202_width"></CrossWord>
						
					</div>
					
				</div>

				<div class="col-sm-6 hanja-contents">
					<div
						class="alert alert-primary p-1"
						v-for="item in hints_0202"
						:key="item.id"
						@mousedown="showHintStates[item.id] = true"
						@mouseup="showHintStates[item.id] = false"
						@mouseleave="showHintStates[item.id] = false"
						@touchstart.prevent="showHintStates[item.id] = true"
						@touchend.prevent="showHintStates[item.id] = false"
						@touchcancel.prevent="showHintStates[item.id] = false"
					>
						<h3>
						<span style="color: red;">{{ item.id }}번</span> : {{ item.text }}
						</h3>
						<div v-if="showHintStates[item.id]">
							<i class="fas fa-lightbulb" style="color: gold;"></i>
							힌트 : {{ item.hint }}
						</div>
					</div>
				</div>

			</div>

			
		</section>

		


		<section>
			<h2 class="pb-5">3. 신체  </h2>
			<p>
				<h3>신체에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 사람 인</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="human_in"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="human_in_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="human_in_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">인생</span> : 사람이 태어나 살아가는 일</h3>
						<div>인생은 한 번뿐이니 보람차게 살아야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">거인</span> : 몸이 아주 큰 사람</h3>
						<div>걸리버 여행기에는 거인들이 사는 거인국이 나온다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">인종</span> : 사람을 피부색 등 특징으로 구별한 종류</h3>
						<div>인종차별을 해서는 안된다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">맹인</span> : 눈이 보이지 않는 사람</h3>
						<div>맹인들은 점자를 이용해 글을 읽는다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">개인</span> : 사람 각각 하나하나</h3>
						<div>개인 물건은 스스로 잘 챙기세요!</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 눈 목</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="eye_mok"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="eye_mok_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="eye_mok_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">목격자</span> : 직접 눈으로 본 사람</h3>
						<div>도둑을 본 목격자가 없어 cctv를 확인했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">반목</span> : 반대방향의 눈. 서로 미워함</h3>
						<div>친구와 의견이 달라 반목했지만, 서로 이야기하며 화해했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">두목</span> : 무리의 우두머리</h3>
						<div>두목님, 말씀하신대로 처리했습니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">목적</span> : 어떤 것을 하는 목표</h3>
						<div>늦은 시간에 전화한 목적이 뭐야?</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">목차</span> : 책의 앞에 주요 제목을 적어둔 것</h3>
						<div>책을 읽을 때, 목차를 먼저 보면 중요한 내용을 빨리 알 수 있다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 입 구</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="mouth_gu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="mouth_gu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="mouth_gu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">식구</span> : 함께 밥먹는 입. 주로 가족.</h3>
						<div>어린이날에 도시락을 싸서 온 식구가 다같이 소풍을 갔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">인구</span> : 어느 곳에 사는 사람의 수</h3>
						<div>울릉도의 인구는 약 9000명이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">입구</span> : 들어가는 문</h3>
						<div>입구는 오른쪽, 출구는 왼쪽입니다.</div>
						<div>반대말 : 출구</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이구동성</span> : 여러 사람의 말이 똑같음</h3>
						<div>"오늘은 마피아게임해요!" 우리는 이구동성으로 외쳤다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일구이언</span> : 한 입으로 두 말 한다. 말을 자꾸 바꿈</h3>
						<div>자꾸 일구이언하면 양치기 소년처럼 사람들의 믿음을 잃는다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 귀 이</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="ear_i"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="ear_i_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="ear_i_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이비인후과</span> : 귀, 코, 목이 아플 때 가는 병원</h3>
						<div>감기에 심하게 걸려서 이비인후과에 갔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이목구비</span> : 귀, 눈, 입, 코. 전체 얼굴의 생김새</h3>
						<div>그 사람은 이목구비가 뚜렷하다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이명</span> : 실제 소리가 없는데 귀에서 소리를 느끼는 상태</h3>
						<div>갑자기 이명이 들려서 이비인후과에 갔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우이독경</span> : 소 귀에 경 읽기. 아무리 말해도 못 알아들음</h3>
						<div>이 방법이 더 좋다고 아무리 말해줘도 우이독경이니 답답하다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">이목이 집중되다</span> : 남의 관심을 끌다</h3>
						<div>거리에서 멋지게 기타를 연주했더니 지나가는 사람들의 이목이 집중됐다.</div>
					</div>
				</div>		
			</div>


		</section>


		<section>
			<h2>💻 손 수</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="hand_su"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="hand_su_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="hand_su_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">수작업</span> : 손으로 하는 일</h3>
						<div>이 스웨터는 일일이 수작업해서 비싸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">수기</span> : 자기 손으로 직접 적음</h3>
						<div>이 비어있는 칸은 이름을 수기로 적어주세요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무리수</span> : 너무 어긋날 정도로 무리가 있는 일</h3>
						<div>어떻게든 이기려고 무리수를 두다가, 결국 반칙을 해서 퇴장당했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">선수치다</span> : 상대보다 먼저 어떤 행동을 함</h3>
						<div>다른 사람들이 오기 전에, 선수쳐서 좋은 자리를 예약했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하수</span> : 남보다 뛰어나지 않은 실력</h3>
						<div>아이고, 이런 쉬운 게임에서 지다니, 하수네!</div>
						<div>반대말 : 고수, 상수</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 발 족</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="foot_jok"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="foot_jok_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="foot_jok_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만족</span> : 마음에 들음</h3>
						<div>열심히 공부했더니 시험에서 만족스러운 점수를 얻었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">부족</span> : 충분하지 않음. 모자람</h3>
						<div>어제 노느라고 시간이 부족해서 숙제를 다 끝내지 못했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사족을 못쓰다</span> : (네 발을 못쓸 정도로) 무엇에 반해 어쩔 줄을 모름</h3>
						<div>내 동생은 계란이라면 사족을 못쓴다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사족을 달다</span> : 뱀에 발을 붙임. 쓸데없는 내용을 덧붙여 망침</h3>
						<div>사족을 달아 설명하다가, 오히려 오해를 샀다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 코 비</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="nose_bi"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="nose_bi_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="nose_bi_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">비염</span> : 코 속에 난 염증</h3>
						<div>봄만 되면 꽃가루 때문인지 비염이 심해진다. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">비소</span> : 코웃음 (비웃음)</h3>
						<div>잘난체하는 모습을 계속 보고있자니 비소를 금할 수 없었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">오비삼척</span> : 내 코(ㅅ물)가 석자. 내가 급해서 남을 돌볼 수 없음</h3>
						<div>나도 숙제를 다 못해서 오비삼척이라, 미안하지만 널 도와줄 수 없어.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 머리 두</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="head_du"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="head_du_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="head_du_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">두뇌</span> : 머릿속에 있는 뇌</h3>
						<div>그 친구는 두뇌가 명석하다. (= 똑똑하다)</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">두통</span> : 머리가 아픔</h3>
						<div>너무 어려운 문제를 풀었더니 두통이 생길 것 같다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">선두</span> : 맨 앞. 혹은 앞장섬</h3>
						<div>반장은 무슨 일이든 선두에 서서 솔선수범한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">용두사미</span> : 용머리 뱀꼬리. 시작은 멋진데 끝은 초라함</h3>
						<div>독후감의 첫 부분은 그럴싸했으나, 점점 쓸 말이 없어져 용두사미로 끝났다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 몸 체</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="body_che"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="body_che_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="body_che_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">인체</span> : 인간의 몸</h3>
						<div>로봇은 인체의 움직임과 점점 비슷해지고 있다. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">액체</span> : 담는 그릇에 따라 모양이 변하는 물질</h3>
						<div>액체는 흘릴 수 있으니 조심해서 옮겨야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고체</span> : 일정한 모양을 가진 물질</h3>
						<div>액체인 물은 냉동실에 얼리면 고체인 얼음이 된다. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">연체동물</span> : 뼈가 없어 부드러운 몸을 가진 동물</h3>
						<div>고양이는 몸이 유연해서 연체동물처럼 움직인다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일심동체</span> : 한마음 한 몸이 되어 뭉침</h3>
						<div>체육대회에서 우승하기 위해 우리 반은 모두 일심동체가 되었다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 한자를 연결해봅시다.</h3>
				
				<div>
					<ConnectNxNHanjaBox :id="connect_characters0301_id" :characters="connect_characters0301" :meaningList="connect_meaningList0301" :correctPairs="connect_correctPairs0301"></ConnectNxNHanjaBox>
				</div>
			
		</section>
		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 단어를 써봅시다.</h3>
				<div
					class="lineWord-quiz-box"
					v-for="(item, index) in lineWord_QuizItems_03"
					:key="item.svgId"
				>
					<p><strong>{{ item.sentence }}</strong></p>
					<RowWordBlank
					:svgId="item.svgId"
					:words="item.words"
					:term="item.term"
					:width="item.width"
					/>
				</div>

		
		</section>


		<section>
			<h2 class="pb-5">4. 가족  </h2>
			<p>
				<h3>가족에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 아비 부</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="fathe_bu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="fathe_bu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="fathe_bu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">부친</span> : 아버지(자기 부모보다는 남의 부모)를 정중히</h3>
						<div>부친께서는 건강하시지?</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">부자지간</span> : 아빠와 아들 사이</h3>
						<div>철수네는 부자지간이 좋다</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백부</span> : 큰아버지</h3>
						<div>명절에 백부께서 용돈을 주셨다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">조부</span> : 할아버지</h3>
						<div>조부께서는 약과를 좋아하신다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">부계사회</span> : 아버지를 기준으로 가문이 이어지는 사회</h3>
						<div>우리나라는 아버지의 성을 물려받는 부계사회다.</div>
					</div>
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 어미 모</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="mother_mo"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="mother_mo_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="mother_mo_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">부모</span> : 아버지와 어머니</h3>
						<div>어버이날을 맞아 부모님께 카네이션을 드렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">모녀지간</span> : 어머니와 딸 사이</h3>
						<div>영희는 어머니와 똑 닮아, 누가봐도 모녀지간이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">모계사회</span> : 어머니를 기준으로 가문이 이어지는 사회</h3>
						<div>아프리카 부족 중에는 모계사회가 있다고 한다.</div>
					</div>
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 아들 자</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="son_ja"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="son_ja_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="son_ja_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자식</span> : 부모의 아이</h3>
						<div>자식은 부모의 거울이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자제</span> : 남을 높여 그 아들을 말함</h3>
						<div>댁의 자제분이 올해 대학생이라고요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자자손손</span> : 여러 대의 자식과 손주.</h3>
						<div>종가집에서는 자자손손 전통을 이어오고 있다. </div>
					</div>
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 계집 녀</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="woman_nyeo"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="woman_nyeo_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="woman_nyeo_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">여성</span> : 성별이 여자인 성인</h3>
						<div>여성은 xx염색체를 가진 사람을 말한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">궁녀</span> : 궁중에서 일하는 여인</h3>
						<div>궁녀는 견습나인, 나인, 상궁 으로 나뉜다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무남독녀</span> : 아들은 없고 딸 하나만 있음</h3>
						<div>영희는 무남독녀 외동딸이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">여식</span> : 남에게 자기 딸을 말함</h3>
						<div>저희 여식을 잘 부탁드립니다.</div>
					</div>
					
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 형 형</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="olderbrother_hyeong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="olderbrother_hyeong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="olderbrother_hyeong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">형제</span> : 형과 아우</h3>
						<div>형제끼리 사이좋게 지내야지.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">의형제</span> : 뜻이 맞아 의로 맺어진 형제</h3>
						<div>우리는 의형제지만 친형제만큼 사이가 좋다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">호형호제</span> : 서로 형, 아우로 부름. 매우 사이가 좋음</h3>
						<div>옆집 형과는 서로 잘 맞아 호형호제하는 사이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">형부</span> : 언니의 남편</h3>
						<div>형부, 우리 언니 잘 부탁해요.</div>
					</div>
					
				
					
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 아우 제</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="youngerbrother_je"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="youngerbrother_je_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="youngerbrother_je_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">제자</span> : 가르침을 받는 사람</h3>
						<div>제자들이 불쑥 찾아뵙자 선생님은 매우 기뻐하셨다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">사제</span> : 스승과 제자</h3>
						<div>사제지간에 어려워하지 말고 고민을 이야기해봐.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">처제</span> : 아내의 여동생</h3>
						<div>처제와 아내가 간만에 만나 정겹게 대화를 나누고 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">제수</span> : (형이) 남동생의 아내를 말함</h3>
						<div>제수씨, 만나서 반가웠어요.</div>
					</div>
					
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 집 가</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="house_ga"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="house_ga_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="house_ga_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">가훈</span> : 한 집의 교훈</h3>
						<div>우리 집 가훈은 "정직"이다</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">가전</span> : 집의 전자제품</h3>
						<div>요즘은 세탁기, 냉장고, 전자레인지는 꼭 필요한 가전이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">생가</span> : 태어난 집</h3>
						<div>여행간 김에 위인의 생가를 구경했다.</div>
					</div>
		
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 이름 명</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="name_myoeng"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="name_myoeng_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="name_myoeng_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">명단</span> : 이름들을 적은 표</h3>
						<div>여기 명단에 성함을 적어주세요</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">가명</span> : 가짜로 사용하는 이름</h3>
						<div>내 이름을 밝히고 싶지 않아 가명을 사용했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">명성</span> : 세상에 널리 퍼져 유명한 이름</h3>
						<div>그는 피아노 연주자로 명성을 날렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">명언</span> : 훌륭한 말</h3>
						<div>소크라테스가 말한 "너 자신을 알라"는 유명하다</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동명이인</span> : 같은 이름을 가진 다른 사람</h3>
						<div>우리 반에는 홍길동이라는 동명이인이 3명이나 있다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 (손윗)누이 자 / (손아래) 누이 매</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="oldersister_ja"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="oldersister_ja_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="oldersister_ja_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>* <span class="hanja-font">姉</span> 이라고도 써요.</div>
					</div>
				</div>

				<div class="col-sm-6">
					<div class="row">
						<div id="youngersister_mae"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="youngersister_mae_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="youngersister_mae_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
			</div>


		</section>


		<section>
			<h2>💻 스스로 자</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="self_ja"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="self_ja_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="self_ja_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자동</span> : 스스로 움직임</h3>
						<div>자동문을 지나 음식점에 들어갔더니 자동으로 움직이는 로봇이 있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자신감</span> : 스스로 할 수있다고 믿는 마음</h3>
						<div>떨리지만 자신감있게 발표해야지.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자업자득</span> : 스스로 한 일의 결과를 스스로 돌려받음</h3>
						<div>시험 공부를 안했다가 빵점을 맞다니, 자업자득이다.</div>
					</div>
				
					
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 벗 우</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="friend_wu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="friend_wu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="friend_wu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우정</span> : 친구 사이의 정</h3>
						<div>철수와는 어릴 때부터 친구였기 때문에 우정이 깊다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">학우</span> : 함께 배우는 친구</h3>
						<div>학우 여러분, 저를 반장으로 뽑아주십시오!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우애</span> : 형제자매끼리의 정</h3>
						<div>옆집 형제는 우애가 깊다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">죽마고우</span> : 어릴 때부터 함께 놀며 자란 친구</h3>
						<div>철수와는 죽마고우여서, 척하면 척이다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 글자를 써봅시다.</h3>
				<div
					class="lineWord-quiz-box"
					v-for="(item, index) in lineWord_QuizItems_04"
					:key="item.svgId"
				>
					<p><strong>{{ item.sentence }}</strong></p>
					<RowWordBlank
					:svgId="item.svgId"
					:words="item.words"
					:term="item.term"
					:width="item.width"
					/>
				</div>

		
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 한자를 연결해봅시다.</h3>
				
				<div>
					<ConnectNxNHanjaBox :id="connect_characters0406_id" :characters="connect_characters0406" :meaningList="connect_meaningList0406" :correctPairs="connect_correctPairs0406"></ConnectNxNHanjaBox>
				</div>
			
		</section>
		


		<section>
			<h2 class="pb-5">5. 방향  </h2>
			<p>
				<h3>방향에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 윗 상 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="up_sang"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="up_sang_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="up_sang_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">세상</span> : 사람들이 살고 있는 사회</h3>
						<div>세상에는 다양한 사람들이 함께 살고 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">수상스키</span> : 물 위에서 타는 스키</h3>
						<div>어제 아빠와 캠핑을 갔다가 수상스키를 탔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">상승</span> : 위로 올라감</h3>
						<div>매일 피아노를 연습했더니 실력이 상승했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">금상첨화</span> : 비단에 꽃을 더하다 (좋은 것에 좋은 것을 더해 더 좋다)</h3>
						<div>좋은 날씨에 캠핑을 가서 캠프파이어까지 하다니, 금상첨화다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 아래 하 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="down_ha"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="down_ha_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="down_ha_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">지하</span> : 땅 밑</h3>
						<div>지하철을 타고 지하쇼핑센터에 갔다.</div>
						<div>반대말 : 지상</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하수도</span> : 사용한 물이 흘러가는 길</h3>
						<div>비가 많이 내려 하수도가 막혔다.</div>
						<div>반대말 : 상수도</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하강</span> : 아래로 내려감</h3>
						<div>비행기가 공항에 가까워지자 하강했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하산</span> : 산을 내려감</h3>
						<div>하산할 때에는 다치지 않게 조심해야한다.</div>
						<div>반대말 : 등산</div>
					</div>
				
					
				</div>	
			</div>


		</section>

		<section>
			<h2>💻 왼 좌 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="left_jyoa"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="left_jyoa_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="left_jyoa_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">좌회전</span> : 왼쪽으로 회전</h3>
						<div>여기서 좌회전하면 학교가 보인다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">좌측통행</span> : 왼쪽으로 다님</h3>
						<div>일본에서는 차는 좌측통행한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">좌뇌</span> : 왼쪽 뇌</h3>
						<div>좌뇌는 몸의 오른쪽을 맡고 있다.</div>
					</div>
					
				
					
				</div>		
			</div>


		</section>
		
		<section>
			<h2>💻 오른 우 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="right_wu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="right_wu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="right_wu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우회전</span> : 오른쪽으로 회전</h3>
						<div>앞에 보이는 사거리에서 우회전하면 집이 나온다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우측통행</span> : 오른쪽으로 다님</h3>
						<div>우리나라에서는 차와 사람 모두 우측통행한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">좌우지간</span> : (왼쪽이든 오른쪽이든 간에) 아무튼</h3>
						<div>길을 모르지만 좌우지간 앞으로 가보자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우왕좌왕</span> : 오른쪽으로 갔다 왼쪽으로 갔다 갈팡질팡함</h3>
						<div>갑자기 화재가 발생하여, 모두들 우왕좌왕했다,</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">좌지우지</span> : (왼쪽인지 오른쪽인지) 마음대로 정함</h3>
						<div>내가 놀러가는 건데, 왜 형이 어디서 놀지를 좌지우지해?</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 가운데 중 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="center_jung"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="center_jung_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="center_jung_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">중간</span> : 가운데</h3>
						<div>나는 반에서 키가 딱 중간이다.</div>
						<div>철수는 하면 하고 안하면 안하고, 중간이 없다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">도중</span> : 일이 계속되고 있거나 그 중간</h3>
						<div>캠핑을 가는 도중, 몸이 안좋아서 다시 집으로 왔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">중부지방</span> : 우리나라의 가운데. 서울경기, 충청도, 강원도</h3>
						<div>내일은 중부지방에 비가 많이 온대.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">중지</span> : 가운데 손가락. 셋째 손가락</h3>
						<div>엄지, 검지, 중지, 약지, 소지</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">중립</span> : 가운데 섬. 어느 쪽에 치우치지 않은 중간 입장</h3>
						<div>친구들의 의견이 둘로 나뉘었지만, 나는 중립을 지켰다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 동녘 동 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="east_dong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="east_dong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="east_dong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동녘</span> : 동쪽 방향</h3>
						<div>새벽이 되자 동녘이 옅게 주황빛으로 물들었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동풍</span> : 동쪽에서 오는 바람</h3>
						<div>동풍이 불면 날씨가 맑아진다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동아시아</span> : 아시아의 동쪽. 중국, 일본, 한국 등</h3>
						<div>동아시아의 동쪽은 태평양이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">마이동풍</span> : 말 귀에 동풍이 분다. (남 말을 무시한다.)</h3>
						<div>동생에게 게임을 그만하라고 해봤지만, 마이동풍이다. </div>
					</div>
				
					
				</div>	
			</div>


		</section>
	
		<section>
			<h2>💻 서녘 서 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="west_seo"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="west_seo_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="west_seo_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">서양인</span> : 유럽, 북미 지방 사람</h3>
						<div>이 음식점은 서양인들이 많이 찾는다.</div>
						<div>반대말 : 동양인</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">서대문</span> : 서울의 서쪽에 있는 문</h3>
						<div>서대문은 돈의문이라고도 불린다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동문서답</span> : 동쪽을 물었더니 서쪽을 답한다. (엉뚱한 대답)</h3>
						<div>친구에게 오늘 날씨를 물었더니, 오늘 급식이 맛있다는 동문서답을 했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동분서주</span> : 동쪽 서쪽으로 바쁘게 돌아다님</h3>
						<div>운동회 준비를 위해 반장은 동분서주했다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 남녘 남 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="south_nam"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="south_nam_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="south_nam_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남해안</span> : 남쪽의 바닷가</h3>
						<div>우리나라 남해안에는 섬이 많다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남극</span> : 지구의 남쪽 끝</h3>
						<div>북극에는 북극곰이, 남극에는 펭귄이 산다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남반구</span> : 지구의 적도를 기준으로 남쪽 절반</h3>
						<div>남반구에서는 크리스마스가 여름이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남하</span> : 남쪽으로 내려감</h3>
						<div>봄에 북쪽으로 올라갔던 철새들이 겨울이 되자 남하했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">휴전선이남</span> : 38선의 남쪽</h3>
						<div>북한은 휴전선 이북, 남한은 휴전선 이남에 있다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 북녘 북 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="north_buk"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="north_buk_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="north_buk_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">북극성</span> : 북극에 가장 가까운 밝은 별</h3>
						<div>나침반이 없던 시절에는 북극성을 보고 방향을 알았다고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">북두칠성</span> : 큰곰자리의 7개 밝은 별</h3>
						<div>천체만원경으로 북두칠성을 찾아보자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">북상</span> : 북쪽으로 올라감</h3>
						<div>태풍이 북상하고 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">방북</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>


		<section>
			<h2>💻 앞 전 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="front_jeon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="front_jeon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="front_jeon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">생전</span> : 살아 있는 동안</h3>
						<div>이런 일은 생전 처음이다. (= 난생 처음이다)</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">전진</span> : 앞으로 나아감</h3>
						<div>앞으로 한 발짝씩 전진해 나아가자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">문전박대</span> : 문 앞에서 모질게 대함.</h3>
						<div>친구에게 사과하러 찾아갔지만, 화가 많이 났는지 문전박대 당했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">기원전</span> : 서기 1년 이전. BC로 표기 </h3>
						<div>이집트는 기원전 지중해에서 강력한 국가였다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2>💻 뒤 후 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="back_hu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="back_hu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="back_hu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">독후감</span> : 책을 읽고 난 후 감상문</h3>
						<div>이 책을 읽고 독후감을 써오세요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">후퇴</span> : 뒤로 물러남</h3>
						<div>성공을 위한 1보 후퇴</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">전무후무</span> : 앞으로도 이후로도 없음</h3>
						<div>운동회에서 우리 반이 다 1등하다니, 전무후무한 일이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우후죽순</span> : 비 온 뒤 올라오는 대나무 새싹. 어떤 일이 한꺼번에 여기저기에서 많이 생겨남</h3>
						<div>우리 동네에 빵집이 우후죽순 생겼다.</div>
					</div>
				
					
				</div>		
			</div>


		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			<p>
				<h3> 방향에 맞는 글자를 넣어 봅시다. </h3>
			</p>
			<div>
				<DragDropNxNHanjaBox :id="characters_0501_id" :characters="characters_0501" :dropZones="dropZones_0501"></DragDropNxNHanjaBox>
			</div>
		</section>
		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<CrossWord :svgId="crossWord_0502_id" :problems="crossWord_0502_problems" :length="crossWord_0502_length" :width="crossWord_0502_width"></CrossWord>
						
					</div>
					
				</div>

				<div class="col-sm-6 hanja-contents">
					<div
						class="alert alert-primary p-1"
						v-for="item in hints_0502"
						:key="item.id"
						@mousedown="showHintStates[item.id] = true"
						@mouseup="showHintStates[item.id] = false"
						@mouseleave="showHintStates[item.id] = false"
						@touchstart.prevent="showHintStates[item.id] = true"
						@touchend.prevent="showHintStates[item.id] = false"
						@touchcancel.prevent="showHintStates[item.id] = false"
					>
						<h3>
						<span style="color: red;">{{ item.id }}번</span> : {{ item.text }}
						</h3>
						<div v-if="showHintStates[item.id]">
							<i class="fas fa-lightbulb" style="color: gold;"></i>
							힌트 : {{ item.hint }}
						</div>
					</div>
				</div>

			</div>

			
		</section>
		

		<section>
			<h2 class="pb-5">6. 색깔과 계절 </h2>
			<p>
				<h3>색과 계절에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 흰 백 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="white_baek"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="white_baek_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="white_baek_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백인종</span> : 피부색이 하얀 인종 (주로 유럽계)</h3>
						<div>지구상에는 백인종, 황인종, 흑인종이 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백야</span> : 북쪽지방에서 한여름 동안 밤에도 밝은 현상</h3>
						<div>북쪽지방에서는 밤에도 해가 지지 않는 백야현상이 일어난다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">백발</span> : 하얀 머리카락</h3>
						<div>아빠는 나이가 들어가면서 백발이 성성해졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">공백</span> : 하얗게 비어있음</h3>
						<div>시험지의 공백을 채워주세요.</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 검을 흑 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="black_heuk"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="black_heuk_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="black_heuk_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">흑설탕</span> : 까만 설탕</h3>
						<div>하얀 설탕은 백설탕, 검은 설탕은 흑설탕이라고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">암흑</span> : 검고 어두움</h3>
						<div>숲 속의 오두막은 불빛 한 점 없는 암흑에 감싸여있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">흑심</span> : 검은 마음 (나쁜 마음)</h3>
						<div>흑심을 품고 다가오는 사람과는 친해지기 어렵다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">흑백논리</span> : 어떤 문제를 흑과 백으로만 생각하는 것</h3>
						<div>사람의 생각은 다양하기 때문에, 흑백논리로 판단하기 어렵다.</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 붉을 홍 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="red_hong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="red_hong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="red_hong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>* <span class="hanja-font">紅</span> 이라고도 써요.</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">홍차</span> : 붉은 빛깔을 띄는 차</h3>
						<div>영국사람들은 홍차를 좋아한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">홍해</span> : 아라비아반도와 아프리카 사이에 있는 바다</h3>
						<div>홍해라고 해서 바다 색깔이 붉은 것은 아니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">홍조</span> : 얼굴이 붉어짐</h3>
						<div>철수는 자기가 좋아하는 게임 이야기를 할 때면 홍조를 띠며 눈을 빛낸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">홍일점</span> : 남자들 사이에 여자 한 명</h3>
						<div>영희는 검도장의 유일한 홍일점이어서 인기가 많다.</div>
						<div>반대말 : 청일점</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 푸를 청 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="blue_cheong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="blue_cheong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="blue_cheong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>* <span class="hanja-font">青</span> 이라고도 써요.</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고려청자</span> : 고려시대의 푸른 빛 도자기</h3>
						<div>고려청자는 은은한 푸른 빛으로 당시에 인기가 많았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">청춘</span> : 푸른 봄. 젊은 시절을 말함</h3>
						<div>꽃다운 청춘이 어느덧 이렇게 가버렸구나!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">청산유수</span> : 푸른 산에 맑은 물. 말을 아주 잘 함</h3>
						<div>입만 열면 청산유수다.</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 푸를 록 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="green_nok"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="green_nok_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="green_nok_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>* <span class="hanja-font">綠</span> 이라고도 써요.</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">녹차</span> : 녹색 빛깔의 차</h3>
						<div>녹차의 깊은 맛을 느껴보자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">상록수</span> : 늘 푸른 나무</h3>
						<div>낙엽이 떨어져 앙상한 겨울에도 상록수는 한결같이 푸르다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">녹음이 우거지다</span> : 푸른 잎이 잔뜩 있음</h3>
						<div>여름이 되자 뒷산에는 매미소리와 함께 녹음이 우거져갔다. </div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 누를 황 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="yellow_hwang"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="yellow_hwang_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="yellow_hwang_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">황금</span> : 누런 금</h3>
						<div>황금알을 낳는 거위</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">황인종</span> : 피부색이 노란 인종</h3>
						<div>주로 동양인은 황인종이라고 말한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">황사</span> : 노란 모래(먼지)</h3>
						<div>봄에는 고비사막에서 날아오는 황사 떄문에 하늘이 뿌옇다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">황천길</span> : 저승으로 가는 길</h3>
						<div>1분 빨리가려다 사고가 나서 황천길로 갈 뻔 했다.</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 봄 춘 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="spring_chun"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="spring_chun_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="spring_chun_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">춘곤증</span> : 봄에 나른하고 졸음이 오는 것</h3>
						<div>봄이 되자 춘곤증 때문인지 자꾸 졸리다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">회춘</span> : 다시 젊어짐</h3>
						<div>할머니는 검은색으로 염색을 하시더니 회춘한 것 같다며 좋아하셨다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">입춘대길</span> : 봄을 맞아 한 해 좋은 일이 있기를 바라는 글</h3>
						<div>봄을 맞아 대문에 '입춘대길'이라는 글을 붙였다.</div>
					</div>
					
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 여름 하 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="summer_ha"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="summer_ha_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="summer_ha_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하계방학</span> : 여름방학</h3>
						<div>하계방학 동안 학생여러분 모두 건강하기를 바랍니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하복</span> : 여름에 입는 옷</h3>
						<div>요즘엔 5월에도 벌써 날이 더워 하복을 입었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">하지</span> : 1년 중 낮이 가장 긴 날</h3>
						<div>하지에는 낮이 무려 14시간이나 된다고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">춘하추동</span> : 봄 여름 가을 겨울</h3>
						<div>봄에는 벚꽃 여름에는 은하수 가을에는 단풍 겨울에는 눈, 춘하추동 모두 아름답구나.</div>
					</div>
				
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 가을 추 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="autumn_chu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="autumn_chu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="autumn_chu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">추수</span> : 가을에 익은 곡식을 거둬들임</h3>
						<div>황금빛이 넘실대던 가을 들판은 추수가 끝나자 버석이는 볏대만 남았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">추풍낙엽</span> : 가을바람에 떨어지는 잎사귀</h3>
						<div>장수가 창을 휘두르자, 적군은 추풍낙엽처럼 스러져갔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일각이 여삼추</span> : 짧은 시간이 3년처럼 길게 느껴짐</h3>
						<div>시험 결과 발표를 기다리는 동안, 시간이 일각이 여삼추처럼 흘러갔다.</div>
					</div>
				
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 겨울 동 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="winter_dong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="winter_dong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="winter_dong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동계방학</span> : 겨울방학</h3>
						<div>동계방학동안 필리핀에 놀러가기로 했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동복</span> : 겨울에 입는 옷</h3>
						<div>싸늘한 바람이 스며드는 겨울이 다가오자 동복을 꺼내입었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동면</span> : 겨울잠</h3>
						<div>곰과 다람쥐는 동면하는 대표적인 동물이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동지</span> : 1년 중 겨울이 가장 긴 날</h3>
						<div>동지에는 팥죽을 먹는다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">엄동설한</span> : 눈이 많이 내리고 몹시 추운 겨울</h3>
						<div>엄동설한을 이겨내고 매화가 꽃망울을 터트렸다.</div>
					</div>
				
					
				</div>	
			</div>
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 한자를 연결해봅시다.</h3>
				
				<div>
					<ConnectNxNHanjaBox :id="connect_characters0601_id" :characters="connect_characters0601" :meaningList="connect_meaningList0601" :correctPairs="connect_correctPairs0601"></ConnectNxNHanjaBox>
				</div>
			
		</section>
		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 한자를 연결해봅시다.</h3>
				
				<div>
					<ConnectNxNHanjaBox :id="connect_characters0602_id" :characters="connect_characters0602" :meaningList="connect_meaningList0602" :correctPairs="connect_correctPairs0602"></ConnectNxNHanjaBox>
				</div>
			
		</section>


		<section>
			<h2 class="pb-5">7. 자연 </h2>
			<p>
				<h3>자연에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 하늘 천 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="sky_cheon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="sky_cheon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="sky_cheon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천재지변</span> : 자연에 의한 재앙. 지진, 홍수, 태풍 등</h3>
						<div>공부를 하나도 안했기 때문에, 천재지변이 일어나지 않는 한 합격할 리가 없다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천하태평</span> : 걱정없이 편안함</h3>
						<div>시험이 내일인데 잠만 자고 있다니, 천하태평이로구만!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">지성이 감천</span> : 정성을 들이면 하늘도 감동하여 좋은 결과를 얻음</h3>
						<div>지성이 감천이라고, 열심히 노력하면 원하는 대로 될거야!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천고마비</span> : 하늘은 높고 말은 살찐다. 가을을 의미함</h3>
						<div>천고마비의 계절을 맞아, 나무는 열매를 맺고 곡식은 익어 모두가 풍요로웠다.</div>
					</div>
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 땅 지 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="land_ji"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="land_ji_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="land_ji_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">지구</span> : 땅이 둥글다. 우리가 사는 행성</h3>
						<div>땅이 둥글다는 뜻의 지구는 15세기 전에는 없는 말이었다고 한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">지면</span> : 땅의 표면</h3>
						<div>가뭄이 들어 지면이 쩍쩍 갈라졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">습지</span> : 물에 자주 잠겨 습기가 많은 땅. 늪</h3>
						<div>습지에는 다양한 생물들이 살고 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">원산지</span> : 원래 난 땅</h3>
						<div>먹을거리에는 원산지를 정확히 표기해야한다.</div>
					</div>
					
				</div>	
			</div>
		</section>


		<section>
			<h2>💻 비 우 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="rain_wu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="rain_wu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="rain_wu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우박</span> : 빗방울이 얼어 얼음이 떨어짐</h3>
						<div>갑자기 우박이 쏟아져 이마에 맞았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">강우량</span> : 비가 내리는 양</h3>
						<div>내일은 강우량이 많을 예정이니 조심하시기 바랍니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">우천시</span> : 비가 내리는 날씨일 때</h3>
						<div>체육대회는 운동장에서 진행하지만, 우천시 강당에서 진행합니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">폭우</span> : 비가 갑자기 마구 쏟아짐</h3>
						<div>폭우가 쏟아져 온 거리에 비안개가 가득찼다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 구름 운 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="cloud_wun"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="cloud_wun_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="cloud_wun_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">전운</span> : 전쟁이 일어날 것 같은 상태</h3>
						<div>북한이 동해에 미사일을 발사하면서, 휴전선 부근에는 잠시 전운이 감돌았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">운무</span> : 구름과 안개</h3>
						<div>운무에 휩싸인 산등성이는 마치 신선들이 사는 무릉도원 같았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">풍운아</span> : 좋은 기회를 타고 세상에 이름을 알리는 사람</h3>
						<div>그 화가는 어느날 갑자기 풍운아처럼 등장했다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 눈 설 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="snow_seol"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="snow_seol_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="snow_seol_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
					<div class="row mt-4">
						<div>* <span class="hanja-font">雪</span> 이라고도 써요.</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">대설</span> : 눈이 많이 내림(큰 눈)</h3>
						<div>대설주의보로 학교가 휴교했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">설산</span> : 눈이 덮인 산</h3>
						<div>만년설이 뒤덮인 설산</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">강설량</span> : 눈이 내린 양</h3>
						<div>오늘 오후에는 강설량이 많으니 주의하시기 바랍니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">설경</span> : 눈이 덮인 풍경</h3>
						<div>겨울의 홋카이도는 설경이 장관이다.</div>
					</div>
					
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 바람 풍 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="wind_pung"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="wind_pung_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="wind_pung_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">풍향계</span> : 바람의 방향을 아는 도구</h3>
						<div>강풍이 불어 풍향계가 빙글빙글 돌았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">미풍</span> : 약한 바람 (산들바람)</h3>
						<div>봄기운을 머금은 미풍에 벚꽃잎이 흩날렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">허풍</span> : 사실보다 더 뻥튀기해서 말하거나 행동하는 것</h3>
						<div>어쩌다 뽑기가 당첨되자, 자신이 뽑기의 신이라고 허풍을 떨었다.</div>
					</div>
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 풀 초 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="grass_cho"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="grass_cho_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="grass_cho_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">초원</span> : 풀이 나있는 들판</h3>
						<div>드넓은 초원에 기린이며 물소가 한가롭게 거닐고 있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">초식동물</span> : 풀을 먹고 사는 동물</h3>
						<div>초식동물은 풀을 먹고 산다.</div>
						<div>반대말 : 육식동물</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">초목</span> : 나무와 풀</h3>
						<div>여름이 되자 산에는 초목이 우거졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">초가집</span> : 볏짚 등으로 지붕을 만든 집</h3>
						<div>옛날 농민들은 초가집을 짓고 살았다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 꽃 화 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="flower_hwoa"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="flower_hwoa_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="flower_hwoa_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">개화</span> : 꽃이 핌</h3>
						<div>날씨가 따뜻해져 벚꽃 개화시기가 다가왔다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">생화</span> : 살아있는 꽃(조화)</h3>
						<div>어버이날을 맞아 생화로 만든 꽃다발을 부모님께 드렸다.</div>
						<div>반대말 : 조화</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">화원</span> : 꽃이 있는 정원</h3>
						<div>화원에는 색색의 꽃들이 향기를 뽐내었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">화환</span> : 꽃으로 둥글게 만든 물건</h3>
						<div>결혼식장은 다양한 화환으로 장식되어 있었다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 뫼 산 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="montain_san"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="montain_san_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="montain_san_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">산맥</span> : 산들이 연이어 있는 지형</h3>
						<div>히말라야 산맥은 세상에서 가장 높은 산맥이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고산병</span> : 높은 지대에서 발생하는 병</h3>
						<div>높은 산악지대에서는 산소가 부족하여 고산병에 걸릴 수 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">산전수전</span> : 산에서의 전투, 물에서의 전투 (온갖 힘든 일)</h3>
						<div>우리 할아버지는 산전수전을 다 겪은 지혜로운 분이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">빙산</span> : 얼음산</h3>
						<div>우리가 아는 지식은 세상사의 빙산의 일각에 불과하다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 바다 해 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="sea_hae"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="sea_hae_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="sea_hae_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">해안선</span> : 바닷와 육지가 맞닿은 선</h3>
						<div>해안선을 따라 반짝이는 모래사장이 펼쳐져 있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">심해</span> : 깊은 바다</h3>
						<div>빛 한 점 들지 않는 심해에는 어둠 속을 헤엄치는 물고기만이 있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">해경</span> : 바다 경찰</h3>
						<div>배가 사고가 나서 해경이 출동했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">인산인해</span> : 사람이 산을 이루고 바다를 이룸 (사람이 많이 모임)</h3>
						<div>여름이 되자 해수욕장은 더위를 식히려는 사람들로 인산인해를 이루었다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<CrossWord :svgId="crossWord_0701_id" :problems="crossWord_0701_problems" :length="crossWord_0701_length" :width="crossWord_0701_width"></CrossWord>
						
					</div>
					
				</div>

				<div class="col-sm-6 hanja-contents">
					<div
						class="alert alert-primary p-1"
						v-for="item in hints_0701"
						:key="item.id"
						@mousedown="showHintStates[item.id] = true"
						@mouseup="showHintStates[item.id] = false"
						@mouseleave="showHintStates[item.id] = false"
						@touchstart.prevent="showHintStates[item.id] = true"
						@touchend.prevent="showHintStates[item.id] = false"
						@touchcancel.prevent="showHintStates[item.id] = false"
					>
						<h3>
						<span style="color: red;">{{ item.id }}번</span> : {{ item.text }}
						</h3>
						<div v-if="showHintStates[item.id]">
							<i class="fas fa-lightbulb" style="color: gold;"></i>
							힌트 : {{ item.hint }}
						</div>
					</div>
				</div>

			</div>

			
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
			<p>
				<h3> 맞는 한자를 맞춰봅시다. </h3>
			</p>
			<div>
				<DragDropNxNHanjaBox :id="characters_0702_id" :characters="characters_0702" :dropZones="dropZones_0702"></DragDropNxNHanjaBox>
			</div>
		</section>

		<section>
			<h2 class="pb-5">8. 사물 </h2>
			<p>
				<h3>사물표현 및 크기와 수량에 해당하는 한자를 알아봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 클 대 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="big_dae"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="big_dae_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="big_dae_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">대가족</span> : 여러 세대가 같이 사는 가족</h3>
						<div>할머니 할아버지가 같이 사시게 되어 대가족이 되었다.</div>
						<div>반대말 : 핵가족</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">확대</span> : 크게 넓히는 것</h3>
						<div>사진을 크게 확대해서 보자</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">최대</span> : 가장 큼</h3>
						<div>이 의자는 최대 100kg까지 앉을 수 있습니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">박장대소</span> : 손뼉을 치며 크게 웃음</h3>
						<div>친구의 개그가 너무 웃겨서 반 학생들이 모두 박장대소했다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 작을 소 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="small_so"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="small_so_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="small_so_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">최소</span> : 가장 작음</h3>
						<div>이 놀이기구를 타려면 최소 150cm는 되어야 합니다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">소포</span> : 작은 꾸러미. 작은 우편물</h3>
						<div>멀리 이사간 친구의 생일을 맞아 소포를 보냈다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">축소</span> : 작게 줄임</h3>
						<div>지구를 작게 축소해놓은 것이 지구본이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">소탐대실</span> : 작은 것을 탐하다 큰 것을 잃는다.</h3>
						<div>빈대를 잡으려다 초가삼간을 태우다니, 소탐대실이다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 많을 다 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="many_da"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="many_da_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="many_da_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">다양</span> : 여러 가지로 많다.</h3>
						<div>뷔페에는 다양한 음식들이 먹음직스럽게 차려져있었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">다수결</span> : 많은 수가 찬성하는 쪽으로 결정함</h3>
						<div>이 문제는 다수결로 정하자.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">다도해</span> : 섬이 많은 바다</h3>
						<div>남해에는 섬이 많아, 다도해 해상국립공원이 있다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">천만다행</span> : 천가지 만가지로 행운이 많다.</h3>
						<div>길을 잃은 와중에 파출소가 보이다니 천만다행이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">다재다능</span> : 재능도 많고 능력도 많음</h3>
						<div>엄마는 요리며 뜨개질이며 공부며 다 잘하는 다재다능한 분이다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 적을 소 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="little_so"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="little_so_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="little_so_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">소년소녀</span> : 남자 여자 어린이</h3>
						<div>피아노 콩쿨에는 음악에 뜻이 있는 소년소녀들이 많이 참가했다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">남녀노소</span> : 남자 여자 노인 어린이 모두</h3>
						<div>오늘 하루 공짜라는 말에 남녀노소 할 것 없이 모여들었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">소량</span> : 적은 양</h3>
						<div>뱀에게 물리면 소량의 독으로도 위험해질 수 있으니 조심하세요.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">희소</span> : 드물고 적음</h3>
						<div>세상에 몇 없는 희소한 물건은 비싸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">근소</span> : 아주 적음</h3>
						<div>어제 농구게임에서 반대편에게 근소한 점수차로 져서 분하다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 길 장 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="long_jang"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="long_jang_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="long_jang_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">장수</span> : 수명이 김</h3>
						<div>할머니 할아버니, 무병장수하세요!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">불로장생</span> : 늙지 않고 오래 삼</h3>
						<div>진시황제는 불로장생을 꿈꾸었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">장발</span> : 긴 머리</h3>
						<div>오랜만에 만난 삼촌은 장발을 하나로 묶고 있었다.</div>
					</div>
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 짧을 단 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="short_dan"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="short_dan_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="short_dan_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">단발</span> : 짧은 머리</h3>
						<div>단발로 똑 짜른 머리카락이 목덜미 근처에서 찰랑거렸다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">최단거리</span> : 가장 짧은 거리</h3>
						<div>네비게이션은 최단거리를 계산해서 길을 안내한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">단점</span> : 안좋은 점</h3>
						<div>사람은 누구나 단점이 있는가 하면 장점도 있다.</div>
						<div>반대말 : 장점</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 새 신 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="new_sin"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="new_sin_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="new_sin_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">최신</span> : 가장 새로움</h3>
						<div>엄마를 졸라 최신기종의 핸드폰으로 바꿨다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">신생아</span> : 새로 태어난 아이</h3>
						<div>동생이 신생아이니 만질 때 주의해야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">신선</span> : 깨끗하고 싱싱하다</h3>
						<div>신선한 고등어를 오늘 단돈 1000원에 팝니다!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">신기록</span> : 새로운 기록</h3>
						<div>육상경기에서 우리나라 선수가 세계 신기록을 세웠다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">신세계</span> : 새로운 세상</h3>
						<div>자동으로 자동차가 움직이다니 신세계다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 옛 고 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="old_go"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="old_go_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="old_go_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고물</span> : 오래된 물건</h3>
						<div>구석구석 쌓여있던 고물을 버리고나니 방이 깨끗해졌다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">고대</span> : 오래 전 시기</h3>
						<div>고대에 살았던 사람들은 전기도 없이 얼마나 불편했을까?</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동서고금</span> : 예전과 현재, 동과 서 모두</h3>
						<div>철학은 동서고금을 막론하고 인간에게 지혜를 준다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만고불변</span> : 아주 오래동안 변하지 않음</h3>
						<div>1 + 1 = 2 라는 것은 만고불변의 진리이다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 같을 동 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="same_dong"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="same_dong_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="same_dong_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동일</span> : 하나로 같음</h3>
						<div>시험에 어제 푼 문제집에 있는 문제와 동일한 문제가 나와 쉽게 풀었다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">협동</span> : 같이 도움</h3>
						<div>세상은 혼자 살아 갈 수 없기 때문에, 협동심을 길러야한다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">동명이인</span> : 같은 이름의 다른 사람</h3>
						<div>너가 그 유명한 홍길동이야? - 아니, 난 동명이인이야.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">일심동체</span> : 한 마음 한 몸으로 굳게 뭉침 </h3>
						<div>모두들 빨리 집에 가고 싶은 마음에 일심동체가 되어 청소했다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 셀 수 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="count_su"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="count_su_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="count_su_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">촌수</span> : 친족 간의 거리를 나타내는 숫자</h3>
						<div>나와 부모님이 1촌, 동생과 부모님도 1촌, 그래서 나와 동생은 2촌이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">미지수</span> : 알지 못하는 숫자</h3>
						<div>내일은 또 어떤 하루가 될지 미지수이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무수</span> : 끝이 없는 수</h3>
						<div>무수히 많은 별들이 지구를 향해 빛을 쏘아내고 있었다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 있을 유 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="thereIs_yu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="thereIs_yu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="thereIs_yu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">소유</span> : 가지고 있음</h3>
						<div>내가 소유하고 있는 신발은 한정판이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">유명</span> : 이름이 있다 (알려지다)</h3>
						<div>유명한 작가가 되는 것이 내 꿈이다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">유익</span> : 이익이 있음</h3>
						<div>유투브에는 유익한 정보들도 많다. </div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">유사시</span> : 큰일이 있을 때</h3>
						<div>유사시에 대비하여 재난가방을 준비했다. </div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2>💻 없을 무 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="thereIsnt_mu"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="thereIsnt_mu_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="thereIsnt_mu_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무관심</span> : 관심이 없음</h3>
						<div></div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무례</span> : 예의가 없음</h3>
						<div>그런 무례한 행동을 하다니, 얼른 사과해!</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">무조건</span> : 조건이 없음</h3>
						<div>부모님은 내게 무조건적인 사랑을 주셨다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">만무하다</span> : 결코 없다</h3>
						<div>그렇게 착한 철수가 내 흉을 봤을리 만무하다.</div>
					</div>
					
				</div>	
			</div>
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 반대말 한자를 연결해봅시다.</h3>
				
				<div>
					<ConnectNxNHanjaBox :id="connect_characters0801_id" :characters="connect_characters0801" :meaningList="connect_meaningList0801" :correctPairs="connect_correctPairs0801"></ConnectNxNHanjaBox>
				</div>
			
		</section>

		<section>
			<h2 class="pb-3"> 퀴즈 </h2>
				
				<h3> 맞는 글자를 써봅시다.</h3>
				<div
					class="lineWord-quiz-box"
					v-for="(item, index) in lineWord_QuizItems_08"
					:key="item.svgId"
				>
					<p><strong>{{ item.sentence }}</strong></p>
					<RowWordBlank
					:svgId="item.svgId"
					:words="item.words"
					:term="item.term"
					:width="item.width"
					/>
				</div>

		
		</section>

		

		<section>
			<h2 class="pb-5">부록. 안 배운 8급 한자 </h2>
			<p>
				<h3>8급 한자 중 아직 안 배운 한자들을 살펴봅시다.</h3>
			</p>
		</section>

		<section>
			<h2>💻 마디 촌 / 임금 왕 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="node_chon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="node_chon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="node_chon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="king_wang"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="king_wang_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="king_wang_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				
			</div>
		</section>

		<section>
			<h2>💻 백성 민 / 문 문</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="people_min"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="people_min_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="people_min_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="door_mun"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="door_mun_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="door_mun_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>

			</div>
		</section>

		<section>
			<h2>💻 집 실 / 바깥 외</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="home_sil"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="home_sil_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="home_sil_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="out_woe"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="out_woe_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="out_woe_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				
			</div>
		</section>

		<section>
			<h2>💻 먼저 선 / 날 생</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="first_seon"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="first_seon_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="first_seon_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="born_saeng"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="born_saeng_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="born_saeng_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				
			</div>
		</section>

		
	<!-- 
		<section>
			<h2>💻 군사 군 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="army_gun"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="army_gun_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="army_gun_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					
				</div>	
			</div>
		</section> 
	-->	

		<section>
			<h2>💻 배울 학 / 학교 교</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="study_hak"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="study_hak_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="study_hak_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="school_gyo"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="school_gyo_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="school_gyo_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				
			</div>
		</section>

<!--
		<section>
			<h2>💻 가르칠 교 </h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="teach_gyo"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="teach_gyo_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="teach_gyo_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6 hanja-contents">
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					<div class="alert alert-primary p-1" role="alert">
						<h3> <span style="color: red;">자유</span> : 자기 마음대로 할 수 있는 상태</h3>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
					</div>
					
				</div>	
			</div>
		</section>
-->

		<section>
			<h2>💻 나라이름 한 / 나라 국</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div id="korea_han"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="korea_han_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="korea_han_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div id="country_guk"></div>
					</div>
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="country_guk_button" class="btn btn-primary w-auto"></button>
						</div>
						<div class="col d-flex justify-content-center">
							<i id="country_guk_sound_button" class="fa-solid fa-volume-high"></i>
						</div>
					</div>
				</div>
					
			</div>
		</section>

		

		<section>
			<h2>💻 배울 학</h2>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="row">
						<div class="col d-flex justify-content-center">
							<button id="study_hak1_button" class="btn btn-primary w-auto">배울 학</button>
						</div>			
						<div class="col d-flex justify-content-center">
							<button id="study_hak1_sound_button" class="fa-solid fa-volume-high"></button>
						</div>			
					</div>
					<div class="row">
						<svg width="400" height="400" id="study_hak1">
							<line x1="0" y1="0" x2="400" y2="400" stroke="#DDD" />
							<line x1="400" y1="0" x2="0" y2="400" stroke="#DDD" />
							<line x1="200" y1="0" x2="200" y2="400" stroke="#DDD" />
							<line x1="0" y1="200" x2="400" y2="200" stroke="#DDD" />
						</svg>
					</div>
				</div>

				<div class="col-sm-6">
					<div class="alert alert-primary m-sm-3 m-md-4 m-lg-5" role="alert">
						<h3>자유</h3>
						<p>외부적인 구속이나 무엇에 얽매이지 아니하고 자기 마음대로 할 수 있는 상태.</p>
						<div>어젯밤 꿈속에서 자유롭게 하늘을 날았다.</div>
						<h3>자동</h3>
						<h3>자신감</h3>
						<h3>자존심</h3>
						<h3>자립</h3>	
					</div>
				</div>
			</div>

		</section>


	
	<section>

		<h2 class="pb-4">단어맞추기 퀴즈</h2>
			<p>
		<div class="row">
			<div class="col-md-7">
				<div class="row">
					<h3>나는 요즘 수학에 [ __ __ __ ]이 생겼다. <button class="button" onclick="toggleAnswer()">정답 보기</button></h3>
					
					<h3>나는 요즘 수학에 [ __ __ __ ]이 생겼다.</h3>
				</div>
			</div>
			<div class="col-md-5">
				<div class="row">
					<h3 class="answer">자신감</h3>
					<h3>자신감</h3>
						
					
					
				</div>
			</div>
			<div class="col-md-3"></div>	
		</div>
	</p>
	</section>

	</div>
</div>


</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

import HanziWriter from 'hanzi-writer'
import DragDropNxNHanjaBox from "@/components/services/quiz/DragDropNxNHanjaBox.vue";
import RowWordBlank from "@/components/services/quiz/RowWordBlank.vue";
import CrossWord from "@/components/services/quiz/CrossWord.vue";
import ConnectNxNHanjaBox from "@/components/services/quiz/ConnectNxNHanjaBox.vue";


export default {
	components: {
		HomeButton: HomeButton,
		
		DragDropNxNHanjaBox : DragDropNxNHanjaBox,
		RowWordBlank : RowWordBlank,
		ConnectNxNHanjaBox : ConnectNxNHanjaBox,
		CrossWord : CrossWord
		
	},
	data() {
		return {
			synth : null,	//	음성
			writerList: [],	//	한자리스트

			//1장 퀴즈 01
			characters_0101_id: "characters_0101",
			characters_0101: ['一','八','三','六','四','九','五','七','十','二'],
			dropZones_0101: [
				{ label: '1', answer: '一' },
				{ label: '2', answer: '二' },
				{ label: '3', answer: '三' },
				{ label: '4', answer: '四' },
				{ label: '5', answer: '五' },
				{ label: '6', answer: '六' },
				{ label: '7', answer: '七' },
				{ label: '8', answer: '八' },
				{ label: '9', answer: '九' },
				{ label: '10', answer: '十' }
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,

			//1장 퀴즈 02
			lineWord_QuizItems_01: [
			{
				sentence: '결심한 것이 삼일을 못 간다.',
				svgId: 'lineWordId_0102',
				words: [
				{ text: "작" },
				{ text: "심" },
				{ text: "", answer: "삼" },
				{ text: "일" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '이것 저것 다 잘하는 사람',
				svgId: 'lineWordId_0103',
				words: [
				{ text: "", answer: "팔" },
				{ text: "방" },
				{ text: "미" },
				{ text: "인" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '돈이 하나도 없음',
				svgId: 'lineWordId_0104',
				words: [
				{ text: "무" },
				{ text: "", answer: "일" },
				{ text: "푼" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '차이가 많이 안남. 거기서 거기',
				svgId: 'lineWordId_0105',
				words: [
				{ text: "", answer: "오" },
				{ text: "십" },
				{ text: "보" },
				{ text: "백" },
				{ text: "보" },
				],
				term: 10,
				width: 60,
			},
			],



			//2장 퀴즈 01
			characters_0201_id: "characters_0201",
			characters_0201: ['水','火','日','木','金','月','土'],
			dropZones_0201: [
				{ label: '월', answer: '月' },
				{ label: '화', answer: '火' },
				{ label: '수', answer: '水' },
				{ label: '목', answer: '木' },
				{ label: '금', answer: '金' },
				{ label: '토', answer: '土' },
				{ label: '일', answer: '日' },
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,

			//2장 퀴즈 02
			crossWord_0202_id: "crossWordId_0202",
			crossWord_0202_problems: [
				{ x: 1, y: 1, answer: "방", linear: 1 },
				{ x: 2, y: 1, answer: "화", linear: 2 },
				{ x: 3, y: 1, answer: "문"},
				{ x: 2, y: 2, answer: "재"},
				{ x: 5, y: 0, answer: "목", linear: 3 },
				{ x: 5, y: 1, answer: "관" },
				{ x: 5, y: 2, answer: "악" },
				{ x: 5, y: 3, answer: "기" },
				{ x: 4, y: 3, answer: "토", linear: 4 },
				{ x: 0, y: 4, answer: "평", linear: 5 },
				{ x: 0, y: 5, answer: "일", linear: 6 },
				{ x: 1, y: 5, answer: "기" },
				{ x: 2, y: 5, answer: "예" },
				{ x: 3, y: 5, answer: "보" },

			],
			crossWord_0202_length: 6,
			crossWord_0202_width: 60,

			//2장 퀴즈 02 크로스워드 힌트와 내용
			showHintStates: {},
			hints_0202: [
				{ id: 1, text: '화재를 막는 문', hint: '방_문' },
				{ id: 2, text: '불이 발생함', hint: '_재' },
				{ id: 3, text: '나무로 만든 관악기', hint: '_관악기' },
				{ id: 4, text: '흙으로 만든 그릇', hint: '_기' },
				{ id: 5, text: '월 ~ 금요일', hint: '평_' },
				{ id: 6, text: '날씨를 미리 예보함', hint: '_기예보' },
				],
    		showHintStates: {},  // id별로 true/false 저장

			//3장 퀴즈 01
			connect_characters0301_id: "connect_characters0301",
			connect_characters0301: ['口', '耳', '目', '人', '手', '足'],
			connect_meaningList0301: ['귀', '발', '손', '입', '눈', '사람'],
			connect_correctPairs0301: {
				0: 3,
				1: 0,
				2: 4,
				3: 5,
				4: 2,
				5: 1,
			},
			//3장 퀴즈 02
			lineWord_QuizItems_03: [
			{
				sentence: '',
				svgId: 'lineWordId_0302',
				words: [
				{ text: "", answer: "액체"},
				{ text: "를 얼리면"},
				{ text: "", answer: "고체"},
				{ text: "가 된다."},
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '',
				svgId: 'lineWordId_0303',
				words: [
				{ text: "온"},
				{ text: "", answer: "식구"},
				{ text: "가 모여 치킨을 먹었다."},
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '',
				svgId: 'lineWordId_0304',
				words: [
				{ text: "책을 볼 때는 먼저"},
				{ text: "", answer: "목차"},
				{ text: "를 봐야한다."},
				],
				term: 10,
				width: 60,
			},


			],

			//4장 퀴즈 01
			lineWord_QuizItems_04: [
			{
				sentence: '아버지와 아들 사이',
				svgId: 'lineWordId_0401',
				words: [
				{ text: "부" },
				{ text: "", answer: "자" },
				{ text: "지" },
				{ text: "간" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '아들은 없고 딸 하나만 있음',
				svgId: 'lineWordId_0402',
				words: [
				{ text: "무" },
				{ text: "남" },
				{ text: "독" },
				{ text: "", answer: "녀" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '서로 형, 아우로 부름',
				svgId: 'lineWordId_0403',
				words: [
				{ text: "호" },
				{ text: "", answer: "형" },
				{ text: "호" },
				{ text: "", answer: "제" },
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '같은 이름을 가진 다른 사람',
				svgId: 'lineWordId_0404',
				words: [
				{ text: "동" },
				{ text: "", answer: "명" },
				{ text: "이" },
				{ text: "인" },
				],
				term: 10,
				width: 60,
			},
			
			],

			//4장 퀴즈 02
			connect_characters0406_id: "connect_characters0406",
			connect_characters0406: ['父', '女', '弟', '母',  '兄', '子'],
			connect_meaningList0406: ['엄마', '아빠', '아들', '여자', '형', '아우'],
			connect_correctPairs0406: {
				0: 1,
				1: 3,
				2: 5,
				3: 0,
				4: 4,
				5: 2,
			},

			//5장 퀴즈 01
			characters_0501_id: "characters_0501",
			characters_0501: ['北','下','東','南','上','左','西','右'],
			dropZones_0501: [
				{ label: '위', answer: '上' },
				{ label: '아래', answer: '下' },
				{ label: '왼쪽', answer: '左' },
				{ label: '오른쪽', answer: '右' },
				{ label: '동', answer: '東' },
				{ label: '서', answer: '西' },
				{ label: '남', answer: '南' },
				{ label: '북', answer: '北' },
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,

			//5장 퀴즈 02
			crossWord_0502_id: "crossWordId_0502",
			crossWord_0502_problems: [
				{ x: 1, y: 0, answer: "마", linear: 1 },
				{ x: 2, y: 0, answer: "이" },
				{ x: 3, y: 0, answer: "동", linear: 2 },
				{ x: 4, y: 0, answer: "풍" },
				{ x: 3, y: 1, answer: "문" },
				{ x: 3, y: 2, answer: "서", linear: 3 },
				{ x: 3, y: 3, answer: "답" },
				{ x: 4, y: 2, answer: "양" },
				{ x: 5, y: 2, answer: "인" },
				{ x: 0, y: 2, answer: "우", linear: 4 },
				{ x: 0, y: 3, answer: "왕" },
				{ x: 0, y: 4, answer: "좌", linear: 5 },
				{ x: 0, y: 5, answer: "왕" },
				{ x: 1, y: 4, answer: "회" },
				{ x: 2, y: 4, answer: "전" },
				
			],
			crossWord_0502_length: 6,
			crossWord_0502_width: 60,

			//5장 퀴즈 02 크로스워드 힌트와 내용
			showHintStates: {},
			hints_0502: [
				{ id: 1, text: '남 말을 무시함', hint: '말의 귀에 동풍. 마이_풍' },
				{ id: 2, text: '엉뚱한 대답을 함', hint: '동쪽을 물었더니 서쪽을 대답. _문_답' },
				{ id: 3, text: '서양에 사는 사람', hint: '_양인' },
				{ id: 4, text: '오른쪽 왼쪽으로 왔다 갔다 함', hint: '_왕_왕' },
				{ id: 5, text: '왼쪽으로 돔', hint: '_회전' },
				
				],
    		showHintStates: {},  // id별로 true/false 저장

			//6장 퀴즈 01
			connect_characters0601_id: "connect_characters0601",
			connect_characters0601: ['白', '靑', '紅', '黑'],
			connect_meaningList0601: ['파랑', '검정', '하양', '빨강'],
			connect_correctPairs0601: {
				0: 2,
				1: 0,
				2: 3,
				3: 1,
			},
			//6장 퀴즈 02
			connect_characters0602_id: "connect_characters0602",
			connect_characters0602: ['夏', '春', '秋', '冬'],
			connect_meaningList0602: ['겨울', '가을', '여름', '봄'],
			connect_correctPairs0602: {
				0: 2,
				1: 3,
				2: 1,
				3: 0,
			},
			
			//7장 퀴즈 01
			crossWord_0701_id: "crossWordId_0701",
			crossWord_0701_problems: [
				{ x: 0, y: 0, answer: "우", linear: 1 },
				{ x: 0, y: 1, answer: "천", linear: 2 },
				{ x: 0, y: 2, answer: "시" },
				{ x: 1, y: 1, answer: "재" },
				{ x: 2, y: 1, answer: "지", linear: 3 },
				{ x: 3, y: 1, answer: "변" },
				{ x: 2, y: 2, answer: "구" },
				{ x: 2, y: 4, answer: "설", linear: 4 },
				{ x: 2, y: 5, answer: "경" },
				{ x: 1, y: 5, answer: "해", linear: 5 },
				{ x: 5, y: 2, answer: "화", linear: 6 },
				{ x: 5, y: 3, answer: "원" },
				{ x: 4, y: 3, answer: "초", linear: 7 },
				
				
			],
			crossWord_0701_length: 6,
			crossWord_0701_width: 60,

			//7장 퀴즈 01 크로스워드 힌트와 내용
			showHintStates: {},
			hints_0701: [
				{ id: 1, text: '비가 내릴 때', hint: '_천시' },
				{ id: 2, text: '자연에 의한 재앙', hint: '_재_변' },
				{ id: 3, text: '우리가 사는 행성', hint: '_구' },
				{ id: 4, text: '눈이 내린 풍경', hint: '_경' },
				{ id: 5, text: '바다의 경찰', hint: '_경' },
				{ id: 6, text: '꽃이 핀 정원', hint: '_원' },
				{ id: 7, text: '풀이 난 들판', hint: '_원' },
				
				],
    		showHintStates: {},  // id별로 true/false 저장

			//7장 퀴즈 02
			characters_0702_id: "characters_0702",
			characters_0702: ['山','草','天','雲','海','花','雪','雨'],
			dropZones_0702: [
				{ label: '하늘', answer: '天' },
				{ label: '산', answer: '山' },
				{ label: '구름', answer: '雲' },
				{ label: '비', answer: '雨' },
				{ label: '눈', answer: '雪' },
				{ label: '바다', answer: '海' },
				{ label: '꽃', answer: '花' },
				{ label: '풀', answer: '草' },
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,


			//8장 퀴즈 01
			connect_characters0801_id: "connect_characters0801",
			connect_characters0801: ['大', '多', '長', '新', '有'],
			connect_meaningList0801: ['짧다', '옛', '적다', '없다', '작다'],
			connect_correctPairs0801: {
				0: 4,
				1: 2,
				2: 0,
				3: 1,
				4: 3,
			},

			//8장 퀴즈 02
			lineWord_QuizItems_08: [
			{
				sentence: '',
				svgId: 'lineWordId_0802',
				words: [
				{ text: "세계"},
				{ text: "", answer: "신기록"},
				{ text: "을 세워 기네스북에 올랐다."},
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '',
				svgId: 'lineWordId_0803',
				words: [
				{ text: "단점이 있으면"},
				{ text: "", answer: "장점"},
				{ text: "도 있는 법이다."},
				],
				term: 10,
				width: 60,
			},
			{
				sentence: '',
				svgId: 'lineWordId_0804',
				words: [
				{ text: "", answer: "다수결"},
				{ text: "로 정할테니, 찬성하는 사람은 손을 들어주세요."}
				],
				term: 10,
				width: 60,
			},


			],

			


		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},

		initializeHanja(id, hanja, detail) {
			var writer = HanziWriter.create(id, hanja, {
				width: 400,
				height: 400,
				padding: 5,
				showOutline: true,
				strokeAnimationSpeed: 0.4,
				radicalColor: '#168F16' // green
				// delayBetweenLoops: 3000,
				// strokeAnimationSpeed: 5, // 5x normal speed
				// delayBetweenStrokes: 10, // milliseconds
				// radicalColor: '#337ab7' // blue
			});

			document.getElementById(id+ '_button').textContent = detail;
			document.getElementById(id+ '_button').addEventListener('click', () => {
				writer.animateCharacter();
			});
			document.getElementById(id+ '_sound_button').addEventListener('click', () => {
				const utterance = new SpeechSynthesisUtterance(detail);
				const voices = this.synth.getVoices();
				if (voices.length === 0) {
					// 음성 목록이 비어 있으면 로딩될 때까지 기다림
					this.synth.onvoiceschanged = function() {
						const voices = synth.getVoices();
						utterance.voice = voices.find(voice => voice.lang === 'ko-KR'); // 원하는 언어로 설정
						this.synth.speak(utterance);
					};
				} else {
					utterance.voice = voices.find(voice => voice.lang === 'ko-KR');
					this.synth.speak(utterance);
				}
			});
			this.writerList.push(writer);
		}
	},
	onUnmounted (){
		// this.writer.stopAnimation();
		for(const writer in this.writerList){
			writer.stopAnimation();
		}
	},
  
	mounted() {
		
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
        this.deck = initializeReveal(this.$refs.revealRef, false);

		this.synth = window.speechSynthesis;

		//크로스워드 힌트와 내용물 자동으로 불러오는 코드
		this.hints_0202.forEach(h => {
			this.showHintStates[h.id] = false;
		});
		//

		// 한지라이터 자동으로 불러오는 코드
		//1장
		this.initializeHanja('one_il', '一', '하나 일');
		this.initializeHanja('two_i', '二', '둘 이');
		this.initializeHanja('three_sam', '三', '석 삼');
		this.initializeHanja('four_sa', '四', '넉 사');
		this.initializeHanja('five_o', '五', '다섯 오');
		this.initializeHanja('six_yuk', '六', '여섯 육');
		this.initializeHanja('seven_chil', '七', '일곱 칠');
		this.initializeHanja('eight_pal', '八', '여덟 팔');
		this.initializeHanja('nine_gu', '九', '아홉 구');
		this.initializeHanja('ten_sib', '十', '열 십');
		this.initializeHanja('baek_baek', '百', '일백 백');
		this.initializeHanja('cheon_cheon', '千', '일천 천');
		this.initializeHanja('man_man', '萬', '일만 만');
		//2장
		this.initializeHanja('moon_wueol', '月', '달 월');
		this.initializeHanja('fire_hwoa', '火', '불 화');
		this.initializeHanja('water_su', '水', '물 수');
		this.initializeHanja('tree_mok', '木', '나무 목');
		this.initializeHanja('iron_geum', '金', '쇠 금');
		this.initializeHanja('soil_to', '土', '흙 토');
		this.initializeHanja('day_il', '日', '날 일');
		this.initializeHanja('year_nyeon', '年', '해 년');
		this.initializeHanja('time_si', '時', '때 시');
		this.initializeHanja('divide_bun', '分', '나눌 분');
		//3장
		this.initializeHanja('human_in', '人', '사람 인');
		this.initializeHanja('eye_mok', '目', '눈 목');
		this.initializeHanja('mouth_gu', '口', '입 구');
		this.initializeHanja('ear_i', '耳', '귀 이');
		this.initializeHanja('hand_su', '手', '손 수');
		this.initializeHanja('foot_jok', '足', '발 족');
		this.initializeHanja('nose_bi', '鼻', '코 비');
		this.initializeHanja('head_du', '頭', '머리 두');
		this.initializeHanja('body_che', '體', '몸 체');
		//4장
		this.initializeHanja('fathe_bu', '父', '아비 부');
		this.initializeHanja('mother_mo', '母', '어미 모');
		this.initializeHanja('son_ja', '子', '아들 자');
		this.initializeHanja('woman_nyeo', '女', '계집 녀');
		this.initializeHanja('olderbrother_hyeong', '兄', '형 형');
		this.initializeHanja('youngerbrother_je', '弟', '아우 제');
		this.initializeHanja('house_ga', '家', '집 가');
		this.initializeHanja('name_myoeng', '名', '이름 명');
		this.initializeHanja('oldersister_ja', '姊', '손윗누이 자');
		this.initializeHanja('youngersister_mae', '妹', '누이 매');
		this.initializeHanja('self_ja', '自', '스스로 자');
		this.initializeHanja('friend_wu', '友', '벗 우');
		//5장
		this.initializeHanja('up_sang', '上', '윗 상');
		this.initializeHanja('down_ha', '下', '아래 하');
		this.initializeHanja('left_jyoa', '左', '왼 좌');
		this.initializeHanja('right_wu', '右', '오른 우');
		this.initializeHanja('center_jung', '中', '가운데 중');
		this.initializeHanja('east_dong', '東', '동녘 동');
		this.initializeHanja('west_seo', '西', '서녘 서');
		this.initializeHanja('south_nam', '南', '남녘 남');
		this.initializeHanja('north_buk', '北', '북녘 북');
		this.initializeHanja('front_jeon', '前', '앞 전');
		this.initializeHanja('back_hu', '後', '뒤 후');
		//6장
		this.initializeHanja('white_baek', '白', '흰 백');
		this.initializeHanja('black_heuk', '黑', '검을 흑');
		this.initializeHanja('red_hong', '紅', '붉을 홍');
		this.initializeHanja('blue_cheong', '靑', '푸를 청');
		this.initializeHanja('green_nok', '綠', '푸를 록');
		this.initializeHanja('yellow_hwang', '黃', '누를 황');
		this.initializeHanja('spring_chun', '春', '봄 춘');
		this.initializeHanja('summer_ha', '夏', '여름 하');
		this.initializeHanja('autumn_chu', '秋', '가을 추');
		this.initializeHanja('winter_dong', '冬', '겨울 동');
		//7장
		this.initializeHanja('sky_cheon', '天', '하늘 천');
		this.initializeHanja('land_ji', '地', '땅 지');
		this.initializeHanja('rain_wu', '雨', '비 우');
		this.initializeHanja('cloud_wun', '雲', '구름 운');
		this.initializeHanja('snow_seol', '雪', '눈 설');
		this.initializeHanja('wind_pung', '風', '바람 풍');
		this.initializeHanja('grass_cho', '草', '풀 초');
		this.initializeHanja('flower_hwoa', '花', '꽃 화');
		this.initializeHanja('montain_san', '山', '뫼 산');
		this.initializeHanja('sea_hae', '海', '바다 해');
		//8장
		this.initializeHanja('big_dae', '大', '클 대');
		this.initializeHanja('small_so', '小', '작을 소');
		this.initializeHanja('many_da', '多', '많을 다');
		this.initializeHanja('little_so', '少', '적을 소');
		this.initializeHanja('long_jang', '長', '길 장');
		this.initializeHanja('short_dan', '短', '짧을 단');
		this.initializeHanja('new_sin', '新', '새 신');
		this.initializeHanja('old_go', '古', '옛 고');
		this.initializeHanja('same_dong', '同', '같을 동');
		this.initializeHanja('count_su', '數', '셀 수');
		this.initializeHanja('thereIs_yu', '有', '있을 유');
		this.initializeHanja('thereIsnt_mu', '無', '없을 무');
		
		//부록
		this.initializeHanja('node_chon', '寸', '마디 촌');
		this.initializeHanja('king_wang', '王', '임금 왕');
		this.initializeHanja('people_min', '民', '백성 민');
		this.initializeHanja('door_mun', '門', '문 문');
		this.initializeHanja('home_sil', '室', '집 실');
		this.initializeHanja('out_woe', '外', '바깥 외');
		this.initializeHanja('first_seon', '先', '먼저 선');
		this.initializeHanja('born_saeng', '生', '날 생');
		//this.initializeHanja('army_gun', '軍', '군사 군');
		this.initializeHanja('study_hak', '學', '배울 학');
		// this.initializeHanja('teach_gyo', '敎', '가르칠 교');	//	얘 이상함 한자 있는거 맞음?
		this.initializeHanja('school_gyo', '校', '학교 교');
		this.initializeHanja('korea_han', '韓', '나라이름 한');
		this.initializeHanja('country_guk', '國', '나라 국');
		//

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
        this.deck.on('slidechanged', (event) => {
			// this.currentPage = event.indexh;
			console.log("Slide is now " + event.indexh);

			this.writerList.forEach((element)=>{
				// console.log(element);
				element.pauseAnimation();
			})
			
			if(event.indexh == 1){
				
			}
		});
	},
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');

svg {
 /*fill: none;*/
 /* min-width : 600px;
 min-height: 700px; */
 stroke-width: 3px;
 stroke-linecap: round;
 /*margin-left: -50px;
 margin-top: -50px;*/
 /* display: none; */
}

@media (max-width: 768px) { /* 모바일 화면 크기 */
  .hanja-contents {
    display: flex;
    flex-direction: column;  /* 세로로 배치 */
    gap: 15px;   /* 항목 간의 간격 */            
    padding: 10px;
	margin-top: 3rem;
	/* font-family: "KyoboHand", sans-serif; */
  }

}
/* .hanja-contents {
	font-family: "KyoboHand", sans-serif;
  } */


.hanja-font {
	font-family: "KyoboHand", sans-serif;
	font-size: 30px;
}

.lineWord-quiz-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff;
  border: 2px solid #4CAF50;
  padding: 1rem 1.5rem;
  padding-left: 4rem;
  border-radius: 8px;
  max-width: 1000px; 
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 1rem auto;
}
</style>