<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
		<!-- 
			<div class="backgrounds" style="background-image: url(&quot;https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg&quot;); background-size: 2100px 900px; background-position: 0px 0px;">
			<div class="slide-background present" data-loaded="true" style="display: block;">
				<div class="slide-background-content"></div>
			</div>
			<div class="slide-background future" data-loaded="true" style="display: block;">
				<div class="slide-background-content"></div></div>
				<div class="slide-background stack future" data-loaded="true" style="display: block;">
					<div class="slide-background-content"></div>
					<div class="slide-background present" data-loaded="true" style="display: block;">
						<div class="slide-background-content"></div>
					</div>
					<div class="slide-background future" style="display: none;" data-loaded="true">
						<div class="slide-background-content"></div>
					</div>
					<div class="slide-background future" style="display: none;" data-loaded="true">
						<div class="slide-background-content"></div>
					</div>
				</div>
				<div class="slide-background future" style="display: none;" data-loaded="true">
					<div class="slide-background-content"></div>
				</div>
				<div class="slide-background future" style="display: none;" data-loaded="true">
					<div class="slide-background-content"></div>
				</div>
				<div class="slide-background future" style="display: none;" data-loaded="true"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;" data-loaded="true"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;" data-loaded="true"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;" data-loaded="true"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;" data-loaded="true"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" data-background-hash="#ddddddnullnullnullnullnullnullnullnullnullnull" style="background: rgb(221, 221, 221); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.pngnullnullnullnullnullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.png100pxnullnullnullnullnullrepeatnullnullnull" data-background-size="100px" style="display: none;"><div class="slide-background-content" style="background-size: 100px; background-repeat: repeat;"></div></div><div class="slide-background future" data-background-hash="0https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4null#000000nullnullnullnullnull" style="background-color: rgb(0, 0, 0); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="http://i.giphy.com/90F8aUepslB84.gifnullnullnullnullnullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" data-background-hash="#4d7e65nullnullnullnullnullnullnullnullzoomnull" data-background-transition="zoom" style="background: rgb(77, 126, 101); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="#b5533cnullnullnullnullnullnullnullnullzoomnull" data-background-transition="zoom" style="background: rgb(181, 83, 60); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="0https://hakim.senullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div>
       -->
		<div class="slides">
  

<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 여행일본어 초급회화</h1>
	<!-- </p> -->

	<div class="row">
		<div class="col-md-12">
			<table class="table table-borderless table-responsive card-1 p-4">
				<thead>
					<tr class="border-bottom text-nowrap">
					<th class="w-10">
						<span class="ml-2"># 주차</span>
					</th>
					<th class="w-auto">
						<span class="ml-2">주제</span>
					</th>
					<th class="w-10">
						<span class="ml-4">Action</span>
					</th>
					</tr>
				</thead>
				<tbody>
					<tr class="border-bottom text-nowrap">
						<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>
							<div class="p-2">
								<span class="font-weight-bold">인사말과 시간 - 인사말, 숫자와 시간, Quiz</span>
							</div>
						</td>
						<td>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(2-1)"></i>
								<!-- <Button @click="play" label="Trumpet"> 🎺 </Button> -->
							</div>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(4-1)"></i>
								<!-- <i class="fa-solid fa-play" @click="play"></i> -->
							</div>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(5-1)"></i>
							</div>
						</td>
					</tr>
					<tr class="border-bottom text-nowrap">
						<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>
						</td>
						<td>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(10-1)"></i>
							</div>
						</td>
					</tr>
					<tr class="border-bottom text-nowrap">
						<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>
						</td>
						<td>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(19-1)"></i>
							</div>
						</td>
					</tr>
					<tr class="border-bottom text-nowrap">
						<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>
						</td>
						<td>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(25-1)"></i>
							</div>
						</td>
					</tr>
					<tr class="border-bottom text-nowrap">
						<td>
							<div class="p-2">
								<span class="d-block font-weight-bold">5주차</span>
								<small>~월 ~일 ~시</small>
							</div>
						</td>
						<td>
							<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(34-1)"></i>
							</div>
						</td>
					</tr>
					<tr class="border-bottom text-nowrap">
						<td>
							<div class="p-2">
								<span class="d-block font-weight-bold">6주차</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(41-1)"></i>
							</div>
							<div class="p-2 icons">
								<i class="fa fa-share" @click="goSlide(45-1)"></i>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</section>
<section>
	<h2 class="pb-5">0. 일본어 오십음도</h2>
	<p>
		<div class="row">
			<div class="col mx-4">
				<h4>히라가나</h4>
				<img src="/japanese/TravelBasic/hiragana_hangle.png" height="500px"/>
			</div>
			<div class="col mx-4">
				<h4>카타카나</h4>
				<img src="/japanese/TravelBasic/katakana_hangle.png" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">0. 일본어 오십음도</h2>
	<p>
		<div class="row">
			<div class="col mx-4">
				<h4>탁음 <a href="https://www.youtube.com/watch?v=1EZubBAU030" target="_blank"><i class="fa fa-share"></i></a></h4>
				<img src="/japanese/TravelBasic/tak_hangle.png" height="500px"/>
			</div>
			<div class="col mx-4">
				<h4>반탁음</h4>
				<img src="/japanese/TravelBasic/bantak_hangle.png" height="500px"/>
			</div>
			<div class="col mx-4">
				<h4>요음/촉음</h4>
				<img src="/japanese/TravelBasic/yochok_hangle.png" height="500px"/>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0003.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">0. 여행일정 (도쿄 패스권을 구입하여 대부분 지하철로 이동)</h2>
	<p>
		<!-- <img src="/japanese/TravelBasic/tokyoumetro.png" height="300px"/> -->
		<h4>1일차: 나리타 공항 – 스카이라이너 – 호텔(팰리스 호텔 도쿄) – 식사(긴자) – 도쿄타워</h4>
		<h4>2일차: 아사쿠사 – (기모노 렌탈, 인력거) – 쇼핑 – 도에이 아사쿠사선 - 하네다 공항</h4>
		<!-- <img src="/japanese/TravelBasic/routemap_skyliner.jpg" height="300px"/> -->
	</p>
</section>
<section>
	<h2 class="pb-4">1. 이것은 기억하자. 
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3>ありがとうございます。/ すみません。</h3>
					<h3>お<ruby>願<rt>ねが</rt></ruby>いします。</h3>
					<h3>おはようございます。</h3>
					<h3>こんにちは。/ こんばんは。</h3>
					<h3>숫자 읽기</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">1. 인사말과 시간 - 인사말</h2>
	<p>
		<h3>환영합니다 : ようこそ 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p1_01')"></i>
		</h3>
		<h3>고맙습니다 :　ありがとうございます 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p1_02')"></i>
		</h3>
		<h3>죄송합니다 :　すみません。ごめんなさい 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p1_03')"></i>
		</h3>
		<h3>부탁합니다 :　お<ruby>願<rt>ねが</rt></ruby>いします。(주세요 에도 통용.) 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p1_04')"></i>
		</h3>
	</p>
