<!DOCTYPE html>
<html lang=ko xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--공통 헤더들은 여기서 설정 START -->
<title>AllTheStreet - Home</title>
<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTM-TZ8T92S');</script>
<!-- End Google Tag Manager -->

	<meta charset="utf-8">
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="_csrf" content="${_csrf.token}">
	<meta name="_csrf_header" content="${_csrf.headerName}">
	
	<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
	
	<meta name="googlebot" content="notranslate">

    <!-- 다국어 link -->
    
	
	
	<link rel=”canonical” href="http://www.allthestreet.com/">
	
	
	
	<link rel=”alternate” hreflang=”x-default” href="http://www.allthestreet.com/">
    
    
    <link rel=”alternate” hreflang=”ko-kr” href="http://www.allthestreet.com/">
    
    
    <link rel=”alternate” hreflang=”ja-jp” href="http://www.allthestreet.com/ja-jp/">
    
    <!-- Page Description -->
    <meta name="keyword" content="지도,유튜브,장소,랜드마크,대한민국">
	<meta name="description" content="위치 기반 스트리트 뷰 비디오 및 장소 연결 제공">
	
    <!-- Twitter Card 태그 -->
    <meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="AllTheStreet - Home">
	<meta name="twitter:description" content="위치 기반 스트리트 뷰 비디오 및 장소 연결 제공">
	<meta name="twitter:image" content="http://www.allthestreet.com/images/ProfilePicture.png">
    
    <!-- Open Graph 태그 -->    
	<meta property="og:type" content="website">
	<meta property="og:title" content="AllTheStreet - Home">
	<meta property="og:description" content="위치 기반 스트리트 뷰 비디오 및 장소 연결 제공">
	<meta property="og:image" content="http://www.allthestreet.com/images/ProfilePicture.png">
	<meta property="og:url" content="http://www.allthestreet.com/">
	
    
	<!--여기부터 네이버 메타태그   
	<meta name="keyword" content="map,youtube,place,landmark,korea">
	<meta name="description" content="provides location-based street view videos and place connections">
	--> 
	<!-- 소셜 미디어 태그 
	<meta property="og:type" content="website">
	<meta property="og:title" content="AllTheStreet Home">
	<meta property="og:description" content="provides location-based street view videos and place connections">
	<meta property="og:image" content="images/ProfilePicture.png">
	<meta property="og:url" content="index.html">
	-->
	
	
	
	
	<link rel="stylesheet" type="text/css" href="/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/css/include.css">
	<link rel="stylesheet" type="text/css" href="/css/mo_include.css">
	<link rel="stylesheet" type="text/css" href="/css/main.css">
	<link rel="stylesheet" type="text/css" href="/css/mo_main.css">
	<link rel="stylesheet" type="text/css" href="/css/sub.css">
	<link rel="stylesheet" type="text/css" href="/css/mo_sub.css">
	<link rel="stylesheet" type="text/css" href="/css/slick.css">
	<link rel="stylesheet" type="text/css" href="/css/slick-theme.css">
	
	<!--2022.04.01 추가-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.7/jquery.i18n.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.7/jquery.i18n.messagestore.min.js"></script>
    <script src="/js/slick.js" type="text/javascript"></script>
    <script src="/js/slick.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script>
		const boshServiceUrl =  "https://chat.allthestreet.com/http-bind/";
		const xmppDomain =  "chat.allthestreet.com";
		const gcpImgPrefix = "https://storage.googleapis.com/allthestreet-images";
		const websocketUrl = "https://allthestreet.com";
	</script>
	<script type="text/javascript">
		function changeLocale(dLocale, locale){		
						
			var path = window.location.pathname;
			var search = window.location.search;
											
			if (dLocale!== locale){
				if('/' === path) {
					window.location.replace(window.location.href + locale)
					
					return;
				}else{					
					if(/([a-z]{2})-([a-z]{2})/.test(path)){
						window.location.replace(window.location.href.replace(/([a-z]{2})-([a-z]{2})/, locale));
						return;
					}else{
						window.location.replace(window.location.origin + '/' + locale + path + search);
						return;
					}
				}					
			}else{
				window.location.replace(window.location.href.replace(/\/([a-z]{2})-([a-z]{2})/, ""));
				return;
			}			
		}
	</script>
	
	<script type="text/javascript">
		$(window).on('load',function() {
	    	$.i18n().load( {
				'ko_KR': '/js/i18n/messages_ko_KR.json', 
				'ja_JP': '/js/i18n/messages_ja_JP.json'
			});
	
			//디버깅 설정
			//$.i18n.debug = true;

//			$("#metastreet").click(function(){
//		
//				alert($.i18n('page-intro-metastreet'));
//		
//			});
		})
    </script>
    
    <script type="text/javascript">
    	function openTab(event, section){	
			var i;
			var x = document.getElementsByClassName("faq-category-list-con");
			for (i = 0; i < x.length; i++) {
			    x[i].style.display = "none";			    
			}			
			document.getElementById(section).style.display = "block";
			
			tablinks = document.getElementsByClassName("tablink");
  			for (i = 0; i < x.length; i++) {
    			tablinks[i].className = tablinks[i].className.replace(" on", "");
  			}
			event.currentTarget.className += " on";
		}
    </script>

