@charset "utf-8";

/*================================================================================
  location
==================================================================================*/
/*----------------------------------------------------#stage*/
#stage{
	width: 100%;
	height: 100%;
}

#container{
	overflow: hidden;
	width: 960px;
	height: 471px;
	position: relative;
}

#container .map_c {
	position: absolute;
	top:0px; left:0px;
	
	width: 960px;
	height: 471px;
	
    -webkit-transition-property: transform,opacity;  
    transition-property: transform,opacity;  
    -webkit-transition-duration: 1s;
	transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;

	opacity: 1;
}

#container .map_c .map {
	position: absolute;
	top: 0px; left:0px;
}


#container #map01 {
	-webkit-transform-origin: 50% 64%;
	transform-origin: 50% 64%;
}

#container #map01.ani {
	-webkit-transform: translate(0, -21%) scale(3);
	transform: translate(0, -21%) scale(3);
	opacity: 0;
}

#container #map02 {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
#container #map02.ani {
	-webkit-transform: translate(0, -2%) scale(3);
	transform: translate(0, -2%) scale(3);
	opacity: 0;
}

#container #map02 div.popup {
	position: absolute;
	top: 15%; left: 0px;
	
	-webkit-transform-origin: 50% 85%;
	transform-origin: 50% 85%;
    -webkit-transition-property: transform,opacity;  
    transition-property: transform,opacity;  
    -webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
	
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
}
#container #map02 div.popup #balloon{
	position: absolute;
	top: 0px; left: 0px;
}

#container #map02 div.popup.ani {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


#container #map03 {
}
#container #map03 ul.popup {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px; left: 0px;
}

#container #map03 ul.popup li {
	position: absolute;
	top: 0px; left: 0px;

    -webkit-transition-property: opacity;  
    transition-property: opacity;  
    -webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
	
	opacity: 0;
}

#container #map03 ul.popup li img.photo{
	position: absolute;
	top: 0px; left: 0px;
}
#container #map03 ul.popup #popup01 { top:4%; left: 2%; }
#container #map03 ul.popup #popup02 { top:50%; left: 2%; }
#container #map03 ul.popup #popup03 { top:4%; left: 52%; }
#container #map03 ul.popup #popup04 { top:50%; left: 52%; }

#container #map03 ul.popup li.ani {
	opacity: 1;
}


#button {
	margin-top: 22px;
	text-align: center;
}

#button li{
	margin-left: 28px;
	display: inline-block;
	width: 12px; height: 12px;
}
#button li:first-child{
	margin-left: 0px;
}


/*
#stage ul {
	position: relative;
}
#stage ul .map_c{
	position: absolute;

	-webkit-transition:0.7s ease-out;
	transition:0.7s ease-out;
	
	opacity: 1;
}

#stage .map_c.ani {
	opacity: 0;
}
#stage #map01 {
	-webkit-transform-origin: 50% 64%;
	transform-origin: 50% 64%;
}

#stage #map01.ani {
	-webkit-transform: translate(0, -100px) scale(4);
	transform: translate(0, -100px) scale(4);
}

#stage #map02 {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	opacity: 0;
}
#stage #map02.ani {
	-webkit-transform: translate(0, -10px) scale(3);
	transform: translate(0, -10px) scale(3);
}

#stage #map02 .popup{


	position: absolute;
	left:0; top:15%;

	-webkit-transform-origin: 50% 85%;
	transform-origin: 50% 85%;

	-webkit-transition:0.3s ease-in-out;
	transition:0.3s ease-in-out;
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 1;
}
#stage #map02 .popup.ani {
	-webkit-transform: scale(1);
	transform: scale(1);
}

#stage #map02 .popup #balloon{
	position: absolute;
	left:0; top:0;
}



#stage #map03 .popup{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	visibility: hidden;
}
#stage #map03 .popup li{
	position: absolute;
	left:0; top:0;
}
#stage #map03 .popup li img.photo{
	position: absolute;
	left:0; top:0;
}
#stage #map03 .popup #popup01 { top:4%; left: 2%; }
#stage #map03 .popup #popup02 { top:50%; left: 2%; }
#stage #map03 .popup #popup03 { top:4%; left: 52%; }
#stage #map03 .popup #popup04 { top:50%; left: 52%; }

*/