</section>
<section>
	<h2 class="pb-4">1. 인사말과 시간 - 인사말</h2>
	<p>
		<h3>네 : はい。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p2_01')"></i>
		</h3>
		<h3>아니요 : いいえ。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p2_02')"></i>
		</h3>
		<h3>아침인사 : おはようございます。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p2_03')"></i>
		</h3>
		<h3>점심인사 :　こんにちは。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p2_04')"></i>
		</h3>
		<h3>저녁인사 :　こんばんは。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p2_05')"></i>
		</h3>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 인사말과 시간 - 숫자와 시간</h3>
	<p>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >숫자</td>
					<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>일본어
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_01_1')"></i>
					</td>
					<td>一<br>いち</td><td>ニ<br>に</td><td>三<br>さん</td><td>四<br>し / よん</td><td>五<br>ご</td>
				</tr>
				<tr>
					<td>시간 (じ)
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_02_1')"></i>
					</td>
					<td>いち<ruby>時<rt>じ</rt></ruby></td><td>に<ruby>時<rt>じ</rt></ruby></td><td>さん<ruby>時<rt>じ</rt></ruby></td>
					<td class="bg-warning">よ<ruby>時<rt>じ</rt></ruby></td><td>ご<ruby>時<rt>じ</rt></ruby></td>
				</tr>
				<tr>
					<td>분 (分)
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_03_1')"></i>
					</td>
					<td class="bg-info">いっぷん</td>
					<td>にふん</td>
					<td class="bg-info">さんぷん</td>
					<td class="bg-info">よんぷん</td>
					<td>ごふん</td>
				</tr>
			</tbody>
		</table>
		<hr>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >숫자</td>
					<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>일본어
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_01_2')"></i>
					</td>
					<td>六<br>ろく</td><td>七<br>しち / なな</td><td>八<br>はち</td><td>九<br>きゅう / く</td><td>十<br>じゅう</td>
				</tr>
				<tr>
					<td>시간 (じ)
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_02_2')"></i>
					</td>
					<td>ろく<ruby>時<rt>じ</rt></ruby></td><td>しち<ruby>時<rt>じ</rt></ruby></td><td>はち<ruby>時<rt>じ</rt></ruby></td>
					<td class="bg-warning">く<ruby>時<rt>じ</rt></ruby></td><td>じゅう<ruby>時<rt>じ</rt></ruby></td>
				</tr>
				<tr>
					<td>분 (分)
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch1_p3_03_2')"></i>
					</td>
					<td class="bg-info">ろっぷん</td>
					<td>ななふん</td>
					<!-- <td>はちふん<br>はっぷん</td> -->
					<td class="bg-info">はっぷん</td>
					<td>きゅうふん</td>
					<td class="bg-info">じゅっぷん</td>
				</tr>
			</tbody>
		</table>
	</p>
</section>
<section>
	<h2 class="pb-4">1. 인사말과 시간 - Quiz</h2>
	<p>
		<h3>시계를 읽어봅시다.</h3>
		<img src="/japanese/TravelBasic/tokei_1.png"/>
		<img src="/japanese/TravelBasic/tokei_2.png"/>
		<h3>369게임을 해봅시다.</h3>
	</p>
</section>
<section>
	<h2 class="pb-4">2. 이것은 기억하자. 
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3>～は　どこ ですか。</h3>
					<h3><ruby>左側<rt>ひだりがわ</rt></ruby>です。　/   <ruby>右側<rt>みぎがわ</rt></ruby>です。</h3>
					<h3>~に<ruby>乗<rt>の</rt></ruby>ります。</h3>
					<h3>~はどこで<ruby>乗<rt>の</rt></ruby>りますか。</h3>
					<h3>ここ / そこ / あそこ</h3>
					<h3>질문에는 뒤에 か / 명사에는 です。</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">2. 공항에서 호텔까지</h2>
	<p>
		<h3>(오테마치역 하차, 펠리스호텔도쿄 숙박)</h3>
		<h3>나리타공항에 도착해서</h3>
		<h3>스카이라이너 타고 우에노역에 내리기</h3>
		
		<a href="https://www.keisei.co.jp/keisei/tetudou/skyliner/kr/traffic/skyliner.php" target="_blank">
			<img src="/japanese/TravelBasic/routemap_skyliner.jpg">
		</a>
	</p>
</section>
<section>
	<h2 class="pb-4">2. 공항에서 호텔까지</h2>
	<p>
		<h3>(장소)는 어디 입니까?  : ～は　どこ ですか。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p2_01')"></i>
		</h3>
		<hr><br>
		<h3>화장실  : <ruby>トイレ<rt>といれ</rt></ruby> 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p2_02')"></i>
		</h3>
		<h3>출구 : <ruby>出口<rt>でぐち</rt></ruby> 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p2_03')"></i>
		</h3>
		<h3>표사는곳 : <ruby>切符売<rt>きっぷう</rt></ruby>り<ruby>場<rt>ば</rt></ruby> 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p2_04')"></i>
		</h3>
		<h3>인포메이션 : <ruby>インフォメ<rt>いんぽおめ</rt></ruby>ー<ruby>ション<rt>しょん</rt></ruby> 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p2_05')"></i>
		</h3>
		<br>
		<h3>💡 질문에는 뒤에 か!</h3>
		<br>
		<h3>❓ 다양한 장소를 넣어 말해봅시다.</h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0202_1.png" data-background-opacity="1.0" data-background-position="center">
</section>
<section>
	<h2 class="pb-4">2. 공항에서 호텔까지 - 방향표현</h2>
	<p>
		<h3><ruby>左<rt>ひだり</rt></ruby> &nbsp;&nbsp;&nbsp;&nbsp; <ruby>右<rt>みぎ</rt></ruby> 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p3_01')"></i>
		</h3>
		<h3><ruby>左側<rt>ひだりがわ</rt></ruby>です。&nbsp;&nbsp;&nbsp;<ruby>右側<rt>みぎがわ</rt></ruby>です。 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p3_02')"></i>
		</h3>
		<br>
		<h3>💡 명사에는 です! (~입니다)</h3>
		<br>
		<h3>🎲 방향을 맞춰보세요! <a href="https://scratch.mit.edu/projects/1024699452" target="_blank"><i class="fa fa-share"></i></a></h3>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 한국어 지도 주세요. :  <ruby>韓国語<rt>かんこくご</rt></ruby>の　<ruby>地図<rt>ちず</rt></ruby>　お<ruby>願<rt>ねが</rt></ruby>いします。 
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p3_03')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0204.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">2. 공항에서 호텔까지 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-7">
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: あのう、すみません。<ruby>トイレ<rt>といれ</rt></ruby>はどこですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p4_01')"></i>
						</h3>
						<h4 class="real-subtitle">저.. 죄송합니다. 화장실이 어디입니까?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">👧: <ruby>トイレ<rt>といれ</rt></ruby>ですね。<ruby>右側<rt>みぎがわ</rt></ruby>です。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p4_02')"></i>
						</h3>
						<h4 class="real-subtitle">화장실이요. 오른쪽입니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: ありがとうございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p4_03')"></i>
						</h3>
						<h4 class="real-subtitle">감사합니다.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2">&nbsp;</div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">2. 공항에서 호텔까지 - 지하철 타기</h2>
	<p>
		<h3>~을 탑니다.　:  ~に　<ruby>乗<rt>の</rt></ruby>ります。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p5_01')"></i>
		</h3>
		<hr>
		<a href="/japanese/TravelBasic/tokyoumetro.png" target="_blank">
    		<img src="/japanese/TravelBasic/tokyoumetro.png" style="height:450px;width:auto;" />
  		</a>
		<h3>각 선을 넣어 말해봅시다.</h3>
	</p>