<!--공통 헤더들은 여기서 설정 END -->
<script src="/js/intro/intro.js"></script>
</head>
<body id="google_translate_element">
	<div>
		<!-- 페이지 레이아웃 -->
		<header>
	<div id="header">
		<div class="topLine">
			<div class="inner">
				<div class="container">
					<div class="logo">
						<a href="/">
							<img src="/images/logo.png">
						</a>
						
					</div>
	
					<div class="menuArea">
						<div class="menuLogo">
							<a href="/">
								<img src="/images/logo.png">
							</a>
							
						</div>
						<ul class="menu">
							<li>
								<a href="/#metastreet">메타스트릿</a>
								
							</li>
							<li>
								<a href="/#search">동영상 검색</a>
								
							</li>
							<li>
								<a href="/#streetVideo">주요지역 동영상</a>
								
							</li>
							<li>
								<a href="/view/customer/news">고객센터</a>
								
							</li>
						</ul>
					</div>
	
					<!-- 로그인 전 -->
          			<div class="memMenu" >
			  			<ul>
			  				<li>
			  					<a href="javascript:checkAuthenticated();">로그인</a>
			  					
			  				</li>
			  			</ul>
		  			</div>
		  			<!-- 로그인 전 -->
		  			<!-- 로그인 후 -->
		  			
		  			<!-- 로그인 후 -->
		  			<!-- 언어 -->
		  			<div class="langMenu">
		  					<p class="langMenuButton">한국어</p>
			  				<ul>
			  	  				<li><a onclick="changeLocale(&#39;ko-kr&#39;,&#39;ko-kr&#39;)">한국어</a></li>
				  				<li><a onclick="changeLocale(&#39;ko-kr&#39;, &#39;ja-jp&#39;)">日本語</a></li>					  				
			  				</ul>
		  			</div>
		  			<!-- 언어 -->
	
					<div class="moMenu"><img src="/images/moMenu.png"></div>
				</div>
			</div>
		</div>
		
		<div class="over"></div>
	  	<div class="hamburger">
	    <div class="TopHam">
	      <a href="/ko-kr" class="mainLogo_ham"><img src="/images/logo.png" alt="MainLogo"></a>
	      <span class="close"><i class="xi-close xi-x"></i></span>
	    </div>
	    <!-- 로그인 전 -->
		<div class="utilmenu">
			<ul>
				<li><img src="/images/sample.png" alt=""/></li>
				<li><span>더 많은 서비스를 이용하시려면 로그인해주세요.</span> <a href="login"><i class="xi-log-in xi-x"></i> 로그인</a></li>
			</ul>
		</div>
		<!-- 로그인 전 -->
		<!-- 로그인 후 -->
	  	
	  	<!-- 로그인 후 -->
	    <ul class="HamList">
		  	<li>
				<a href="/#metastreet">메타스트릿</a>
				
			</li>
			<li>
				<a href="/#search">동영상 검색</a>
				
			</li>
			<li>
				<a href="/#streetVideo">주요지역 동영상</a>
				
			</li>
			<li>
				<a href="/view/customer/news">고객센터</a>
				
			</li>
	    </ul>
	  </div>		
	</div>
	<!-- 인증 된 유저면 해당 유저의 email이 들어가고, 아니면 anonymousUser 가 들어감
		jquery 에서 
		$('input[name=username]').val()  == by name 
		$('#username').val() == by id
		로 얻을 수 있음.
	 -->
	
	<input type="hidden" id="testId" name="testId" value="anonymousUser">
	    <input type="hidden" id="emailId" name="emailId" value="anonymousUser">
	    <input type="hidden" id="nick" name="nick" value="anonymousUser">
	
</header>
		<div>