</section>
<section>
	<h2 class="pb-4">2. 공항에서 호텔까지 - 지하철 타기</h2>
	<p>
		<h3>~은 어디에서 탑니까?　:　 ~は　どこで　<ruby>乗<rt>の</rt></ruby>りますか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p6_01')"></i>
		</h3>
		<hr>
		<h3>❓ 다양한 대중교통을 넣어 말해봅시다!</h3>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th>여기</th><th>거기</th><th>저기</th><th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ここ</td><td>そこ</td><td>あそこ</td><td><i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p6_02')"></i></td>
				</tr>
				<tr>
					<td>ここで<ruby>乗<rt>の</rt></ruby>ります。</td><td>そこで<ruby>乗<rt>の</rt></ruby>ります。</td><td>あそこで<ruby>乗<rt>の</rt></ruby>ります。</td><td><i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p6_03')"></i></td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>💡 동사에는 ます。! (~ㅂ니다.)</h3>
		<h3>🎲 방향 지시어를 맞춰봅시다! <a href="https://scratch.mit.edu/projects/1024703670" target="_blank"><i class="fa fa-share"></i></a></h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ ~에서 갈아탑니다. :  ~で<ruby>乗<rt>の</rt></ruby>り<ruby>換<rt>か</rt></ruby>えます。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p6_04')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0207.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">2. 공항에서 호텔까지 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-8">
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: あのう、すみません。<ruby>銀座線<rt>ぎんざせん</rt></ruby>はどこで<ruby>乗<rt>の</rt></ruby>りますか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p7_01')"></i>
						</h3>
						<h4 class="real-subtitle">저.. 죄송합니다. 긴자선은 어디에서 탑니까?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">👧: えと、<ruby>銀座線<rt>ぎんざせん</rt></ruby>ですね。あそこで<ruby>乗<rt>の</rt></ruby>ります。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p7_02')"></i>
						</h3>
						<h4 class="real-subtitle">음..긴자선이요. 저기서 탑니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: ありがとうございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch2_p7_03')"></i>
						</h3>
						<h4 class="real-subtitle">감사합니다.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-1">&nbsp;</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">3. 이것은 기억하자.
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3>こちら(こっち)　/ そちら(そっち)　/ あちら(あっち)</h3>
					<h3>~は　どこに　ありますか。</h3>
					<h3>～<ruby>階<rt>かい</rt></ruby>に あります。</h3>
					<h3>동사에는 ます。</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">3. 호텔에서 - 체크인</h2>
	<p>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th>예약</th><th>체크인</th><th>이름</th><th>사인</th><th>여권</th><th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><ruby>予約<rt>よやく</rt></ruby></td>
					<td><ruby>チェックイン<rt>ちぇっくいん</rt></ruby></td>
					<td><ruby>名前<rt>なまえ</rt></ruby>  (성함 : お名前)</td>
					<td><ruby>サイン<rt>さいん</rt></ruby></td>
					<td>パスポート</td>
					<th><i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p1_01')"></i></th>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th>이쪽</th><th>그쪽</th><th>저쪽</th><th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>こちら(こっち)</td><td>そちら(そっち)</td><td>あちら(あっち)</td>
					<td><i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p1_02')"></i></td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>💡 단어에  ご나 お 를 붙이면 정중한 표현!</h3>
		<h3>💡 ございます。는 です。 의 정중한 표현!</h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ ~ 할 수 있습니까? :  ～できますか。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p1_03')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0302.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">3. 호텔에서 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-9">
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: こんにちは。<ruby>チェックイン<rt>ちぇっくいん</rt></ruby>お<ruby>願<rt>ねが</rt></ruby>いします。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p2_01')"></i>
						</h3>
						<h4 class="real-subtitle">안녕하세요. 체크인 부탁합니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: はい。ご<ruby>予約<rt>よやく</rt></ruby>のお<ruby>名前<rt>なまえ</rt></ruby>お<ruby>願<rt>ねが</rt></ruby>いします。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p2_02')"></i>
						</h3>
						<h4 class="real-subtitle">네. 예약하신 성함 부탁드립니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: 홍길동です。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p2_03')"></i>
						</h3>
						<h4 class="real-subtitle">홍길동입니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: 홍길동<ruby>様<rt>さま</rt></ruby>ですね。パスポートお願いします。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p2_04')"></i>
						</h3>
						<h4 class="real-subtitle">홍길동님이시군요. 여권 부탁드립니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: <small style="vertical-align: middle;">(확인 중…)</small></h3>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: お<ruby>待<rt>ま</rt></ruby>たせしました。こちらに<ruby>サイン<rt>さいん</rt></ruby>お<ruby>願<rt>ねが</rt></ruby>いします。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p2_05')"></i>
						</h3>
						<h4 class="real-subtitle">오래 기다리셨습니다. 여기에 싸인 부탁드립니다.</h4>
					</div>
				</div>
			</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">3. 호텔에서 - 편의시설</h2>
	<p>
		<h3>~는 어디에 있습니까?  :  ~は　どこに　ありますか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_01')"></i>
		</h3>
		<hr><br>
		<h3>다음 장소를 넣어서 말해봅시다.</h3>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>레스토랑<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_1')"></i></td>
					<td>로비<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_2')"></i></td>
					<td>수영장<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_3')"></i></td>
					<td>카페<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_4')"></i></td>
					<td>엘리베이터<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_5')"></i></td>
					<td>사우나<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_6')"></i></td>
					<td>편의점<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_02_7')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><ruby>レストラン<rt>れすとらん</rt></ruby></td>
					<td>ロビー</td>
					<td><ruby>プ<rt>ぷ</rt></ruby>ー<ruby>ル<rt>る</rt></ruby></td>
					<td><ruby>カフェ<rt>かふぇ</rt></ruby></td>
					<td><h5><ruby>エレベ<rt>えれべ</rt></ruby>ー<ruby>タ<rt>た</rt></ruby>ー</h5></td>
					<td><ruby>サウナ<rt>さうな</rt></ruby></td>
					<td><ruby>コンビニ<rt>こんびに</rt></ruby></td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>💡 무생물엔 あります。 생물엔 います。!</h3>
		<h3>🎲 I'm 그라운드 게임을 해봅시다! </h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 와이파이 비번은 무엇입니까? :  <ruby>ワイパイ<rt>わいぱい</rt></ruby>の<ruby>パスワ<rt>ぱすわ</rt></ruby>ー<ruby>ド<rt>ど</rt></ruby>は<ruby>何<rt>なん</rt></ruby>ですか。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p3_03')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">3. 호텔에서 - ~층</h2>
	<p>
		<h3>~ 층에 있습니다. : ～<ruby>階<rt>かい</rt></ruby>に あります。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p4_01')"></i>
		</h3>
		<hr><br> 
		<h3>앞에서 배운 숫자를 넣어 말해봅시다.</h3>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th></th><th>1층</th><th>2층</th><th>3층</th><th>4층</th><th>5층</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표기</td>
					<td>一階</td><td>二階</td><td>三階</td>
					<td>四階</td><td>五階</td>
				</tr>
				<tr>
					<td>읽기
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p4_02_1')"></i>
					</td>
					<td class="bg-info">いっかい</td><td>にかい</td><td class="bg-warning">さんがい</td>
					<td>よんかい</td><td>こかい</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th></th><th>6층</th><th>7층</th><th>8층</th><th>9층</th><th>10층</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표기</td>
					<td>六階</td>
					<td>七階</td><td>八階</td><td>九階</td><td>十階</td>
				</tr>
				<tr>
					<td>읽기
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p4_02_2')"></i>
					</td>
					<td class="bg-info">ろっかい</td>
					<td>ななかい</td><td>はちかい</td><td>きゅうかい</td><td class="bg-info">じゅっかい</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>💡 몇 층 : <ruby>何階<rt>なんがい</rt></ruby></h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0305.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">3. 호텔에서 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-8">
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: あのう、すみません。<ruby>レストラン<rt>れすとらん</rt></ruby>は<ruby>何階<rt>なんがい</rt></ruby>にありますか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p5_01')"></i>
						</h3>
						<h4 class="real-subtitle">저.. 실례합니다. 레스토랑은 몇 층에 있습니까?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">👩: はい。<ruby>五階<rt>ごかい</rt></ruby>でございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p5_02')"></i>
						</h3>
						<h4 class="real-subtitle">네, 5층이십니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: <ruby>五階<rt>ごかい</rt></ruby>ですね。ありがとうございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch3_p5_03')"></i>
						</h3>
						<h4 class="real-subtitle">5층이군요. 감사합니다.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-1">&nbsp;</div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">4. 이것은 기억하자.
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3>～<ruby>人<rt>にん</rt></ruby>です。</h3>
					<h3>これ　~　ください。</h3>
					<h3>ごちそうさま。</h3>
					<h3>いくらですか。</h3>
					<h3>~명 / 서수 읽기</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0401.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">4. 식당에서 - 들어가서</h2>
	<p>
		<h3>어서오세요 : いらっしゃいませ。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_01')"></i>
		</h3>
		<h3>~명입니다. : ～<ruby>人<rt>にん</rt></ruby>　です。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_02')"></i>
		</h3>
		<hr><br>
		<h3>앞에서 배운 숫자를 응용해봅시다.
			<!-- <i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_03')"></i> -->
		</h3>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >~명</td>
					<td>한 명</td><td>두 명</td><td>세 명</td><td>네 명</td><td>다섯 명</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표기</td>
					<td>一人</td><td>二人</td><td>三人</td>
					<td>四人</td><td>五人</td>
				</tr>
				<tr>
					<td>읽기
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_03_1')"></i>
					</td>
					<td class="bg-warning">ひとり</td><td class="bg-warning">ふたり</td><td>さんにん</td>
					<td>よにん</td><td>ごにん</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >~명</td>
					<td>여섯 명</td><td>일곱 명</td><td>여덟 명</td><td>아홉 명</td><td>열 명</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표기</td>
					<td>六人</td>
					<td>七人</td><td>八人</td><td>九人</td><td>十人</td>
				</tr>
				<tr>
					<td>읽기
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_03_2')"></i>
					</td>
					<td>ろくにん</td>
					<td>しちにん</td><td>はちにん</td><td>きゅうにん</td><td>じゅうにん</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>
			❓ 열꼬마 인디언 노래를 불러봅시다. 
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_uta')"></i>
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p1_mr')"></i>
		</h3>
	</p>
</section>
<section>
	<h2 class="pb-4">4. 식당에서 - 주문하기</h2>
	<p>
		<h3>이것 ~개 주세요. : これ　~　ください。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p2_01')"></i>
		</h3>
		<hr>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;이것&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;그것&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;저것&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>これ</td><td>それ</td><td>あれ</td>
					<td><i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p2_02')"></i></td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>서수 표현 (열 부터는 숫자(기수) + <ruby>個<rt>こ</rt></ruby> ex: 10個(じゅっこ))
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p2_03')"></i>&nbsp;&nbsp;
			<a href="https://scratch.mit.edu/projects/1024811608" target="_blank"><i class="fa fa-share"></i></a>
		</h3>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>한</td><td>두</td><td>세</td><td>네</td><td>다섯</td>
					<td>여섯</td><td>일곱</td><td>여덟</td><td>아홉</td><td>열</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>一つ</td><td>二つ</td><td>三つ</td>
					<td>四つ</td><td>五つ</td><td>六つ</td>
					<td>七つ</td><td>八つ</td><td>九つ</td><td>十</td>
				</tr>
				<tr>
					<td>ひとつ</td><td>ふたつ</td><td>みっつ</td>
					<td>よっつ</td><td>いつつ</td><td>むっつ</td>
					<td>ななつ</td><td>やっつ</td><td><h5>ここのつ</h5></td><td>とお</td>
				</tr>
			</tbody>
		</table>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 메뉴판 주세요 : <ruby>メニュ<rt>めにゅ</rt></ruby>ーを　<ruby>見<rt>み</rt></ruby>せて　ください。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p2_04')"></i>
				</h3>
				<h3 class="card-text">✔️ 주문할게요. : <ruby>注文<rt>ちゅうもん</rt></ruby> いいですか。(직역 : 주문 괜찮아요?)
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p2_05')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0403.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">4. 식당에서 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-9">
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">👴: いらっしゃいませ。<ruby>何名様<rt>なんめいさま</rt></ruby>ですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p3_01')"></i>
						</h3>
						<h4 class="real-subtitle">어서오십쇼. 몇 분이세요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: <ruby>二人<rt>ふたり</rt></ruby>です。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p3_02')"></i>
						</h3>
						<h4 class="real-subtitle">두 사람이요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">👴: <ruby>少々<rt>しょうしょう</rt></ruby>お<ruby>待<rt>ま</rt></ruby>ちください。お<ruby>待<rt>ま</rt></ruby>たせしました。こちらへどうぞ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p3_03')"></i>
						</h3>
						<h4 class="real-subtitle">잠시만 기다려주세요. 오래 기다리셨죠. 이쪽으로 오세요. </h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-5">
						<h3 class="real-japaness">🧑: すみません。<ruby>注文<rt>ちゅうもん</rt></ruby>いいですか。これ<ruby>一<rt>ひと</rt></ruby>つ,これ<ruby>二<rt>ふた</rt></ruby>つください。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p3_04')"></i>
						</h3>
						<h4 class="real-subtitle">저기요, 주문할게요. 이거 한 개, 이거 두 개 주세요. </h4>
					</div>
				</div>
			</div>
			<div class="col-md-1">&nbsp;</div>	
		</div>
	</p>
</section>
<!-- <section data-background-video="/japanese/TravelBasic/sound/japanese_basic_ch4_drama.mp4">
</section> -->
<section>
	<video controls>
    	<source data-src="/japanese/TravelBasic/sound/japanese_basic_ch4_drama.mp4" type="video/mp4" />
  	</video>
</section>
<section>
	<h2 class="pb-4">4. 식당에서 - 계산하기</h2>
	<p>
		<h3>잘 먹었습니다 : ごちそうさま。/ ごちそうさまでした。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p4_01')"></i>
		</h3>
		<h3>계산해주세요 : お<ruby>会計<rt>かいけい</rt></ruby>　お<ruby>願<rt>ねが</rt></ruby>いします。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p4_02')"></i>
		</h3>
		<h3>얼마입니까? : いくら　ですか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p4_03')"></i>
		</h3>
		<h3>카드 되나요? : <ruby>カ<rt>か</rt></ruby>ー<ruby>ド<rt>ど</rt></ruby>　できますか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p4_04')"></i>
		</h3>
		<h3>영수증 주세요 : <ruby>レシ<rt>れし</rt></ruby>ー<ruby>ト<rt>と</rt></ruby>　ください。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p4_05')"></i>
		</h3>
	</p>