<!-- 모달 레이어팝업 -->
	<div class="popup-wrap" id="popup_login">
		<div class="popup mini">
			<div class="popup-header">로그인</div>
			<div class="popup-body">
				<div class="popup-body-content">
					<section id="loginWrap">
						<div class="area">
							<div class="mlog">
								<h3 class="log-tit">로그인</h3>
								<p class="desc">
									<a href="/signup_intro"><span>회원가입</span> 하시겠어요?</a>
								</p>
								<form action="/api/user/overlayLogin" method="post"
									id="overlayForm" name="overlayForm" autocomplete="off">
									<fieldset>
										<legend>member login</legend>
										<ul class="frm-list">
											<li><label>이메일ID</label> <input type="text" id="popupEmail"
												name="popup_email" maxlength="40" class="txt-frm input-label" value="">
											</li>
											<li><label>비밀번호</label> <input type="password"
												id="popupPassword" name="popupPassword" maxlength="20" value=""
												class="txt-frm input-label">
											</li>
										</ul>
										<ul class="loginCheckBox">
											<li><input id="remember-me" name="remember-me"
												fw-filter="" fw-label="로그인 정보 기억하기" fw-msg=""
												type="checkbox"> <label for="check_save_id">로그인
													정보 기억하기</label></li>
										</ul>
										<a href="javascript:ajaxLogin();" class="CSSbuttonLog">로그인</a>
										<div id="loginWarning" class="warning" style="display:none;">
											<span>로그인에 실패했습니다. 정보를 다시 확인해주세요.</span>
										</div>
										<div class="security">
											<ul>
												<li class="btn"><a href="javascript:;"
													class="modal-open">아이디 / 비밀번호 찾기</a></li>
											</ul>
										</div>
									</fieldset>
								</form>
								<div id="simpleLogin">
									<div class="sns-login">
										<div class="sns-btns">
											<p>
												<a href="/oauth2/authorization/google" class="btnSnsLogin btnSnsLoginGo"><img
													src="/images/login_sns_01.png" alt="Google 계정 로그인"></a>
											</p>
											<p>
												<a href="/oauth2/authorization/facebook" class="btnSnsLogin btnSnsLoginFb"><img
													src="/images/login_sns_02.png" alt="페이스북 로그인"></a>
											</p>
											<p>
												<a href="/oauth2/authorization/naver" class="btnSnsLogin btnSnsLoginNa"><img
													src="/images/login_sns_03.png" alt="카카오 로그인"></a>
											</p>
											<p>
												<a href="/oauth2/authorization/kakao" class="btnSnsLogin btnSnsLoginKa"><img
													src="/images/login_sns_04.png" alt="네이버 로그인"></a>
											</p>
										</div>
									</div>
									<!-- .sns-login -->
								</div>
								<!-- #simpleLogin -->
							</div>
						</div>
					</section>
				</div>
			</div>
			<div class="popup-foot">
				<span class="pop-btn" id="close_login"><i class="xi-close xi-x"></i></span>
			</div>
		</div>
	</div>
</div>
	  	<div>

<div class="translate">
  <div id="google_translate_element">
    <div dir="ltr" class="skiptranslate goog-te-gadget">
    </div>
  </div>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'ko',
 	includedLanguages: 'ko,ja,en',
      }, 'google_translate_element');
    }
  </script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

    <!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TZ8T92S"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->
	
	<section id="main">
		<!-- 지역 동영상 찾기 -->
		<div class="streetVideo" id="streetVideo">
			<div class="title">주요 지역 동영상</div>
			<ul id="selectTab" class="selectTab">
			</ul>
		</div>


  		<!-- 지역 동영상 찾기 -->
		<div class="search" id="search">
			<div class="inner">
				<div class="title">지역 동영상 찾기</div>
				<div class="searchBox">
					<input type="text" id="compositePlaceName" autocomplete="off" list="placeNamelist" name="placeName" placeholder="지역, 장소 또는 주소를 입력하세요." class="inputBox" />
						<datalist id="placeNamelist" >
						</datalist>
					<input type="submit" id="searchSubmit" value="검색" class="inputBTN"/>
				</div>

				<ul id="hashTagUl" class="hashtag">
				</ul>
	
				<ul class="stepList">
					<li>
						<div class="num">1단계</div>
						<div class="ico"><img src="/images/stepIco01.png"></div>
						<div class="subj">지역 검색</div>
						<div class="subs">검색창에 지역명, 랜드마크 주소를 입력하거나<br> 해시태그를 선택하세요.</div>
					</li>

					<li>
						<div class="num">1단계</div>
						<div class="ico"><img src="/images/stepIco02.png"></div>
						<div class="subj">관심 장소 선택</div>
						<div class="subs">동영상에서 둘러보고 싶은 <br> 장소를 선택하세요.</div>
					</li>

					<li>
						<div class="num">3단계</div>
						<div class="ico"><img src="/images/stepIco03.png"></div>
						<div class="subj">동영상을 선택하고 시청</div>
						<div class="subs">올더스트릿의 위치기반<br> 동영상 서비스를 경험하세요.</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 메타스트릿 걷기 -->
		<div class="metastreet" id="metastreet">
			<div class="inner">
				<div class="title">메타스트릿 걷기</div>
			</div>
			<div class="mainStreetMap">
				<div id="googleMap" class="map" style="width:100%;height:600px;border:0"></div>
			</div>
		</div>

		<!-- 메타스트릿 걷기 -->

		<div class="service" style="margin-top:50px">
			<div class="cont">
				<div class="title">사업제휴 및 장소홍보</div>
				<div class="substance">올더스트릿에 장소를 등록하세요. 전세계 잠재고객과 소통 할 수 있습니다.</div>
				<div class="btn">
					<a href="#">내용 더보기+</a>
				</div>
			</div>
			<div class="bg"><img src="/images/serviceBG.jpg"></div>
		</div>
	</section>
	<!-- javascript 내에서 사용할 목적임 -->
	<div id="dummyDiv" hidden>
		<input id="regionTag" value="">
		<input id="para_locale" value="ko">
	</div>
	<script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJIeAFQw_vCXs66ASniuadE4F191BA1Ag&callback=initMap&libraries=&v=weekly&language=ko&region=KR"
    ></script>
    
</div>
		<footer></footer>
	</div>
</body>
</html>