</section>
<section>
	<h2 class="pb-4">4. 식당에서 - 화폐세기</h2>
	<p>
		<h3>(일본어 뒤에 えん을 붙임.)</h3>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >화폐</td>
					<td>1엔</td><td>5엔</td><td>10엔</td><td>50엔</td><td>100엔</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표현
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p5_01_1')"></i>
					</td>
					<td>いち</td><td>ご</td><td>じゅう</td><td>ごじゅう</td><td>ひゃく</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >화폐</td>
					<td>200엔</td><td>300엔</td><td>400엔</td><td>500엔</td><td>600엔</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표현
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p5_01_2')"></i>
					</td>
					<td>にひゃく</td><td class="bg-warning">さんびゃく</td><td>よんひゃく</td><td>ごひゃく</td><td class="bg-info">ろっぴゃく</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >화폐</td>
					<td>700엔</td><td>800엔</td><td>900엔</td><td>1000엔</td><td>10000엔</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>표현
						<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p5_01_3')"></i>
					</td>
					<td>ななひゃく</td><td class="bg-info">はっぴゃく</td><td>きゅうひゃく</td><td>せん</td><td class="bg-info">いちまん</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>🎲 다양한 금액을 말해볼까요? <a href="https://scratch.mit.edu/projects/1024720509" target="_blank"><i class="fa fa-share"></i></a></h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0405_1.png" data-background-opacity="1.0" data-background-position="center">
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0406.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">4. 식당에서 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-6">
				<div class="row">
					<div class="col real-content-6">
						<h3 class="real-japaness">🧑: ごちそうさま。いくらですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p6_01')"></i>
						</h3>
						<h4 class="real-subtitle">잘 먹었습니다. 얼마인가요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-6">
						<h3 class="real-japaness">👴: お<ruby>会計<rt>かいけい</rt></ruby>は<ruby>二千六百円<rt>にせんろっぴゃくえん</rt></ruby>でございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p6_02')"></i>
						</h3>
						<h4 class="real-subtitle">다해서 2천 6백엔 이십니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-6">
						<h3 class="real-japaness">🧑: はい。どうぞ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch4_p6_03')"></i>
						</h3>
						<h4 class="real-subtitle">네. 여기요.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2">&nbsp;</div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">5. 이것은 기억하자.
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3>~から　～まで</h3>
					<h3><ruby>予約<rt>よやく</rt></ruby>しました。</h3>
					<h3>どれが～ですか。</h3>
					<h3>い형용사에는　です! </h3>
					<h3>과거형  です는 でした! 　/  ます는　ました !</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0501.png" data-background-opacity="0.5" data-background-position="center">
	<h2 class="pb-4">5. 관광지에서 - 도쿄타워</h2>
	<p>
		<h3>매표소는 어디입니까? : <ruby>チケット<rt>ちけっと</rt></ruby><ruby>売<rt>う</rt></ruby>り<ruby>場<rt>ば</rt></ruby>は　どこですか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_01')"></i>
		</h3>
		<h3>(숫자)장 주세요. : (숫자)<ruby>枚<rt>まい</rt></ruby>　ください。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_02')"></i>
		</h3>
		<h3>몇 시부터 몇 시까지 인가요? : <ruby>何<rt>なん</rt></ruby><ruby>時<rt>じ</rt></ruby>から　～<ruby>何<rt>なん</rt></ruby><ruby>時<rt>じ</rt></ruby>まで　ですか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_03')"></i>
		</h3>
		<h3>~시부터 ~시까지 입니다 : ～<ruby>時<rt>じ</rt></ruby>から　～<ruby>時<rt>じ</rt></ruby>まで　です。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_04')"></i>
		</h3>
		<h3>예약했습니다. : <ruby>予<rt>よ</rt></ruby><ruby>約<rt>やく</rt></ruby>しました。<ruby>予<rt>よ</rt></ruby><ruby>約<rt>やく</rt></ruby>したんですが。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_05')"></i>
		</h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 사진 찍어도 되나요? : <ruby>写真<rt>しゃしん</rt></ruby>　<ruby>撮<rt>と</rt></ruby>っても　いいですか。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_06')"></i>
				</h3>
				<h3 class="card-text">✔️ 어른 : <ruby>大人<rt>おとな</rt></ruby>　어린이 : <ruby>子供<rt>こども</rt></ruby>
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p1_07')"></i>
				</h3>
			</div>
		</div>
		<br>
		<h3>💡 과거형  です는 でした! 　ます는　ました !</h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0502.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">5. 관광지에서 - 도쿄타워 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-9">
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: あのう、すみません。<ruby>何時<rt>なんじ</rt></ruby>から<ruby>何時<rt>なんじ</rt></ruby>までですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p2_01')"></i>
						</h3>
						<h4 class="real-subtitle">저.. 실례합니다. 몇 시부터 몇 시까지 인가요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: <ruby>9<rt>く</rt></ruby><ruby>時<rt>じ</rt></ruby>から<ruby>5<rt>ご</rt></ruby><ruby>時<rt>じ</rt></ruby>までです。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p2_02')"></i>
						</h3>
						<h4 class="real-subtitle">9시부터 5시까지 입니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: <small style="vertical-align: middle;">(시간 확인 중…)</small></h3>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: <ruby>大人<rt>おとな</rt></ruby>2<ruby>枚<rt>まい</rt></ruby>お<ruby>願<rt>ねが</rt></ruby>いします。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p2_03')"></i>
						</h3>
						<h4 class="real-subtitle">어른 2장 주세요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">👩: はい。１８００<ruby>円<rt>えん</rt></ruby>でございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p2_04')"></i>
						</h3>
						<h4 class="real-subtitle">네, 1800엔 입니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-3">
						<h3 class="real-japaness">🧑: はい。どうぞ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p2_05')"></i>
						</h3>
						<h4 class="real-subtitle">네. 여기요.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3"></div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">5. 관광지에서 - 아사쿠사 나카미세</h2>
	<p>
		<h3>어떤 것이 ~합니까? :どれが～ですか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_01')"></i>
		</h3>
		<hr>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>맛있다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_02')"></i></td>
					<td>따뜻하다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_03')"></i></td>
					<td>달다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_04')"></i></td>
					<td>즐겁다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_05')"></i></td>
					<td>재밌다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_06')"></i></td>
					<td>좋다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_07')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>おいしい</td><td>あたたかい</td><td>あまい</td><td>たのしい</td><td>おもしろい</td><td>いい</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>뜨겁다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_08')"></i></td>
					<td>시원하다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_09')"></i></td>
					<td>차갑다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_10')"></i></td>
					<td>멀다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_11')"></i></td>
					<td>가깝다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_12')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>あつい</td><td>すずしい</td><td>つめたい</td><td>とおい</td><td>ちかい</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>형용사를 넣어 말해봅시다.</h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 예문</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 맛있습니다 : おいしい です。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_13')"></i>
				</h3>
				<h3 class="card-text">✔️ 어떤 것이 달아요? : どれが <ruby>甘<rt>あま</rt></ruby>い ですか。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p3_14')"></i>
				</h3>
			</div>
		</div>
		<br>
		<h3>💡 い형용사에는　です! 　</h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0504.png" data-background-opacity="0.5" data-background-position="center">
	<h2 class="pb-4">5. 관광지에서 - 아사쿠사 센소지</h2>
	<p>
		<h3>~까지 어떻게 갑니까? : ～まで　どうやって　<ruby>行<rt>い</rt></ruby>きますか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_01')"></i>
		</h3>
		<h3>바로 앞입니다. : すぐ　<ruby>前<rt>まえ</rt></ruby>です。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_02')"></i>
		</h3>
		<h3>바로 뒤입니다. :　 すぐ　<ruby>後<rt>うし</rt></ruby>ろです。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_03')"></i>
		</h3>
		<!-- <h3>쭉 가서 오른쪽으로 돕니다 : まっすぐ　<ruby>行<rt>い</rt></ruby>って　<ruby>右<rt>みぎ</rt></ruby>に　<ruby>回<rt>まわ</rt></ruby>ります。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_04')"></i>
		</h3> -->
		<h3>여기부터 멉니까?　ここから　とおいですか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_05')"></i>
		</h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 운세뽑기 : おみくじ &nbsp;&nbsp;&nbsp;&nbsp;부적 : お<ruby>守<rt>まも</rt></ruby>り
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p4_06')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0505.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">5. 관광지에서 - 아사쿠사 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">👲: いらっしゃいませ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_01')"></i>
						</h3>
						<h4 class="real-subtitle">어서옵쇼.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">🧑: こんにちは。どれが<ruby>甘<rt>あま</rt></ruby>いですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_02')"></i>
						</h3>
						<h4 class="real-subtitle">안녕하세요. 어떤게 달아요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">👲: はい。これが<ruby>甘<rt>あま</rt></ruby>いですよ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_03')"></i>
						</h3>
						<h4 class="real-subtitle">예, 이게 달아요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">🧑: いいですね。これ<ruby>二<rt>ふた</rt></ruby>つください。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_04')"></i>
						</h3>
						<h4 class="real-subtitle">좋네요. 이거 두 개 주세요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">🧑: せんそうじはここからとおいですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_05')"></i>
						</h3>
						<h4 class="real-subtitle">센소지는 여기에서 먼가요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">👲: いいえ。ちかいですよ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_06')"></i>
						</h3>
						<h4 class="real-subtitle">아니예요. 가까워요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-2">
						<h3 class="real-japaness">🧑: ありがとうございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch5_p5_07')"></i>
						</h3>
						<h4 class="real-subtitle">감사합니다.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3">&nbsp;</div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">5. 관광지에서 - 가족오락관</h2>
	<p>
		<img class="border-0" :src="require(`@/assets/images/button-23948_1280.png`)" height="150" @click="fiveGame()"/>
		<hr>
		<!-- <h1>{{ fiveGamesList }} </h1> -->
		<h1>{{ fiveGamesList[fiveChoice][0] }} </h1>
		<h1>{{ fiveGamesList[fiveChoice][1] }} </h1>
		<h1 style="color:gray;">{{ fiveGamesList[fiveChoice][2] }} </h1>
	</p>
</section>
<section>
	<h2 class="pb-4">6. 이것은 기억하자.
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p0')"></i>
	</h2>
	<p>
		<div class="row">
			<div class="col"></div>
			<div class="col-7">
				<div class="alert alert-primary" role="alert">
					<h3><ruby>大丈夫<rt>だい丈じょう夫ぶ</rt></ruby>です。</h3>
					<h3>もっと～はありますか。</h3>
					<h3>な형용사는 な떼고　です！  / 형용사 + 명사</h3>
					<h3>문법 총 복습</h3>
				</div>
			</div>
			<div class="col"></div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">6. 쇼핑하기 - 용어</h2>
	<p>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>할인<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_01')"></i></td>
					<td>품절<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_02')"></i></td>
					<td>소비기한<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_03')"></i></td>
					<td>(숫자)개 입<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_04')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><ruby>割<rt>わり</rt></ruby><ruby>引<rt>びき</rt></ruby></td>
					<td><ruby>売<rt>う</rt></ruby>り<ruby>切<rt>き</rt></ruby>れ</td>
					<td><ruby>賞味期限<rt>しょうみきげん</rt></ruby></td>
					<td>(숫자)<ruby>個入<rt>こいり</rt></ruby></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>괜찮다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_05')"></i></td>
					<td>정말좋아하다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_06')"></i></td>
					<td>멋지다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_07')"></i></td>
					<td>싫다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_08')"></i></td>
					<td>안된다<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_09')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><ruby>大丈夫<rt>だい丈じょう夫ぶ</rt></ruby>な</td>
					<td><ruby>大好<rt>だいす</rt></ruby>きな</td>
					<td>すてきな</td>
					<td>いやな</td>
					<td>ダメは</td>
				</tr>
				<tr>
					<td><ruby>大丈夫<rt>だいじょうぶ</rt></ruby>です。</td>
					<td><ruby>大好<rt>だいす</rt></ruby>きです。</td>
					<td>すてきです。</td>
					<td>いやです。</td>
					<td>ダメです。</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>💡 な형용사는 な떼고　です！</h3>
		<br>
		<div class="card">
			<div class="card-header bg-secondary bg-gradient text-white text-start"><i class="fas fa-comment"></i> 알아두면 좋아요!!</div>
			<div class="card-body">
				<h3 class="card-text">✔️ 할인 되나요? : <ruby>割引<rt>わりびき</rt></ruby>できますか。
					<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p1_10')"></i>
				</h3>
			</div>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">6. 쇼핑하기 - 용어</h2>
	<p>
		<h3>좀 더 ~는 있습니까? : もっと　～は　ありますか。
			<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_01')"></i>
		</h3>
		<hr><br>
		<h3>형용사에 명사를 붙여서 말해봅시다.</h3>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>형용사</td>
					<td>편한<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_02')"></i></td>
					<td>예쁜<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_03')"></i></td>
					<td>싼<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_04')"></i></td>
					<td>비싼<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_05')"></i></td>
					<td>편리한<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_06')"></i></td>
					<td>큰<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_07')"></i></td>
					<td>작은<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_08')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>일본어</td>
					<td>らくな</td><td>きれいな</td><td>やすい</td><td>たかい</td><td><ruby>便利<rt>べんり</rt></ruby>な</td>
					<td><ruby>大<rt>おお</rt></ruby>きい</td><td><ruby>小<rt>ちい</rt></ruby>さい</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td>명사</td>
					<td>신발<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_09')"></i></td>
					<td>엽서<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_10')"></i></td>
					<td>과자<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_11')"></i></td>
					<td>선물<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_12')"></i></td>
					<td>책갈피<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p2_13')"></i></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>일본어</td>
					<td>くつ</td><td>はがき</td><td>お<ruby>菓子<rt>かし</rt></ruby></td><td>おみやげ</td><td>しおり</td>
				</tr>
			</tbody>
		</table>
		<br>
		<h3>🎲 스피드 게임을 해봅시다. <a href="https://scratch.mit.edu/projects/1024973711" target="_blank"><i class="fa fa-share"></i></a></h3>
	</p>
</section>
<section data-background-image="/japanese/TravelBasic/bg/japanese_basic_0603.png" data-background-opacity="0.3" data-background-position="center">
	<h2 class="pb-4">6. 쇼핑하기 - 실제상황</h2>
	<p>
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-9">
				<div class="row">
					<div class="col real-content-4">
						<h3 class="real-japaness">🧑: あのう、もっと<ruby>小<rt>ちい</rt></ruby>さいはがきはありますか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p3_01')"></i>
						</h3>
						<h4 class="real-subtitle">저.. 좀 더 작은 엽서는 있나요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h3 class="real-japaness">👴: そちらでございます。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p3_02')"></i>
						</h3>
						<h4 class="real-subtitle">그쪽이세요.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h3 class="real-japaness">🧑:  いくらですか。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p3_03')"></i>
						</h3>
						<h4 class="real-subtitle">얼마예요?</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h3 class="real-japaness">👴: ２００<ruby>円<rt>えん</rt></ruby>です。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p3_04')"></i>
						</h3>
						<h4 class="real-subtitle">200엔 입니다.</h4>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h3 class="real-japaness">🧑: はい。どうぞ。
							<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_ch6_p3_05')"></i>
						</h3>
						<h4 class="real-subtitle">네, 여기요.</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3"></div>	
		</div>
	</p>
</section>
<section>
	<h2 class="pb-4">부록. 문법 총정리</h2>
	<p>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >수</td>
					<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>기수</td>
					<td>いち</td><td>に</td><td>さん</td>
					<td>し</td><td>ご</td>
				</tr>
				<tr>
					<td>서수</td>
					<td>ひとつ</td><td>ふたつ</td><td>みっつ</td>
					<td>よっつ</td><td>いつつ</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td >수</td>
					<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>기수</td>
					<td>ろく</td>
					<td>しち</td><td>はち</td><td>きゅう</td><td>じゅう</td>
				</tr>
				<tr>
					<td>서수</td>
					<td>むっつ</td>
					<td>ななつ</td><td>やっつ</td><td>ここのつ</td><td>とお</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table class="table table-bordered bg-white text-black align-middle">
			<thead class="table-dark">
				<tr>
					<td></td>
					<td>이</td><td>그</td><td>저</td><td>어느</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>기</td><td>ここ</td><td>そこ</td><td>あそこ</td><td>どこ</td>
				</tr>
				<tr>
					<td>것</td><td>これ</td><td>それ</td><td>あれ</td><td>どれ</td>
				</tr>
				<tr>
					<td>쪽</td><td>こちら</td><td>そちら</td><td>あちら</td><td>どちら</td>
				</tr>
			</tbody>
		</table>
	</p>
</section>
<section>
	<h2 class="pb-4">부록. 문법 총정리</h2>
	<p>
		<div class="row">
            <div class="col-md-12">
				<table class="table table-bordered bg-white text-black align-middle text-nowrap">
					<thead class="table-dark">
						<tr>
							<td></td>
							<td class="w-25">표준형</td><td colspan="2">의문형</td><td colspan="2">과거형</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td rowspan="3">~입니다.</td>
							<td>명사 + です。</td><td rowspan="3" colspan="2">ですか。</td><td rowspan="2" colspan="2">でした。</td>
						</tr>
						<tr>
							<td>な형용사 +です</td>
						</tr>
						<tr>
							<td>い형용사 +です。</td><td colspan="2"  class="bg-warning">かったです。</td>
						</tr>
						<tr>
							<td>~ㅂ니다.</td>	
							<td>동사 + ます。</td><td class="border-end-0"></td><td rowspan="3">ますか。</td><td class="border-end-0"></td><td rowspan="3">ました。</td>
						</tr>
						<tr>
							<td rowspan="2">~가 있습니다.</td>	
							<td>무생물 + があります。</td><td>あり</td><td>あり</td>
						</tr>
						<tr>
							<td>생물 +がいます。</td><td>い</td><td>い</td>
						</tr>
					</tbody>
				</table>
				<br>
				<h3>~(해)주세요. : ～（て）ください</h3>
				<h3>~부터 ~까지 : ～から～まで</h3>
			</div>
		</div>
	</p>
</section>

<section>
	<h2 class="pb-4">특별편 - 동사 변형</h2>
	<p>
		<div class="row">
            <div class="col-md-12">

				<h3>💡 い단 + る : 상 1 단　/　え단 + る : 하 1단　(구분이 힘들면 합쳐서 1단으로 생각)</h3>
				<h3>💡 5단 :　위의 경우를 제외한 모든 동사</h3>
				<br>

				<table class="table table-bordered bg-white text-black align-middle text-nowrap">
					<thead class="table-dark">
						<tr>
							<td>형</td><td></td>
							<td>5단 동사</td><td>상 1 단</td><td>하 1 단</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>부정형</td><td>~지 않다</td>
							<td>あ단 + ない</td><td colspan="2">る 떼고 ない</td>
						</tr>
						<tr>
							<td>ます형</td><td>~ㅂ니다</td>
							<td>い단 + ます</td><td colspan="2">る 떼고 ます</td>
						</tr>
						<tr>
							<td>원형</td><td>~다</td>
							<td>う단</td><td colspan="2">る</td>
						</tr>
						<tr>
							<td>명령형</td><td>~라</td>
							<td>え단</td><td  colspan="2">る 떼고 ろ</td>
						</tr>
						<tr>
							<td>청유형</td><td>~자</td>
							<td>お단 + う</td><td  colspan="2">る 떼고 よう</td>
						</tr>
						
					</tbody>
				</table>
				<br>
				
				
			</div>
		</div>
	</p>
</section>

<section>
	<h2 class="pb-4">특별편 - 동사 변형</h2>
	<p>
		<div class="row">
            <div class="col-md-12">

				
				<h3>~ 해서 : て 변형 (평서 과거형 ~ㅆ다 た도 동일)</h3>
				<table class="table table-bordered bg-white text-black align-middle text-nowrap">
					<thead class="table-dark">
						<tr>
							<td>5단 동사</td><td>상 1 단</td><td>하 1 단</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>하단 표 참조</td><td colspan="2">る 떼고 て</td>
						</tr>
					</tbody>
				</table>
				<br>
				<table class="table table-bordered bg-white text-black align-middle text-nowrap">
					<thead class="table-dark">
						<tr>
							<td>く</td><td>ぐ</td><td>う,つ,る</td><td>む,ぬ,ぶ</td>		
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>いて / いて</td><td>いで / いだ</td><td>って / った</td><td>んで / んだ</td>	
						</tr>
					</tbody>
					
					
				</table>
				
			</div>
		</div>
	</p>
</section>



<section>
	<h1 id="toc_30">👏🏽</h1>
	<h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
	<br>
	<h3>다음 여행지로 출발!</h3>
	<h3>도에이 아사쿠사선을 타고 하네다공항으로~</h3>
	<h3>다음 여행은 오사카에서 만나요!</h3>
</section>

<section class="reveal-top-0">
	<h4 >아기상어
		<!-- <i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_same_uta')"></i>
		<i class="fa-solid fa-volume-high" @click="playSound('japanese_basic_same_mr')"></i> -->
		&nbsp;&nbsp;&nbsp;
		<a href="https://www.youtube.com/watch?v=O3l1SW6sctw" target="_blank"><i class="fa fa-share"></i></a>
	</h4>
	<audio src="/japanese/TravelBasic/sound/japanese_basic_same_uta.mp3" controls></audio>
	<audio src="/japanese/TravelBasic/sound/japanese_basic_same_mr.mp3" controls></audio>
	<!-- <p> -->
		<div class="row">
			<!-- <div class="col-md-1"></div> -->
			<div class="col-md-12">
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">ちびさめ　뚜루룻뚜루　かわいい　뚜루룻뚜루　およげ　뚜루룻뚜루　ちびさめ							
						</h4>
						<h5 class="real-subtitle">꼬마상어 뚜루룻뚜루 귀여운 뚜루룻뚜루 헤엄쳐 뚜루룻뚜루 꼬마상어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">おかあさめ　 뚜루룻뚜루　きれい　 뚜루룻뚜루　およげ　 뚜루룻뚜루　おかあさめ
						</h4>
						<h5 class="real-subtitle">엄마상어 뚜루룻뚜루 예쁜 뚜루룻뚜루 헤엄쳐 뚜루룻뚜루 엄마상어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">おとうさめ　 뚜루룻뚜루　つよい　 뚜루룻뚜루　およげ　 뚜루룻뚜루　おとうさめ
						</h4>
						<h5 class="real-subtitle">아빠상어 뚜루룻뚜루 강한(힘쎈) 뚜루룻뚜루 헤엄쳐 뚜루룻뚜루 아빠상어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">おばあざめ　 뚜루룻뚜루　やさしい　 뚜루룻뚜루　およげ　 뚜루룻뚜루　おばあざめ
						</h4>
						<h5 class="real-subtitle">할머니상어 뚜루룻뚜루 다정한 뚜루룻뚜루 헤엄쳐 뚜루룻뚜루 할머니상어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">おじいざめ　 뚜루룻뚜루　ダンディ　 뚜루룻뚜루　およげ　 뚜루룻뚜루　おじいざめ
						</h4>
						<h5 class="real-subtitle">할아버지상어 뚜루룻뚜루 댄디(danndy) 뚜루룻뚜루 헤엄쳐 뚜루룻뚜루 할아버지상어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">みんな　 뚜루룻뚜루　<ruby>海<rt>うみ</rt></ruby>の　 뚜루룻뚜루　ハンター　 뚜루룻뚜루　サメ<ruby>家族<rt>かぞく</rt></ruby>
						</h4>
						<h5 class="real-subtitle">모두 뚜루룻뚜루 바다의 뚜루룻뚜루 헌터 뚜루룻뚜루 상어가족</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">さめだ　 뚜루룻뚜루　にげろ　 뚜루룻뚜루　<ruby>速<rt>はや</rt></ruby>く　 뚜루룻뚜루　<ruby>隠<rt>かく</rt></ruby>れろ
						</h4>
						<h5 class="real-subtitle">상어다 뚜루룻뚜루 도망쳐 뚜루룻뚜루 빨리 뚜루룻뚜루 숨어라</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">もう　<ruby>安心<rt>あんしん</rt></ruby>　 뚜루룻뚜루　<ruby>助<rt>たす</rt></ruby>かった　 뚜루룻뚜루　<ruby>今日<rt>きょう</rt></ruby>も　 뚜루룻뚜루　<ruby>生<rt>い</rt></ruby>きてる
						</h4>
						<h5 class="real-subtitle">이제 안심 뚜루룻뚜루 살았다 뚜루룻뚜루 오늘도 뚜루룻뚜루 살아있어</h5>
					</div>
				</div>
				<div class="row">
					<div class="col real-content-4">
						<h4 class="real-japaness">うれしい　 뚜루룻뚜루　たのしい　 뚜루룻뚜루　<ruby>踊<rt>おど</rt></ruby>ろう　 뚜루룻뚜루　<ruby>終<rt>お</rt></ruby>わり
						</h4>
						<h5 class="real-subtitle">기쁘다 뚜루룻뚜루 즐겁다 뚜루룻뚜루 춤추자 뚜루룻뚜루 끝</h5>
					</div>
				</div>
			</div>
			<!-- <div class="col-md-1"></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";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			audio: null,
			soundFileTitle: "/japanese/TravelBasic/sound/",
			soundFilePost: ".mp3",

			fiveGamesList: [
				['맛있다', 'おいしい', '오이시이'],
				['따뜻하다', 'あたたかい', '아타타카이'],
				['달다', 'あまい', '아마이'],
				['즐겁다', 'たのしい', '타노시이'],
				['재밌다', 'おもしろい', '오모시로이'],
				['좋다', 'いい', '이-'],
				['뜨겁다', 'あつい', '아쯔이'],
				['시원하다', 'すずしい', '스즈시이'],
				['차갑다', 'つめたい', '쯔메타이'],
				['멀다', 'とおい', '토오이'],
				['가깝다', 'ちかい', '치카이']

			],
			
			fiveChoice: 0

		};
	},
	methods: {
		fiveGame() {
			this.fiveChoice = Math.floor(Math.random() * this.fiveGamesList.length);
		},
		playSound(sound) {
			if(this.audio !== undefined && this.audio !== null) {
				this.audio.pause();
			}
			if(sound) {
				this.audio = new Audio(this.soundFileTitle + sound + this.soundFilePost);
				console.log(this.audio);
				this.audio.play();
			}
		},
		slideChanged(event) {
			if(this.audio !== undefined && this.audio !== null) {
				this.audio.pause();
				console.log("Slide is now pause" + event.indexh);
			}
		},
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},

  	},
  	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
        this.deck = initializeReveal(this.$refs.revealRef, false);

		this.fiveChoice = Math.floor(Math.random() * this.fiveGamesList.length);
		
		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
        this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});
  	},
	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');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

.reveal th,
.reveal tr,
.reveal td,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: 'Noto Sans JP', 'twayair', sans-serif;
}

.reveal .slide {
  font-family: 'Noto Sans JP', 'twayair', sans-serif;
}


/* .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 2px solid red;
} */
/* table {
  table-layout: fixed;
  width: 100%;
} */
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
	border: 1px solid #dee2e6!important;
	border-width: 2px!important;
    text-align: center!important;
	font-size: 26px;
}

.reveal hr{
	width:50%;
	text-align: center;
	margin: 0px auto;
	margin-bottom: 20px;
}


/** 볼륨 색깔 */
.fa-volume-high:before, .fa-volume-up:before {
    content: "\f028";
    color: fuchsia;
	padding-left: 20px;
}


/** 실제상황 단락 */
.real-content-1 {
    margin: 0px 0px 10px;
}
.real-content-2 {
    margin: 0px 0px 20px;
}
.real-content-3 {
    margin: 0px 0px 30px;
}
.real-content-4 {
    margin: 0px 0px 40px;
}
.real-content-5 {
    margin: 0px 0px 50px;
}
.real-content-6 {
    margin: 0px 0px 60px;
}

/** 실제상황 자막 */
h3.real-japaness {
    margin: 0px;
    text-align: left !important;
}
h4.real-japaness {
    margin: 0px;
	text-align: left !important;
}

/** 실제상황 자막 */
h3.real-subtitle {
    color: darkcyan;
	text-align: left !important;
	padding-left: 60px;
}
h4.real-subtitle {
	color: darkcyan;
	text-align: left !important;
	padding-left: 60px;
}
h5.real-subtitle {
	color: darkcyan;
	text-align: left !important;
	padding-left: 60px;
}



.reveal-top-0{
	top: 0 !important;
    display: block;
}
.reveal-top-0 .real-content-4 {
    margin: 0px 0px 15px;
}
.reveal-top-0 h3.real-japaness {
    margin: 0px;
    text-align: center !important;
}
.reveal-top-0 h4.real-japaness {
    margin: 0px;
	text-align: center !important;
}

.reveal-top-0 h3.real-subtitle {
    color: darkcyan;
	text-align: center !important;
	padding-left: 60px;
}
.reveal-top-0 h4.real-subtitle {
	color: darkcyan;
	text-align: center !important;
	padding-left: 60px;
}
.reveal-top-0 h5.real-subtitle {
	color: darkcyan;
	text-align: center !important;
	padding-left: 60px;
}


/* audio { width: 150px; height: 80px }
audio::-webkit-media-controls-panel {
	background-color: white !important;
}

audio::-webkit-media-controls-enclosure {
    max-width: 60px;
}
audio::-webkit-media-controls-timeline {
    display: none;
}
audio::-webkit-media-controls-play-button {}

audio::-webkit-media-controls-volume-slider {display: none;}

audio::-webkit-media-controls-mute-button {display: none;}

audio::-webkit-media-controls-timeline {display: none;}

audio::-webkit-media-controls-current-time-display {display: none;}

audio::-webkit-media-controls-time-remaining-display {display: none;}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: #a0276e;
  color: #a0276e;
} */
</style>